Brand system

• Render the mark in one flat colour drawn from the palette.
• Switch from Solid to Reversed the moment the background is darker than --silver.
• Sit the mark on a solid field, or on a photograph with a clear, even area.
• Keep the paper mark on violet — never ink on violet.
• Reach for Muted only when one file has to serve both modes.

• Fill the mark with a gradient, a photo, or the chart fade.
• Add a stroke, a shadow, a glow or an outline.
• Recolour the mark to amber, neon, electric or a categorical violet.
• Sit violet on ink, or ink on violet — the contrast fails.
• Use Muted as a style choice where Solid or Reversed would work.
• Stretch, rotate, condense, or rebuild the mark from type.

• Ink is the voice. Primary buttons, selected thumbs, links and "ok" cells are all ink. A button is never --brand — see Buttons.
• Selection is platinum, not ink. A selected card or an active nav item fills with --platinum, keeps its hairline and takes ink type. An ink fill at that size reads as a button.
• Colour lives on fills, strokes and legend swatches. It reaches type only to correlate with a graph, or as --amber on a negative figure in a table — never on a chart title, a KPI value, or body copy.
• Status is never colour alone. Every state carries a label.
• Up is neon, warning is amber. No green, and no red at all — --danger resolves to --amber.

Primary

--ink · 100%

Headings, KPI values, table first column, active nav.

Secondary

--ink2 · ink 62%

Body copy, descriptions, labels, table cells.

Tertiary

--ink3 · steel / titanium

Table headers, axis ticks, placeholders, captions.

Muted

--muted · ink 45%

Section headlines only, at 24 px and up. It clears AA for large type at 3.05:1, so it never carries body copy.

• Tabular numerals where figures stack. Anything read down a column — tables, chart values — carries tabular-nums. KPI values are lining figures.
• One family. Suisse Intl carries display, UI, body and code.
• Emphasis is 600. Never 900. Black is a display weight — it belongs at hero and page-title size, never inside a sentence.
• Sentence case for headings and buttons. Uppercase is for labels, eyebrows and table headers only.
• No full stop on a headline. Titles, section headlines, ledes, labels and button text end without one. A period closes a thought; a headline is meant to stay open. Internal punctuation is fine — it is only the last character that goes.
• Measure caps at 62 ch for body copy.

• Violet, amber or neon type. Colour is a fill, not a voice.
• A synthesised Medium, Italic or Bold — only the four licensed cuts.
• font-weight: bold or 700. There is no 700 cut, so the browser resolves it upward to Black. Always write 600.
• Aeonik, Neue Rational, Reckless, or a system fallback in shipped work.
• Tabular figures in running text. Even widths are what make a column align; in a sentence they just leave gaps.
• Letter-spacing on body copy beyond the -0.011em default.
• Underlines on anything but inline links.

Solid --raised — --white in light, --carbon in dark. No blur, no border. It reads as a sheet laid on the --paper stage, and content sits directly on it.

Glass fill plus the inset, for surfaces that float over content: popovers, drawers, tooltips, buttons, chips and controls. The sidebar and topbar are chrome but sit beside content rather than over it, so they take the solid --raised fill and keep only their directional hairline.

24 px

--r · cards, drawers, overlays, the composer.

16 px

--r-m · a card inside a card, and the demo surfaces in this guide.

12 px

--r-s · inner plates, inputs, code blocks, media.

999 px

Pills · buttons, chips, toggles, legend swatches, bar tracks.

Avoid A hard line competes with content and breaks over glass.

Avoid Reserved for tooltips and the Ask bubble. Never on a card.

Use Defines the edge from inside. Works on any fill, in either theme.

Products live & launching

Neutral and countable. A chip names a thing. Every chip in a row carries the same weight, so the set reads as a list.

Carries a state. A pill takes a fill and a colour precisely because it is saying something about status, so it is never neutral.

The value end is solid; the origin dissolves. A horizontal bar growing right uses a 270deg gradient.

Under a line the fade runs the other way — full opacity where it meets the stroke, 15% at the baseline.

The 1.5 px tick on the first bar is a reference marker — last period, target, or category median.

Retention quantises onto the categorical ramp — --c0 at month 0, --c6 once a cohort is spent. Type is picked per cell against the fill, so the grid inverts cleanly with the theme.

• Grey bars are silver, and silver goes darker in dark mode.
• Filled violet and amber fade 100% → 15%. Bars solid at the tip, areas solid at the series.
• Rings, bubbles, legend chips and lines stay solid.
• Legend swatches are pills matching the series before any fade is applied.
• Axis ticks are --ink3 at 10.5 px, gridlines are --grid.

Negatives are --amber and keep their minus sign. Amber on a white card is 3.11:1, so the sign is what carries the meaning — the colour only makes the column scannable.

• A label read against a graph. A series name, an inline value, a legend label — anything the eye has to match to a fill or a stroke takes that series colour.
• A negative value in a table. --amber, with the minus sign kept. The one place colour lands on type with no chart beside it.

• Chart titles, KPI values and body copy. Nothing correlates to these, so colour on them is decoration.
• Violet type, anywhere. Brand is a fill and a focus ring. It has no voice, so it never becomes a letterform — use the series colour from the ramp instead.
• Colour as the only signal. A red-green delta with no sign and no label is unreadable to a third of people. There is no green here anyway.

Logo pack

Wordmark, symbol, reversed and single-colour variants in SVG, PNG, PDF and AI.

Type pack

Suisse Intl in four cuts — WOFF2 for web, OTF and TTF for desktop.

Written spec

The same rules as markdown, structured for repos and agent context.

Slide template

Grid, layouts and data-vis rules for the deck template, as markdown.