Components

Interaction note: transitions use the motion tokens — standard ease at 0.3s (0.3s) for links and small state changes, 0.5s (0.5s) for button hover and large surfaces. Hover states are tokens too: each <name>-hover entry pairs with its base component and drives the live hover state; the YAML is the source of truth for default, focus and hover alike.

Top Navigation

top-nav — A sticky bar on #1A1A1A with a blurred backdrop and no border (galton.sk's header separates by the blur alone — no rule): the canvas at ~70% opacity behind a blur(16px), 56px tall (the token's height). Carries the white wordmark lockup — the full mark with the ® and the letter-spaced BRANDS tagline (galton-wordmark-white-tagline-tight.png, ~46px tall) — at left, and the nav links at right. No button lives in the persistent nav — keep {component.button-yellow} (and any outline CTA) for the in-page calls to action (hero, forms). Links are {typography.body} — 18px, weight 300, #FFFFFF — with a 45px gap, brightening to #FFD700 (the accent) on hover; the lockup never recolours (white or black only). Below ~1400px the links collapse to a hamburger that opens a full-screen overlay.

Logo lockup

The GALTON wordmark with a superscript ® and a letter-spaced "BRANDS" tagline beneath — this is the lockup the header and footer carry (galton-wordmark-white-tagline-tight.png, white-on-dark; a black-on-light twin exists for inverted surfaces). The wordmark on its own ships as a fill="currentColor" SVG. White or black only — the lockup never turns yellow, even on hover. See "Logo & Iconography".

Buttons

All buttons: pill (100px), UPPERCASE, Galton Bold ({typography.button}), inline-flex centered, symmetric padding (15px 30px desktop), border 1px solid, transition all 0.5s ease. Labels sit dead-centre because the @font-face pins Galton's vertical metrics (see Typography → "Why the three *-override lines matter") — do not re-introduce an asymmetric "less padding at the bottom" hack; that was a workaround for the un-corrected webfont and is no longer needed. Responsive padding follows the live site: mobile 10px 25px · ≤991px 12px 20px · desktop 15px 30px.

• button-yellow — The signature CTA (galton.sk .btn-yellow). #FFD700 background, #1A1A1A text, #1A1A1A border. Hover → #1A1A1A background, #FFFFFF text, #FFFFFF border.
• button-primary — A solid light button (galton.sk .btn-primary). #FFFFFF background, #1A1A1A text, #1A1A1A border. Hover → #1A1A1A background, #FFFFFF text, #FFFFFF border.
• button-secondary — The outline/ghost pill on dark (galton.sk .btn-transparent-white): transparent with a #FFFFFF border and text. Hover → #FFFFFF background, #1A1A1A text. On a dark canvas this is also how the source's solid .btn-secondary (dark fill + white border) reads, so the two collapse into this one token.

