A brutalist, technical design system for interfaces you can stand behind — cast in high-contrast black & cream, struck with a single acid-lime accent, built entirely on tokens and documented with live Preview/Code.
The primitives every component is built from — a high-contrast color system, heavy grotesque + monospace type, an 8px spacing rhythm, sharp materials, and the signature grid.
<div class="fd-swatch"> <div class="fd-swatch__chip" style="--swatch: var(--surface-2);"></div> <span class="fd-swatch__token">--surface-2</span> </div>
color: var(--foreground); color: var(--foreground-muted); /* body copy */ color: var(--foreground-subtle); /* mono labels */ color: var(--foreground-faint); /* hairline text */
background: var(--accent); /* acid lime, used sparingly */ color: var(--on-accent); /* #0a0a0a on lime */ background: var(--success-muted); /* 12% semantic tint surface */
font-family: var(--font-display); /* display, headings */ font-family: var(--font-sans); /* sans, UI + body */ font-family: var(--font-mono); /* Shikaku Mono, labels */
font-size: var(--text-4xl); /* 48px — section titles */ font-size: var(--text-base);/* 15px — body default */ font-size: var(--text-xs); /* 12px — captions */
font-weight: var(--weight-black); /* 900 — display headings */ <span class="fd-label"> <span class="fd-label__index">[01]</span> <span class="fd-label__sep">//</span> FOUNDATIONS </span>
padding: var(--space-4); /* 16px */ gap: var(--space-2); /* 8px — base unit */ margin-bottom: var(--space-8); /* 32px */
border-radius: var(--radius-md); /* 4px */ box-shadow: var(--shadow-hard); /* 4px 4px 0 hard offset */ border: var(--border-width) solid var(--border);
<div class="fd-frame fd-frame--crosshair"> <span class="fd-crosshair fd-crosshair--tl"></span> <span class="fd-crosshair fd-crosshair--tr"></span> <span class="fd-crosshair fd-crosshair--bl"></span> <span class="fd-crosshair fd-crosshair--br"></span> <div class="fd-grid-bg"></div> </div>
<svg class="fd-icon" viewBox="0 0 24 24" aria-hidden="true"> <path d="M5 12h14"/><path d="m13 6 6 6-6 6"/> </svg> /* 1.25rem · currentColor · 1.5 stroke */
transition: transform var(--duration-base) var(--ease-out); transition: transform var(--duration-slow) var(--ease-spring); box-shadow: var(--shadow-hard-accent); /* lift on hover */
Interactive triggers — buttons, button groups, toggles, badges, and keyboard hints — carrying the brutalist weight.
A pressable action trigger. Flat fills, hairline outlines, and an optional hard offset shadow that pops on hover.
<button class="fd-btn fd-btn--primary">Deploy</button> <button class="fd-btn fd-btn--secondary">Preview</button> <button class="fd-btn fd-btn--ghost">Cancel</button>
<button class="fd-btn fd-btn--primary">Deploy</button>
<button class="fd-btn fd-btn--primary">Primary</button> <button class="fd-btn fd-btn--secondary">Secondary</button> <button class="fd-btn fd-btn--ghost">Ghost</button> <button class="fd-btn fd-btn--outline">Outline</button> <button class="fd-btn fd-btn--danger">Danger</button>
<button class="fd-btn fd-btn--primary fd-btn--sm">Small</button> <button class="fd-btn fd-btn--primary fd-btn--md">Medium</button> <button class="fd-btn fd-btn--primary fd-btn--lg">Large</button>
<button class="fd-btn fd-btn--primary"> <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10" .../></svg> New File </button> <!-- icon-only requires aria-label --> <button class="fd-btn fd-btn--outline fd-btn--icon" aria-label="Settings"> <svg viewBox="0 0 16 16" aria-hidden="true">…</svg> </button>
<!-- .is-loading shows a spinner and preserves width --> <button class="fd-btn fd-btn--primary is-loading">Saving</button> <button class="fd-btn fd-btn--primary" disabled>Disabled</button>
<button class="fd-btn fd-btn--primary fd-btn--block">Deploy to Production</button> <button class="fd-btn fd-btn--outline fd-btn--block">Cancel</button>
| Class | Description | Default |
|---|---|---|
.fd-btn | Base button. Mono uppercase, hairline border, sharp corners. | — |
.fd-btn--primary | Primary lime fill action with hard offset shadow on hover. | — |
.fd-btn--secondary | Surface fill with strong border. | — |
.fd-btn--ghost | Transparent until hover; lowest emphasis. | — |
.fd-btn--outline | Transparent with strong border; accent border-shadow on hover. | — |
.fd-btn--danger | Destructive action in the error palette. | — |
.fd-btn--sm · --md · --lg | Size scale. | --md |
.fd-btn--icon | Square icon-only button. Requires aria-label. | — |
.fd-btn--block | Full-width button. | — |
.is-loading | Swaps content for a spinner; preserves width. | false |
disabled | Native disabled attribute; dims and blocks interaction. | false |
A segmented row of buttons that share borders into a single seam — for split actions, paginators, and segmented controls.
<div class="fd-btn-group" role="group" aria-label="Text alignment"> <button class="fd-btn fd-btn--secondary is-active">Left</button> <button class="fd-btn fd-btn--secondary">Center</button> <button class="fd-btn fd-btn--secondary">Right</button> </div>
<div class="fd-btn-group" role="group" aria-label="Actions"> <button class="fd-btn fd-btn--secondary">Save</button> <button class="fd-btn fd-btn--secondary">Publish</button> </div>
fd-btn-group // segmented container (role="group") └─ fd-btn // member · seams collapse; ends keep radius └─ .is-active // selected segment (accent fill)
<div class="fd-btn-group" role="group" aria-label="Deploy">
<button class="fd-btn fd-btn--primary">Deploy</button>
<button class="fd-btn fd-btn--primary fd-btn--icon" aria-label="Deploy options">
<svg viewBox="0 0 16 16" aria-hidden="true">…</svg>
</button>
</div>
<div class="fd-btn-group" role="group" aria-label="Pagination">
<button class="fd-btn fd-btn--outline is-active">1</button>
<button class="fd-btn fd-btn--outline">2</button>
<button class="fd-btn fd-btn--outline">3</button>
</div><div class="fd-btn-group fd-btn-group--vertical" role="group" aria-label="View mode"> <button class="fd-btn fd-btn--secondary is-active">Grid</button> <button class="fd-btn fd-btn--secondary">List</button> <button class="fd-btn fd-btn--secondary">Board</button> </div>
| Class | Description | Default |
|---|---|---|
.fd-btn-group | Segmented container; collapses adjacent button seams. | — |
.fd-btn-group--vertical | Stacks members vertically; rounds top/bottom ends. | — |
.fd-btn.is-active | Marks the selected segment with the accent fill. | false |
role="group" | Required; pair with aria-label for the set. | — |
A two-state pressable that latches on — bold, italic, mute, pin. Tracks state via aria-pressed.
<!-- a single toggle wraps in a multiple toggle-group so main.js drives it --> <div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="multiple" aria-label="Bold"> <button class="fd-toggle fd-toggle--bold" data-fd-toggle aria-pressed="true" aria-label="Bold">B</button> </div>
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="multiple" aria-label="Mute"> <button class="fd-toggle" data-fd-toggle aria-pressed="false">Mute</button> </div>
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="multiple" aria-label="Pin">
<button class="fd-toggle" data-fd-toggle aria-pressed="true">
<svg viewBox="0 0 16 16" aria-hidden="true">…</svg> Pinned
</button>
</div><button class="fd-toggle fd-toggle--sm" data-fd-toggle aria-pressed="true">B</button> <button class="fd-toggle fd-toggle--lg" data-fd-toggle aria-pressed="false">B</button> <button class="fd-toggle" data-fd-toggle aria-pressed="false" disabled>Locked</button>
| Class | Description | Default |
|---|---|---|
.fd-toggle | Base pressable. Ghost frame that latches to accent when on. | — |
.fd-toggle--sm · --lg | Size scale. | md |
.fd-toggle--bold · --italic · --underline | Typographic style cues for formatting toggles. | — |
data-fd-toggle | Hook for main.js; flips aria-pressed + .is-on. | — |
aria-pressed | Reflects on/off state. Set the initial value. | false |
disabled | Dims and blocks interaction. | false |
A segmented set of toggles. Single mode behaves like a radio (one active); multiple lets several latch independently.
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="single" aria-label="Text alignment"> <button class="fd-toggle" data-fd-toggle aria-pressed="true" aria-label="Align left">…</button> <button class="fd-toggle" data-fd-toggle aria-pressed="false" aria-label="Align center">…</button> <button class="fd-toggle" data-fd-toggle aria-pressed="false" aria-label="Align right">…</button> </div>
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="single" aria-label="Align"> <button class="fd-toggle" data-fd-toggle aria-pressed="true">Left</button> <button class="fd-toggle" data-fd-toggle aria-pressed="false">Right</button> </div>
fd-toggle-group[data-fd-toggle-group][data-fd-type] // single | multiple └─ fd-toggle[data-fd-toggle] // member ├─ aria-pressed="true|false" // reflects on/off └─ .is-on // applied by main.js
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="single" aria-label="Density"> <button class="fd-toggle" data-fd-toggle aria-pressed="false">Compact</button> <button class="fd-toggle" data-fd-toggle aria-pressed="true">Cozy</button> <button class="fd-toggle" data-fd-toggle aria-pressed="false">Roomy</button> </div>
<div class="fd-toggle-group" role="group" data-fd-toggle-group data-fd-type="multiple" aria-label="Text formatting"> <button class="fd-toggle fd-toggle--bold" data-fd-toggle aria-pressed="true" aria-label="Bold">B</button> <button class="fd-toggle fd-toggle--italic" data-fd-toggle aria-pressed="true" aria-label="Italic">I</button> <button class="fd-toggle fd-toggle--underline" data-fd-toggle aria-pressed="false" aria-label="Underline">U</button> </div>
| Class | Description | Default |
|---|---|---|
.fd-toggle-group | Segmented container; collapses toggle seams. | — |
data-fd-toggle-group | Hook that activates main.js selection logic. | — |
data-fd-type="single" | Radio-like: at most one member on. | single |
data-fd-type="multiple" | Each member latches independently. | — |
role="group" | Required; pair with aria-label. | — |
A compact mono label for statuses, counts, and tags. Optional status dot and semantic palettes.
<span class="fd-badge fd-badge--accent">v1.4</span> <span class="fd-badge fd-badge--success fd-badge--dot"> <span class="fd-badge__dot"></span>Operational </span> <span class="fd-badge fd-badge--outline">Draft</span>
<span class="fd-badge fd-badge--accent">v1.4</span>
<span class="fd-badge">Default</span> <span class="fd-badge fd-badge--accent">Accent</span> <span class="fd-badge fd-badge--success">Stable</span> <span class="fd-badge fd-badge--warning">Beta</span> <span class="fd-badge fd-badge--error">Deprecated</span> <span class="fd-badge fd-badge--outline">Outline</span>
<span class="fd-badge fd-badge--dot fd-badge--success"> <span class="fd-badge__dot"></span>Operational </span> <span class="fd-badge fd-badge--accent fd-badge--sm">SM</span> <span class="fd-badge fd-badge--accent fd-badge--md">MD</span>
| Class | Description | Default |
|---|---|---|
.fd-badge | Base mono label chip. | — |
.fd-badge--accent | Acid-lime accent palette. | — |
.fd-badge--success · --warning · --error | Semantic status palettes. | — |
.fd-badge--outline | Transparent with strong border. | — |
.fd-badge--dot + .fd-badge__dot | Leading status dot inheriting the variant color. | — |
.fd-badge--sm · --md | Size scale. | md |
Keyboard key caps for documenting shortcuts and command hints, with a tactile bottom-border lip.
<span class="fd-kbd"> <kbd>⌘</kbd><span class="fd-kbd__plus">+</span><kbd>K</kbd> </span>
<span class="fd-kbd"><kbd>Esc</kbd></span>
<span class="fd-kbd"> <kbd>⌘</kbd><span class="fd-kbd__plus">+</span><kbd>⇧</kbd><span class="fd-kbd__plus">+</span><kbd>P</kbd> </span> <span class="fd-kbd"><kbd>Esc</kbd></span>
Open the palette with ⌘+K then press ↵ to run.
Open the palette with <span class="fd-kbd fd-kbd--accent"><kbd>⌘</kbd><span class="fd-kbd__plus">+</span><kbd>K</kbd></span> then press <span class="fd-kbd"><kbd>↵</kbd></span> to run.
| Class | Description | Default |
|---|---|---|
.fd-kbd | Inline wrapper for one or more key caps. | — |
<kbd> | A single key cap with a tactile bottom-border lip. | — |
.fd-kbd__plus | Faint separator between keys in a combo. | — |
.fd-kbd--accent | Tints the caps with the acid-lime accent. | — |
Data-entry primitives — technical, legible, with mono helper text and unmistakable focus, error, and disabled states. Every control is a real, labelled element.
A mono, uppercase caption for a control. Pairs with a field via for/id and carries required or optional markers.
<label class="fd-field__label" for="key"> API key <span class="fd-field__label-req" aria-hidden="true">*</span> </label> <input class="fd-input" id="key" type="text" placeholder="FND_LIVE_…" />
<label class="fd-field__label" for="email">Email</label>
<label class="fd-field__label" for="ws"> Workspace name <span class="fd-field__label-req" aria-hidden="true">*</span> </label> <label class="fd-field__label" for="disp"> Display name <span class="fd-field__label-opt" aria-hidden="true">OPTIONAL</span> </label>
<label class="fd-field__label" for="slug">Project slug</label> <input class="fd-input" id="slug" aria-describedby="slug-hint" /> <span class="fd-field__hint" id="slug-hint">Lowercase, used in the production URL.</span>
| Class | Description | Default |
|---|---|---|
.fd-field__label | Mono uppercase caption. Use a real <label for> bound to the control. | — |
.fd-field__label-req | Acid-lime asterisk marking a required field. | — |
.fd-field__label-opt | Faint mono "OPTIONAL" marker. | — |
.fd-field__hint | Mono helper text rendered under the control. | — |
.fd-field__hint--error | Tints the hint in the error palette. | — |
A single-line text field. Hairline border, sharp corners, and an accent focus ring with a tinted fill.
<div class="fd-field">
<label class="fd-field__label" for="name">
Full name <span class="fd-field__label-req" aria-hidden="true">*</span>
</label>
<input class="fd-input" id="name" type="text" placeholder="ADA LOVELACE" />
<span class="fd-field__hint">Legal name as it appears on file.</span>
</div><input class="fd-input" type="text" placeholder="ADA LOVELACE" />
<input class="fd-input fd-input--sm" type="text" placeholder="COMPACT ROW" /> <input class="fd-input fd-input--md" type="text" placeholder="STANDARD HEIGHT" /> <input class="fd-input fd-input--lg" type="text" placeholder="PROMINENT INPUT" />
<input class="fd-input is-error" type="text" value="nature studio"
aria-invalid="true" aria-describedby="hint" />
<span class="fd-field__hint fd-field__hint--error" id="hint">
<span class="fd-field__hint-icon" aria-hidden="true">!</span>Slug must be lowercase, no spaces.
</span><input class="fd-input" type="text" value="FND-0x91A2-LOCKED" disabled />
| Class | Description | Default |
|---|---|---|
.fd-input | Base text field. Hairline border, sharp corners, accent focus ring. | — |
.fd-input--sm · --md · --lg | Height & type-size scale. | --md |
.is-error | Error styling; pair with aria-invalid and an error hint. | false |
disabled | Native disabled attribute; dims and blocks input. | false |
An input wrapped with prefix/suffix addons or a leading icon. The whole group shares one border and one focus ring.
<div class="fd-input-group"> <span class="fd-input-group__addon fd-input-group__addon--prefix">https://</span> <input class="fd-input" type="text" placeholder="nature.studio" /> <span class="fd-input-group__addon fd-input-group__addon--suffix">.dev</span> </div>
<div class="fd-input-group"> <span class="fd-input-group__addon fd-input-group__addon--prefix">$</span> <input class="fd-input" type="text" /> </div>
fd-input-group // bordered shell; owns hover + focus-within ring ├─ fd-input-group__addon // --prefix (left seam) | --suffix (right seam) ├─ fd-input-group__icon // leading icon, no fill (search style) └─ fd-input // borderless, transparent, flex-fills the row
<div class="fd-input-group"> <span class="fd-input-group__addon fd-input-group__addon--prefix">USD $</span> <input class="fd-input" type="text" inputmode="decimal" placeholder="0.00" /> <span class="fd-input-group__addon fd-input-group__addon--suffix">/ MO</span> </div>
<div class="fd-input-group">
<span class="fd-input-group__icon" aria-hidden="true">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>
</svg>
</span>
<input class="fd-input" type="search" placeholder="QUERY COMPONENTS…" />
</div>| Class | Description | Default |
|---|---|---|
.fd-input-group | Bordered shell; owns hover, focus-within ring, and error state. | — |
.fd-input-group__addon | Mono text adornment with a surface fill. | — |
.fd-input-group__addon--prefix · --suffix | Places the addon on the leading or trailing seam. | — |
.fd-input-group__icon | Leading icon with no fill — search-style affordance. | — |
.is-error | Error styling on the whole group. | false |
A resizable multi-line text field. Shares the input's focus and error language; grows vertically by drag.
<div class="fd-field fd-field--full">
<label class="fd-field__label" for="notes">Release notes</label>
<textarea class="fd-textarea" id="notes" rows="3"
placeholder="Describe the change set…"></textarea>
<span class="fd-field__hint">Markdown supported. Drag to resize.</span>
</div><textarea class="fd-textarea" rows="3" placeholder="Describe the change set…"></textarea>
<textarea class="fd-textarea is-error" rows="2"
aria-invalid="true" aria-describedby="hint">fix stuff</textarea>
<span class="fd-field__hint fd-field__hint--error" id="hint">
<span class="fd-field__hint-icon" aria-hidden="true">!</span>Message must be at least 12 characters.
</span><textarea class="fd-textarea" rows="2" disabled>Auto-generated by the deploy pipeline.</textarea>
| Class | Description | Default |
|---|---|---|
.fd-textarea | Multi-line text field; vertical resize only. | — |
.is-error | Error styling; pair with aria-invalid. | false |
disabled | Native disabled attribute; dims and blocks input. | false |
rows | Native attribute setting the initial visible line count. | — |
A native <select> with a custom chevron. Keeps the platform menu while matching the input's frame.
<label class="fd-field__label" for="region">Deploy region</label> <select class="fd-select" id="region"> <option value="" disabled>Select a region…</option> <option>iad1 — Washington, D.C.</option> <option selected>fra1 — Frankfurt</option> <option>hnd1 — Tokyo</option> </select>
<select class="fd-select"> <option>Production</option> <option>Preview</option> </select>
<select class="fd-select fd-select--sm">…</select> <select class="fd-select fd-select--lg">…</select>
<select class="fd-select" disabled> <option>Enterprise</option> </select>
| Class | Description | Default |
|---|---|---|
.fd-select | Native select with a custom SVG chevron and input frame. | — |
.fd-select--sm · --lg | Height & type-size scale (medium is the base). | base |
.is-error | Error styling on the control. | false |
disabled | Native disabled attribute; dims and blocks selection. | false |
A custom-drawn box over a real checkbox input. Acid-lime fill with a spring-in checkmark; supports an indeterminate dash.
<label class="fd-checkbox">
<input class="fd-checkbox__input" type="checkbox" checked />
<span class="fd-checkbox__box" aria-hidden="true"></span>
<span class="fd-checkbox__label">
<span class="fd-checkbox__text">Enable preview deployments</span>
<span class="fd-checkbox__note">Build every push to a branch.</span>
</span>
</label><label class="fd-checkbox">
<input class="fd-checkbox__input" type="checkbox" />
<span class="fd-checkbox__box" aria-hidden="true"></span>
<span class="fd-checkbox__label">
<span class="fd-checkbox__text">Remember me</span>
</span>
</label>fd-checkbox // <label> wrapper (click target) ├─ fd-checkbox__input // real <input type="checkbox">, visually hidden ├─ fd-checkbox__box // custom box; draws check / indeterminate dash └─ fd-checkbox__label // text column ├─ fd-checkbox__text // primary label └─ fd-checkbox__note // optional mono helper
<label class="fd-checkbox"> <input class="fd-checkbox__input" type="checkbox" checked /> <span class="fd-checkbox__box" aria-hidden="true"></span> <span class="fd-checkbox__label"><span class="fd-checkbox__text">Checked</span></span> </label> <!-- disabled --> <input class="fd-checkbox__input" type="checkbox" checked disabled />
<!-- set el.indeterminate = true in JS --> <label class="fd-checkbox"> <input class="fd-checkbox__input" type="checkbox" aria-checked="mixed" /> <span class="fd-checkbox__box" aria-hidden="true"></span> <span class="fd-checkbox__label"><span class="fd-checkbox__text">Select all regions</span></span> </label>
| Class | Description | Default |
|---|---|---|
.fd-checkbox | Label wrapper and click target. | — |
.fd-checkbox__input | Real visually-hidden checkbox; carries state & focus. | — |
.fd-checkbox__box | Custom box; renders the check or indeterminate dash. | — |
.fd-checkbox__text · __note | Primary label text and optional mono helper. | — |
:indeterminate | Renders a centered dash. Set el.indeterminate in JS. | false |
disabled | Native disabled attribute; dims and blocks toggling. | false |
A set of mutually-exclusive choices wrapped in a fieldset. Each row is a real radio input with a spring-in dot.
<fieldset class="fd-radio-group" aria-label="Project visibility">
<label class="fd-radio">
<input class="fd-radio__input" type="radio" name="visibility" checked />
<span class="fd-radio__box" aria-hidden="true"></span>
<span class="fd-radio__label">
<span class="fd-radio__text">Public</span>
<span class="fd-radio__note">Anyone can view the project.</span>
</span>
</label>
<!-- …more .fd-radio rows sharing the same name -->
</fieldset><label class="fd-radio"> <input class="fd-radio__input" type="radio" name="plan" /> <span class="fd-radio__box" aria-hidden="true"></span> <span class="fd-radio__label"><span class="fd-radio__text">Pro</span></span> </label>
fd-radio-group // <fieldset> with aria-label (or a <legend>)
└─ fd-radio // <label> row; repeat per choice
├─ fd-radio__input // real <input type="radio">, shared name=""
├─ fd-radio__box // custom ring; draws the selected dot
└─ fd-radio__label
├─ fd-radio__text
└─ fd-radio__note // optional mono helper<fieldset class="fd-radio-group fd-radio-group--inline" aria-label="Environment">
<label class="fd-radio">
<input class="fd-radio__input" type="radio" name="env" checked />
<span class="fd-radio__box" aria-hidden="true"></span>
<span class="fd-radio__label"><span class="fd-radio__text">Production</span></span>
</label>
<!-- …Preview, Development -->
</fieldset>| Class | Description | Default |
|---|---|---|
.fd-radio-group | Fieldset wrapper; stacks rows. Needs aria-label or a <legend>. | — |
.fd-radio-group--inline | Lays the choices out in a wrapping row. | — |
.fd-radio | Single choice row; a real <label>. | — |
.fd-radio__input | Real radio input. Group members share name. | — |
.fd-radio__box | Custom ring; renders the selected dot. | — |
disabled | Native disabled attribute on a row's input. | false |
A toggle for an instant on/off setting. Built on a real checkbox; the track fills acid-lime and the thumb springs across when on.
<label class="fd-switch">
<input class="fd-switch__input" type="checkbox" checked />
<span class="fd-switch__track" aria-hidden="true">
<span class="fd-switch__thumb"></span>
</span>
<span class="fd-switch__label">Auto-deploy main</span>
</label><label class="fd-switch"> <input class="fd-switch__input" type="checkbox" /> <span class="fd-switch__track" aria-hidden="true"><span class="fd-switch__thumb"></span></span> <span class="fd-switch__label">Notifications</span> </label>
fd-switch // <label> wrapper (click target) ├─ fd-switch__input // real <input type="checkbox">, visually hidden ├─ fd-switch__track // pill rail; fills accent when checked │ └─ fd-switch__thumb // knob; translates across on check └─ fd-switch__label // mono uppercase caption
<!-- checked --> <input class="fd-switch__input" type="checkbox" checked /> <!-- disabled --> <input class="fd-switch__input" type="checkbox" checked disabled />
<label class="fd-switch fd-switch--sm"> <input class="fd-switch__input" type="checkbox" checked /> <span class="fd-switch__track" aria-hidden="true"><span class="fd-switch__thumb"></span></span> <span class="fd-switch__label">Compact toggle</span> </label>
| Class | Description | Default |
|---|---|---|
.fd-switch | Label wrapper and click target. | — |
.fd-switch__input | Real visually-hidden checkbox; carries state & focus. | — |
.fd-switch__track · __thumb | Pill rail and the knob that translates across. | — |
.fd-switch__label | Mono uppercase caption beside the control. | — |
.fd-switch--sm | Compact size. | — |
disabled | Native disabled attribute; dims and blocks toggling. | false |
A composed form: grouped fieldsets, stacked fields, choice groups, and an action footer — every primitive working together.
<form class="fd-card">
<div class="fd-forms-grid">
<fieldset class="fd-fieldset">
<legend class="fd-fieldset__legend">
<span class="fd-fieldset__legend-index">[A]</span> PROJECT
</legend>
<div class="fd-field-group">
<div class="fd-field">
<label class="fd-field__label" for="proj">Project name</label>
<input class="fd-input" id="proj" type="text" />
<span class="fd-field__hint">Used for the production URL.</span>
</div>
<div class="fd-field-actions">
<button type="submit" class="fd-field-submit">Create project</button>
<button type="button" class="fd-field-submit fd-field-submit--ghost">Cancel</button>
</div>
</div>
</fieldset>
</div>
</form><fieldset class="fd-fieldset">
<legend class="fd-fieldset__legend">PROJECT</legend>
<div class="fd-field-group">
<div class="fd-field">…</div>
</div>
</fieldset>form // optional .fd-card shell
└─ fd-forms-grid // responsive 2-col layout (1-col on small)
└─ fd-fieldset // grouped section with a mono legend
├─ fd-fieldset__legend // [A] PROJECT
└─ fd-field-group // vertical stack of rows
├─ fd-field // label + control + hint
└─ fd-field-actions // footer row
└─ fd-field-submit // submit / --ghost cancel<form class="fd-card">
<fieldset class="fd-fieldset">
<legend class="fd-fieldset__legend">SIGN IN</legend>
<div class="fd-field-group">
<div class="fd-field fd-field--full">
<label class="fd-field__label" for="email">Email</label>
<input class="fd-input" id="email" type="email" />
</div>
<div class="fd-field-actions">
<button type="submit" class="fd-field-submit">Sign in</button>
</div>
</div>
</fieldset>
</form>| Class | Description | Default |
|---|---|---|
.fd-fieldset | Grouped section with a hairline border and surface fill. | — |
.fd-fieldset__legend | Mono uppercase section title; __legend-index tints a bracketed marker. | — |
.fd-field-group | Vertical stack of field rows inside a fieldset. | — |
.fd-field | Atomic row: label + control + optional hint. | — |
.fd-field--full | Lets a field stretch to the full container width. | — |
.fd-field-actions | Footer row with a top hairline for submit / cancel. | — |
.fd-field-submit · --ghost | Primary submit button and its quiet ghost variant. | — |
.fd-forms-grid | Two-column form layout; collapses to one column on small screens. | — |
A native range input restyled with a hairline track and a square acid-lime handle, with an optional live numeric readout.
<div class="fd-slider-field">
<div class="fd-slider-head">
<label class="fd-field__label" for="opacity">Opacity</label>
<output class="fd-slider-output" id="opacity-out"
data-fd-slider-output="opacity" for="opacity">64</output>
</div>
<input class="fd-slider" id="opacity" type="range" min="0" max="100"
value="64" aria-controls="opacity-out" aria-label="Opacity" />
<div class="fd-slider-scale"><span>0</span><span>100</span></div>
</div>
<input class="fd-slider" type="range" min="0" max="100" value="64" aria-label="Opacity" />
<input class="fd-slider" type="range" min="0" max="100" value="40" aria-label="Volume" />
<div class="fd-slider-head">
<label class="fd-field__label" for="quality">Quality</label>
<output class="fd-slider-output" id="quality-out"
data-fd-slider-output="quality">8</output>
</div>
<input class="fd-slider" id="quality" type="range" min="1" max="12"
value="8" aria-controls="quality-out" aria-label="Quality" />
<input class="fd-slider" type="range" min="0" max="100" value="30" disabled aria-label="Locked range" />
| Class | Description | Default |
|---|---|---|
.fd-slider | Native <input type="range"> with brutalist track + square thumb. | — |
.fd-slider-field | Vertical wrapper composing head, slider, and scale. | — |
.fd-slider-head | Baseline row pairing a label with the live output. | — |
.fd-slider-output | Mono readout chip; bind via data-fd-slider-output. | — |
.fd-slider-scale | Min / max tick row rendered under the track. | — |
data-fd-slider-output | Links an output to a slider id for live updates. | — |
:disabled | Dims the control and blocks interaction. | — |
A segmented one-time-code field — auto-advancing slots, backspace step-back, and paste distribution, restricted to digits.
<div class="fd-otp" data-fd-otp role="group" aria-label="One-time code">
<div class="fd-otp__group">
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 1" />
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
</div>
<span class="fd-otp__sep" aria-hidden="true"></span>
<div class="fd-otp__group">
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 5" />
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" aria-label="Digit 6" />
</div>
</div>
<div class="fd-otp" data-fd-otp role="group" aria-label="One-time code">
<div class="fd-otp__group">
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" />
<!-- …two more slots… -->
</div>
<span class="fd-otp__sep" aria-hidden="true"></span>
<div class="fd-otp__group">…</div>
</div>
fd-otp // root, carries data-fd-otp ├─ fd-otp__group // a run of 3 slots │ └─ fd-otp__slot ×3 // single-character inputs ├─ fd-otp__sep // visual divider between groups └─ fd-otp__group // second run of 3 slots └─ fd-otp__slot ×3
<div class="fd-otp fd-otp--sm" data-fd-otp role="group" aria-label="One-time code"> <div class="fd-otp__group">…3 slots…</div> <span class="fd-otp__sep" aria-hidden="true"></span> <div class="fd-otp__group">…3 slots…</div> </div>
<div class="fd-otp is-error" data-fd-otp role="group"
aria-label="One-time code" aria-invalid="true">
<div class="fd-otp__group">…</div>
<span class="fd-otp__sep" aria-hidden="true"></span>
<div class="fd-otp__group">…</div>
</div>
<span class="fd-field__hint fd-field__hint--error">
<span class="fd-field__hint-icon" aria-hidden="true">!</span>Code expired.
</span>
<div class="fd-otp" data-fd-otp role="group" aria-label="One-time code">
<div class="fd-otp__group">
<input class="fd-otp__slot" inputmode="numeric" maxlength="1" value="1" disabled />
<!-- …remaining disabled slots… -->
</div>
</div>
| Class | Description | Default |
|---|---|---|
.fd-otp | Root group; pair with data-fd-otp to wire the behaviour. | — |
.fd-otp__group | A visual cluster of consecutive slots. | — |
.fd-otp__slot | Single-character input; use inputmode="numeric" + maxlength="1". | — |
.fd-otp__sep | Decorative divider between groups. | — |
.fd-otp--sm | Compact slot sizing. | — |
.is-error | Error styling across all slots. | — |
data-fd-otp | Enables advance / backspace / paste handling. | — |
A trigger that opens a searchable command list in a popover; picking an option writes its label back to the trigger.
<div class="fd-combobox" data-fd-combobox data-fd-combobox-selected="Next.js">
<button class="fd-combobox__trigger" type="button" data-fd-popover-trigger
aria-haspopup="listbox" aria-expanded="false">
<span data-fd-combobox-value>Next.js</span>
<span class="fd-combobox__trigger-icon" aria-hidden="true">…chevron…</span>
</button>
<div class="fd-popover__content" role="dialog" aria-label="Select framework">
<div class="fd-command" data-fd-command>
<input class="fd-command__input" type="text" data-fd-command-input
placeholder="Search framework…" />
<div class="fd-command__list" data-fd-command-list role="listbox">
<button class="fd-command__item" type="button" data-fd-command-item
data-fd-command-value="Next.js" role="option" aria-selected="true">
Next.js<span class="fd-command__check">…check…</span>
</button>
<!-- …more options… -->
</div>
</div>
</div>
</div>
<div class="fd-combobox" data-fd-combobox>
<button class="fd-combobox__trigger" type="button" data-fd-popover-trigger aria-expanded="false">
<span data-fd-combobox-value>Select…</span>
</button>
<div class="fd-popover__content" role="dialog">
<div class="fd-command" data-fd-command> … </div>
</div>
</div>
fd-combobox // root, data-fd-combobox
├─ fd-combobox__trigger // data-fd-popover-trigger, aria-expanded
│ ├─ [data-fd-combobox-value] // selected label
│ └─ fd-combobox__trigger-icon // chevron
└─ fd-popover__content // role="dialog"
└─ fd-command // data-fd-command
├─ fd-command__input // data-fd-command-input
└─ fd-command__list // role="listbox"
└─ fd-command__item // data-fd-command-item · data-fd-command-value
<div class="fd-field">
<label class="fd-field__label" id="region-label">Deploy region</label>
<div class="fd-combobox" data-fd-combobox>
<button class="fd-combobox__trigger" type="button" data-fd-popover-trigger
aria-expanded="false" aria-labelledby="region-label">
<span data-fd-combobox-value>Select region…</span>
</button>
<div class="fd-popover__content" role="dialog">
<div class="fd-command" data-fd-command> … </div>
</div>
</div>
<span class="fd-field__hint">Closest region to your users.</span>
</div>
<div class="fd-combobox" data-fd-combobox>
<button class="fd-combobox__trigger" type="button" disabled
aria-haspopup="listbox" aria-expanded="false">
<span data-fd-combobox-value>Plan: Enterprise</span>
<span class="fd-combobox__trigger-icon" aria-hidden="true">…chevron…</span>
</button>
</div>
| Class | Description | Default |
|---|---|---|
.fd-combobox | Root wrapper; carries data-fd-combobox. | — |
.fd-combobox__trigger | Popover trigger button (data-fd-popover-trigger). | — |
.fd-combobox__trigger-icon | Chevron; rotates when the popover is open. | — |
[data-fd-combobox-value] | Element whose text receives the chosen label. | — |
.fd-popover__content | Floating panel; role="dialog". | — |
.fd-command | Filterable command list (data-fd-command). | — |
.fd-command__item | Option; filtered by data-fd-command-value. | — |
.fd-command__item.is-active | Keyboard-highlighted option. | — |
A static month grid with a mono weekday header, today and selected day states, and muted overflow days from adjacent months.
<div class="fd-calendar" role="application" aria-label="June 2026">
<div class="fd-calendar__head">
<button class="fd-calendar__nav" type="button" aria-label="Previous month">‹</button>
<span class="fd-calendar__title">June 2026</span>
<button class="fd-calendar__nav" type="button" aria-label="Next month">›</button>
</div>
<div class="fd-calendar__grid" role="grid">
<span class="fd-calendar__weekday">Su</span> <!-- …Mo Tu We Th Fr Sa -->
<button class="fd-calendar__day is-muted" tabindex="-1">31</button>
<button class="fd-calendar__day">1</button>
<!-- … -->
<button class="fd-calendar__day is-selected" aria-pressed="true">12</button>
<!-- … -->
<button class="fd-calendar__day is-today" aria-current="date">20</button>
<!-- … -->
</div>
</div>
<div class="fd-calendar">
<div class="fd-calendar__head">…title + prev/next…</div>
<div class="fd-calendar__grid">
<span class="fd-calendar__weekday">Su</span> …
<button class="fd-calendar__day is-today">20</button> …
</div>
</div>
fd-calendar ├─ fd-calendar__head │ ├─ fd-calendar__nav // prev │ ├─ fd-calendar__title // "June 2026" │ └─ fd-calendar__nav // next └─ fd-calendar__grid ├─ fd-calendar__weekday ×7 // Su…Sa └─ fd-calendar__day ×N // is-today · is-selected · is-muted
<div class="fd-calendar">
<div class="fd-calendar__head">…</div>
<div class="fd-calendar__grid">…</div>
<div class="fd-calendar__foot">
<span>TODAY · JUN 20</span>
<span>UTC+0</span>
</div>
</div>
<button class="fd-calendar__day" disabled aria-label="June 6, unavailable">6</button> <button class="fd-calendar__day" disabled aria-label="June 7, unavailable">7</button> <!-- weekends carry [disabled]; struck through + not focusable -->
| Class | Description | Default |
|---|---|---|
.fd-calendar | Month grid container. | — |
.fd-calendar__head | Title row with prev / next navigation. | — |
.fd-calendar__nav | Square chevron button (visual prev / next). | — |
.fd-calendar__title | Mono month + year label. | — |
.fd-calendar__grid | 7-column grid of weekdays + days. | — |
.fd-calendar__weekday | Mono weekday header cell. | — |
.fd-calendar__day | Day cell button. | — |
.is-today | Today — hairline accent ring. | — |
.is-selected | Selected day — filled accent. | — |
.is-muted | Day bleeding in from an adjacent month. | — |
[disabled] | Unselectable day — struck through. | — |
.fd-calendar__foot | Optional footer (readout / timezone). | — |
A trigger button that opens a calendar in a popover; combines the popover shell with a static month grid.
<div class="fd-datepicker" data-fd-datepicker>
<button class="fd-datepicker__trigger" type="button" data-fd-popover-trigger
aria-haspopup="dialog" aria-expanded="false">
<span class="fd-datepicker__trigger-lead">
<svg>…calendar glyph…</svg>
<span class="fd-datepicker__value">Jun 12, 2026</span>
</span>
<span class="fd-datepicker__trigger-icon" aria-hidden="true">…chevron…</span>
</button>
<div class="fd-popover__content" role="dialog" aria-label="Choose date">
<div class="fd-calendar">…June 2026 grid…</div>
</div>
</div>
<div class="fd-datepicker" data-fd-datepicker>
<button class="fd-datepicker__trigger" type="button" data-fd-popover-trigger aria-expanded="false">
<span class="fd-datepicker__trigger-lead">
<span class="fd-datepicker__value">Jun 12, 2026</span>
</span>
</button>
<div class="fd-popover__content" role="dialog">
<div class="fd-calendar"> … </div>
</div>
</div>
fd-datepicker // root, data-fd-datepicker ├─ fd-datepicker__trigger // data-fd-popover-trigger, aria-expanded │ ├─ fd-datepicker__trigger-lead │ │ └─ fd-datepicker__value // formatted date label │ └─ fd-datepicker__trigger-icon └─ fd-popover__content // role="dialog" └─ fd-calendar // month grid
<div class="fd-field">
<label class="fd-field__label" id="start-label">Start date</label>
<div class="fd-datepicker" data-fd-datepicker>
<button class="fd-datepicker__trigger" type="button" data-fd-popover-trigger
aria-expanded="false" aria-labelledby="start-label">
<span class="fd-datepicker__trigger-lead">
<span class="fd-datepicker__value fd-datepicker__value--placeholder">Pick a date</span>
</span>
</button>
<div class="fd-popover__content" role="dialog"><div class="fd-calendar">…</div></div>
</div>
</div>
<div class="fd-datepicker" data-fd-datepicker>
<button class="fd-datepicker__trigger" type="button" disabled
aria-haspopup="dialog" aria-expanded="false">
<span class="fd-datepicker__trigger-lead">
<span class="fd-datepicker__value">Jun 12, 2026</span>
</span>
</button>
</div>
| Class | Description | Default |
|---|---|---|
.fd-datepicker | Root wrapper; carries data-fd-datepicker. | — |
.fd-datepicker__trigger | Popover trigger (data-fd-popover-trigger). | — |
.fd-datepicker__trigger-lead | Leading glyph + value cluster. | — |
.fd-datepicker__value | Formatted date label. | — |
.fd-datepicker__value--placeholder | Muted empty-state label. | — |
.fd-datepicker__trigger-icon | Trailing chevron. | — |
.fd-popover__content | Floating panel wrapping the calendar. | — |
.fd-calendar | Month grid rendered inside the popover. | — |
Communicate state and progress — alerts, toasts, tooltips, loaders, and meters that report what the system is doing with restrained, semantic color coding.
Displays a short, important message inline — an icon, a mono title, and supporting copy on a left-stripe surface that escalates color by severity.
Tokens resolve at build time. Run npm run tokens after editing the manifest.
<div class="fd-alert fd-alert--info" role="status">
<span class="fd-alert__icon" aria-hidden="true"><svg>…</svg></span>
<div class="fd-alert__body">
<div class="fd-alert__title">Info</div>
<p class="fd-alert__text">Tokens resolve at build time.</p>
</div>
</div><div class="fd-alert fd-alert--success" role="status">
<span class="fd-alert__icon" aria-hidden="true"><svg>…</svg></span>
<div class="fd-alert__body">
<div class="fd-alert__title">Deployed</div>
<p class="fd-alert__text">All checks passed.</p>
</div>
</div>fd-alert // surface + left severity stripe (+ fd-alert--VARIANT)
├── fd-alert__icon // 18px status glyph, aria-hidden
└── fd-alert__body
├── fd-alert__title // mono uppercase label
├── fd-alert__text // supporting copy (may hold <code>)
└── fd-alert__actions // optional trailing button rowNeutral aside. A left stripe and muted surface set context without raising alarm.
Pipeline passed. All 248 token references validated against the schema.
This control is deprecated. Migrate to .fd-field before the next major release.
Build failed: unknown custom property --accent-soft referenced in 3 files.
<div class="fd-alert">…</div> <!-- default --> <div class="fd-alert fd-alert--success">…</div> <div class="fd-alert fd-alert--warning">…</div> <div class="fd-alert fd-alert--error" role="alert">…</div>
You have edits to the token manifest that have not been committed.
<div class="fd-alert fd-alert--warning" role="status">
<span class="fd-alert__icon" aria-hidden="true"><svg>…</svg></span>
<div class="fd-alert__body">
<div class="fd-alert__title">Unsaved changes</div>
<p class="fd-alert__text">You have uncommitted edits.</p>
<div class="fd-alert__actions">
<button class="fd-btn fd-btn--primary fd-btn--sm">Save now</button>
<button class="fd-btn fd-btn--ghost fd-btn--sm">Discard</button>
</div>
</div>
</div>| Class | Description | Default |
|---|---|---|
.fd-alert | Inline message surface with a neutral left severity stripe. | — |
.fd-alert--info | Informational tone; info-colored stripe, surface, and icon. | — |
.fd-alert--success | Positive confirmation tone. | — |
.fd-alert--warning | Cautionary tone for reversible or deprecation notices. | — |
.fd-alert--error | Failure tone; pair with role="alert". | — |
.fd-alert__icon | Leading status glyph slot, aria-hidden. | — |
.fd-alert__title | Mono uppercase heading inside the body. | — |
.fd-alert__text | Supporting copy; styles inline <code>. | — |
.fd-alert__actions | Optional trailing button row. | — |
A transient, succinct notification that slides into a corner region and auto-dismisses — fired declaratively from any trigger with data-fd-toast.
<button class="fd-btn" data-fd-toast data-fd-toast-variant="success" data-fd-toast-title="Deployed" data-fd-toast-msg="Build 4127 is live on edge."> Success </button>
<!-- 1. mount the region once, near </body> --> <div class="fd-toast-region" aria-live="polite" aria-atomic="false"></div> <!-- 2. any trigger fires a toast --> <button data-fd-toast data-fd-toast-variant="info" data-fd-toast-title="Sync" data-fd-toast-msg="3 new components pulled."> Notify </button>
fd-toast-region // fixed corner stack, aria-live="polite"
└── fd-toast // injected by main.js (+ fd-toast--VARIANT, .is-open)
├── fd-toast__icon // variant glyph, aria-hidden
├── fd-toast__body
│ ├── fd-toast__title
│ └── fd-toast__msg
└── fd-toast__close // dismiss button, aria-label<!-- main.js builds this node inside .fd-toast-region -->
<div class="fd-toast fd-toast--success is-open" role="status">
<span class="fd-toast__icon"><svg>…</svg></span>
<div class="fd-toast__body">
<div class="fd-toast__title">Deployed</div>
<div class="fd-toast__msg">Build 4127 is live on edge.</div>
</div>
<button class="fd-toast__close" aria-label="Dismiss notification">…</button>
</div>| Class / Hook | Description | Default |
|---|---|---|
data-fd-toast | On a trigger; fires a toast on click. | — |
data-fd-toast-variant | Tone: default, success, error, warning, info. | default |
data-fd-toast-title | Mono uppercase title line. | — |
data-fd-toast-msg | Body message line. | — |
.fd-toast-region | Fixed corner mount; declare once with aria-live. | — |
.fd-toast | Injected notification node (+ --VARIANT). | — |
.is-open | Enter state; drives the slide-and-fade transition. | — |
.fd-toast__close | Dismiss button with aria-label. | — |
A tiny label that surfaces on hover or keyboard focus to name an action or explain a glyph — pure CSS, no script required.
<span class="fd-tooltip">
<button class="fd-btn">Hover top</button>
<span class="fd-tooltip__content" role="tooltip">
Anchored above, centered.
</span>
</span><span class="fd-tooltip"> <button class="fd-btn">Trigger</button> <span class="fd-tooltip__content" role="tooltip">Label text</span> </span>
<!-- top (default) --> <span class="fd-tooltip__content">…</span> <!-- bottom / right / left --> <span class="fd-tooltip__content fd-tooltip__content--bottom">…</span> <span class="fd-tooltip__content fd-tooltip__content--right">…</span>
Coverage holds steady at Measured against 248 declared tokens. this cycle.
<span class="fd-tooltip">
<button class="fd-tooltip__trigger" aria-describedby="tt-cov">92%</button>
<span class="fd-tooltip__content fd-tooltip__content--bottom"
id="tt-cov" role="tooltip">Measured against 248 tokens.</span>
</span>| Class | Description | Default |
|---|---|---|
.fd-tooltip | Relative wrapper around trigger + content. | — |
.fd-tooltip__content | The label bubble; reveals on hover / focus-within. | — |
.fd-tooltip__content--bottom | Anchors below the trigger. | top |
.fd-tooltip__content--right | Anchors to the right of the trigger. | top |
.fd-tooltip__content--left | Anchors to the left of the trigger. | top |
.fd-tooltip__trigger | Dashed-underline inline trigger for definitions. | — |
role="tooltip" | On content; pair with aria-describedby on the trigger. | — |
A richer hover preview than a tooltip — surfaces an identity block, summary, and metadata for sighted users who hover or focus a link.
Maintainer of the f(x) → NATURE design system. Casts hairline components in acid lime.
<span class="fd-hovercard">
<button class="fd-hovercard__trigger" aria-haspopup="true">@nature</button>
<div class="fd-hovercard__content" role="dialog" aria-label="nature profile">
<div class="fd-hovercard__head">
<span class="fd-hovercard__avatar">FD</span>
<div>
<div class="fd-hovercard__name">Nature Unit</div>
<div class="fd-hovercard__handle">@nature</div>
</div>
</div>
<p class="fd-hovercard__text">Maintainer of the design system.</p>
<div class="fd-hovercard__meta"><span><b>248</b> Tokens</span></div>
</div>
</span><span class="fd-hovercard"> <button class="fd-hovercard__trigger">@user</button> <div class="fd-hovercard__content" role="dialog">…</div> </span>
fd-hovercard // relative wrapper
├── fd-hovercard__trigger // dashed inline trigger
└── fd-hovercard__content // role="dialog", reveals on hover/focus
├── fd-hovercard__head
│ ├── fd-hovercard__avatar
│ ├── fd-hovercard__name
│ └── fd-hovercard__handle
├── fd-hovercard__text
└── fd-hovercard__meta // <b> emphasises figuresAdds the gauge meter, refines toast timing, and ships light-theme parity across all nine sections.
<div class="fd-hovercard__content fd-hovercard__content--right" role="dialog" aria-label="release detail"> … </div>
| Class | Description | Default |
|---|---|---|
.fd-hovercard | Relative wrapper around trigger + content. | — |
.fd-hovercard__trigger | Dashed-underline trigger; reveals the card on hover / focus. | — |
.fd-hovercard__content | Floating panel; carries role="dialog". | — |
.fd-hovercard__content--right | Right-aligns the panel under the trigger. | left |
.fd-hovercard__avatar | Square accent avatar with mono initials. | — |
.fd-hovercard__meta | Mono stat row; <b> emphasises figures. | — |
A horizontal bar that reports completion of a task — determinate with a known percentage, or indeterminate while the duration is unknown.
<div class="fd-progress">
<div class="fd-progress__meta">
<span>Compiling</span><span class="fd-progress__value">70%</span>
</div>
<div class="fd-progress__track">
<div class="fd-progress__bar" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width: 70%;"></div>
</div>
</div><div class="fd-progress">
<div class="fd-progress__track">
<div class="fd-progress__bar" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width: 70%;"></div>
</div>
</div><div class="fd-progress fd-progress--success">…</div> <div class="fd-progress fd-progress--warning">…</div> <div class="fd-progress fd-progress--error">…</div>
<div class="fd-progress fd-progress--indeterminate">
<div class="fd-progress__track">
<div class="fd-progress__bar" role="progressbar"
aria-label="Syncing" aria-valuetext="In progress"></div>
</div>
</div>| Class | Description | Default |
|---|---|---|
.fd-progress | Wrapper with optional meta row + track. | — |
.fd-progress__track | The rail; clips the fill bar. | — |
.fd-progress__bar | Accent fill; width set inline; carries role="progressbar". | — |
.fd-progress__meta | Mono label + value row above the track. | — |
.fd-progress--success | Recolors the fill to the success token. | accent |
.fd-progress--warning | Recolors the fill to the warning token. | accent |
.fd-progress--error | Recolors the fill to the error token. | accent |
.fd-progress--indeterminate | Animates a sliding chunk for unknown duration. | — |
An indeterminate rotary loader for pending work of unknown length, with a complementary three-dot pulse for inline contexts.
<span class="fd-spinner" role="status" aria-label="Loading"></span>
<span class="fd-spinner" role="status" aria-label="Loading"></span>
<span class="fd-spinner fd-spinner--sm"></span> <span class="fd-spinner"></span> <span class="fd-spinner fd-spinner--lg"></span> <span class="fd-spinner fd-spinner--muted"></span>
<span class="fd-dots" role="status" aria-label="Loading"> <span></span><span></span><span></span> </span> <button class="fd-btn" disabled> <span class="fd-spinner fd-spinner--sm" aria-hidden="true"></span> Deploying </button>
| Class | Description | Default |
|---|---|---|
.fd-spinner | Rotating ring with an accent top arc; role="status". | 28px |
.fd-spinner--sm | Compact 16px ring for inline / button use. | — |
.fd-spinner--lg | Prominent 44px ring. | — |
.fd-spinner--muted | Foreground arc instead of accent. | accent |
.fd-dots | Three-dot pulse loader. | — |
.fd-dots--muted | Subtle-colored dots. | accent |
A shimmering placeholder that mirrors the shape of content while it loads, reducing layout shift and perceived wait.
<div class="fd-skeleton-card" aria-hidden="true">
<div class="fd-skeleton-row">
<div class="fd-skeleton fd-skeleton--avatar"></div>
<div class="fd-skeleton-lines">
<div class="fd-skeleton fd-skeleton--line w-60"></div>
<div class="fd-skeleton fd-skeleton--line is-sm w-40"></div>
</div>
</div>
<div class="fd-skeleton fd-skeleton--line"></div>
<div class="fd-skeleton fd-skeleton--line w-90"></div>
</div><div class="fd-skeleton fd-skeleton--line" aria-hidden="true"></div> <div class="fd-skeleton fd-skeleton--title" aria-hidden="true"></div> <div class="fd-skeleton fd-skeleton--avatar" aria-hidden="true"></div>
<div class="fd-skeleton-card" aria-hidden="true">
<div class="fd-skeleton fd-skeleton--thumb"></div>
<div class="fd-skeleton fd-skeleton--title"></div>
<div class="fd-skeleton-lines">
<div class="fd-skeleton fd-skeleton--line"></div>
<div class="fd-skeleton fd-skeleton--line w-80"></div>
</div>
<div class="fd-skeleton fd-skeleton--btn"></div>
</div>| Class | Description | Default |
|---|---|---|
.fd-skeleton | Base shimmering block; set aria-hidden on the container. | — |
.fd-skeleton--line | Full-width text line placeholder. | — |
.fd-skeleton--title | Taller heading-height block. | — |
.fd-skeleton--avatar | Round 44px avatar placeholder. | — |
.fd-skeleton--thumb | Wide media / thumbnail block. | — |
.fd-skeleton--btn | Button-sized block. | — |
.w-40 / .w-60 / .w-80 / .w-90 | Width helpers for ragged line lengths. | 100% |
.fd-skeleton-card | Bordered container that groups placeholders. | — |
A circular SVG meter that reads a single value at a glance — a ring fill over a track, with the figure and a mono label centered inside.
<!-- r=52 → circumference ≈ 326.7; 72% → dash 235.3 -->
<div class="fd-gauge" role="img" aria-label="Coverage 72 percent">
<svg viewBox="0 0 120 120">
<circle class="fd-gauge__track" cx="60" cy="60" r="52"/>
<circle class="fd-gauge__fill" cx="60" cy="60" r="52"
stroke-dasharray="235.3 326.7"/>
</svg>
<div class="fd-gauge__center"><div>
<span class="fd-gauge__num">72<span class="fd-gauge__unit">%</span></span>
<span class="fd-gauge__label">Coverage</span>
</div></div>
</div><div class="fd-gauge" role="img" aria-label="Coverage 72 percent">
<svg viewBox="0 0 120 120">
<circle class="fd-gauge__track" cx="60" cy="60" r="52"/>
<circle class="fd-gauge__fill" cx="60" cy="60" r="52"
stroke-dasharray="235.3 326.7"/>
</svg>
<div class="fd-gauge__center">…</div>
</div>fd-gauge // role="img" aria-label="…"
├── svg
│ ├── fd-gauge__track // full ring
│ └── fd-gauge__fill // value arc (stroke-dasharray) (+ --VARIANT)
└── fd-gauge__center
├── fd-gauge__num // figure (+ fd-gauge__unit)
└── fd-gauge__label // mono caption<circle class="fd-gauge__fill fd-gauge__fill--success" …/> <circle class="fd-gauge__fill fd-gauge__fill--warning" …/> <circle class="fd-gauge__fill fd-gauge__fill--error" …/>
<div class="fd-gauge fd-gauge--sm" role="img" aria-label="Coverage 72 percent"> … </div>
| Class | Description | Default |
|---|---|---|
.fd-gauge | Circular meter wrapper; carries role="img" + label. | 112px |
.fd-gauge--sm | Compact 84px gauge; hides the caption. | — |
.fd-gauge__track | Full background ring. | — |
.fd-gauge__fill | Value arc; set stroke-dasharray for the percentage. | accent |
.fd-gauge__fill--success | Success-colored arc (also --warning, --error). | accent |
.fd-gauge__num | Centered figure (+ .fd-gauge__unit). | — |
.fd-gauge__label | Mono uppercase caption below the figure. | — |
A centered placeholder for the no-data, no-results, or first-run state — an icon, a title, a line of guidance, and an optional call to action.
Nothing has been cast into this registry. Pull a section to populate the catalog.
<div class="fd-empty">
<span class="fd-empty__icon" aria-hidden="true"><svg>…</svg></span>
<div class="fd-empty__title">No components yet</div>
<p class="fd-empty__text">Pull a section to populate the catalog.</p>
<div class="fd-empty__actions">
<button class="fd-btn fd-btn--primary">Pull section</button>
</div>
</div><div class="fd-empty"> <span class="fd-empty__icon" aria-hidden="true"><svg>…</svg></span> <div class="fd-empty__title">No results</div> <p class="fd-empty__text">Try a different query.</p> </div>
No tokens matched “--accent-soft”. Check the spelling or clear the filter.
<div class="fd-empty">
<span class="fd-empty__icon" aria-hidden="true"><svg>…</svg></span>
<div class="fd-empty__title">No matches</div>
<p class="fd-empty__text">No tokens matched the query.</p>
<div class="fd-empty__actions">
<button class="fd-btn fd-btn--ghost">Clear filter</button>
</div>
</div>No pending notifications.
<div class="fd-empty fd-empty--compact"> <span class="fd-empty__icon" aria-hidden="true"><svg>…</svg></span> <div class="fd-empty__title">Inbox zero</div> <p class="fd-empty__text">No pending notifications.</p> </div>
| Class | Description | Default |
|---|---|---|
.fd-empty | Centered dashed-border empty-state container. | — |
.fd-empty--compact | Tighter padding and smaller icon for panels. | — |
.fd-empty__icon | Framed leading glyph; aria-hidden. | — |
.fd-empty__title | Display-weight heading. | — |
.fd-empty__text | One line of guidance copy. | — |
.fd-empty__actions | Optional centered call-to-action row. | — |
Layered surfaces summoned on demand — dialogs, sheets, popovers, menus and the command palette.
A modal window overlaid on the page that interrupts the flow to demand a focused decision, with backdrop blur, focus trap, and Esc-to-close.
<button data-fd-modal-open="ov-dialog">Pour the Cast</button>
<div class="fd-modal" data-fd-modal="ov-dialog">
<div class="fd-modal__backdrop" data-fd-modal-close></div>
<div class="fd-modal__panel" role="dialog" aria-modal="true" aria-labelledby="ov-dialog-t">
<div class="fd-overlay__header">
<h3 class="fd-overlay__title" id="ov-dialog-t">Pour the Cast</h3>
<button class="fd-overlay__close" data-fd-modal-close aria-label="Close dialog"></button>
</div>
<div class="fd-overlay__body">…</div>
<div class="fd-overlay__footer">
<button data-fd-modal-close>Cancel</button>
<button data-fd-modal-close>Confirm</button>
</div>
</div>
</div><button data-fd-modal-open="id">Open</button> <div class="fd-modal" data-fd-modal="id"> <div class="fd-modal__backdrop" data-fd-modal-close></div> <div class="fd-modal__panel" role="dialog" aria-modal="true">…</div> </div>
fd-modal // fixed full-screen layer (data-fd-modal=ID)
├── fd-modal__backdrop // blurred click-to-close scrim (data-fd-modal-close)
└── fd-modal__panel // role="dialog" aria-modal="true"
├── fd-overlay__header
│ ├── fd-overlay__eyebrow
│ ├── fd-overlay__title
│ └── fd-overlay__close (data-fd-modal-close)
├── fd-overlay__body
└── fd-overlay__footer<div class="fd-modal__panel" role="dialog" aria-modal="true">
<div class="fd-overlay__header">…</div>
<!-- body scrolls; header + footer stay pinned -->
<div class="fd-overlay__body">
<p>Section 01…</p> <p>Section 02…</p> … <p>Section 05…</p>
</div>
<div class="fd-overlay__footer">…</div>
</div><div class="fd-overlay__body">
<div class="fd-overlay__field">
<label class="fd-overlay__label" for="name">Unit name</label>
<input class="fd-overlay__input" id="name" type="text" placeholder="FND-0451" />
</div>
</div>
<div class="fd-overlay__footer">
<button data-fd-modal-close>Cancel</button>
<button class="fd-surface-btn--primary" data-fd-modal-close>Create</button>
</div>| Class / Hook | Description | Default |
|---|---|---|
.fd-modal | Fixed full-screen overlay layer that centers its panel. | — |
data-fd-modal="ID" | Identifies the overlay so triggers can target it. | — |
data-fd-modal-open="ID" | On a trigger; opens the overlay with the matching id. | — |
data-fd-modal-close | On backdrop / button; dismisses the open overlay. | — |
.fd-modal__panel | The dialog surface; carries role="dialog". | — |
.is-open | Runtime state class that reveals the overlay. | off |
A destructive-confirm dialog that interrupts to require an explicit, irreversible choice — role="alertdialog" with an emphasised destructive action.
<button class="fd-surface-btn--danger" data-fd-modal-open="ov-alert">Delete Unit</button>
<div class="fd-modal fd-modal--alert" data-fd-modal="ov-alert">
<div class="fd-modal__backdrop" data-fd-modal-close></div>
<div class="fd-modal__panel" role="alertdialog" aria-modal="true"
aria-labelledby="ov-alert-t" aria-describedby="ov-alert-d">
<div class="fd-overlay__header">
<span class="fd-overlay__eyebrow--danger">[×] // DESTRUCTIVE</span>
<h3 class="fd-overlay__title" id="ov-alert-t">Delete this unit?</h3>
</div>
<div class="fd-overlay__body" id="ov-alert-d">…</div>
<div class="fd-overlay__footer">
<button data-fd-modal-close>Cancel</button>
<button class="fd-surface-btn--danger" data-fd-modal-close>Delete permanently</button>
</div>
</div>
</div><div class="fd-modal fd-modal--alert" data-fd-modal="id"> <div class="fd-modal__backdrop" data-fd-modal-close></div> <div class="fd-modal__panel" role="alertdialog" aria-modal="true">…</div> </div>
<!-- Backdrop without data-fd-modal-close = cannot dismiss by clicking out -->
<div class="fd-modal__backdrop"></div>
<div class="fd-modal__panel" role="alertdialog" aria-modal="true">
…
<div class="fd-overlay__footer">
<button data-fd-modal-close>Keep index</button>
<button class="fd-surface-btn--danger" data-fd-modal-close>Wipe everything</button>
</div>
</div>| Class / Hook | Description | Default |
|---|---|---|
.fd-modal--alert | Variant that tightens the panel and styles for a confirm. | — |
role="alertdialog" | On the panel; signals an urgent, focus-stealing prompt. | — |
.fd-overlay__eyebrow--danger | Error-toned eyebrow for the destructive label. | — |
.fd-surface-btn--danger | The emphasised destructive confirm action. | — |
An edge-anchored panel that slides in over the page for filters, details, or secondary navigation without leaving the current context.
<button data-fd-drawer-open="ov-sheet">Open Manifest</button>
<div class="fd-drawer" data-fd-drawer="ov-sheet">
<div class="fd-drawer__backdrop" data-fd-drawer-close></div>
<div class="fd-drawer__panel" role="dialog" aria-modal="true" aria-labelledby="ov-sheet-t">
<div class="fd-overlay__header">
<h3 class="fd-overlay__title" id="ov-sheet-t">Build Manifest</h3>
<button class="fd-overlay__close" data-fd-drawer-close aria-label="Close sheet"></button>
</div>
<div class="fd-overlay__body">…</div>
<div class="fd-overlay__footer">…</div>
</div>
</div><button data-fd-drawer-open="id">Open</button> <div class="fd-drawer" data-fd-drawer="id"> <div class="fd-drawer__backdrop" data-fd-drawer-close></div> <div class="fd-drawer__panel" role="dialog" aria-modal="true">…</div> </div>
fd-drawer // fixed full-screen layer (data-fd-drawer=ID)
├── fd-drawer__backdrop // click-to-close scrim (data-fd-drawer-close)
└── fd-drawer__panel // edge-anchored sliding surface, role="dialog"
├── fd-overlay__header (reused from dialog)
├── fd-overlay__body
└── fd-overlay__footer<!-- Left edge --> <div class="fd-drawer fd-drawer--left" data-fd-drawer="left">…</div> <!-- Top edge --> <div class="fd-drawer fd-drawer--top" data-fd-drawer="top">…</div>
| Class / Hook | Description | Default |
|---|---|---|
.fd-drawer | Fixed overlay; panel anchors to the right by default. | — |
.fd-drawer--left | Anchors and slides the panel from the left edge. | right |
.fd-drawer--top | Drops a full-width panel down from the top edge. | right |
data-fd-drawer-open="ID" | On a trigger; opens the sheet with the matching id. | — |
data-fd-drawer-close | On backdrop / button; dismisses the sheet. | — |
A non-modal floating surface anchored to its trigger, for rich content and quick controls — toggles open, closes on outside-click and Esc.
Set the bounding box for the cast unit. Values resolve from the token spacing scale.
<div class="fd-popover">
<button class="fd-popover__trigger fd-surface-btn" data-fd-popover-trigger aria-expanded="false">
Dimensions
</button>
<div class="fd-popover__content" role="dialog" aria-label="Dimensions">
<span class="fd-popover__eyebrow">// CAST PARAMETERS</span>
<p class="fd-popover__text">Set the bounding box for the cast unit.</p>
<div class="fd-popover__row"><span class="fd-popover__key">Width</span><span class="fd-popover__val">320 PX</span></div>
</div>
</div><div class="fd-popover"> <button class="fd-popover__trigger" data-fd-popover-trigger aria-expanded="false">Open</button> <div class="fd-popover__content" role="dialog">…</div> </div>
fd-popover // positioning context (relative)
├── fd-popover__trigger // data-fd-popover-trigger, aria-expanded
└── fd-popover__content // role="dialog"; toggled by .is-open
├── fd-popover__eyebrow
├── fd-popover__text
└── fd-popover__row × n (fd-popover__key + fd-popover__val)Add --end so the content right-aligns to the trigger — ideal for icon buttons near a screen edge.
<div class="fd-popover"> <button class="fd-popover__trigger fd-surface-btn" data-fd-popover-trigger aria-expanded="false" aria-label="More options">…</button> <div class="fd-popover__content fd-popover__content--end" role="dialog">…</div> </div>
A CSS-only card revealed on hover or focus-within. No JS — pure :hover / :focus-within.
<div class="fd-hovercard">
<button class="fd-hovercard__trigger">@nature-unit</button>
<div class="fd-hovercard__content" role="tooltip">
<div class="fd-hovercard__top">…</div>
<p class="fd-hovercard__body">Revealed on hover / focus-within.</p>
</div>
</div>| Class / Hook | Description | Default |
|---|---|---|
.fd-popover | Relative positioning context for the floating content. | — |
data-fd-popover-trigger | On the trigger; toggles .is-open and aria-expanded. | — |
.fd-popover__content | The floating surface; carries role="dialog". | — |
.fd-popover__content--end | Right-aligns the content to the trigger. | start |
.fd-hovercard | CSS-only card revealed on hover / focus-within. | — |
A button-triggered list of actions with labels, icons, shortcuts, and destructive items — opens on click, closes on selection, outside-click, or Esc.
<div class="fd-menu">
<button class="fd-menu__trigger" data-fd-menu-trigger aria-expanded="false" aria-haspopup="menu">
Actions
<svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="fd-menu__list" role="menu" aria-label="Actions">
<span class="fd-menu__label">FILE</span>
<button class="fd-menu__item" role="menuitem">New Cast <span class="fd-menu__item-shortcut">⌘N</span></button>
<hr class="fd-menu__separator" role="separator">
<button class="fd-menu__item fd-menu__item--danger" role="menuitem">Delete Unit</button>
</div>
</div><div class="fd-menu">
<button class="fd-menu__trigger" data-fd-menu-trigger aria-expanded="false" aria-haspopup="menu">Actions</button>
<div class="fd-menu__list" role="menu">
<button class="fd-menu__item" role="menuitem">New Cast</button>
</div>
</div><div class="fd-menu__list" role="menu"> <span class="fd-menu__label">SESSION</span> <button class="fd-menu__item" role="menuitem">Profile</button> <hr class="fd-menu__separator" role="separator"> <span class="fd-menu__label">TEAM</span> <button class="fd-menu__item" role="menuitem">Invite member</button> <hr class="fd-menu__separator" role="separator"> <button class="fd-menu__item fd-menu__item--danger" role="menuitem">Sign out</button> </div>
| Class / Hook | Description | Default |
|---|---|---|
data-fd-menu-trigger | On the trigger; toggles .is-open on the menu. | — |
.fd-menu__list | The floating list; carries role="menu". | — |
.fd-menu__item | An actionable row; clicking it closes the menu. | — |
.fd-menu__item--danger | Error-toned destructive item. | — |
.fd-menu__label | Mono uppercase group heading inside the list. | — |
.fd-menu__separator | Hairline rule between groups of items. | — |
A right-click menu summoned at the cursor over a target region, clamped to the viewport and dismissed on outside-click, scroll, or Esc.
<div class="fd-context" data-fd-context>
<div class="fd-context__trigger" data-fd-context-trigger tabindex="0" role="button">
Right-click here
</div>
<div class="fd-context__menu" role="menu" aria-label="Cast actions">
<button class="fd-context__item" role="menuitem">Open</button>
<hr class="fd-context__separator" role="separator">
<button class="fd-context__item fd-context__item--danger" role="menuitem">Delete</button>
</div>
</div><div class="fd-context" data-fd-context> <div class="fd-context__trigger" data-fd-context-trigger tabindex="0">Right-click here</div> <div class="fd-context__menu" role="menu">…items…</div> </div>
fd-context // wrapper (data-fd-context)
├── fd-context__trigger // right-click target (data-fd-context-trigger)
└── fd-context__menu // role="menu"; positioned at the cursor on open
├── fd-context__item × n (optional fd-context__shortcut)
├── fd-context__separator
└── fd-context__item--danger<div class="fd-context__menu" role="menu">
<span class="fd-context__label">VIEW</span>
<button class="fd-context__item fd-context__item--check is-on"
role="menuitemcheckbox" aria-checked="true">Grid overlay</button>
<button class="fd-context__item fd-context__item--check"
role="menuitemcheckbox" aria-checked="false">Crosshairs</button>
</div>| Class / Hook | Description | Default |
|---|---|---|
data-fd-context | Marks the wrapper as a context-menu host. | — |
data-fd-context-trigger | The right-click target region. | — |
.fd-context__menu | Cursor-positioned menu; carries role="menu". | — |
.fd-context__item--check | Checkable item; toggle .is-on + aria-checked. | — |
.fd-context__item--danger | Error-toned destructive item. | — |
A fast, filterable command palette — type to narrow items, arrow keys to move, Enter to run. ⌘K / Ctrl K opens it globally.
<div class="fd-command" data-fd-command role="dialog" aria-label="Command palette">
<div class="fd-command__bar">
<input class="fd-command__input" data-fd-command-input placeholder="Type a command…" />
</div>
<div class="fd-command__list" data-fd-command-list role="listbox">
<span class="fd-command__group">ACTIONS</span>
<button class="fd-command__item" data-fd-command-item data-fd-command-value="New Cast Unit" role="option">
New Cast Unit<span class="fd-command__shortcut">⌘N</span>
</button>
</div>
</div><div class="fd-command" data-fd-command>
<input class="fd-command__input" data-fd-command-input placeholder="Type a command…" />
<div class="fd-command__list" data-fd-command-list role="listbox">
<button class="fd-command__item" data-fd-command-item data-fd-command-value="New" role="option">New</button>
</div>
</div>fd-command // data-fd-command (filter + arrow/Enter engine)
├── fd-command__bar
│ ├── fd-command__search // search glyph
│ ├── fd-command__input // data-fd-command-input
│ └── fd-command__kbd // ESC hint
└── fd-command__list // data-fd-command-list, role="listbox"
├── fd-command__group // section heading
└── fd-command__item × n // data-fd-command-item + data-fd-command-value
└── fd-command__shortcutPress ⌘K (or Ctrl K) anywhere to open the palette mounted in a dialog with id command-dialog. The runtime focuses the input and resets the filter.
<!-- Mount the palette inside the modal with id "command-dialog" -->
<div class="fd-modal fd-modal--command" data-fd-modal="command-dialog">
<div class="fd-modal__backdrop" data-fd-modal-close></div>
<div class="fd-modal__panel" role="dialog" aria-modal="true" aria-label="Command palette">
<div class="fd-command" data-fd-command>
<input class="fd-command__input" data-fd-command-input placeholder="Type a command…" />
<div class="fd-command__list" data-fd-command-list role="listbox">
<button class="fd-command__item" data-fd-command-item data-fd-command-value="Dialog"
data-fd-href="#comp-dialog" role="option">Dialog</button>
</div>
</div>
</div>
</div>
<!-- ⌘K / Ctrl+K opens it globally (handled by the runtime). -->| Class / Hook | Description | Default |
|---|---|---|
data-fd-command | Marks the palette; enables filter + keyboard nav. | — |
data-fd-command-input | The text field; filters items as you type. | — |
data-fd-command-item | A result row; carries role="option". | — |
data-fd-command-value | Lowercased substring matched against the query. | — |
data-fd-href | On an item; jumps to that hash when activated. | — |
data-fd-modal="command-dialog" | The id the global ⌘K shortcut opens. | — |
A desktop-style horizontal menu bar — click a top-level trigger to open its menu, then hover sibling triggers to switch. Outside-click and Esc close.
<div class="fd-menubar" data-fd-menubar>
<div class="fd-menubar__menu">
<button class="fd-menubar__trigger" data-fd-menubar-trigger aria-expanded="false" aria-haspopup="menu">File</button>
<div class="fd-menubar__content" role="menu" aria-label="File">
<button class="fd-menubar__item" role="menuitem">New Cast <span class="fd-menubar__shortcut">⌘N</span></button>
<hr class="fd-menubar__separator" role="separator">
<button class="fd-menubar__item" role="menuitem">Export</button>
</div>
</div>
<!-- repeat .fd-menubar__menu for Edit, View… -->
</div><div class="fd-menubar" data-fd-menubar>
<div class="fd-menubar__menu">
<button class="fd-menubar__trigger" data-fd-menubar-trigger aria-expanded="false">File</button>
<div class="fd-menubar__content" role="menu">…</div>
</div>
</div>fd-menubar // data-fd-menubar (one bar)
└── fd-menubar__menu × n // one top-level entry
├── fd-menubar__trigger // data-fd-menubar-trigger, aria-expanded
└── fd-menubar__content // role="menu"; revealed by .is-open
├── fd-menubar__item × n (optional fd-menubar__shortcut)
├── fd-menubar__item--check
└── fd-menubar__separator<!-- Add --compact for a tighter, denser bar --> <div class="fd-menubar fd-menubar--compact" data-fd-menubar> <div class="fd-menubar__menu">…</div> </div>
| Class / Hook | Description | Default |
|---|---|---|
data-fd-menubar | Marks the bar; enables click-open + hover-switch. | — |
.fd-menubar__menu | One top-level entry holding a trigger + content. | — |
data-fd-menubar-trigger | Top-level button; toggles its menu. | — |
.fd-menubar__content | The dropped menu; carries role="menu". | — |
.fd-menubar--compact | Tighter padding and type for dense bars. | — |
Present structured information — tables, cards, avatars, carousels, and space-management primitives.
A responsive technical table for tabular data — mono uppercase headers, hairline row rules, right-aligned numeric columns, and inline status badges.
| Glyph Set | Designer | Status | Weights | Licenses |
|---|---|---|---|---|
| Shikaku Grotesk BSF-001 |
H. Mercer | Shipped | 9 | 1,204 |
| Archivo Expanded BSF-014 |
O. Petrova | In Nature | 6 | 388 |
| Shikaku Mono BSF-027 |
L. Okafor | Review | 5 | 96 |
| Acid Display BSF-031 |
R. Vasquez | Halted | 2 | 0 |
<div class="fd-table-wrap">
<table class="fd-table">
<caption>f(x) → NATURE · TYPEFACE REGISTRY</caption>
<thead>
<tr>
<th scope="col">Glyph Set</th>
<th scope="col">Status</th>
<th scope="col" class="fd-table__num">Weights</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="fd-table__strong">Shikaku Grotesk</span></td>
<td><span class="fd-table__status fd-table__status--success">Shipped</span></td>
<td class="fd-table__num">9</td>
</tr>
</tbody>
</table>
</div><div class="fd-table-wrap"> <table class="fd-table"> … </table> </div>
fd-table-wrap // overflow + frame
└─ fd-table // <table>
├─ caption // mono uppercase title
├─ thead › th // mono header cell
│ └─ fd-table__num // right-aligned numeric header
└─ tbody › td
├─ fd-table__strong // primary identifier
├─ fd-table__id // mono secondary id
├─ fd-table__num // tabular numeric cell
└─ fd-table__status // inline status badge| Build | Channel | Size KB | Δ |
|---|---|---|---|
| v2.4.0 | stable | 42.8 | −1.2 |
| v2.5.0-rc | canary | 44.1 | +1.3 |
| v2.5.0-rc.2 | canary | 43.6 | −0.5 |
<table class="fd-table fd-table--bordered">
<thead>
<tr>
<th>Build</th>
<th class="fd-table__num">Size KB</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fd-table__id">v2.4.0</td>
<td class="fd-table__num">42.8</td>
</tr>
</tbody>
</table><span class="fd-table__status fd-table__status--success">Shipped</span> <span class="fd-table__status fd-table__status--accent">In Nature</span> <span class="fd-table__status fd-table__status--warning">Review</span> <span class="fd-table__status fd-table__status--error">Halted</span> <span class="fd-table__status">Draft</span>
| Class | Description | Default |
|---|---|---|
.fd-table-wrap | Overflow container with a hairline frame; wrap every table. | — |
.fd-table | Base table — mono headers, row hairlines, hover rows. | required |
.fd-table--bordered | Adds vertical cell rules for a full grid. | — |
.fd-table__strong | Primary identifier cell, full-strength foreground. | — |
.fd-table__id | Mono secondary identifier (codes, versions). | — |
.fd-table__num | Right-aligned tabular numeric column. | — |
.fd-table__status | Inline status badge with a leading dot. | neutral |
.fd-table__status--* | Variant: success, warning, error, accent. | — |
A full data grid: a toolbar with search and an action, sortable-looking column headers with sort glyphs, a status column, row selection, and hover affordances.
| Status | Δ KB | ||||
|---|---|---|---|---|---|
| v2.5.0-rc.2 | O. Petrova | Passed | 1m 04s | −0.5 | |
| v2.5.0-rc | H. Mercer | Running | 0m 51s | +1.3 | |
| v2.4.1 | L. Okafor | Queued | — | 0.0 | |
| v2.4.0 | R. Vasquez | Failed | 0m 38s | −1.2 |
<div class="fd-datatable">
<div class="fd-datatable__toolbar">
<div class="fd-datatable__search">
<span class="fd-datatable__search-icon"><svg>…</svg></span>
<input class="fd-datatable__input" type="search" placeholder="FILTER BUILDS…" />
</div>
<button class="fd-datatable__btn">New Build</button>
</div>
<div class="fd-table-wrap">
<table class="fd-table fd-table--data">
<thead><tr>
<th><button class="fd-table__sort is-asc">Build
<span class="fd-table__sort-glyph"></span></button></th>
<th>Status</th>
</tr></thead>
<tbody>
<tr class="is-selected">
<td><span class="fd-table__strong">v2.5.0-rc</span></td>
<td><span class="fd-table__status fd-table__status--accent">Running</span></td>
</tr>
</tbody>
</table>
</div>
</div><div class="fd-datatable"> <div class="fd-datatable__toolbar"> … </div> <table class="fd-table fd-table--data"> … </table> <div class="fd-datatable__footer"> … </div> </div>
<button class="fd-table__sort">Default <span class="fd-table__sort-glyph"></span></button> <button class="fd-table__sort is-asc">Ascending <span class="fd-table__sort-glyph"></span></button> <button class="fd-table__sort is-desc">Descending <span class="fd-table__sort-glyph"></span></button>
<div class="fd-datatable__toolbar">
<div class="fd-datatable__search">
<span class="fd-datatable__search-icon"><svg>…</svg></span>
<input class="fd-datatable__input" type="search" placeholder="FILTER GLYPHS…" />
</div>
<div class="fd-datatable__actions">
<span class="fd-datatable__count">128 ROWS</span>
<button class="fd-datatable__btn">Export</button>
</div>
</div>| Class | Description | Default |
|---|---|---|
.fd-datatable | Grid shell: toolbar + table + footer, framed. | — |
.fd-datatable__toolbar | Top bar holding the search field and actions. | — |
.fd-datatable__search | Search input with a leading magnifier icon. | — |
.fd-datatable__btn | Primary lime toolbar action button. | — |
.fd-table--data | Grid styling: tighter rows, sortable headers. | — |
.fd-table__sort | Header button rendering a sort glyph. | unsorted |
.is-asc / .is-desc | Active sort direction on a sort button. | — |
.fd-table__check | Narrow selection column for checkboxes. | — |
tr.is-selected | Highlighted selected row. | — |
.fd-datatable__footer | Bottom bar with selection meta + pagination. | — |
A bordered surface that groups related content into a header, body, and footer — with an optional crosshair-framed variant.
<div class="fd-card">
<div class="fd-card__header">
<div>
<span class="fd-card__eyebrow"><span class="fd-card__idx">001</span> TYPEFACE</span>
<h4 class="fd-card__title">Shikaku Grotesk</h4>
</div>
<span class="fd-card__header-aside">v2.5</span>
</div>
<div class="fd-card__body">A heavy display grotesque cut for headlines…</div>
<div class="fd-card__footer">
<span class="fd-card__meta">1,204 GLYPHS</span>
<button class="fd-surface-btn fd-surface-btn--primary">Install</button>
</div>
</div><div class="fd-card"> <div class="fd-card__header"> … </div> <div class="fd-card__body"> … </div> <div class="fd-card__footer"> … </div> </div>
fd-card ├─ fd-card__header │ ├─ fd-card__eyebrow › fd-card__idx │ ├─ fd-card__title │ └─ fd-card__header-aside ├─ fd-card__body └─ fd-card__footer ├─ fd-card__meta └─ fd-surface-btn
<div class="fd-frame fd-frame--crosshair fd-card fd-card--crosshair"> <span class="fd-crosshair fd-crosshair--tl"></span> <span class="fd-crosshair fd-crosshair--tr"></span> <span class="fd-crosshair fd-crosshair--bl"></span> <span class="fd-crosshair fd-crosshair--br"></span> <div class="fd-card__header"> … </div> <div class="fd-card__body"> … </div> <div class="fd-card__footer"> … </div> </div>
Owns the variable axis pipeline and ships the canary channel weekly.
<div class="fd-context-card">
<div class="fd-context-card__top">
<span class="fd-context-card__avatar">OP</span>
<div class="fd-context-card__id">
<span class="fd-context-card__name">Olga Petrova</span>
<span class="fd-context-card__meta">LEAD · TYPE</span>
</div>
</div>
<p class="fd-context-card__body">Owns the variable axis pipeline…</p>
<div class="fd-context-card__actions"> … </div>
</div>| Class | Description | Default |
|---|---|---|
.fd-card | Bordered surface; flex column, 360px max width. | — |
.fd-card__header | Top region — eyebrow, title, and aside. | — |
.fd-card__eyebrow | Mono uppercase label with an accent index. | — |
.fd-card__title | Display heading of the card. | — |
.fd-card__body | Main content region with relaxed leading. | — |
.fd-card__footer | Bottom region — meta + actions on a subtle bar. | — |
.fd-card--crosshair | Pairs with .fd-frame--crosshair for corner marks. | — |
.fd-context-card | Compact avatar + identity + actions card. | — |
An image or initials representing a user, with shape and size variants, a presence status dot, and an overlapping group stack.
<span class="fd-avatar fd-avatar--md" role="img" aria-label="Olga Petrova"> <span class="fd-avatar__fallback" aria-hidden="true">OP</span> <span class="fd-avatar__status fd-avatar__status--online"></span> </span>
<span class="fd-avatar fd-avatar--md" role="img" aria-label="Olga Petrova"> <span class="fd-avatar__fallback" aria-hidden="true">OP</span> </span>
<span class="fd-avatar fd-avatar--sm">…</span> <span class="fd-avatar fd-avatar--md">…</span> <span class="fd-avatar fd-avatar--lg">…</span> <span class="fd-avatar fd-avatar--md fd-avatar--square">…</span> <span class="fd-avatar fd-avatar--lg fd-avatar--square fd-avatar--accent">…</span>
<span class="fd-avatar fd-avatar--md"> <span class="fd-avatar__fallback">ON</span> <span class="fd-avatar__status fd-avatar__status--online"></span> </span> <!-- --busy · --away · (none = offline) -->
<div class="fd-avatar-group" role="group" aria-label="Type team, 5 members">
<span class="fd-avatar fd-avatar--md" role="img" aria-label="Hana Mercer">
<span class="fd-avatar__fallback" aria-hidden="true">HM</span>
</span>
<!-- … more avatars … -->
<span class="fd-avatar fd-avatar--md fd-avatar-group__more" aria-hidden="true">
<span class="fd-avatar__fallback">+8</span>
</span>
</div>| Class | Description | Default |
|---|---|---|
.fd-avatar | Base circular avatar with initials fallback. | — |
.fd-avatar--sm / md / lg | Size variants — 28 / 40 / 56px. | md |
.fd-avatar--square | Rounded-square instead of circle. | — |
.fd-avatar--accent | Lime fill for bot / system avatars. | — |
.fd-avatar__fallback | Initials shown when no image is set. | — |
.fd-avatar__status | Presence dot; --online / --busy / --away. | offline |
.fd-avatar-group | Overlapping stack; hover lifts a member. | — |
.fd-avatar-group__more | Overflow counter chip (e.g. +8). | — |
A horizontally sliding gallery with prev/next controls and optional dot pagination. Buttons disable at the track ends.
<div class="fd-carousel" data-fd-carousel aria-label="Glyph slides">
<div class="fd-carousel__viewport">
<div class="fd-carousel__track">
<div class="fd-carousel__slide">…</div>
<div class="fd-carousel__slide">…</div>
</div>
</div>
<button class="fd-carousel__btn fd-carousel__btn--prev"
data-fd-carousel-prev aria-label="Previous slide">…</button>
<button class="fd-carousel__btn fd-carousel__btn--next"
data-fd-carousel-next aria-label="Next slide">…</button>
<div class="fd-carousel__dots">
<button class="fd-carousel__dot is-active" data-fd-carousel-dot></button>
</div>
</div><div class="fd-carousel" data-fd-carousel>
<div class="fd-carousel__viewport">
<div class="fd-carousel__track"> …slides… </div>
</div>
<button data-fd-carousel-prev>…</button>
<button data-fd-carousel-next>…</button>
</div>fd-carousel [data-fd-carousel] ├─ fd-carousel__viewport // clips overflow │ └─ fd-carousel__track // translated by JS │ └─ fd-carousel__slide // one per slide ├─ fd-carousel__btn--prev [data-fd-carousel-prev] ├─ fd-carousel__btn--next [data-fd-carousel-next] └─ fd-carousel__dots └─ fd-carousel__dot [data-fd-carousel-dot]
<div class="fd-carousel fd-carousel--cards" data-fd-carousel>
<div class="fd-carousel__viewport">
<div class="fd-carousel__track">
<div class="fd-carousel__slide">
<span class="fd-carousel__meta">[01]</span>
<span class="fd-carousel__title">Variable Axis</span>
</div>
</div>
</div>
<button data-fd-carousel-prev>…</button>
<button data-fd-carousel-next>…</button>
</div>| Class | Description | Default |
|---|---|---|
.fd-carousel | Root; pair with [data-fd-carousel] for behavior. | — |
.fd-carousel__viewport | Clips the track to one slide width. | — |
.fd-carousel__track | Flex row translated by JS on navigation. | — |
.fd-carousel__slide | One full-width slide; flex none. | — |
.fd-carousel__btn--prev | Previous control; disables at the start. | — |
.fd-carousel__btn--next | Next control; disables at the end. | — |
.fd-carousel__dot | Pagination dot; .is-active tracks index. | — |
.fd-carousel--cards | Card-style slides without dots. | — |
Constrains content to a fixed width-to-height ratio via a --ratio custom property — for media, embeds, and placeholders.
<div class="fd-aspect" style="--ratio: 16/9">
<div class="fd-aspect__fill">
<span class="fd-aspect__label">16 : 9</span>
</div>
</div><div class="fd-aspect" style="--ratio: 16/9"> <img class="fd-aspect__fill" src="cover.webp" alt="Cover" /> </div>
<div class="fd-aspect" style="--ratio: 1/1">…</div> <div class="fd-aspect" style="--ratio: 4/3">…</div> <div class="fd-aspect" style="--ratio: 16/9">…</div>
| Class | Description | Default |
|---|---|---|
.fd-aspect | Ratio box; reads --ratio for aspect-ratio. | 16/9 |
--ratio | Custom property, e.g. 1/1, 4/3, 21/9. | 16/9 |
.fd-aspect__fill | Child that covers the box (img, iframe, div). | — |
.fd-aspect__label | Centered mono placeholder label. | — |
A framed, scrollable region with a thin custom scrollbar that keeps overflowing content contained without breaking the layout.
<div class="fd-scrollarea" tabindex="0" role="region" aria-label="Changelog">
<span class="fd-scrollarea__head">CHANGELOG</span>
<ul class="fd-scrollarea__list">
<li><span class="fd-scrollarea__ver">v2.5.0-rc.2</span> … </li>
</ul>
</div><div class="fd-scrollarea" tabindex="0" role="region" aria-label="Changelog"> … overflowing content … </div>
<div class="fd-scrollarea fd-scrollarea--x" tabindex="0"
role="region" aria-label="Weight axis">
<div class="fd-scrollarea__rail">
<span class="fd-scrollarea__chip">Thin 100</span> …
</div>
</div>| Class | Description | Default |
|---|---|---|
.fd-scrollarea | Framed scroll region with a thin scrollbar. | vertical |
.fd-scrollarea--x | Horizontal scrolling variant. | — |
.fd-scrollarea__head | Sticky mono label at the top of the region. | — |
.fd-scrollarea__rail | Horizontal flex row of items. | — |
tabindex="0" | Makes the region keyboard-scrollable. | required |
A two-pane layout where the first pane can be dragged wider or narrower via a native CSS resize handle.
Drag the handle →
This pane fills the remaining width.
<div class="fd-resizable">
<div class="fd-resizable__pane fd-resizable__pane--first">
<span class="fd-resizable__label">SIDEBAR</span>
<span class="fd-resizable__handle" aria-hidden="true"></span>
</div>
<div class="fd-resizable__pane">
<span class="fd-resizable__label">CANVAS</span>
</div>
</div><div class="fd-resizable"> <div class="fd-resizable__pane fd-resizable__pane--first"> … </div> <div class="fd-resizable__pane"> … </div> </div>
.fd-card { }
<div class="fd-resizable">
<div class="fd-resizable__pane fd-resizable__pane--first">
<code class="fd-resizable__code">.fd-card { }</code>
<span class="fd-resizable__handle"></span>
</div>
<div class="fd-resizable__pane fd-resizable__pane--center"> … </div>
</div>| Class | Description | Default |
|---|---|---|
.fd-resizable | Two-pane flex row with a hairline frame. | — |
.fd-resizable__pane | A single pane region. | — |
.fd-resizable__pane--first | Resizable pane — resize: horizontal. | — |
.fd-resizable__handle | Visible grip cue at the pane's edge. | — |
.fd-resizable__label | Mono uppercase pane label. | — |
A key/value metadata list rendered as a two-column grid of mono term labels and foreground values.
<dl class="fd-desc">
<div class="fd-desc__row"><dt>Version</dt><dd>2.5.0-rc.2</dd></div>
<div class="fd-desc__row">
<dt>License</dt>
<dd>SIL Open Font · <span class="fd-inline-code">OFL-1.1</span></dd>
</div>
</dl><dl class="fd-desc"> <div class="fd-desc__row"><dt>Key</dt><dd>Value</dd></div> </dl>
<dl class="fd-desc fd-desc--inline"> <div class="fd-desc__row"><dt>Designer</dt><dd>H. Mercer</dd></div> <div class="fd-desc__row"><dt>Footprint</dt><dd>43.6 KB woff2</dd></div> </dl>
| Class | Description | Default |
|---|---|---|
.fd-desc | Two-column key/value grid, framed. | — |
.fd-desc__row | Pairs a dt with its dd (display: contents). | — |
.fd-desc dt | Mono uppercase term on a subtle background. | — |
.fd-desc dd | Foreground value cell. | — |
.fd-desc--inline | Stacked single-column variant. | — |
[02] // Buttons & Actions
[03] // Forms & Inputs
[04] // Feedback & Status
[05] // Overlays
[06] // Navigation
[07] // Data Display
No components match.