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

#F4F1EA · --messai-surface-bg

surface.surface

#FFFFFF · --messai-surface-surface

surface.surfaceAlt

#ECEADF · --messai-surface-surfaceAlt

surface.border

#DCD9D0 · --messai-surface-border

surface.borderStrong

#BAB7AE · --messai-surface-borderStrong

surface.inverse

#1A1A17 · --messai-surface-inverse

Ink

Text colors at varying emphasis.

ink.primary

#1A1A17 · --messai-ink-primary

ink.secondary

#44443D · --messai-ink-secondary

ink.tertiary

#5E5E55 · --messai-ink-tertiary

ink.muted

#6A6A60 · --messai-ink-muted

ink.muted2

#9A988F · --messai-ink-muted2

ink.onAccent

#F4F1EA · --messai-ink-onAccent

ink.onInverse

#F4F1EA · --messai-ink-onInverse

Accent

Brand accent — used sparingly for actions + focus.

accent.base

#1A1A17 · --messai-accent-base

accent.soft

#ECEADF · --messai-accent-soft

accent.strong

#44443D · --messai-accent-strong

accent.contrast

#F4F1EA · --messai-accent-contrast

Semantic tones

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

positive

#F0FDF4

ink

#15803D

edge

#BBF7D0

caution

#FFFBEB

ink

#B45309

edge

#FDE68A

critical

#FFF1F2

ink

#BE123C

edge

#FECDD3

neutral

#ECEADF

ink

#44443D

edge

#DCD9D0

info

#EFF6FF

ink

#1E40AF

edge

#BFDBFE

<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

radius.md

radius.lg

radius.pill

9999px

borderRadius: 'var(--messai-radius-base)' // 0 (no-radius rule)

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 · Inter — UI chrome and body text

Serif · Source Serif 4 — titles and editorial emphasis

Mono · JetBrains 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

Reactor	W/m²	%	Source
Single-chamber air-cathode MFC	1.25	45	10.0000/example-a
Stacked MFC (4 cells)	0.88	38	10.0000/example-b
Two-chamber MFC	0.42	62	10.0000/example-a
Sediment MFC	0.03	21	10.0000/example-b

import {
  DataTable, TableHead, TableBody, TableRow, TableHeaderCell, TableCell,
} from '@messai/ui';

<DataTable aria-label="Reactor performance">
  <TableHead>
    <TableRow hover={false}>
      <TableHeaderCell>Reactor</TableHeaderCell>
      {/* numeric = right-aligned; unit sits under the label, cells stay bare */}
      <TableHeaderCell numeric unit="W/m²" sort={dir} onSort={toggle}>
        Power density
      </TableHeaderCell>
      <TableHeaderCell>Source</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.id}>
        <TableCell>{r.reactor}</TableCell>
        <TableCell numeric>{r.powerDensity.toFixed(2)}</TableCell>
        <TableCell muted>{r.source}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</DataTable>

// Config-driven shortcut (built-in sort / empty / loading):
<Table columns={columns} rows={rows} rowKey={(r) => r.id} />

// Astro pages (no React) apply the same recipe as classes:
import { tableStyles } from '@messai/ui'; // React-free: '@messai/ui/table-styles'
// class={tableStyles.table} · {tableStyles.headerCell} · {tableStyles.cell}

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>