Skip to content

DESIGN.md

Latest commit

 

History

History
45 lines (33 loc) · 2.69 KB

DESIGN.md

File metadata and controls

45 lines (33 loc) · 2.69 KB

DESIGN.md - regulus

Direction: precision instrument. Cool near-black neutrals, one warm gold accent for intent/state, numerals treated as the typographic subject. Color strategy: Restrained (tinted neutrals + a single accent under ~10% of the surface).

Color (OKLCH, neutrals tinted toward 265 blue-violet)

Role OKLCH Use
--bg oklch(0.165 0.012 265) page base
--surface oklch(0.205 0.014 265) panes
--surface-2 oklch(0.245 0.016 265) row hover, raised
--line oklch(0.30 0.016 265) borders, dividers
--line-soft oklch(0.255 0.014 265) row separators
--text oklch(0.93 0.006 265) primary
--muted oklch(0.63 0.012 265) labels, secondary
--faint oklch(0.48 0.012 265) placeholders, hints
--gold oklch(0.80 0.125 85) accent: selection, focus, the move
--gold-dim oklch(0.70 0.09 85) gold on hover/borders
--gold-wash oklch(0.80 0.125 85 / 0.10) selected-row tint, focus halo

No #000/#fff. Gold appears only on: the right-pane accent edge marker (a leading dot/tick, not a side-stripe border), focus rings, the active drag row, and the primary action affordance. Everything else is neutral.

Typography

  • UI sans: Inter, system-ui, sans-serif.
  • Numerals (the ids): ui-monospace, "SF Mono", "JetBrains Mono", monospace, font-variant-numeric: tabular-nums, slightly tightened. Ids are the content; mono + tabular makes them scan as aligned data.
  • Scale (≥1.25 steps): title clamp(22px, 3.2vw, 30px) / 600 / tracking -0.02em; pane label 11px / 600 / uppercase / tracking 0.14em / muted; id 13px mono; meta/footer 12px.

Layout

  • Two panes, equal columns, gap 20px; stack under 760px.
  • Pane: surface, 1px --line, radius 14px, internal padding 14px, header row + tools + list.
  • Rows: 34px, full-width separators --line-soft (no side stripes), hover lifts to --surface-2.
  • A thin count meta under each pane header (e.g. "selected · 5", "scanned" hint) so state is legible.

Motion

  • Curve: cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo-ish), 180-240ms.
  • Select/deselect: row fades + slides 6px as it leaves; gold focus ring fades in on inputs.
  • Drag: active row gets --gold border + --surface-2, others ease to place. No layout-property animation (transform/opacity only).
  • prefers-reduced-motion: drop transitions.

The one flourish

Title sets "regulus" in the gold accent with a hairline star tick, followed by a quiet monospace subtitle stating the scale ("1,000,000 ids · selected state lives on the server"). Footer credits the author in muted text with the gold star mark linking to selim.services. Restraint everywhere else.