CADDY · DESIGN SYSTEM · LIVING RENDER
On the Green, rendered live.
Vintage sports-club heritage: deep-green ink, cream paper, New Spirit headings and Open Sauce text. Everything on this page is painted with the product's own tokens and mounts its real components. If a swatch disagrees with its printed hex, that is a bug you are looking at.
TRUTH HIERARCHY · 01 FIGMA BRAND LIBRARY OWNS IDENTITY · 02 DESIGN.MD OWNS THE LAWS · 03 THIS PAGE RENDERS THE CODE THAT SHIPS
Styles
Colour, type, marks. Story surface and working surface. Same palette, two registers.
Story surface
Walkthrough, marketing, the sandwich. Full-bleed deep green is allowed here.
STORY
On the Green.
Working surface
Season dashboard, clubhouse, terms. Cream-first. Deep green shrinks to a tucked panel.
WORKING
Your round, at a glance.
Colour
Deep green and cream carry the surface. Orange identifies bottlenecks and alerts. Primary actions use deep green. It is never a hover or a decoration. Chartreuse is electric on dark ground only; chartreuse-ink is its cream-legible sibling.
Light / Dark / Maroon
Figma theme modes from the brand library. Named law, not a new look. CSS ships the cream default plus .theme-green and .theme-maroon scopes on --bg and --fg. Painted from those. No switcher.
LIGHT
Cream paper. The working default.
DARK
.theme-green. Deep green ground.
MAROON
.theme-maroon. Maroon ground.
Type
New Spirit for display, Open Sauce for reading and interface labels. JetBrains Mono is reserved for code.
NEW SPIRIT · DISPLAY · HEADLINES, PULL QUOTES, PLATE NUMERALS
Your round, at a glance.
OPEN SAUCE · BODY · WORKING SURFACES AND DISPATCHES, 15-17PX, 1.6 LEADING
We sit with you, name what's yours and what isn't, and rebuild the work until the place can play the next round without you swinging every club.
OPEN SAUCE · LABELS · 10-13PX, 0.12EM TRACKING, UPPERCASE
WE CARRY THE BAG, YOU PLAY THE ROUND
Radius
Panels and cards 6. Buttons 4. Status chips stay rounded.
Marks
Crest or wordmark. One mark per moment. Never both. The pennant is the club flag as a label.
CREST
WORDMARK
Icons
Lucide, curated set, 2px stroke. Never redraw. Deep green on cream. Orange only when the chip is live or action.
Motion
Transform and opacity only. The house curve is cubic-bezier(0.65, 0, 0.35, 1). Reveals 0.45s, UI feedback under 200ms, everything interruptible, reduced-motion honoured. A page earns two or three moments. Press any button on this site and it answers at 0.96 scale.
Components
Mount the real ones. New working-surface UI composes these. It does not invent a new chip or a new row.
Status chip
StatusChip. Five tones. The fence lives in the component: live and action are the only orange.
Section label
SectionLabel. Open Sauce plus icon. Action tone is reserved for the list that waits on the client.
NEEDS YOU
List card
ListCard. Bordered row container. accent marks the one that waits on the client.
- The one list that waits on the clientNEEDED
- A granted access item✓ GRANTED
Empty state
EmptyState. Sections keep their place before they have rows. Not a loading pattern.
Nothing waiting on you. We'll flag it here the moment something is.
Log row
LogRow. Fixed date rail, title, optional detail.
THE BUILD LOG
- 9 AugReporting brain drafts JulySide by side with the sent report; markup decides version two.
- 7 AugRulebook adjudicatedEvery number, one named home.
- 4 AugAccess items granted
Portal nav
PortalNav. The portal stepper strip. Desktop is the thin top strip; mobile is the floating dock. Mounted as the real instance.
Icon and DrawIcon
The pieces. The set itself lives in Styles. DrawIcon is opt-in for a moment that earns a stroke draw-on.
Patterns
Already named. Shown with existing tokens and primitives. No new look.
Sandwich
Dark, cream, dark. Story only.
OPEN
Story opens dark.
The body is cream paper.
CLOSE
Story closes dark.
Tucked panel
Working-surface header. Not a full-bleed band. .rv-panel, 6px radius, cream margin all round.
SEASON 01 · THE CLUBHOUSE
The build, live.
Hairline
Cream-3, 1px. Prefer this over a box.
Two thoughts, one line between them.
The line is cream-3. It is not a card.
Approval card
The drafts-to-review pattern. Composed from ListCard, StatusChip, and the OPEN grammar. No Approval-card export yet.
- July report draftMarkup decides version two.NEEDEDOPEN →
Passcode gate
PasscodeGate. Cream card, original script mark and green action. The review portal and Founders Room share the same sign-in styling.
Mute fields
The label is the word. No helper text unless the field will fail without it. House field grammar, not a gate heading.
Loading
The wait. Not a variant of empty state. Not a chip tone. Composed from .rv-bone in globals.css. No Loading component yet.
Guidelines
Must-rules. Same product. Same look.
One mark per moment
Crest or wordmark. Never both.
THIS MOMENT · CREST
THAT MOMENT · WORDMARK
One orange object per view
Reserve orange for a bottleneck, alert or client-action status. The chip, the border, or the pill count as one object. Everything else stays quiet.
- The one thing that waitsNEEDED
- Already done, no orange✓ COMPLETE
The label is the word
Password. Email. Enter. No helper text unless the field will fail without it. Shown under Mute fields.
Buttons
Primary uses deep green with cream text. Secondary uses an outline. Status and errors retain their own semantic colours.
Hover deepens
Cream-3 to green-3. It never goes orange. Not a sixth state.
States
These five chip words only. Live and action are the only orange. The fence stays in StatusChip.