Reference

Ink-fill, outline, secondary, ghost, link and destructive (✕ icon) buttons; 44px hit targets.

Form label in the Barlow 600 kicker style.

Label, control, description and error layout on Base UI Field and Fieldset; errors shown by a 2px ink rule and an ! icon.

Single-line text field as a 1px ink form line; invalid is a 2px rule; 44px high.

Multi-line text field with the 1px ink form line; invalid is a 2px rule.

One form line with a control plus text, icons or buttons either side, split by ink hairlines.

Filterable single or multiple select on Base UI Combobox; ink rules, tint-1 highlight with an ink rule, no shadow.

Keyboard key and shortcut chips: Barlow Condensed capitals in a 1px ink rule.

Native <select> with an ink border, chevron and 44px height; invalid is a 2px ink underline.

Select on Base UI: ink trigger, paper popup with a 1px rule, ink check on the chosen item; no shadow or radius.

One-time code entry on Base UI OTP Field: square 44px cells sharing 1px ink rules, Barlow Condensed figures.

Tick, untick or mixed choice on Base UI Checkbox; checked is an ink fill plus a check glyph.

Pick one option on Base UI RadioGroup and Radio; selected is an ink fill with a paper dot.

On/off setting on Base UI Switch; on is an ink track with a paper thumb, optional ON/OFF text.

Number or range input on Base UI Slider; hairline track, heavy ink range, square thumb.

Two-state button on Base UI Toggle; pressed shown by an ink fill and aria-pressed, never colour alone.

Segmented set of toggles on Base UI ToggleGroup, divided by shared 1px ink rules; pressed segments are ink fills.

Joins related buttons into one segmented control divided by shared 1px ink rules, with a text cell and separator.

Validated forms on Base UI Form and Field with react-hook-form and zod; errors shown by ink rules, icons and an error summary at the top on submit.

Ink rule on Base UI Separator: hair (1px) or heavy (3px), horizontal or vertical.

Collapsible on Base UI: 44px ink trigger, opacity-only panel, no hover effect.

Scroll area on Base UI: square ink thumb on a tint-1 track, focusable viewport.

Popover on Base UI: ink on paper, 1px ink rule, no shadow, radius or arrow.

Tooltip on Base UI: ink block, paper Barlow 12px, no arrow, shadow or radius; opens on focus.

Dialog on Base UI: paper popup, 1px ink rule and heavy top rule, 85% paper backdrop, focus trapped.

Sheet on Base UI Dialog: full-height paper panel from any side, 1px inner ink rule, focus trapped.

Semantic table in Barlow: heavy header rule, hairline rows, tabular right-aligned figures.

Alert dialog on Base UI: Dialog's paper and rules, no corner close, Action and Cancel are Buttons, focus trapped.

Drawer on Base UI: paper panel from any edge, heavy 3px ink rule as the handle, swipe to dismiss, focus trapped.

Hover card on Base UI PreviewCard: link trigger with the marker highlight, popover-style paper and 1px ink rule, opens on hover and focus.

Dropdown menu on Base UI Menu: paper popup, 1px ink rule, ink-fill highlight, hairline separators, checkbox, radio and submenu rows.

Context menu on Base UI ContextMenu: focusable area, opens at the pointer or from Shift+F10, ink-fill highlight, hairline separators.

Menubar on Base UI Menubar and Menu: heavy top rule and bottom hairline, ink-fill trigger when open, Dropdown Menu rows.

Toaster and toast() on Base UI Toast: paper and 1px ink rule at bottom-right, state by icon, rule or hatched band, never colour.

Tabs on Base UI: 3px ink rule on the selected tab, big ModeSwitcher variant, no hover.

Accordion on Base UI: hairline items, +/- glyph, opacity-only panel, no hover effect.

Navigation menu on Base UI: Barlow caps bar, heavy rule under the current page, flat ruled panel, no hover effect.

Breadcrumb trail: nav, ordered list, underlined ink links, middle-dot separators, no hover effect.

Pagination links: Barlow Condensed numerals, ink fill on the current page, 44px targets, no hover effect.

