Design System

Five principles resolve design debates before they start. Every token and component decision is traced back to at least one of them.

Five design principles

Color carries meaning, never decoration. Lime is reserved for action, cyan for orientation (labels, focus, active), casper for inverted bands that slow the reader down for detail. Neutrals do the rest.

Color tokens

A two-family stack: Canaro for display, Montserrat as the web fallback, system-ui as the last resort. Display is always uppercase with tight leading; labels use wide tracking so they read as navigation, not prose.

Type scale

An 8 pt base drives every gap. Sections breathe at 32 px top and bottom (64 px between sections) and are separated by space, not divider lines.

Layout & spacing

A 12-column grid on a 1280 px canvas with 40 px outer margins and 24 px gutters, over an 8 px baseline. Layouts snap to column spans, never to arbitrary widths.

12-column grid

The system is flat and architectural. Corners are square everywhere; hierarchy comes from contrast, rules and space rather than shadows.

Icons are typographic: arrows (→ ↓), plus and minus, set in the label style so they inherit color and state. Imagery is product-led and always 16:9.

Motion confirms an action or reveals content; it never carries meaning on its own.

Three tiers separate raw values, intent and component decisions. A theme (for example a light or client-branded version) is a remap of the semantic tier only.

Three tiers of tokens

{
  "color": {
    "primitive": { "lime-500": "#C5DB57", "cyan-500": "#54C6D2",
                   "casper-300": "#A9BBC5", "ink-950": "#0B0B12" },
    "semantic":  { "action": "{lime-500}", "signal": "{cyan-500}",
                   "band": "{casper-300}", "bg": "{ink-950}" }
  },
  "component": {
    "button.primary":  { "bg": "{action}", "fg": "{bg}" },
    "button.active":   { "bg": "{signal}" },
    "focus.ring":      { "width": "2px", "color": "{signal}", "offset": "3px" }
  },
  "space":  { "1": "8px", "2": "16px", "3": "24px", "4": "32px", "6": "48px", "8": "64px" },
  "motion": { "fast": "150ms ease", "reveal": "700ms", "mask": "900ms" }
}

Buttons are specified as flows, not static shapes: every action shows its next state and offers a way back. The examples below are live; try them.

Buttons & action flows

Every interactive component ships with five specified states. Focus is always visible and always the same: a 2 px cyan ring offset 3–4 px.

State matrix

Three templates cover the whole product. Home tells the full story; lens pages reuse the same skeleton with a curated project set per audience; case studies follow a fixed narrative (goal, value proposition, results, innovation, gallery, trade-offs, role) so projects can be compared like for like.

Three templates, 35+ pages

One system, every screen

The voice is executive, direct and evidence-led. Copy states what happened and what it changed, and lets numbers do the persuading.

Numbers are the hero of the system. They use tabular figures, a 2 px cyan rule and a one-line caption that names the source project.

Accessibility is built into the tokens, not audited at the end.

Contrast matrix

The system is connected, not stored. Tools talk to the design system through the Model Context Protocol (MCP) and APIs, agents act on it, and SensAI adds the intelligence layer, always with human approval before release.

Connected system

MCP connections

Agents

SensAI

SensAI, the AI-native innovation engine, sits above the system as its intelligence layer: it analyzes usage and audience signals, proposes component variants, and validates options with synthetic users before anything reaches the library.

Delivery & operations

The system is maintained with an AI-augmented toolchain, so one change propagates to every page at once.