UI patterns

Element	Base treatment	Interaction / adaptation
Header navigation	13px white text over shaded media; 35px gap; minimum 44px link height	Thin white underline grows on hover in 0.3s; 20px gap at the intermediate breakpoint
Text link	13px `--accent-text`, arrow, 35px gap; minimum 44px height	Use descriptive text; preserve visible keyboard focus
Hero arrow link	56px circular outline; white arrow	Magenta fill, ink foreground and 10° rotation on hover; 48px mobile, 44px in short viewports
Service arrow link	56px circle, 1px line border, accent-text arrow	Magenta fill, ink foreground and 10° rotation on hover; 44px mobile
Main contact CTA	Magenta pill, white 22px bold label, arrow; padding 23px 30px; 50px radius; minimum 60px height	Hover uses accent-hover; mobile uses 20px bold and padding 18px 24px; see contrast guidance before reducing type size
Service list	Number, geometric symbol, heading, description, plain tags and arrow; thin row divider	Tags are plain text with magenta slash prefixes, not button chips
Section eyebrow	Uppercase monospace label, darker magenta text on light surfaces, 14px magenta mark	On dark surfaces, the label uses vivid magenta
Focus state	3px solid magenta outline with 6px offset	Applies to links and buttons; keep the indicator visible and unclipped

Arrows such as ↗, ↘, and ↑ are recurring directional cues. An arrow-only action needs an accessible name explaining its destination or purpose. Decorative arrows and illustrations are hidden from assistive technology.

There is no website baseline for forms, alerts, tables, disabled controls, or validation states. Add those when a product needs them, using the same typography and neutral surfaces. Define success, warning, and error meanings explicitly; magenta is the brand accent, not an established status system.

Weby & aplikace

Guidelines & specifications