Aspect ratio box: CSS aspect-ratio, unstyled, no hover effect.

Resizable panels on react-resizable-panels: hairline handle with grip dots, 44px hit area, no hover effect.

Card with no box: heavy 3px top rule, serif content, hairline footer; header, title, description, action, content and footer parts.

Row for a record: media, title, description and actions, closed by an ink hairline; renders as a link with the render prop.

Empty state: ink hairline, tracked kicker, Playfair headline, serif sentence and an optional ink drawing or icon slot.

Command palette on Base UI Autocomplete (inline): type to filter, arrows to choose, Enter to run; CommandDialog for Ctrl+K.

Side navigation: hairline edge, heavy-rule active item, collapsible groups, icon rail with tooltips and a sheet on small screens.

Month grid on react-day-picker: hairline weeks, ink-fill selection, heavy-rule today, Barlow Condensed numerals, 44px days.

Date field on Calendar and Popover: a ruled trigger opens a square, flat calendar; Esc returns focus to the trigger.

Table with sortable headers (aria-sort, ink glyphs), a column filter, a columns popover and paging, on TanStack Table and the Eloquent table.

Slides on Embla: ruled slides, numbered Barlow Condensed controls, labelled previous and next, jumps under reduced motion.

Charts on Recharts in ink: series told apart by pattern, dash and label; one labelled image with a data table alternative; no animation under reduced motion.

Square status label in Barlow Condensed capitals: ink fill, tint, outline or 2px destructive outline with a cross.

Square avatar on Base UI Avatar: hairline frame, greyscale image, initials fallback from props.

Alert panel with a state per variant: tint-1 info, check success, hatched tint-2 warning, 2px ink rule error.

Progress bar on Base UI Progress: hairline track, ink fill, value text in Barlow Condensed.

Meter on Base UI Meter: same hairline track and ink fill as Progress, for a value in a known range.

tint-1 placeholder block that pulses only when motion is allowed.

Ink square outline that turns while loading; labelled status, still under reduced motion.

Brand text elements: two-voice headline, kicker, lede, body, drop cap, pull-quote, figure and meta.

tracked-capitals label with an optional leading ink rule.

two-voice headline (roman lead, italic tail) in four sizes; the marker highlight shows only when it is a link.

middle-dot separated stack line in Barlow.

greyscale illustration frame (multiply blend) in 9:16, 16:9, 3:4 or 1:1, with required alt text.

tint-1 figure tile (Barlow Condensed figure, unit, caption) and StatRow, a row of exactly three.

EN · VI switch; the current locale in ink 700, the other a real link that keeps the hash and ?mode. No flags.

name · title · city between two ink hairlines, with the language switch.

three lines, Problem. / Built. / Result., with a bold sans lead word and serif text.

kicker, headline, lede and stack under a heavy rule, with an optional 96px 9:16 ink thumbnail.

kicker, two-voice headline and a 16:9 ink scene, for slide titles and social images.

a 390 × 844 no-scroll screen with four contact buttons, two tiles and a black footer.

a non-modal bottom bar that offers the other language once, written in that language.

a tint-2 band asking what brings you to the paper, with two large tabs (solid ink when selected) synced to the URL hash; controlled or uncontrolled.

the press band with a classifieds kicker, a two-voice Playfair headline and an outlined on-press mailto button.

Get in touch with labelled contact rows, a QR slot and an Email me button; variant=band is the press-black contact band for the CV.

Brand block: front-page link, kicker, headline, standfirst and byline, body column, At a glance aside, pull quote and Keep reading.

Block: the nameplate, folio line with the language switch, and the section nav.

Block: the one inverse block, with contact, Download CV, a LinkedIn QR code slot, the language switch and Back to top.

Block: three tabs (I Leverage, II Habit, III Delivery), each with a Playfair quote, body text, a 3:4 ink panel and a signature.

Block: the brief form (name, company, email, brief, four-way project size) with an error summary, inline success and error messages and an onSubmit prop; no network call.

Block: an A4 page shell (210 by 297mm, 44 to 52px margins, main column plus a 210 to 228px side column), a named @page rule for print and a page-break helper. Pure layout.