The Cinatra design system — the canonical reference for the brand: its mark, colour, type, and interface. Everything in this document is normative; match it exactly. The Cinatra name and marks are trademarks, so follow the logo and trademark rules in full wherever they appear.
Version 0.1.0
I. Logo & wordmark
spacing · 4 presentations · sub-brand · 6 rules
The Cinatra mark is the fedora and the wordmark, together. The fedora and the wordmark always share one colour — never two. The single exception is the sub-brand lockup (below), where a navy sub-brand word sits beside the mustard wordmark.
Clear space & spacing
Everything is keyed to one module — the cap-height (C) of the wordmark, the distance from the baseline to the top of a capital. The fedora is sized to it and every gap is a fraction of it, so the lockup stays proportional at any size.
Fedora size — 1C
The visible fedora — brim to crown — stands exactly as tall as the cap-height and sits on the same baseline as the wordmark. The shipped mark carries built-in padding (its 512 × 320 box), so crop to the artwork — viewBox="72 64 368 192" — then set height to the cap-height; width follows at ≈1.9 × height. Never drop the padded box in at font-size — the padding shrinks the visible hat below the cap-line.
Clear space — 1C
A minimum exclusion zone of one cap-height on all four sides — before the fedora, after the wordmark (or sub-brand), above and below. Nothing else enters this band: no type, no rules, no other logos, no crop.
Fedora → wordmark — 0.4C
The gap between the fedora and the first letter of the wordmark is 0.4 of the cap-height. Tight enough to read as one mark, open enough that the brim never touches the C.
Wordmark → sub-brand — 0.4C
A sub-brand sits the same 0.4C after the wordmark, so the whole lockup keeps one even rhythm — fedora, wordmark and sub-brand each separated by 0.4C. The colour change (mustard to navy) does the rest of the separating, so no extra space is needed.
Logo & wordmark variants
Cinatra
Primary — mustard
in app & on web · with sparkles
Default presentation. Sparkles animate inside the fedora and wordmark in the product UI and on the marketing site. Static elsewhere — PDF, print, exports, OG images, screenshots.
Cinatra
Mono ink
single-colour on paper
When only one colour is available — single-pass print, debossing, screen prints, fax. Both fedora and wordmark in navy ink on cream paper.
Cinatra
Inverted
paper on navy ink
For dark grounds — signage, dark UI modes, photographic overlays. Cream fedora and wordmark on navy. Mustard does not work on dark grounds; use this combination instead.
Cinatra
Strict mono
black on white
Absolute single-tone rendering — engraving, single-colour embossing, photocopies, regulatory filings. Use white on black for inverted strict mono.
Icon-only usage
32 × 32 favicon
Favicon
16–32px · fedora only · fills the tab
In browser tabs and bookmark bars the wordmark would be illegible. Drop it and let the fedora carry the brand at near-full size — a favicon is square and tiny, so the mark fills it with only ~10% breathing room, never floating small in the middle. Same colour rules apply (mustard, navy, inverted, strict mono).
Home-screen app icon
App icon
64–1024px · ~60% · 10% safe zone
Mustard fedora centred on a navy rounded square. The fedora fills ~60% of the icon width with a 10%+ safe margin on every edge — large enough to read on a home screen, but clear of the corners the OS mask (iOS superellipse, Android circle/squircle) can clip. Never the wordmark in an app icon.
Sidebar collapsed
Collapsed sidebar
in product chrome · 56px rail
When the sidebar collapses, the wordmark goes with it. The fedora alone sits in the brand area, same colour as in the expanded state (mustard on the warm sidebar surface).
Sub-brand lockup
Sub-brands — Docs, Marketplace, and the like — name a surface inside the Cinatra family. The sub-brand word carries navy ink (#15213A), never mustard. The contrast between the mustard wordmark and the navy sub-brand is the whole point; it makes the parent brand and the product instantly separable while keeping one typographic voice.
CinatraDocs
Same voice as the wordmark
Archivo, italic, weight 800, the same size as the wordmark, the same -0.022em letter-spacing. The only thing that changes is the colour. Set the sub-brand as a proper noun — initial cap, no all-caps, no abbreviation.
Navy, not mustard
The sub-brand is always navy ink #15213A on light grounds — the one sanctioned two-colour lockup. Never set the sub-brand in mustard, and never tint the fedora or wordmark to match it.
One sub-brand only
A lockup carries a single sub-brand word. Don't stack two (no Cinatra Docs Beta); a qualifier like Beta belongs in a separate pill, outside the clear-space zone.
Sub-brand variants
CinatraDocs
Primary — two-tone
mustard wordmark · navy sub-brand
Default on cream or surface. Mustard fedora and wordmark, navy sub-brand. The only place two colours appear in the mark.
CinatraDocs
Mono ink
single-colour on paper
One-colour contexts — single-pass print, debossing, fax. The whole lockup goes navy; the two-tone split collapses since there's only one ink.
CinatraDocs
Inverted
cream on navy ink
Dark grounds. Mustard is barred on dark and navy vanishes into it, so the whole lockup goes cream — the sub-brand keeps its hierarchy with 62% opacity instead of a second hue.
Rules
1. Same colour, always
The fedora and the wordmark share one colour — never two. No mustard fedora with a navy wordmark. The lone two-colour case is the sub-brand lockup: there the navy sub-brand pairs with the mustard wordmark, but the fedora always matches the wordmark.
2. Icon alone, sparingly
The fedora stands alone when the wordmark would be too small to read — favicons, app icons, the collapsed sidebar, browser tabs. Never use the wordmark without the fedora; the pair is the brand.
3. Sparkles only where they live
Sparkles animate inside the logo and wordmark only in the product UI and on the marketing site. Static everywhere else.
4. Allowed background pairings
Mustard on paper or surface. Navy on paper. Cream on navy. Black on white. White on black. Never mustard on a coloured chip or on the navy ground.
5. Don't reshape the mark
No outlining, no drop shadows on the wordmark, no warped angles, no added flourishes around the fedora. The mark ships as drawn.
6. Breathing room
Leave clear space around the mark equal to one cap-height (1C) on every side — see Clear space & spacing above for the full unit system. Don't crop the fedora to a tighter margin or set it flush against another logo.
II. Surfaces
5 tokens · paper to white
#F1F1ED
Paper
--paper · --background
Default page background. Warm light cream — never pure white. Every other surface sits on top of this.
Card bodies, input fields, popovers. Only place pure white lives in the system.
#E8E8E3
Surface muted
--surface-muted
Disabled controls, secondary chips, dividers between sections inside a card.
#ECEEEA
Sidebar
--sidebar
Left rail. Slightly cooler than paper so the rail visually recedes; the content stage feels primary.
III. Ink & structure
4 tokens · navy carries text
#15213A
Navy ink
--ink · --foreground
All primary text. Section rules, hairline border-strong, and table-head underlines all use this navy. White-on-navy is the inverted pairing for dark grounds like the app icon — never the "failed" pill, which is red.
#364E81
Indigo
--blue · --primary · --accent
Primary action. Filled buttons, focus rings, links, and the "running" status pill. Same hue family as navy (≈1° apart) so it sits naturally beside the text without fighting it.
#5A6477
Slate muted
--muted
Captions, secondary text, table column headers, sidebar group labels. Slate-blue cousin of the navy.
Hairline
--line · rgba(21,33,58, .14)
Card borders, table row dividers, input strokes. Low-alpha navy — never grey — so the warmth of the page reads through.
Section rule
--line-strong · #15213A
Etched paired-line dividers between major page sections, primary button strokes, table head underline. Full navy, 1px each, 5px gap.
IV. Accents
8 accents + fabric stripe · status + categorical
#C79545
Mustard
--logo · brand mark · "needs you"
Logo + wordmark. "On hold" / "needs your attention" cue throughout the app. Marquee bulbs. Use sparingly — it's the page's pinpoint of warmth.
#7A2E3A
Burgundy
--burgundy · secondary mark
Display drop-caps in liner-notes prose. The Context extension type emblem.
#A6384F
Brand red
--red · destructive
Destructive buttons (Decline / Tear stub) and terminal failures. Critical notifications. The single saturated red in the system — never "running", which is indigo.
#3F6E6B
Sea-green
--green · approved · trend up
"Approved" status. Positive metric deltas. Slightly desaturated — reads as tweed, not Slack-green.
#B0613A
Rust
--rust · categorical
Burnt-orange tweed. Categorical only — extension grounds, avatar grounds, a second chart series. Never a status; it sits between mustard and red without taking either's meaning.
#6C6A3A
Loden olive
--olive · categorical
Muted field-green, yellower than the sea-green so the two never read alike. Categorical only — extension grounds, tags, a tertiary chart series.
#574A68
Aubergine
--plum · categorical
Dusty blue-purple — the one cool accent that isn't indigo, so it adds variety without ever being mistaken for a primary action. Extension and avatar grounds.
#A86B72
Clay rose
--clay · categorical
Warm muted mauve — a softer cousin of the burgundy. Categorical only — extension grounds, avatar grounds, decorative tags. Never used for error or destructive intent.
Fabric stripe
--stripe-light · --stripe-mid
Subtle seersucker zebra on alternate table rows. #E3E8EE and #B8C4D4 — cool blue cousins of the surfaces. The single ornament in the otherwise-quiet tables.
V. Extension types
5 types · random palette colour
Each extension carries a fixed emblem on the left (a type icon, or the vendor's brand mark for Connectors) and a live indicator on the right — connection state, schedule, refresh, etc. The background ground is random, drawn at creation from the seven categorical accents (burgundy, red, sea-green, rust, olive, aubergine, clay) — never mustard, which is the brand colour, and never indigo or navy, which carry action and text. Two Agents will rarely share a colour. Both the emblem and the status indicator sit in a white pill — never a black or navy (ink) badge — so they read against any coloured ground.
Daily 9am
Email Outreach Agent
Agent
colour: random · emblem: agent · indicator: schedule
Performs work, takes runs. The right indicator shows the run schedule (or "idle" / "running" / "paused"). Drew rust here; the next Agent could land on sea-green or aubergine — never indigo, which is reserved for primary action.
Installed v1.4
Warm-Intro Picker Skill
Skill
colour: random · emblem: skill · indicator: install state
Reusable expertise an agent installs. Indicator shows version + install state. Drew red here; another Skill could draw olive or sea-green.
Connected
Gmail Connector
Connector
colour: random · emblem: vendor logo · indicator: connection
Bridges to a third-party service. Emblem is the vendor's mark (here Gmail's multicolour M); the white badge stops the brand from being swallowed by the random ground. Indicator shows live connection state.
Updating
Marketing Strategy Context
Context
colour: random · emblem: context · indicator: refresh state
A body of operating knowledge an agent reads from. The mustard spinner rotates while the context is regenerating from sources.
Live
Outreach Performance Dashboard
Dashboard
colour: random · emblem: dashboard · indicator: freshness
A curated lens onto data. The indicator shows whether the dashboard is live or stale.
primary, default, outline, secondary, destructive, ghost, link
VII. Contrast — what reads, what doesn't
WCAG 2.1 · against surface
Foreground
On
Ratio
Verdict
Sample
Notes
Navy
#F7F7F3 surface
14.7 : 1
AAA
Headline 38
Primary text on paper. Headline-safe at any size.
Slate muted
#F7F7F3 surface
5.4 : 1
AA
Body 14px secondary
Captions and metadata. Passes AA for body text.
Mustard
#F7F7F3 surface
2.5 : 1
LARGE ONLY
Cinatra
Display-only. Reserve for the wordmark, the 38px page title, the hold pill chip background. Never use for body or buttons.
Burgundy
#F7F7F3 surface
8.1 : 1
AAA
P…ulled 418 prospects
Liner-notes drop-caps. Strong enough to be the secondary brand mark.
Brand red
#F7F7F3 surface
5.8 : 1
AA
Decline
Filled destructive buttons. White text on red passes AA (4.7:1).
Sea-green
#F7F7F3 surface
6.1 : 1
AA
Approved
Approved pill background uses a 12% alpha; the green text on it lands at 4.9:1.
Indigo
#F7F7F3 surface
7.7 : 1
AAA
Approve & send
Primary button label. Indigo on cream lands at 7.5:1; white-on-indigo at 8.3:1 — both AAA.
White
#15213A ink
14.1 : 1
AAA
App icon
White-on-navy is the inverted pairing for dark grounds — the app icon, the collapsed sidebar rail. Navy itself carries all primary text and the structural lines (rules, strong hairline, table-head underline); it is not a button or status colour. The "failed" pill is red.
VIII. Rules of the road
Editorial · 7 do's
1. Cream rules below the brand
The product is set on cream. Don't introduce alternative greys, pure blacks, or off-whites for surfaces. The four surface tokens are the entire system.
2. Navy carries the text, indigo carries the action
All primary text is #15213A. Captions use slate #5A6477. Filled primary buttons, focus rings, links, and the "running" status pill use indigo #364E81. Same hue family as the navy, so action lifts off the text without clashing.
3. Mustard is for the brand and "needs you"
The wordmark, the marquee bulbs, the On-hold chip, and a "needs you" badge are the only places mustard appears. It is the brand colour, so it is never an extension-type ground, a body colour, or a regular button.
4. Red is for stop and destroy
Reserved for destructive buttons (Decline / Tear stub) and for terminal failures. Red does not mean "running" — indigo does. Don't introduce a third red. An extension type may still draw red as a categorical ground — there the colour is identity, not alarm.
5. One sea-green for approval
#3F6E6B is the only green in the system. Don't introduce mint, Slack-green, or "success" greens — they will fight with the tweed feel. It carries the "approved" meaning everywhere except as an extension ground, where it's simply one of the eight categorical colours.
6. Hairlines are navy, not grey
All hairlines use navy at low alpha. Major section dividers use full navy as paired rules — the etched-glass treatment. Never use a neutral grey on a divider.
7. Emblems identify, colour adds variety
Each extension carries a fixed emblem (type icon, or vendor logo for Connectors) and a live indicator on the right. The background ground is drawn at random from the seven categorical accents — burgundy, red, sea-green, rust, olive, aubergine and clay — at creation. Mustard is never used: it is the brand colour. Indigo and navy stay out too (action and text). Two Agents will rarely share a colour. Brand logos and status indicators always sit in a white pill — never a black or navy badge — so they read against any coloured ground.
8. White means interactive
Pure-white --surface-strong (#FFFFFF) is reserved for elements the user actually touches — text inputs, clickable cards, popovers, dropdown menus. Everything else (presentation cards, panels, stat tiles, palette swatches) sits on the warm-cream --surface (#F7F7F3). The eye learns to seek the brighter surface when input is invited.
IX. Text layout
6 measures + heading rule · in ch / px
1. Paragraphs
Text never spans the full page or card width — prose is sized to a comfortable reading measure, and the same widths are reused across every surface. The rules below are the ones the design system enforces; copy that exceeds them breaks the rhythm of the page.
font-familyInter, ui-sans-serif
font-weight400
font-size13.5–14px
line-height1.55–1.6
colorslate muted / ink
max-width60ch / 64ch / 65ch
text-wrappretty (body only)
Example
Lede — supporting paragraph beneath a heading. Sixty characters per line. Single column. Muted slate.
Section intro — slightly wider, sixty-four characters per line. Sets up the section before its grid.
Body prose — the main reading material, navy ink at fourteen pixels on one-point-six line-height. Sixty-five characters cap. Always pair with text-wrap: pretty. Emphasis comes from structure, never from inline bold or italic — every paragraph runs at Inter 400 from start to finish.
2. Card use-text
font-familyInter, ui-sans-serif
font-weight400
font-size12.5–13px
line-height1.5
colorslate muted
max-width56ch
container240–320px card
Example
Descriptions inside swatch cards, tooltips, agent tiles. The card sets its own width; the text inside never breaks out past fifty-six characters.
Headlines run italic 800 with a balanced wrap and no character cap.
5. Liner-notes prose
font-familyInter
font-weight400
font-size12.5px
line-height1.55
colorink
columns2 (≥80ch)
column-rule1px solid navy
drop-capitalic 800 burgundy 34px
Example
When a single editorial paragraph would stretch past 80ch, set it in two equal columns. A navy rule between them. Drop-cap on the first paragraph, burgundy, italic 800.
The body stays Inter 400 at 12.5px on 1.55 line-height; the only ornamentation is the rule and the cap. Use sparingly — once per run summary, not as a general body style.
other marks? and ! allowed when the sense needs them
stylesee 4. Headlines
Example
✓
Rules of the road
✗
Rules of the road.
Headings name a thing; they are not sentences, so they take no closing period — even when the heading reads as a full clause. The period after a section or item numeral (I., 1.) is part of the numbering, not the heading, and stays.
8. Callouts
When a paragraph needs to be lifted out of the reading flow — a note, a caveat, a warning — set it as a callout. Callouts borrow the status-pill construction at block scale: a tinted ground, a hairline border one step stronger, and a mono uppercase label led by its icon. There is no left accent bar; the label row carries the semantics. Reserve them for genuine asides — a page wall-to-wall with callouts has none.
labelJetBrains Mono 700 10px 0.18em uppercase
icon13px lucide, leads label, status colour
bodyInter 400 13px / 1.55 ink
backgroundstatus tint 4–14%
borderstatus colour 18–42%
radius8px · padding 12–15px
max-width64ch
noleft accent bar
Example
Note
Runs are retained for 90 days, then archived to cold storage. Pin a run to keep it on the active board indefinitely.
Info
The Enricher agent inherits its connector credentials from the workspace. You don't need to re-authorise it per campaign.
Success
All twelve drafts were approved and scheduled. The sequence begins sending at 09:00 in each recipient's local time.
Warning
This connector is approaching its daily send limit. Runs queued past the cap will hold until the window resets at midnight UTC.
Danger
Deleting an agent removes every run it has produced. This cannot be undone — export the run history first if you need it.
X. Components
shadcn/ui · full roster + nesting
Cinatra ships shadcn/ui primitives with the design tokens above mapped to their semantic variables. Use the components from @/components/ui directly — do not re-skin them inline. Each component below is a brief on its role and the design rules it inherits.
Trigger mirrors Input chrome. Open popover sits on --surface-strong with the same hairline border, slightly higher shadow. Use scrollbar-thin on long lists.
Dialog / Sheet
<Dialog />, <Sheet /> · @/components/ui/dialog
surface-strong
starts below 4rem navbar
dim overlay
etched header rule
Example
Approve drafts.
Twelve drafts pending your read.
Modal dialogs use --popover; right-side sheets sit at full-height. Overlay top: 4rem so it doesn't cover the navbar. Dialog header uses an etched paired-line rule for separation.
Tab labels are 13px sans, slate when inactive, indigo when selected with a 2px indigo underline. No pill tabs; underline only. When tabs appear under a section heading, the etched paired-line rule begins to the right of the last tab and stretches to the page edge — the tablist takes the left portion of the row, the rule the right.
Controls inside a toolbar must look different from standalone ones: they carry no individual border. The toolbar ground is their container, so a button, tab, or field placed inside it drops the border (and the fill) it would have on its own and reads only as a tinted region of the bar. A horizontal bar that groups related view controls — tablist, search, primary view action. The toolbar provides the chrome, so controls inside it carry no individual borders: the toolbar ground is their container. Hover and selected states are background tints on a rounded rectangle (7px radius, same geometry as the search pill); the font weight and colour never change between states. Vertical hairlines (24px tall, centred) separate logical groups: between the tablist and search, and between search and the action button. The search field keeps its white interactive surface — the only white element inside the toolbar. The toolbar sits directly below the page header and replaces the section rule for that view — never stack a toolbar and the etched paired rule.
When a selected toolbar item has its own sub-controls, they open in a child toolbar directly beneath the parent rather than in a menu — and that child can in turn carry a third. Each level inherits every toolbar rule (borderless controls, hairline group separators, the lone white search field) and adds three of its own. Ground steps lighter with depth — the parent sits on the darkest chrome (#dcddd5) and each child lightens ~6L toward the page, so the deepest row reads as the one nearest the content it edits. The lightening stops short of the paper: even the deepest ground stays a clear step darker than the page, so every level remains legible as its own bar. Each child is inset 20px from the level above and stacked 6px beneath it, so the active path reads top-to-bottom at a glance — the inset and the lightening carry the lineage; no connectors are drawn. Cap the depth at three. A fourth level means the navigation is too deep for a toolbar — move it into the page body or a sidebar instead. Only one item per level is selected, and selecting a different item replaces every level below it.
Cinatra's sidebar from app-sidebar.tsx. Mustard fedora + Archivo wordmark in the brand head. Active item is indigo bg at 6% alpha; section labels are 10px mono uppercase.
Sidebar group label
<SidebarGroupLabel /> · @/components/ui/sidebar
Inter · 600 · 10px
letter-spacing 0.18em
uppercase · slate
padding 8px 12px 4px
Example
Intelligence
Chat
Agents
Management
Desk
Group labels in the sidebar — the small uppercase mono-spaced tag that sits above a cluster of nav items (Intelligence, Management, Information, Tools). Slate-muted slate at 10px with 0.18em letter-spacing reads as a quiet section break rather than a clickable item. Always above its group, never indented to match its children.
User avatars carry the user's initials in Archivo italic 800 on a random categorical accent (never indigo or navy). Per-extension instances same pattern (see V).
Single-select (radio), multi-select (checkbox), and instant-binary (switch). Indigo for active state. Switches are reserved for immediate-effect settings; checkboxes for confirmable form choices.
Inline alerts for warnings and errors; AlertDialog for destructive confirmations. Use the destructive variant (red) for terminal failures, warning (mustard) for cautions, info (indigo) for neutral notices.
Toast / Sonner
<Sonner />, toast() · @/components/ui/sonner
popover bg
status-coloured text + border
5 variants
icon led
close + optional copy
Example
Run #2,318 started.
Twelve drafts approved.
Approval expires in 5 minutes.
Connector lost: Err_GMAIL_REFRESH_401
Transient confirmations and async progress. Five variants — default · success · warning · error · info — each on the popover surface with a status-coloured border and matching text; an icon on the left identifies the type. Every toast carries a Copy action and a Close (X) on the right, so the user can grab the message text or dismiss the toast. Never block on a toast; use Dialog when the user must acknowledge. Stack vertically, newest on top.
PaginatedTable handles offset, sort, and selection; Table is the dumb DOM primitive. Headers always uppercase mono with the navy underline; never centre body cells; right-align numerics and timestamps.
Global cmd+K palette and inline pickers. Section labels in 10px mono; rows at 13px; the selected row uses the indigo soft-tint background, not a border.
Breadcrumb
<Breadcrumb /> · @/components/ui/breadcrumb
chevron 12px 50% opacity
slate links · ink current
max 3–4 crumbs
Example
IntelligenceAgentsRun #2,318
Always in the topbar. Three to four crumbs maximum; truncate the middle with an ellipsis if longer. Never combine with tabs.
Pagination
<Pagination /> · @/components/ui/pagination
mono 13px
active = ink fill
prev/next chevrons
Example
…
For long lists and tabular data. Active page is ink-filled; surrounding pages are line-bordered on white. Always pair with a "X of N" caption in mono slate.
Skeletons mirror the layout they're replacing; never use a global spinner overlay when a skeleton would do. Spinner only for short (<500ms) inline waits inside buttons or icons.
Empty state
<Empty /> · @/components/ui/empty
centred
dashed circle icon
14px headline · 12px helper
primary action
Example
No runs yet.
Roll a campaign to see runs here.
Use whenever a list, table, or section has zero content. Always include a single primary action button — never just empty text.
Use for sectioned settings panels and FAQ-style content. Default to single-open; allow multi-open only when items are truly independent.
Separator
<Separator /> · @/components/ui/separator
paired-line for sections
1px low-alpha hairline for rows
Example
Section A
Section B
Section breaks use the etched paired-line (the spec's signature divider). It stretches edge-to-edge of the content column by default. If a tablist is present in the same row, the rule starts immediately to the right of the last tab and runs to the page edge — never overlap a tablist with the rule, and never stack them. If a toolbar sits below the page header, the toolbar replaces the section rule entirely; never stack both.
Slider
<Slider /> · @/components/ui/slider
6px track · muted ground
indigo fill
16px white thumb · indigo ring
mono value caption
Example
062100
Single-value and range. Track is the muted surface, the filled portion indigo, the thumb a white interactive disc with an indigo ring (white per rule #8). Pair with a mono value readout; never label the thumb itself.
Progress
<Progress /> · @/components/ui/progress
6px bar · 9999px radius
indigo fill on muted
determinate + indeterminate
mono % label above
Example
Enriching prospects74%
Generating drafts…
Determinate for known-length work (a run with N steps), indeterminate for open-ended waits. Same geometry as the slider track. Show the percentage in mono above the bar; never render text inside it.
A two-state button. Pressed state is the indigo soft-tint with ink/indigo content; rest is transparent with slate content. As a single-select group it becomes a segmented control — the canonical way to choose one of two or more options (the List / Board / Timeline view switcher above); as a multi-select group it toggles several at once (the formatting icons). Either way the buttons share one outer border with hairlines between segments — no gaps, exactly one or any number pressed. Use for view modes and inline formatting, not for settings that take immediate effect (use Switch).
Month grid on the white popover surface. Weekday heads are mono uppercase; the selected day is an indigo-filled disc; today carries an indigo ring; a date range fills the in-between days with the indigo soft-tint. DatePicker is the calendar inside a Popover triggered from an Input-styled button.
Combobox
<Combobox /> · @/components/ui/combobox
Input trigger + chevron
cmdk-filtered list
check on selected
indigo tint active row
Example
Gmail Connector
Search connectors…
Gmail Connector
Slack Connector
Salesforce Connector
A Select crossed with the Command menu: an Input-chrome trigger opens a type-to-filter list. The current value carries an indigo check; the highlighted row uses the indigo soft-tint. Reach for it over Select whenever the option count passes ~8.
Hover card
<HoverCard /> · @/components/ui/hover-card
surface-strong popover
700ms open delay
richer than a tooltip
non-interactive trigger
Example
Run owned by @e.reyes
E
Elena Reyes
Revenue Ops · joined Apr 2024
Owns 6 agents · 218 runs approved this quarter.
A preview card on hover — for people, agents, and links. Sits on the white popover surface with a softer, longer open delay than a tooltip (≈700ms). Use when the preview carries structure (an avatar, stats); for a one-line hint use Tooltip instead.
Right-click context menus and the chevron DropdownMenu share this surface. Rows highlight on the indigo soft-tint; keyboard shortcuts sit right-aligned in mono slate; destructive items take brand red. Group with the 1px hairline, never the etched paired rule.
Menubar
<Menubar /> · @/components/ui/menubar
toolbar ground #e6e7e2
open menu = indigo tint
13px sans triggers
menus reuse context surface
Example
Start run⌘↵
Pause⌘.
Schedule…
A persistent horizontal menu bar (desktop-app style) on the toolbar ground. The open trigger takes the indigo soft-tint; its dropdown reuses the context-menu surface. Reserve it for dense editor surfaces; most product chrome should prefer the Toolbar or a DropdownMenu.
Top-level site/product navigation with optional mega-panels. The active top link takes the 2px indigo underline (same as Tabs); the dropdown panel is a white card holding a two-column grid of titled links. Distinct from the left Sidebar — use this only for marketing or horizontal product shells.
Scroll area
<ScrollArea /> · @/components/ui/scroll-area
6px overlay track
low-alpha navy thumb
fades when idle
no native chrome
Example
Run #2,318 · Outreach
Run #2,317 · Enricher
Run #2,316 · Outreach
Run #2,315 · Scorer
Run #2,314 · Outreach
Replaces the OS scrollbar inside scrollable panels — command lists, sidebars, long popovers. A 6px overlay track with a low-alpha navy thumb that fades when idle. Same scrollbar-thin treatment referenced by Select.
Input OTP
<InputOTP /> · @/components/ui/input-otp
40px white slots
mono 18px digit
active = indigo ring
middle dash separator
Example
3
9
One-time-code and verification entry. Each digit is a 40px white slot with the strong navy border; the focused slot picks up the indigo ring and a blinking caret. Digits set in mono. Split groups with a short navy dash, never a vertical line.
Drawer
<Drawer /> · @/components/ui/drawer
bottom-anchored sheet
grab handle on top
surface-strong · 14px radius
dim overlay below navbar
Example
Roll a new campaign.
Pick a template to start the agent.
A bottom-anchored sheet for mobile and touch flows. Carries the grab handle, white surface, and a 14px top radius; the overlay dims everything below the 4rem navbar like Dialog. On desktop prefer the right-side Sheet; reserve Drawer for narrow viewports.
Draggable split panes for master-detail layouts (a runs list beside a run detail). The handle is the strong navy hairline with a small grip; it brightens to indigo while dragging. Supports nested horizontal and vertical groups.
Aspect ratio
<AspectRatio /> · @/components/ui/aspect-ratio
locks a w:h box
16:9 · 4:3 · 1:1
8px radius · clips child
striped placeholder unfilled
Example
cover · 16:9
1:1
Locks a child (image, embed, map, chart) to a fixed width-to-height ratio so layouts don't jump before media loads. Unfilled, it shows the seersucker-striped placeholder with a mono label naming the expected ratio. Clip the child with the 8px radius.
Carousel
<Carousel /> · @/components/ui/carousel
embla-driven
white round arrows
dot pager · indigo active
arrows outside the frame
Example
418
Prospects pulled
Horizontal slide track for stat tiles, onboarding steps, or media. Arrows are white interactive discs placed outside the frame so they never cover content; the dot pager marks the current slide with an elongated indigo pill. Keep slide counts low and never auto-advance critical content.
Chart
<ChartContainer /> · @/components/ui/chart
recharts wrapper
indigo primary series
sea-green positive delta
navy hairline grid
mono axis ticks
Example
Runs / week
Approval rate ▲ 12%
A thin wrapper over Recharts with the tokens pre-mapped: indigo for the primary series (faded indigo for prior periods), sea-green for positive trends and brand red for negative, the navy hairline for gridlines, and mono ticks. Keep charts quiet — one or two series, no drop shadows or gradients beyond a faint area fill.