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 legal pages. Blue colour, persistent underline (set by the component, not the global hover), darker-blue hover. Two near-identical implementations differ only in hover colour and underline-offset; consolidating them into a shared .prose a rule is a sync candidate.

color: var(--color-blue);
text-decoration: underline;
text-underline-offset: 2px; /* 0.2em on legal */
transition: color var(--transition-fast);

&:hover {
  color: var(--color-blue-dark); /* var(--color-green) on legal */
}

Sync candidate. Two implementations of the same idiom that differ only in underline-offset and hover colour. Lift to a shared .prose a rule, pick one hover colour (blue-dark is the more common pattern), and let legal opt into green via a modifier if the green hover is intentional.

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. Two implementations duplicate the recipe with only padding and font-size differing.

position: relative;
padding: var(--space-3) var(--space-4);
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-fast);

&::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--color-blue);
  transition: left var(--transition-fast), right var(--transition-fast);
}

&:hover::after { left: var(--space-4); right: var(--space-4); }

Sync candidate. The accent-bar pseudo-element rule is duplicated. Promote to a shared selector list (.site-header__link, .site-header__dropdown-link) and keep only the size-specific properties on the per-element rules.

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: 0 0 0 3px color-mix(in srgb, var(--color-blue) 18%, transparent);

/* 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."

Sync candidate. The contact form's focus glow uses a hard-coded rgba(10, 165, 195, 0.12) while the API-demo variant uses color-mix(in srgb, var(--color-blue) 18%, transparent). Same intent, two slightly different alphas (12 % vs 18 %) and one expressed in raw RGB instead of the brand token. Promote a --shadow-focus (or similar) and consume it from both.

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.

/* Shared chrome */
background: var(--glass-bg);
border: 1px solid var(--glass-border);
width: 1.125rem;
height: 1.125rem;
transition: background, border-color, box-shadow -- var(--transition-fast);

/* Checked */
background-color: var(--color-blue);
border-color: var(--color-blue);

/* Focus */
border-color: var(--color-blue);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue) 18%, transparent);

/* Disabled */
opacity: 0.35;

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.

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.

display: inline-block;
color: var(--color-blue);
background: rgba(10, 165, 195, 0.08);
border: 1px solid rgba(10, 165, 195, 0.2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);

/* Typography inherited via the .eyebrow group:
   font-family: var(--font-heading);
   font-size:   var(--font-size-xs);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase; */

Sync candidate. The .tag recipe still uses raw rgba(10, 165, 195, 0.08) and rgba(10, 165, 195, 0.2) instead of color-mix(in srgb, var(--color-blue) N%, transparent) — worth promoting to tokens so a brand-blue change propagates here automatically.

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.

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.

<span class="skeleton skeleton--line"></span>
<span class="skeleton skeleton--bar"></span>
<span class="skeleton skeleton--chip"></span>

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.