Home
DESIGN.mdStar on GitHub

Build, test & document components

The frontend workshop for UI development — build components in isolation, then document and test every state.

Signature — Story explorer & Controls
Design System
🔍 Find components…
100%
NameControl
Pick a story in the sidebar → it renders isolated in the canvas. Edit any Control (variant, size, label, boolean) and the story re-renders live.
Colors
Brand
coral#FF4785Brand, primary, active
blue#1EA7FDLinks, focus
seafoam#37D5D3Accent
purple#6F2CACDecorative
Status
positive#66BF3CSuccess
warning#FDA700Pending
negative#FF4400Error
medium#73828CMuted text
Surfaces
canvas#FFFFFFStory canvas
panel#F6F9FCSidebar, addons
border#D9E0E6Hairlines
ink#2E3438Text
Typography — Nunito Sans
display
Nunito Sans · 900
Component-driven UI
50px900
heading
Nunito Sans · 800
Build in isolation
22px800
body
Nunito Sans · 400
Document every state of every component, then test it.
15px400
mono
JetBrains Mono
args: { variant: 'primary', size: 'large' }
13pxmono
Components
Button
Badge
positive warning negative
Guardrails
DO
Keep the book mark coral #FF4785 (fixed); let the wordmark adapt to the theme.
Use Nunito Sans for all UI text — its roundness is the brand.
Keep the chrome neutral so the component in the canvas is the focus.
Coral for brand/primary/active, blue for links/focus — don't cross them.
Show arg names and values in mono in the Controls table.
DON'T
Don't recolor the coral mark or use coral for informational states.
Don't set the UI in a sharp grotesque — Nunito Sans's warmth is intentional.
Don't clutter the canvas with chrome; the story is isolated on purpose.
Don't exceed one accent + link + status set in a single view.
Don't put body/UI copy in the mono face — mono is for arg names & code.