MESSAI · DESIGN SYSTEM

Tokens, primitives, patterns

Live examples of every design token and component. Click any code block to copy. Click the gear (top right) to tweak token values in real time.

Tokens

Color, type, spacing, radius, shadow, motion — the lowest layer.

Surface

Page, card, and chrome backgrounds.

surface.bg

#FAFAF6 · --messai-surface-bg

surface.surface

#FFFFFF · --messai-surface-surface

surface.surfaceAlt

#F4F3EE · --messai-surface-surfaceAlt

surface.border

#E6E3DA · --messai-surface-border

surface.borderStrong

#CFCABD · --messai-surface-borderStrong

surface.inverse

#161513 · --messai-surface-inverse

Ink

Text colors at varying emphasis.

ink.primary

#161513 · --messai-ink-primary

ink.secondary

#3E3B33 · --messai-ink-secondary

ink.muted

#83806F · --messai-ink-muted

ink.muted2

#ADAA9A · --messai-ink-muted2

ink.onAccent

#FFFFFF · --messai-ink-onAccent

ink.onInverse

#FAFAF6 · --messai-ink-onInverse

Accent

Brand accent — used sparingly for actions + focus.

accent.base

#2F8073 · --messai-accent-base

accent.soft

#D7E6E2 · --messai-accent-soft

accent.strong

#1F4640 · --messai-accent-strong

accent.contrast

#FFFFFF · --messai-accent-contrast

Semantic tones

Five tones for status pills, alerts, and inline messages.

positive

#D7E6E2

ink

#2C5D54

edge

#A8C6C0

caution

#F5DDB5

ink

#A8541A

edge

#DDBE84

critical

#F4D7CF

ink

#923826

edge

#DDA89A

neutral

#F0EEE7

ink

#3E3B33

edge

#D4D0C2

info

#DDE5EF

ink

#1F3A66

edge

#B5C5DD

<div style={{
  backgroundColor: 'var(--messai-positive-bg)',
  color: 'var(--messai-positive-ink)',
  border: '1px solid var(--messai-positive-edge)',
}}>healthy</div>

Spacing scale

4px baseline rhythm. Use space.4 (16px) as the default gap.

space.1

0.25rem · 4px

space.2

0.5rem · 8px

space.3

0.75rem · 12px

space.4

1rem · 16px

space.6

1.5rem · 24px

space.8

2rem · 32px

space.12

3rem · 48px

space.16

4rem · 64px

gap: 'var(--messai-space-4)' // 16px

Radius scale

Sharp corners are the project default — never use border-radius unless explicitly requested.

radius.none

radius.base

2px

radius.md

4px

radius.lg

6px

radius.pill

9999px

borderRadius: 'var(--messai-radius-base)' // 2px

Shadow scale

Restrained elevation. focus is reserved for keyboard focus rings.

shadow.xs

shadow.sm

shadow.base

shadow.md

shadow.lg

shadow.focus

boxShadow: 'var(--messai-shadow-md)'

Motion / duration

Earned animation. Press Play to see each token's pacing.

fast

150ms

base

200ms

slow

300ms

slower

500ms

transition: 'background-color var(--messai-duration-base) var(--messai-ease-inOut)'

Atoms

Single-purpose primitives — Eyebrow, Pill, typography, buttons.

Eyebrow + Pill

Atomic chrome — labels, status indicators.

Eyebrow

PERFORMANCEREACTORFOCUS

<Eyebrow>PERFORMANCE</Eyebrow>

Pill — semantic tones

healthyattentionerrorlabelinfountonedMFC

<Pill tone="positive">healthy</Pill>
<Pill tone="caution">attention</Pill>
<Pill tone="critical">error</Pill>
<Pill tone="neutral">label</Pill>
<Pill tone="info">info</Pill>

Typography

Type scale across sans / serif / mono.

Type scale

xs · The microbial fuel cell achieved 1.25 W/m²

sm · The microbial fuel cell achieved 1.25 W/m²

