Components

Style variants

Two priority levels: a primary solid fill and a secondary transparent outline. The secondary action ships in two visually identical presentations — pick the one that suits the surface beneath. Use .btn--outline on solid panels; switch to .btn--glass when the button sits over a translucent surface, a gradient, or anything animated, where the backdrop-filter blur keeps the label legible against shifting colour underneath.

Sizes

Two size modifiers flank the default. .btn--sm shrinks the type to --font-size-sm while keeping the default padding — it’s the size that lives in the header and inline CTA banners. .btn--lg bumps padding to --space-4 --space-8 and type to --font-size-lg for hero-scale moments.

Width modifiers

Two opt-in horizontal-padding boosts. They override only the left and right padding, so they stack cleanly on top of any size or style. Use them when a button needs to anchor a hero composition rather than fit beside running copy.

States

Every variant shares the same hover gesture: a 0.125 rem lift, the blue glow shadow, and a deeper colour. The samples in the matrix below are static — the hover styling is forced on so default and hover sit side by side for comparison. Focus and disabled states are not yet styled in buttons.css and fall back to the browser default.

Usage rules

Conventions that keep the button hierarchy legible across the site.

Specials

One-off buttons that sit outside the .btn system because they carry behaviour or proportions the primitive can’t express — an animated process trigger and a circular icon-only close. Each is documented as it ships today.

1 · Inline prose link

The link recipe used inside long-form text — blog post bodies and the legal / privacy pages on the live site. Blue colour, persistent underline (set by the component, not the global hover), darker-blue hover. Shared rule lives in src/css/shared/prose-links.css and is consumed by both .blog-post__content a and .legal__content a. The specimen below shows the blog-post wrapper; the legal-page wrapper picks up the same rule by the second selector in prose-links.css.

2 · Animated accent-bar nav link

The header navigation idiom — a centred 2 px blue bar under the link that expands left-and-right to fill the link’s padding box on hover. Used for the main nav and its dropdown sub-items, otherwise unique to the header. The accent-bar pseudo lives on a shared selector list (.site-header__link, .site-header__dropdown-link); each variant only sets its own size-specific properties.

3 · Muted text-swap link

The chrome / supporting-region recipe — muted base colour, brightens on hover, no underline. Same shape across the footer, the team cards, and the design-system TOC, just with different muted/active colour pairs depending on what the surrounding surface needs.

All three share the “muted base, brighter hover, no underline” recipe. Worth a shared .link-muted primitive with modifiers (--white, --blue) for the active colour.

4 · Heading link

A heading-sized link that swaps colour on hover instead of adding an underline. Used once today — the post-list titles on the blog index.

5 · Soft CTA / read-more

Small-format affordances that point somewhere but aren’t buttons — a blue inline call-to-action, weight 600, no underline, colour shift on hover. Two production instances today.

The recipe

The shared base. Every input on the site reaches for these values; component-level rules add at most font-family, min-height, and the select chevron on top.

width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
color: var(--color-text);
transition:
  border-color var(--transition-fast),
  box-shadow var(--transition-fast);

/* Focus */
border-color: var(--color-blue);
box-shadow: var(--shadow-focus);

/* Placeholder */
color: var(--color-grey-400);

Labels above each input use the Typography › Form label role: Noto Sans 500 / sm, sentence case. Both .contact-form__label and .api-demo__field-label are local aliases of that role.

Roles

Four control types share the chrome above. Click into any field to see the focus glow.

States

Four states cover every interaction beat: rest, focus, placeholder (typed-but-empty), and error (validation failure on the API demo). The error state additionally fires a 0.45 s shake animation (api-demo-input-shake) once on class application — sharp horizontal jitter to mark "this is wrong."

Checkbox & Radio

Both controls use .form-check as the clickable row wrapper, a plain <input> with appearance: none for the visual box, and .form-check__label for the text. The only differences between them are border-radius (square vs full-pill) and the checked indicator (a white tick vs a white dot). Focus ring, disabled opacity, and transition are shared.

Toggle / Switch

A native <input type="checkbox" role="switch"> drives the state; the visible track and thumb are pure CSS via a sibling .form-toggle__track element and its ::after pseudo-element. The input is visually hidden but stays in the tab order, so keyboard and screen-reader users interact with the native control while sighted users see the custom track.

Segmented control

