Warm paper, cool ink
Every token, component and page template in Delia, rendered from the same code the app uses. Iterate here first. A component isn’t ready for a feature until it looks right on this page.
Wordmark
Lowercase and bold. It sits at the top of the sidebar and on sign-in and guest pages.
Wordmark
Fraunces 700. The only bold Fraunces in the product.
Palette
A sand page, a lighter cream for anything raised, navy for action, and rust as a rare marker. Values are read live from the stylesheet.
background
… bg-background
Page canvas
surface-raised
… bg-surface-raised
Inputs, menus, dialogs, selected rows
border
… border-border
Hairlines between rows and panels
border-strong
… border-border-strong
Outlines on inputs, buttons and chips
text
… text-foreground
Primary text
text-muted
… text-muted-foreground
Secondary text and metadata
primary
… bg-primary
Primary buttons, links, focus rings, active nav item
primary-hover
… bg-primary-hover
Hover and pressed states
primary-tint
… bg-primary-tint
Hover and selection backgrounds
on-primary
… text-primary-foreground
Text on navy
accent (rust)
… bg-rust
Unread dots and new-item markers; one per screen
critical
… text-critical
Error text, overdue text, destructive actions
Contrast
Measured live from the tokens above against WCAG AA. Every pair should pass; a row marked Below means a token changed and needs another look.
| Sample | Pair | Measured | Needs | Result |
|---|---|---|---|---|
| Aa | text on background | … | 4.5 : 1 | |
| Aa | text on surface-raised | … | 4.5 : 1 | |
| Aa | text-muted on background | … | 4.5 : 1 | |
| Aa | text-muted on surface-raised | … | 4.5 : 1 | |
| Aa | text-muted on primary-tint (a hovered row) | … | 4.5 : 1 | |
| Aa | primary on background | … | 4.5 : 1 | |
| Aa | on-primary on primary | … | 4.5 : 1 | |
| Aa | rust on background | … | 4.5 : 1 | |
| Aa | critical on background | … | 4.5 : 1 | |
| Aa | text on Cherry, the darkest tint | … | 4.5 : 1 | |
| Aa | border-strong on background (control outline) | … | 3 : 1 | |
| Aa | border-strong on surface-raised (control outline) | … | 3 : 1 | |
| Aa | border-strong on primary-tint (a hovered control) | … | 3 : 1 |
Revision colors
The WGA script revision sequence, mapped onto project stages. Tints appear only on chips, dots and calendar bars, always with an outline.
| Revision | Tint | Default stage | Dot | Calendar bar |
|---|---|---|---|---|
| White | bg-rev-white | Lead | 9:00Lead example | |
| Blue | bg-rev-blue | Quoted | 9:00Quoted example | |
| Pink | bg-rev-pink | Booked | 9:00Booked example | |
| Yellow | bg-rev-yellow | In production | 9:00In production example | |
| Green | bg-rev-green | In post | 9:00In post example | |
| Goldenrod | bg-rev-goldenrod | Delivered | 9:00Delivered example | |
| Buff | bg-rev-buff | Approved | 9:00Approved example | |
| Salmon | bg-rev-salmon | Paid | 9:00Paid example | |
| Cherry | bg-rev-cherry | Overdue | 9:00Invoice overdue |
Default stages by category
- Pipeline
- LeadQuoted
- Active
- BookedIn productionIn post
- Wrap
- DeliveredApproved
- Closed
- PaidLost
Type
Fraunces for headings at weights 300 to 400, optical sizing on, wonky forms off. Sora for everything else, at weight 300 for body text.
Display
Fraunces 40 / 44, 300. type-display
The drone shoot in Ojai
Page title
Fraunces 28 / 34, 350. type-h1
Harbor Coffee brand film
Section title
Fraunces 22 / 29, 400. type-h2
Deliverables
Panel title
Fraunces 18 / 24, 400. type-h3
Book crew for Thursday
Body
Sora 14 / 20, 300. text-sm
Maya confirmed Thursday for the drone shoot and asked for a revised quote that includes a second day. Delia suggests moving the project to Booked.
Secondary
Sora 13 / 18. text-2sm
From Maya Reyes, Topa Topa Winery, 9:42 AM
Small
Sora 12 / 16. text-xs
Second hold
Numbers
tabular-nums in tables and on the calendar
$4,800.00
$11,150.00
$950.00
Shape and detail
One-pixel borders, one six-pixel radius, and a single faint shadow reserved for things that float.
Hairline
border-border. Between rows and panels.
Row one
Row two
Row three
Strong outline
border-border-strong. Around anything interactive.
Raised
The lighter cream replaces shadow for in-flow elements.
Floating
Menus, popovers, dialogs and toasts share one shadow.
Focus
Navy border and a 3 px ring, on :focus-visible only. Tab to see it.
Rust marker
Unread and new. At most one per screen.
Icons
Lucide at a 1.25 stroke, 16 px by default.