base · The microbial fuel cell achieved 1.25 W/m²

lg · The microbial fuel cell achieved 1.25 W/m²

xl · The microbial fuel cell achieved 1.25 W/m²

2xl · The microbial fuel cell achieved 1.25 W/m²

<p style={{ fontSize: 'var(--messai-size-xs)' }}>xs (12px)</p>
<p style={{ fontSize: 'var(--messai-size-base)' }}>base (16px)</p>
<p style={{ fontSize: 'var(--messai-size-2xl)' }}>2xl (24px)</p>

Font families

Sans · IBM Plex Sans — UI chrome and body text

Serif · IBM Plex Serif — titles and editorial emphasis

Mono · IBM Plex Mono — values, units, tabular data

<p style={{ fontFamily: 'var(--messai-font-sans)' }}>sans</p>
<p style={{ fontFamily: 'var(--messai-font-serif)' }}>serif</p>
<p style={{ fontFamily: 'var(--messai-font-mono)' }}>mono</p>

Buttons

Three button rhythms. (Task 6 Button rewrite pending.)

Buttons

<button>Primary</button>
<button>Secondary</button>
<button>Ghost</button>

Molecules

Composed patterns — anchored cards, card grids, form groups.

AnchoredCard — click to open

<AnchoredCard open={open} onClose={close} anchor={{ top: 40, right: 0 }} ariaLabel="..." width={240}>
  {/* content */}
</AnchoredCard>

Card grid

REACTOR

Single-chamber MFC

Carbon felt anode + air cathode. Continuous flow at 0.5 mL/min.

active

SUBSTRATE

Acetate (1 g/L)

Synthetic medium, batch-fed every 48h. pH 7.0, 30°C.

batch

BIOFILM

Geobacter dominant

16S sequencing at day 21 shows >60% Geobacter sulfurreducens.

mature

<div style={{
  backgroundColor: 'var(--messai-surface-surface)',
  border: '1px solid var(--messai-surface-border)',
  borderRadius: 'var(--messai-radius-base)',
  padding: 16,
}}>
  <Eyebrow>REACTOR</Eyebrow>
  <h4>Single-chamber MFC</h4>
  <p>Carbon felt anode + air cathode.</p>
  <Pill tone="positive">active</Pill>
</div>

Form group — label + input + helper + error

External resistance

Ohms (Ω) — the load resistor across the cell.

Operating temperature

Above 80°C — biofilms typically denature.

<label>External resistance</label>
<input type="text" />
<div className="helper">Ohms (Ω) — the load resistor across the cell.</div>

Organisms

Surfaces — stat blocks, tables, inspector panels.

Stat / metric block

Power density

1.25

W/m²

Coulombic efficiency

Open-circuit voltage

0.72

<div>
  <span className="label">Power density</span>
  <span className="value">1.25</span>
  <span className="unit">W/m²</span>
</div>

Table / data grid

Parameter	Value	Unit	Source
powerDensity	1.25	W/m²	10.1234/abc
currentDensity	3.40	A/m²	10.1234/abc
openCircuitVoltage	0.72	V	10.1234/abc
coulombicEfficiency	45	%	10.5678/xyz

<table>
  <thead>
    <tr><th>Parameter</th><th>Value</th><th>Unit</th><th>Source</th></tr>
  </thead>
  <tbody>{/* alternating row backgrounds via surfaceAlt */}</tbody>
</table>

Inspector panel — sticky right rail

INSPECTOR

Paper context

System class

MFC

Scale

lab

Anode

carbon_felt

Cathode

Pt/C 0.5 mg/cm²

Substrate

acetate

Duration

21 d

<aside className="inspector">
  <Eyebrow>INSPECTOR</Eyebrow>
  <h3>Paper context</h3>
  {rows.map(row => (
    <div className="row">
      <span className="label">{row.label}</span>
      <span className="value">{row.value}</span>
    </div>
  ))}
</aside>