A compact pill-wrapped group of buttons for switching between a small set of mutually exclusive views. The active option gets a solid blue fill; all others are transparent. Unlike the segmented tabs documented under Navigation, this variant uses role="group" — it controls a visual preference (how content is displayed) rather than navigating between content panels, so tab semantics would be wrong.

0 · Shared shells

Two shells absorb the recipes every card used to write inline. .card is the bare glass surface; add .card--hover-lift for the standard translateY(-0.125 rem) + border lighten + --shadow-md hover. .glass-card is the heavier variant — the same surface but with built-in padding, gap, --shadow-lg, and an optional .glass-card--spots overlay that paints two corner radial spots from the brand tints. The --spots-flipped modifier swaps the two spot colours.

1 · Feature / capability cards

A grid-cell card that promotes one feature or capability — title + body, with one of several decorators: an audience tag + top accent bar + CTA, a big step number + watermark icon, or a coloured icon panel. All sit on standard glass (recipe B) and render inside a grid of related cards. The decorator is what distinguishes one variant from another; the underlying surface is the same recipe with small drift on radius and hover lift. The same recipe also rotates to a horizontal layout in .team-card (Contact › Meet the team), where the decorator is a circular portrait and the body sits to its right.

2 · Stats panel

A composite card that headlines a section with live-feeling metrics. Header (pulsing blue dot + label with a coloured suffix), a grid of stat cells (large green number + small description), and an optional footer line. Lighter glass surface (recipe C) with the masked grid backdrop on each cell. In production each number animates in via count-up.js when the panel scrolls into view; the specimens below are static.

3 · Live demo cards

Cards that act as a working demo of a system state — an analysis result, a data flow, a pipeline stage. They share a recipe of: header (status dot + label + meta), several internal sections of structured data, and a skeleton-loader overlay that swaps for the live content while a JS-driven sequence plays. Surface is recipe D (glass with interior blob field). Members differ in body content, blob colour, and what the sequence demonstrates.

1 · Banner CTA

Two-column grid (headline + sub on the left, button(s) on the right) on an opaque --color-surface-solid bar with --radius-lg corners. A diagonal scan-line passes left-to-right every 5.5 s, and the primary button radiates a pulse ring on the same cadence so the two motions sync. Hover the button and the whole banner picks up a soft blue glow via :has(). Below 40 rem the grid collapses to a single centred column.

2 · Final CTA

A single hero card that closes the landing page. Three layers stack inside a --radius-2xl shell: an outer 1 px border, a blurred glow halo, and an inner panel on the same --color-surface-solid as the banner. At rest the border is the standard glass border; on hover it fills with a rotating conic gradient (blue→green→blue, 360° in 3 s) and the halo behind it fades up to opacity: 0.4 with a 12 px blur. While idle, the inner runs a passing shimmer scan-line and the button radiates a pulse ring — the same 5.5 s cadence as the banner CTA, so the two recipes feel like cousins.

1 · Comparison table

Used for vendor comparisons and feature matrices. Header row sits on a 6 % blue tint; body rows brighten to 3 % blue on hover. The Neuwo column gains a thicker rule and tint in both header and body so the reader's eye lands there first. Status dots (.ct-icon--good / --limited / --bad) are 0.5 rem circles with a matching glow, sized to read inline with text without dominating it.

1 · Tag (eyebrow pill)

The page-level kicker that sits above solution-page hero titles. Pill-shaped, full radius, low-opacity blue tint with a slightly stronger blue border, eyebrow typography. .tag--new swaps the blue tints for green and is used inline (after the base tag) to flag a new offer. In production the base .tag carries a margin-bottom and a negative margin-left so it tucks back to the page gutter; the specimens below reset those margins so the pill renders cleanly in card flow.

2 · Dot-prefixed pill

A pill with a small leading dot. Two production variants ship today, both from about.css: the founder badge uses a solid surface, eyebrow typography, and a single green status dot; the team values pill uses a blue-tinted glass fill, heading-font sentence case, and a blue→green gradient dot. Different surfaces and typography roles, but the same idiom — label preceded by a tiny coloured marker — which makes them worth documenting side by side.

3 · Process tag

Small content chip used by the contextual-audiences live demo card to render IAB topics inside the pipeline animation. Heading font, mixed case (so Sports reads as content rather than a label), pill radius, glass-border + faint text-tinted fill at rest. Fourteen numeric variants --1 through --14 drive a deliberate colour decay across the pipeline: blue for the first five (incoming), green for the next four (matched), then a controlled fade through low-opacity green and grey for the final five (dropped). The numbers are positional — whichever five tags happen to be first get the blue treatment, regardless of content.

