Orchard Design system v1.0

The system behind the screens

Built on Untitled UI’s foundations and tuned for a reporting portal. Every value below is a token with a Tailwind name, so a developer can build any screen without asking what a spacing or a colour is.

01 · Colour

Primitives

Two full scales do nearly all the work: a neutral gray and one brand purple. Status colours are used only for meaning, and never on their own.

{{ sc.name }} {{ sc.tw }}
{{ st.k }}{{ st.hex }}

Semantic tokens

Components reference these names, never raw hex. Changing a primitive re-themes the product.

TokenTailwind classMaps toUsed for
{{ t.name }} {{ t.tw }} {{ t.ref }} {{ t.use }}
02 · Charts & colour blindness

Never colour alone

Every chart carries a second signal: lightness, line style, shape, position or a label. Below, the same components under four simulated types of colour vision.

{{ r.t }}{{ r.d }}
14.6% 3.4% LinkedIn Ads Google Ads
{{ v.name }} {{ v.note }}
Chart tokens
{{ c.name }}{{ c.use }}
Trend badges show better or worse, not up or down
5.6%Cost per lead fell: good, so success colour 3.4%Revenue fell: bad, so error colour 8.2%Spend rose: a budget choice, so neutral The arrow always shows direction and every badge has an aria-label like “Down 5.6%, an improvement”.
03 · Type

Inter, seven sizes

Numbers use tabular figures (tabular-nums) so columns and KPIs line up.

{{ t.tw }}{{ t.spec }}
{{ t.sample }} {{ t.use }}
04 · Spacing, radius, shadow

A 4px grid, straight from Tailwind

Spacing uses Tailwind’s default keys, so p-6 in code is 24px in the design. Layouts use flex or grid with gap, the same as auto layout.

{{ s.k }}{{ s.px }}{{ s.use }}
Radius
{{ r.k }}{{ r.use }}
Shadow
{{ s.k }}{{ s.use }}
05 · Components

Variants used in the prototype

Each component lists its props. Anything not shown here doesn’t exist in the product yet.

Buttonhierarchy · size · iconLeading · disabled
sm · 36md · 40lg · 44disabled
{{ b.name }}
Inputstate · iconLeading · hint
Badge & controlscolor · dot · size
Active Paused Ended Brand Error · md
On Off Checkbox Radio
30 days90 days12 months
Button group · the selected segment uses bg-secondary, never colour alone.
Metric cardstate: default · selected · empty · trend: good · bad · neutral
Default · Cost per lead
$40.895.6%
Selected · Revenue won
$186K3.4%
Empty · Leads
—Waiting for data
Tableheader · row (default, hover) · sortable column · totals row · empty
CampaignStatus↓ SpendLeads
CFO Demo Offer — Q3Default rowActive$9,840186
Month-End Close GuideHover row · bg-secondaryPaused$7,420241
Total · 2 campaigns$17,260427
06 · Tailwind config

Tokens as code

Generated from the same values used on this page. Spacing is Tailwind’s default scale, so it isn’t overridden.

tailwind.config.js
{{ tailwindCode }}