Verge

Verge is the visual language of the Koder Design System — the closed token map (color, shape, space, shadow, typography) every Koder UI consumes. v0 mirrors GNOME Adwaita 1:1; divergence is incremental, driven by product owner feedback on rendered widgets.

Verge spec (verge.kmd) → · Live preset preview →

Color

TokenLightDarkUse
--accent#3584E4inherits lightPrimary action color (buttons, focus rings, links)
--accent-strong#1c71d8inherits lightHover state of accent
--accent-on#FFFFFFinherits lightText/icon color on top of accent surfaces
--bg#FAFAFA#242424Page canvas — the lowest surface in the elevation stack
--surface#FFFFFF#303030Card / form / panel surface (1 step above canvas)
--surface-2—#424242Nested / elevated surface (2 steps above canvas)
--on-surface#2e3436#FFFFFFBody text and primary glyphs on surfaces
--label-color#5e6772#ccccccSecondary text — labels, helpers, captions
--btn-secondary-bg—#3a3a3aBackground of secondary buttons (dark mode)
--btn-secondary-fg—#FFFFFFText color of secondary buttons (dark mode)
--btn-secondary-hover—#4a4a4aBackground of secondary buttons on hover (dark mode)

Shape & border

TokenLightDarkUse
--radius-sm4pxinherits lightSmall radius — chip, badge, tag corners
--radius-md6pxinherits lightMedium radius — input, card, panel corners
--radius-lg8pxinherits lightLarge radius — dialog, sheet, drawer corners
--radius-btn6pxinherits lightButton corner radius (Verge owner decision: minimally rounded squares)
--input-border1px solid #c0c0c01px solid #1b1b1bInput and field border stroke
--btn-secondary-border1px solid #c0c0c01px solid #1b1b1bSecondary button border stroke

Spacing & padding

TokenLightDarkUse
--pad-y8pxinherits lightVertical padding inside inputs and buttons
--pad-x12pxinherits lightHorizontal padding inside inputs and buttons
--gap-field10pxinherits lightGap between adjacent fields in a form
--gap-title14pxinherits lightGap between a title and its content
--pad-form18pxinherits lightInternal padding of a form card

Elevation & shadow

TokenLightDarkUse
--shadow-form0 0 0 1px rgba(0,0,0,0.1)0 0 0 1px rgba(0,0,0,0.5)Drop shadow / outline of a form card

Font stack

TokenLightDarkUse
--fontAa'Cabin', 'Cantarell', 'Inter', sans-serifinherits lightBody font stack — Cabin / Cantarell / Inter fallbacks

Density modes

Three canonical page-level densities scale Verge spacing and component minimums uniformly. Compact = −20%, Comfortable = +20%. Try the live cascade below — the three columns scope their own data-density to show the same button trio at each rhythm.

Compact

Default

Comfortable

specs/themes/density.kmd

How divergence works

Verge starts as GNOME Adwaita 1:1; tokens diverge gradually as Koder products evolve. The flow:

  1. Owner renders a form or widget with current Verge tokens in a Koder product
  2. Owner visually evaluates and identifies what should change ("that button is too wide", "input border looks too thin")
  3. AI maps the request to the correct token (`--accent`, `--radius-btn`, `--pad-y`, etc.) and updates `tools/design-gen/assets/css/presets.css` + `specs/themes/verge.kmd` §R4
  4. When several divergences accumulate, a Verge v(N+1) release is cut — changelog and migration guide ship alongside