The component gallery.
The component set is being rebuilt from scratch — gok-button
is the first. Each component reads only design tokens, so flip the theme above and it
re-resolves from one attribute. As components land, register each in
src/all.ts and add a
<section> block here.
Actions, in two weights of emphasis
Primary for the main action, secondary for the supporting one. For navigation, use a
native <a> — a button is for actions.
Navigation, the accent earned once
For navigation, not actions. A native <a> in the gok link colour,
underlined so it reads beyond colour, with the one focus ring.
The set is built on a token layer, so a
Binary choices, the accent spent on “on”
A filled box marks the checked state — forest green with the mark reversed out — so a set reads at a glance. The box size never changes; only the fill, border, and ring do.
Instant on/off, the accent spent on "on"
For a setting that takes effect immediately. On fills the track forest green and slides the thumb to the end; off is neutral. The thumb position carries the state beyond colour, and the track size never changes. For a staged form choice, use a checkbox.
One of many, selection following focus
A mutually-exclusive choice. The group is one Tab stop; the arrow keys move between options and select as they go (Home/End jump to the ends, disabled options are skipped). The dot is monochrome at rest and spends the one accent on the selected option.
A connected single-select switch
A compact one-of-many switch for a view, mode, or density — modelled as a horizontal radio group. The segments merge on one hairline rule with flat inner corners; the selected segment carries the one accent. Arrow keys move and select; disabled segments are skipped. For a form-submitted choice use radio; for panels use tabs.
Panels, the selected tab on an accent rule
A tabbed interface — one tablist, one panel shown at a time. The group is one Tab stop; arrow keys move along the tablist and (by default) reveal as they go, Home/End jump to the ends, disabled tabs are skipped. The selected tab is marked by the one accent rule on the edge it shares with the tablist; the visible panel is reachable by keyboard.
A field that stays quiet until you reach for it
The workhorse text field: a hairline frame on the paper surface, ring-led focus — the offset ring does the work while the border holds neutral. The box never resizes; a reserved message line means an error swaps in without shifting the row.
reserve-message keeps the rows from shifting
A flat surface that groups content
Hairline frame, 12px corner, generous inset — structure from a rule and space, never a
shadow. Three surface treatments (outlined, filled, ruled); an interactive card stretches
a real link over the whole surface and lights its focus ring via
:focus-within.
Orchard rebrand
A monochrome identity for a regional cider maker — one earned green, set in Geist.
On restraint
Why the quietest option is usually the right one.
v0.2 — components
Badge, input, and card join the system.
Orchard
A short line of body copy.
Meridian
A longer line of body copy that wraps onto a second line to prove the cards still align top and bottom.
Field notes
A short line of body copy.
v0.2 — components
Tab to it: the focus ring lights the whole card. Hover firms the border.
A status message that asks to be read
A neutral filled surface carrying a leading icon and an inline-start status bar — status by a bar, icon, and text, never a saturated fill (Axis 6). Optional title, action slot, and a neutral dismiss. A live region: warning and error announce assertively, the rest politely.
A notice that interrupts for a moment, then leaves
A transient, auto-dismissing status notification that floats on a shadow — the one earned
elevation — carrying a leading icon, a 2px inline-start status rule, and a depleting hairline
countdown along the bottom edge. Status by a rule, icon, and text, never a fill (Axis 6). The
countdown pauses on hover and focus, so it's never timed out while being read. Usually fired
imperatively with the toaster helper, which docks toasts in a corner region.
Disclosure, structured by rules and space
A vertical set of disclosure sections — each a header that expands a panel. Structure is
carried by hairline rules and space alone (no boxes, no fill); the accent stays unspent (the
open state reads from the rotated chevron and full-ink title). Exclusive by default; set
multiple to allow several open at once. The header is a structural toggle —
padding-sized, not a control height.
Invoices are issued on the first of each month and charged to your default card. Download any past invoice from the billing history.
Choose which events reach you by email and which stay in-app. Changes apply to every project you own.
Export your records as CSV or JSON. Large exports run in the background and arrive by email when they're ready.
Invite members and set their role.
Per active project, charged monthly. Paused projects don't count toward the total.
Yes — up or down at any time. The change is prorated to the day.
Within 14 days of a charge, no questions asked.
A trail back up the tree
Sentence-case Geist links joined by hairline chevron separators (decorative), the current
page in full ink at a medium weight with aria-current="page". The accent is the
link role itself — never a fill. It sits at the top of a page, above the heading.
Across pages of a collection
Ghost page numbers sharing the control height, the current page marked by a 2px accent underline (not a fill) — the accent spent once. Long ranges truncate with an ellipsis; prev/next disable at the bounds. Roving focus (one Tab stop, arrow keys move). Sizes s/m/l read the control-height tiers, so the bar aligns with inputs and selects on a row.
Status, shrunk to a label
A small inline status mark — a near-neutral chip whose meaning is carried by a 2px
inline-start rule and a mono uppercase label, never by colour alone, never a fill
(Axis 6). Display-only; variants neutral · info · success · warning · error, sizes
s · m. For an interactive or removable chip use gok-tag; for a
block-level message, gok-alert.
Deploy finished
A line and some space, nothing more
A thin neutral rule that separates content — structure from a hairline and whitespace,
never a box, and strictly neutral (no accent). A strong 4px weight opens a
major division; an optional mono-eyebrow label makes a section or “or” separator; a
vertical rule groups controls on a row, stretching to their height.
A compact label you can act on
A hairline pill chip for filters, selected tokens, and keywords. Monochrome at rest;
the one earned accent appears only on the selected “on” state. Optionally
removable (a real button that emits remove) or
selectable (a toggle carrying aria-pressed); sizes s · m.
remove
A quiet ring while you wait
An indeterminate loader — a neutral hairline track with the one earned accent on a
single sweeping arc, turning once, calmly. Sizes s · m · l; carries
role="status" and an accessible-label; the spin stops under
reduced motion.
One curated line, inherited colour
A small, on-brand glyph set drawn from Geist — a thin, even hairline
line. Pass a name or slot your own <svg>; the glyph
inherits currentColor and is sized from --gok-size-icon-*
(s · m · l → 16 · 20 · 24). Decorative by default; give it a label to
announce it. Every component glyph — the checks, the close ×, the chevron, the status
quartet — is this one element.
A determinate bar, read like a ledger
An ultra-thin neutral track with the one earned accent on the fill, a mono uppercase
label and a tabular readout above it. On complete the fill shifts to the
success role with a mark — never a saturated banner, never colour alone. Sizes s · m;
role="progressbar" with full aria values.
3 of 4
A placeholder that holds the shape
A strictly monochrome loading placeholder with a quiet shimmer sweep. Shapes
text · block · circle; a lines count
for multi-line text. Decorative (aria-hidden) — the loading announcement
lives on the consumer’s region; the sweep freezes under reduced motion.
A label that appears on demand
A transient hint revealed on hover or keyboard focus and dismissed on leave, blur, or
Escape (the WAI-ARIA tooltip pattern). An anchored overlay — flat surface,
hairline, shadow-2 because it floats, and an arrow that points without spending colour.
It positions itself with flip/shift and renders in the top layer. Wrap a focusable
trigger; put the hint in the content slot.
A surface that opens on demand
A generic anchored, non-modal surface: a click-opened floating panel holding interactive
content (text, links, buttons, a small form), anchored to a trigger. An overlay in the
same family as the tooltip — flat surface, hairline, shadow-2 because it floats — but
radius-l for the surface corner, connected to its trigger by proximity (no arrow by
default). It positions itself with flip/shift, renders in the top layer, and dismisses on
outside-click or Escape, returning focus to the trigger. Wrap a focusable
trigger; put the body in the content slot and an optional title in
heading.
Anyone with the link can view the result. Edits stay private until you sync.
Anchored above the trigger.
Anchored below the trigger.
Anchored to the start side.
Anchored to the end side.
tip) — continuous with the tooltip
Finished 3 minutes ago. 12 files changed; all checks passed.
A dropdown of commands
A menu button (the WAI-ARIA menu pattern): a trigger opens an anchored list of commands in
the overlay family. Quiet typographic rows; the focused row swaps to a neutral wash, and
the one accent is spent only on a checked option's mark. Arrow keys rove (Home/End jump,
disabled items skip), type to jump, Enter or click runs an item, Escape closes and returns
focus to the trigger. checkbox/radio items toggle; a destructive
item reads in the error role. Put the button in the trigger slot and the
gok-menu-items in the default slot.
A value picker, bound to a form
A custom single-select: a field in the input family (hairline frame, ring-led focus, sizes
s/m/l, a reserved message line) that opens an anchored listbox in the menu family. It
submits, validates, and resets in a form. The selected option carries a trailing accent
check; the focused option a neutral wash. Click or focus and press ↓ to open; arrows rove,
type to jump, Enter or click commits, Escape cancels — focus returns to the field. A
required select shows its error only after you've interacted, and clears it on
choosing. Put gok-options in the default slot.
A modal surface for one focused task
A centred panel that interrupts the page — a confirm, a short form, a consequential
summary — dimming the rest with a scrim and trapping focus until you act. The promoted
monospace-ledger chrome is the identity: a mono uppercase action line with an optional
scale, over a slotted body (a key/value ledger, a form, or prose) and a
footer action row, the accent spent once on the primary. It renders in the
top layer, traps focus, makes the background inert, and returns focus to the
trigger on close. Escape and a scrim click dismiss (and fire a cancelable
gok-cancel); tone="danger" turns the action line to the error
role; no-dismiss makes it a forced decision.
The current build replaces the live site.
This can't be undone. Exports already downloaded are unaffected.
Accept the updated terms to continue. There's no close button — pick an action.