4 · Live deal badge

A tiny green “Live” pill used inside the contextual-audiences deal-pipeline card. Eyebrow-style typography (0.625 rem, 700 weight, 0.08em letter-spacing, uppercase), 12 % green fill, full pill radius, 2.5 s ease-in-out radial-pulse animation that rings out from 20 % green to transparent. Honours prefers-reduced-motion indirectly — if you turn the pulse off, drop the animation declaration. Pairs with .ca-process__deal-id, the monospace deal-ID chip beside it.

5 · Status dot

A standalone visual indicator shared across the site — the small coloured circle with an optional ring. Three production variants ship today: the resting green dot with a soft green halo, the pulse variant that breathes the halo on a 2 s loop, and the glow variant that switches to a smaller blue dot with the blink keyframe. All three live in src/css/shared/status-dot.css with their own status-dot-pulse keyframe; the dot-prefixed pills above (founder badge, team values) inline their own dot CSS but should adopt this shared primitive when they next need a touch.

1 · Tabs

Three production tab recipes. The pill tab is the discovery-style control on use-case lists — each tab is its own glass pill with an icon, separated by gaps, with a blue ring on the active one. The segmented tab is a unified bar — tabs share a single rounded glass container, and the active tab gets a solid blue fill with the brand glow. The vertical rail tab is a stacked list in a 1fr + 2fr grid alongside its content panel — each item has a flat left edge, a left rule that intensifies from 15 % blue at rest to 30 % on hover to solid on active, and a 4 px rightward nudge on hover. All three swap panels via JS (aria-selected, role="tab", role="tabpanel") and respect the same accessibility contract.

2 · Skip link

An accessibility affordance for keyboard users — the first focusable element in the document, hidden visually until it receives focus. At rest .skip-link sits in the top-left corner with opacity: 0, lifted up 0.75 rem and scaled to 0.96, with pointer-events: none so it can’t be clicked by sighted users. On :focus / :focus-visible it eases into view (opacity, transform, shadow, border-colour all animate over --transition-base) as a glass pill with a blue text + downward chevron icon, on the standard glass surface with a 30 % blue border that strengthens to 55 % on focus. The icon (.skip-link__icon) nudges down 2 px further on hover/focus to reinforce the “jump to content” motion. Sits at z-index: var(--z-modal) so it overlays the announcement bar and header.

3 · Announcement bar

A full-width solid-blue bar at the very top of the page, above the header, used to surface a single time-bound message (whitepaper drop, event, release). Flex row with the message centred (.announcement-bar__text: small Neuwo logo + descriptor + .announcement-bar__link) and an absolute-positioned dismiss button (.announcement-bar__close) pinned to the right. The dismiss button is a circular 1.5 rem token of 15 % white that brightens to 25 % on hover. Mobile (< 48 rem) hides the descriptor (.announcement-bar__desc) entirely and packs the bar to space-2 space-4; desktop expands to space-2 space-20 and shows the descriptor with ellipsis-truncation if it overflows. The bar is dismissable via src/js/announcement.js — once closed the parent gets hidden and the bar disappears for the rest of the session.

1 · Skeleton

Globally available primitive in shared/skeleton.css. A 9 % text-tinted block with a 10 % text-tinted gradient sweep that travels left-to-right on a 1.6 s linear loop. Three modifiers cover the most common shapes; for anything else apply .skeleton alone and size it via a layout class. Honours prefers-reduced-motion by halting the sweep and dropping opacity to 0.4.

For full-card overlays where the placeholders animate in and fade out as content arrives, see the live-demo cards — .signal-split__skeleton and .ca-process__skeleton are bespoke layout wrappers that compose the shared .skeleton primitive with absolute positioning and an .is-loading opacity gate on the parent card.

2 · Loader

A horizontal scan bar paired with a pulsing dot and an uppercase status label. Currently scoped to the API demo as .api-demo__loading; lift to a global .loader recipe when a second consumer arrives. The scan bar sweeps a 35 %-width blue-to-green gradient across a 12 rem track on a 1.8 s ease-in-out loop; the dot pulses opacity from 0.75 to 1 on a 1.4 s ease-in-out loop.

3 · Inline status

A single text line that announces the outcome of a form submission. Currently scoped to the contact form as .contact-form__status; promote when a second form needs the same pattern. Three states, switched via data-state on the element.