H1text-title-h1
- Weight
- Medium 500
- Size
- 20px
- Line
- 28px
- Tracking
- -1%
The quick brown fox jumps over the lazy dog.
Product 5 — component system
Product 5 design system
A precise component system where colour only ever means something.
The system rests on a warm-neutral spine — Inter for type, Tabler for icons, the full shadcn set on Base UI — and spends colour only where it carries meaning: the nine state-roles that mark status, and the brand orange on exactly two objects.
This page is the rendered form of docs/design-system.md — the foundations below follow that document section by section.
58 components9 state-roles22 type stylesLight + dark
01Brand
Product 5 identity
The mark — the crown
A white crown on the glossy orange tile — the same square that opens the marketing header and the sign-in screen. Clear space ≥ the tile's height on every side. Never re-colour the tile, and never set the crown on a bare canvas.
The lockup — UniformProduct 5
Product 5Tile plus the wordmark in one weight, all ink. The tile carries the only colour — the wordmark is never orange.
The brand colour
- token
- --brand
- hex
- #F97316
One colour, calmer on dark (#D67137) so it does not glare against the near-black canvas. It appears on exactly two objects — this mark and the primary button. Red is not part of the identity: the red in this system is --signal, reserved for the danger zone, and the error state-role. Brand is not danger.
The principle
Neutral by default.
The system rests on a calm, warm-neutral spine — type, surface, hairline. Colour is never decoration: it appears only as signal — the nine state-roles that mark status, and the brand orange that lives on exactly two objects, the mark and the primary button. If the vivid fills stop being rare, they stop being signal.
02Type
The type scale
Title
Display & headings · 6 stylesH2text-title-h2
- Weight
- Medium 500
- Size
- 16px
- Line
- 24px
- Tracking
- -1%
The quick brown fox jumps over the lazy dog.
H3text-title-h3
- Weight
- Medium 500
- Size
- 14px
- Line
- 20px
- Tracking
- -1%
The quick brown fox jumps over the lazy dog.
H4text-title-h4
- Weight
- Medium 500
- Size
- 12px
- Line
- 16px
- Tracking
- -0.5%
The quick brown fox jumps over the lazy dog.
H5text-title-h5
- Weight
- Medium 500
- Size
- 10px
- Line
- 14px
- Tracking
- 0%
The quick brown fox jumps over the lazy dog.
H6text-title-h6
- Weight
- Medium 500
- Size
- 20px
- Line
- 28px
- Tracking
- 0%
The quick brown fox jumps over the lazy dog.
Label
Interface labels · 5 stylesX-Largetext-label-xl
- Weight
- Medium 500
- Size
- 24px
- Line
- 32px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
Largetext-label-lg
- Weight
- Medium 500
- Size
- 18px
- Line
- 24px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
Mediumtext-label-md
- Weight
- Medium 500
- Size
- 16px
- Line
- 24px
- Tracking
- -1.1%
The quick brown fox jumps over the lazy dog.
Smalltext-label-sm
- Weight
- Medium 500
- Size
- 14px
- Line
- 20px
- Tracking
- -0.6%
The quick brown fox jumps over the lazy dog.
X-Smalltext-label-xs
- Weight
- Medium 500
- Size
- 12px
- Line
- 16px
- Tracking
- 0%
The quick brown fox jumps over the lazy dog.
Paragraph
Body copy · 5 stylesX-Largetext-paragraph-xl
- Weight
- Regular 400
- Size
- 24px
- Line
- 32px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
Largetext-paragraph-lg
- Weight
- Regular 400
- Size
- 18px
- Line
- 24px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
Mediumtext-paragraph-md
- Weight
- Regular 400
- Size
- 16px
- Line
- 24px
- Tracking
- -1.1%
The quick brown fox jumps over the lazy dog.
Smalltext-paragraph-sm
- Weight
- Regular 400
- Size
- 14px
- Line
- 20px
- Tracking
- -0.6%
The quick brown fox jumps over the lazy dog.
X-Smalltext-paragraph-xs
- Weight
- Regular 400
- Size
- 12px
- Line
- 16px
- Tracking
- 0%
The quick brown fox jumps over the lazy dog.
Subheading
Eyebrows & overlines · 4 stylesMediumtext-subheading-md
- Weight
- Medium 500
- Size
- 16px
- Line
- 24px
- Tracking
- 6%
The quick brown fox jumps over the lazy dog.
Smalltext-subheading-sm
- Weight
- Medium 500
- Size
- 14px
- Line
- 20px
- Tracking
- 6%
The quick brown fox jumps over the lazy dog.
X-Smalltext-subheading-xs
- Weight
- Medium 500
- Size
- 12px
- Line
- 16px
- Tracking
- 4%
The quick brown fox jumps over the lazy dog.
2X-Smalltext-subheading-2xs
- Weight
- Medium 500
- Size
- 11px
- Line
- 12px
- Tracking
- 2%
The quick brown fox jumps over the lazy dog.
Doc
Long-form reading · 2 stylesLabeltext-doc-label
- Weight
- Medium 500
- Size
- 18px
- Line
- 32px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
Paragraphtext-doc-paragraph
- Weight
- Regular 400
- Size
- 18px
- Line
- 32px
- Tracking
- -1.5%
The quick brown fox jumps over the lazy dog.
03Hierarchy
Which token goes on which heading
Which token where
8 roles · used on every pagePage titletext-title-h1
Contacts
Standalone / auth headingtext-title-h1
Create your workspace
KPI / hero numbertext-title-h1 tabular-nums
48,250
Card / section titletext-title-h2
Pipeline health
Minor / sub-section headingtext-title-h3
Custom fields
Eyebrow / overlinetext-subheading-xs uppercase
Recent activity
Body, labels, field valuestext-label-sm · text-paragraph-sm
Owner — Northwind Traders, closing this quarter.
Meta, captions, timestampstext-label-xs · text-paragraph-xs
Updated 2 hours ago
The numbers rule
No number exceeds 20px. There is deliberately no display tier — a KPI is set in the same text-title-h1 as a page title. Hierarchy among numbers comes from weight, colour, position and the card around them, never from size. Numbers always carry tabular-nums so columns of figures line up.
One intentional variant: the dashboard greets you at text-title-h2 (16px) with a text-paragraph-sm subtitle, instead of a formal 20px page title.
04Colour
Tokens, accents & state-roles
Neutral spine
Warm-neutral oklch · 12 tokens--background
--foreground
--card
--popover
--primary
--secondary
--muted
--muted-foreground
--accent
--border
--ring
--destructive
Accents
Brand · chart · dangerBrand orange--brand · #F97316
The logo tile and the primary button. Nowhere else — the vivid fill lives on exactly those two objects.
Clay--clay · --clay-deep
The chart accent — line and series colour, and the fill of the progress bar inside a StatCard.
Signal--signal
The danger red, reserved for the workspace danger zone and destructive confirmations. Never decoration — which is why this swatch is grey.
The information role (#335CFF) is our blue and is used sparingly — it is deliberately not the global accent. The reference system this palette descends from leads with blue; we do not.
State roles
9 roles · 4 steps eachinformationLabel
dark
base
light
lighter
warningLabel
dark
base
light
lighter
errorLabel
dark
base
light
lighter
successLabel
dark
base
light
lighter
awayLabel
dark
base
light
lighter
featureLabel
dark
base
light
lighter
verifiedLabel
dark
base
light
lighter
highlightedLabel
dark
base
light
lighter
stableLabel
dark
base
light
lighter
dark · base · light · lighter — text/icon · solid fill · hairline · tint. Neutral by default; colour only ever as signal.
Direction is never colour-only
12%4%0%
Every green or red is paired with an icon and a label, so a reader who cannot separate the two hues still reads the direction. Arrow and tone are independent — a shorter sales cycle is a down arrow with a success tone.
No gradients — two exceptions
AI-native surfaces may use gradient, glow and animated colour — the flourish marks the boundary between the deterministic CRM and the probabilistic thing beside it. Keep it in a box: a contained card on the ordinary canvas, never a full-bleed band, and still honouring reduced motion.
The glossy button family is the other: a solid fill, an inset white top-highlight and top-glow, and a same-colour 1px edge ring — flat on the canvas, no elevation. Everything else uses solid fills.
05Surfaces
Canvas, cards & icon tiles
Canvas & card
Grey canvas · white cardPipeline health
Loose content — tables, lists, forms — always sits inside a card so it separates from the canvas.
48,250open value
- Canvas
- bg-muted/40 — the page never sits on white
- Card
- bg-card · ring-1 ring-foreground/10 · shadow-xs
- Radius
- rounded-xl (--radius 0.45rem base)
- Rhythm
- p-6 page padding · gap-4 between cards
- Title
- text-title-h2 + a leading IconTile size="sm"
Icon tiles
2 sizes · 10 tintsSizes
default · chips
sm · card titles
The default tile is the glossy grey one — a muted fill, a white top-highlight, a soft bottom inner-shadow and a hairline ring, flat on the canvas. Never hand-roll an icon chip, and never drop a bare glyph on a card title.
On a coloured surface
tint="paper" — white fill, near-black glyph
A tinted tile is lighter fill + dark glyph — the pairing badges use, so it holds in both themes. Tinted tiles drop the glossy grey treatment: its highlight and hairline muddy a coloured fill.
tint="neutral"Everyday furniture
tint="information"Contacts
tint="feature"Deals
tint="success"Activities & audit
tint="away"Custom fields
tint="warning"Process
tint="verified"Dashboard
tint="highlighted"Assistant
tint="stable"Workspaces
tint="error"Failure states
Use a tint when the tile is labelling a subject — a feature card, a capability, an activity kind. Keep neutral for the everyday furniture, or the colour stops meaning anything. A reader who scrolls past the same hue twice should be seeing the same subject twice.
The icon rule
Tabler only — the same import works in server and client components, so there is no second icon set and no SSR subpath to reach for. No emoji, anywhere. Section and card titles take a leading tile; other inline glyphs stay a plain muted size-4 Tabler icon. Colour is never the only signal — every tinted tile still carries its glyph and a text label.
06System
Radius, elevation & the hairline
Radius
--radius 7 stepsrounded-sm--radius-sm
rounded-md--radius-md
rounded-lg--radius-lg
rounded-xl--radius-xl
rounded-2xl--radius-2xl
rounded-3xl--radius-3xl
rounded-4xl--radius-4xl
Elevation
Subtle only · 4 levelsshadow-regular-xs
shadow-regular-sm
shadow-regular-md
shadow-tooltip
The hairline
Structure is drawn with a single hairline rule — one border-border stroke, never heavier. Surfaces sit on a warm neutral; grids are built from gap-px seams over a bg-border ground, so every division reads as one crisp line. Elevation stays whisper-quiet and radii stay restrained. The page is calm by construction; the only colour is signal.
07Motion
Subtle, and always feedback
The motion budget
Entrance (staggered)fade + rise 6px · 0.35s · stagger 0.05s
Number count-up0.6s ease-out · reduced motion → final value instantly
0
Card hoverlift y −2 · spring
Hover me
Bar grow / line draw0.5–0.6s ease-out
Motion has a reason
Motion is feedback, never spectacle: no large travel, no bounce, no long durations. Every interaction still gets a response — hover, press, a visible focus ring, a loading skeleton, a toast on success. Trees are wrapped in <MotionConfig reducedMotion="user"> and primitives branch on useReducedMotion, so a reader who asks for stillness gets the final frame, not a slower animation.
08Patterns
Page shape, records & boards
The page skeleton
Every app page, same shapeDealsEverything in flight this quarter.
Open value48,250
Win rate32%
- Header block
- flex flex-col gap-0.5 — title (text-title-h1) + optional muted description, action on the right
- No divider
- never a border-b under a page header; whitespace separates it from the content
- Padding
- p-6 page padding, gap-6 between blocks
- Content
- tables, lists and forms always inside a Card on the grey canvas
- Full-height grids
- min-h-0 flex-1 + lg:grid-rows-1 so cards stretch to the viewport
Where a record opens
Dialog to change · Sheet to readModal Dialog
Create / edit / updateNew contact, edit contact, the deal form. The user stays in context — never route to a /new or /edit page. The shared form takes onSuccess (close + router.refresh()) and onCancel; without them it falls back to navigation.
Sheet, from the right
View / detailOpening a board card IS the full record: its fields plus an Activity section (notes & tasks, loaded through a server action and refetched on add/complete) and an Edit button. Map fields to the record type — don't copy another tool's fields wholesale.
Boards & dragging
dnd-kit · keyboard-operableDiscovery412,400
Northwind Traders — renewal
$12,000Open
Proposal222,000
Northwind Traders — renewal
$12,000Open
Dragging…
Closing113,850
Northwind Traders — renewal
$12,000Open
Drop deals here
- Column header
- stage accent dot (the real stage.color), name at text-label-md, a count pill and the stage total
- Drop-zone
- ring-2 ring-inset ring-primary/20 + bg-primary/5 on the hovered column
- Empty column
- a dashed “Drop deals here” placeholder that is still a drop target
- Live preview
- relocate the card in local state on onDragOver so it leaves the source and previews into the target; commit on drop, revert on failure
- Keyboard
- always operable without a pointer, with aria-live move announcements
Do
- Use the tokens — never a raw font-size or letter-spacing
- Keep every number ≤ 20px, with tabular figures
- Lead card titles with an IconTile
- Grey canvas, white cards, one hairline
- Tabler icons, subtle motion, native components
Don't
- Add or change letter-spacing / tracking-*
- Use monospace, or emoji
- Use gradients outside AI-native surfaces
- Introduce a blue accent
- Hand-roll cards or buttons
- Use large, bouncy or long animations
09Actions
Buttons & toggles
Button — variants
Button — sizes & icon
Button Group
Button Group — with text
Toggle
Toggle Group
10Form
Inputs & controls
Field + Input
Your team's display name.
Input Group
Textarea
Select
Native Select
Combobox
Checkbox
Radio Group
Switch
Slider
Input OTP
Date Picker
Calendar
11Data display
Identity, content & metrics
Stat Card62% of quarterly target
12%
Open pipeline$0
4%
Contacts0
Across every pipeline3 days
Days to close0
Shorter is better — arrow and tone are independentAvatar
SSAKVR
Avatar Group
AKVRSS
+5
Badge
DefaultSecondaryOutlineDestructiveWon
Card
Pipeline value
Across all open deals
₹8.05L
+12% vs last month
Item
Team plan
Up to 10 members.
Separator
Above the line
InboxSentDrafts
Kbd
⌘KEsc
Progress
Skeleton
Spinner
Aspect Ratio
16 / 9
Chart
Data Table
| Contact | Stage | Value |
|---|---|---|
| Acme Co. | Won | ₹4,20,000 |
| Nimbus Ltd. | At risk | ₹1,10,000 |
| Vertex Inc. | Open | ₹2,75,000 |
Empty
No deals yet
Create your first deal to get started.
12Feedback
Alerts & messaging
Alert
Workspace created
Invite your team to start adding contacts.
Alert — destructive
Payment failed
Update your card to keep the workspace active.
Toast
Tooltip
Alert Dialog
Hover Card
14Overlays
Layered surfaces
Modal (Dialog)
Sheet
Drawer
Popover
Dropdown Menu
Context Menu
Right-click here
Command Menu
Command Palette
Search for a command to run...
15Layout
Structure & containers
Accordion
A workspace is an isolated tenant — its own contacts, pipelines, and members.
Collapsible
@solithix starred 3 repositories
Scroll Area
Carousel
1
2
3
4
5
Resizable
One
Two
Three
Direction (RTL)
A headless provider — components read direction from context.
Built on Inter, Tabler and Base UI, through shadcn base-vega.