Mise design system

Calm, fast, operator-first.

The Mise theme in one place — color, type, elevation and the components your screens are built from. One electric lime accent, used sparingly.

Typography

Type scale & families

The quick brown foxtext-5xl · 80 / 1.05
The quick brown foxtext-4xl · 60 / 1.05
The quick brown foxtext-3xl · 44 / 1.1
The quick brown foxtext-2xl · 32 / 1.2
The quick brown foxtext-xl · 24 / 1.2
The quick brown foxtext-lg · 20 / 1.3
The quick brown foxtext-md · 17 / 1.5
The quick brown foxtext-base · 15 / 1.5
The quick brown foxtext-sm · 13 / 1.5
The quick brown foxtext-xs · 12 / 1.5
Robotofont-display · headings
Manropefont-sans · body & ui
Geist Monofont-mono · data

Color

Palette

Ink
ink-50
ink-100
ink-200
ink-300
ink-400
ink-500
ink-600
ink-700
ink-800
ink-900
ink-950
Paper
paper-50
paper-100
paper-200
Lime
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
Semantic
success
success-100
warning
warning-100
danger
danger-100
info
info-100

Components

Buttons

Surfaces

Elevation & radii

shadow-mise-1
shadow-mise-2
shadow-mise-3
shadow-mise-4
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-full

Data

Numerals & status

Revenue
€84.20+18.4%
Covers
84
Next seating
19:30
Open order
ORD-2841
ConfirmedPendingCancelledWalk-inLIVE · 19:34

AI

Insight surface

Mise insight

Tonight will be busier than usual.

+18% covers vs. last Tuesday. Local concert lets out at 22:00, and three groups are already booked post-show.

Why

Tokens

surface-ink (local dark)

Primary text flips to light automatically.

Secondary text — fg-2.

Tertiary text — fg-3.

bg-bg-surface nested inside surface-ink