Cinatra Application Design — the canonical reference for the interface: colour, type, and components. It applies to the Cinatra app and to every extension that ships a UI; the web surfaces — corporate site, marketplace, docs — build on it through their own specs. Everything in this document is normative; match it exactly. The Cinatra name and marks are trademarks; the mark and wordmark themselves are governed by the Cinatra brand guidelines.
Version 0.9.0
Sub-references
6 sub-references
This page holds the cross-cutting fundamentals — surfaces, ink, accents, contrast, and layout. The shared component vocabulary and each application domain have their own self-contained reference:
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.
II. Ink & structure
5 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 tooltips and the web-shell utility bar — never the "failed" pill, which is red. (The app icon itself is mustard-on-navy: a sanctioned icon-ground exception owned by the brand guidelines.)
#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.
III. 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.
IV. 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 and 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
Tooltip
White-on-navy is the inverted pairing for dark grounds — tooltips, the web-shell utility bar. 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.
primary, default, outline, secondary, destructive, ghost, link
VI. Rules of the road
Editorial · 8 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 five surface tokens, plus the toolbar chrome ramp, 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, a "needs you" badge, warning intent (callouts, alerts, toasts), and the Context "Updating" spinner 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.
VII. Content widths
7 roles · Tailwind scale · rem / px
The app is a fixed 16rem sidebar beside a fluid content stage. Nothing inside that stage runs edge-to-edge: every page holds its content to one of a small set of max-widths, each centred in the stage, each a named step on Tailwind's max-w-* scale. The rule mirrors the one for text (VIII) — pick the narrowest width the content tolerates: reading stays comfortable, forms stay scannable, and one page never sprawls while the next feels cramped.
›
Fullmax-w-7xl80rem · 1280px
The default full-width column — dashboards, lists, tables, settings, entity detail. Centred in the stage like every width — fluid below the cap, growing side margins above it.
›
Widemax-w-3xl48rem · 768px
The /chat thread — once a conversation exists, message stream and composer both cap here, centred. Also a deliberately narrowed detail or single-column page — a reading view, one settings group. Forms belong one step in, at max-w-xl.
›
Mediummax-w-2xl42rem · 672px
The /chat landing prompt (empty state) — one step in from the conversation so the first prompt reads as a focused hero — and the /setup · onboarding column.
›
Narrowmax-w-xl36rem · 576px
Single-column forms and control stacks — auth / connect cards, sign-in, OAuth authorise, the LLM default-model pickers. The home for single-column form and control layouts.
The readable text measure (see VIII). Page-header descriptions and body copy cap here — never at the column edge, inside any wider column.
›
Bleedmax-w-none100% · no cap
Edge-to-edge, no cap — data-dense boards and canvases only. Let individual wide tables scroll inside their own container rather than letting the whole page sprawl.
The stage & its gutters
A fixed 16rem (256px) sidebar — 3rem collapsed — sits beside a fluid content stage; every content width above is a max-width centred (mx-auto) inside that stage — page content below the top bar is never edge-anchored. Content carries equal left and right gutters — px-5 → sm:px-8 (20 → 32px) — so it is symmetric at every viewport: pure gutter below its cap, growing side margins above it. The top-bar is chrome, not content: its header is full-bleed and its control row spans the full available width — the viewport minus the persistent sidebar (the sidebar's inner edge is the left bound when it is shown; otherwise viewport x=0) — carrying only the standard edge gutters (px-5 → sm:px-8). So the top-bar's left element sits at the far-left edge and its right element at the far-right edge, independent of the max-w-7xl content cap. The breadcrumb is the top-bar's left element and moves with the bar — it anchors at that far-left edge; it does not ride the content stage. Only the content below the top bar stays capped and centred on the max-w-* stage.
VIII. Text layout
8 text patterns · 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.
IX. The Assistants sidebar entry
one entry · below Chat
A single sidebar entry titled Assistants sits directly below Chat and above Agents. It is one nav entry — not a group, and it introduces no section heading. It carries the standard sidebar-row treatment (13px sans with a leading icon; the active row on the indigo 6% tint — see Sidebar in Components), exactly like the Chat entry above it and the Agents entry below. Agents is unchanged — no label or heading is introduced above it.
Selecting Assistants opens the Assistants surface, the same way Chat opens chat and Agents opens agents.
Assistants below Chat
Chat
Assistants
Agents
One entry, active here, sitting between Chat and Agents. No group container and no section heading; Agents keeps its existing form.