Source mapping (galton.sk). The WordPress theme defines five pill variants on a light page; this dark-first system realises the same set with three tokens. btn-yellow → button-yellow, btn-primary → button-primary, and both btn-secondary (solid dark) and btn-transparent-white (transparent) → button-secondary (they're visually identical on the #1A1A1A floor). The fifth, btn-transparent (black border + text, hover → yellow text), is a light-surface-only outline — on light, override button-secondary's white border/text to #1A1A1A, exactly as the form note describes.

Inputs & Forms

Dark-first: transparent background, bottom-border only, primary-yellow focus. On light surfaces, override the white border/text to black.

• text-input — Flat (0px), transparent, #FFFFFF bottom border, height 53px, {typography.body}/300, placeholder #FFFFFF. Focus → border #FFD700.
• textarea — Flat, hairline (rgba(255,255,255,0.12)) bottom border, min-height 120px, vertically resizable. Focus → #FFD700.
• select — Flat, #FFFFFF bottom border, height 53px, appearance: none. The native arrow is replaced by the brand chevron (grey "V") at the right, padding-right 30px, weight 300, #FFFFFF text. Focus → #FFD700. (Sourced from the galton.sk contact form.)
• checkbox — Flat square (0px), #FFFFFF border, 30px → 45px@1024, fills with a white square on :checked, focus → #FFD700. Pair with a label in {typography.body}/300 inside a flex form-check row.
• label — {typography.label} (Galton Light), #FFFFFF, block, 8px bottom margin.

Links, Eyebrow & Badge

• text-link — color: inherit, no underline, hover/focus → #FFD700 (primary). Transition color 0.3s ease.
• eyebrow — Small uppercase label above headlines: {typography.eyebrow}, #FFD700.
• badge — Neutral pill chip for meta/status/version on dark: {typography.badge}, #FFFFFF, rgba(255,255,255,0.12) border, 100px.

Cards & Containers

card — rgba(255,255,255,0.04) background, rgba(255,255,255,0.12) border, 20px (20px), ~28px padding, no drop shadow. (Detailed card patterns are not yet fully specified — see Known Gaps.)

Footer

footer — #1A1A1A with a rgba(255,255,255,0.12) top border, everything centered: the white wordmark lockup big (~80px tall) above two copy lines in #FFFFFF at 18px — the © line and the brand/website line. ~80px vertical padding. The footer never inverts.

Selection controls

The choice family shares the flat, dark-first language. The accent (#FFD700) marks the chosen state — never red or green.

• checkbox — Flat square (0px), #FFFFFF border, 30px; fills with a white square on :checked. Multi-choice, consent, filters.
• radio — The round sibling: a circle (100px), #FFFFFF border, 30px; fills with a white dot on select. Single-choice from a set.
• toggle / toggle-on — A 52×30 pill switch. OFF = rgba(255,255,255,0.12) track; ON = #FFD700 track (toggle-on) with a white knob. On/off preferences and settings.
• slider-track / slider-fill / slider-thumb — A 4px rgba(255,255,255,0.12) track; the filled portion is #FFD700 (yellow, never red); a 18px white thumb. Ranges, budgets, percentages.

Steppers & search

• stepper — A numeric input with −/+ controls (stepper-button: ghost, rgba(255,255,255,0.12) border, 10px). The field stays flat (bottom-border only) like text-input. Quantities, counts.
• search — A flat bottom-border input with a leading search icon (32px left padding). Focus → #FFD700. In content-heavy chrome a 100px contained variant is allowed.

Tags, chips & multi-select

• tag — An interactive, removable filter chip: 100px, rgba(255,255,255,0.04) background, rgba(255,255,255,0.12) border, #FFFFFF text, a muted ×. Distinct from the static badge.
• tag-active — The selected state goes ink-filled (white background, black text) — never tinted red/green. A multi-select is a row of tags plus the input.

Tabs, breadcrumbs & pagination

• tab / tab-active — Underline tabs. Inactive = #FFFFFF with a rgba(255,255,255,0.12) rule; active = #FFFFFF text with a 2px #FFD700 underline. Switch sections without leaving the page.
• breadcrumb / breadcrumb-current — Muted segments separated by a chevron; the current page is #FFFFFF. Shows position in a hierarchy.
• pagination-item / pagination-item-active — 44px pill buttons, rgba(255,255,255,0.12) border; the current page is ink-filled (not yellow — yellow stays the single CTA). For lists, search results and feeds.

Menus, modals & tooltips

• menu / menu-item — A dropdown/popover panel: rgba(255,255,255,0.04), rgba(255,255,255,0.12) border, 10px; items hover to a raised row. An actions menu, distinct from the native select.
• modal — A dialog panel: rgba(255,255,255,0.04), rgba(255,255,255,0.12) border, 20px, 32px padding, over a #1A1A1A-at-~70% scrim. Confirmations, forms, prompts. No drop shadow.
• tooltip — Inverted for contrast over dark content: #FFFFFF (white) background, #1A1A1A (black) text, 10px, badge-size text. Short hover/tap explanations.

Accordion & FAQ

accordion / accordion-content — Replicated from galton.sk. A vertical stack of rows divided by rgba(255,255,255,0.12) rules (no card, no fill); each header is a question in {typography.subhead} (Galton Light) with a chevron that rotates 180° when open, tinting to #FFD700. Single-open by default — opening one row closes the rest (match the source). The body (accordion-content) is {typography.body}. Height animates open/closed (~0.3s); the header is a real <button> with aria-expanded/aria-controls for accessibility (the source had none — this is the on-brand, accessible version). Use for FAQs, long-form Q&A, and progressive disclosure of dense content (e.g. the per-tool setup guides on the "For AI agents" page). On a light surface, the dividers and chevron flip to #1A1A1A.

Alerts, progress & tables

• alert (+ alert-success / -warning / -error / -info) — A neutral rgba(255,255,255,0.04) notification with a 3px left rule + icon in the status colour — the hue is never a fill. Success / error / warning / info messages. See "Status & feedback colours".
• progress-track / progress-fill — A 6px rgba(255,255,255,0.12) track with a #FFD700 fill (never red). For a spinner, rotate a single-arc ring in #FFD700; for steps, a row of rgba(255,255,255,0.12) rules with the current step in yellow.
• table / table-header / table-cell — rgba(255,255,255,0.12) outline (20px); header is rgba(255,255,255,0.04) with #FFFFFF uppercase 15px labels; cells are #FFFFFF at 18px with hairline row rules. Structured data, admin panels, reports.

Side navigation

• side-nav / side-nav-item / side-nav-item-active — A vertical nav with a rgba(255,255,255,0.12) right edge. Items are #FFFFFF, brightening to #FFFFFF on hover; the active item carries a 2px #FFD700 left rule on a rgba(255,255,255,0.04) row. Pair with a top-nav for an app shell; collapse to a hamburger on mobile.