| name |
High-Contrast Light Operational System |
| colors |
| surface |
surface-dim |
surface-bright |
surface-container-lowest |
surface-container-low |
surface-container |
surface-container-high |
surface-container-highest |
on-surface |
on-surface-variant |
inverse-surface |
inverse-on-surface |
outline |
outline-variant |
surface-tint |
primary |
on-primary |
primary-container |
on-primary-container |
inverse-primary |
secondary |
on-secondary |
secondary-container |
on-secondary-container |
tertiary |
on-tertiary |
tertiary-container |
on-tertiary-container |
error |
on-error |
error-container |
on-error-container |
success |
on-success |
success-container |
on-success-container |
warning |
on-warning |
warning-container |
on-warning-container |
primary-fixed |
primary-fixed-dim |
on-primary-fixed |
on-primary-fixed-variant |
secondary-fixed |
secondary-fixed-dim |
on-secondary-fixed |
on-secondary-fixed-variant |
tertiary-fixed |
tertiary-fixed-dim |
on-tertiary-fixed |
on-tertiary-fixed-variant |
background |
on-background |
surface-variant |
navy-text |
border |
divider |
slate-400 |
slate-300 |
#f7f9fb |
#d8dadc |
#f7f9fb |
#ffffff |
#f2f4f6 |
#eceef0 |
#e6e8ea |
#e0e3e5 |
#191c1e |
#434655 |
#2d3133 |
#eff1f3 |
#737686 |
#c3c6d7 |
#0053db |
#004ac6 |
#ffffff |
#2563eb |
#eeefff |
#b4c5ff |
#545f73 |
#ffffff |
#d5e0f8 |
#586377 |
#46566c |
#ffffff |
#5e6e85 |
#e9f0ff |
#ba1a1a |
#ffffff |
#ffdad6 |
#93000a |
#0d7a2e |
#ffffff |
#d7f5d7 |
#002106 |
#8c5000 |
#ffffff |
#ffe3b8 |
#2e1800 |
#dbe1ff |
#b4c5ff |
#00174b |
#003ea8 |
#d8e3fb |
#bcc7de |
#111c2d |
#3c475a |
#d3e4fe |
#b7c8e1 |
#0b1c30 |
#38485d |
#f7f9fb |
#191c1e |
#e0e3e5 |
#1e293b |
#e2e8f0 |
#f1f5f9 |
#64748b |
#cbd5e1 |
|
| typography |
| display |
headline-lg |
headline-lg-mobile |
headline-md |
body-lg |
body-md |
label-caps |
code |
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Hanken Grotesk |
48px |
700 |
56px |
-0.02em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Hanken Grotesk |
32px |
600 |
40px |
-0.01em |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
Hanken Grotesk |
24px |
600 |
32px |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
Hanken Grotesk |
20px |
600 |
28px |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
Inter |
16px |
400 |
24px |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
Inter |
14px |
400 |
20px |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
textTransform |
JetBrains Mono |
12px |
600 |
16px |
0.05em |
uppercase |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
JetBrains Mono |
13px |
400 |
20px |
|
|
| fonts |
| imports |
| url |
desc |
|
Headlines (Display, Headline LG, Headline MD) |
|
|
| url |
desc |
|
Labels, code, technical text |
|
|
|
| rounded |
| sm |
DEFAULT |
md |
lg |
xl |
full |
0.125rem |
0.25rem |
0.375rem |
0.5rem |
0.75rem |
9999px |
|
| spacing |
| base |
xs |
sm |
md |
lg |
xl |
gutter |
margin-mobile |
margin-desktop |
max-width |
4px |
4px |
8px |
16px |
24px |
32px |
24px |
16px |
64px |
100vw |
|
| breakpoints |
| mobile |
tablet |
desktop |
wide |
640px |
768px |
1024px |
1280px |
|
| components |
| button |
input |
card |
chip |
list |
modal |
| padding |
font |
radius |
primary-bg |
primary-text |
secondary-border |
secondary-text |
ghost-text |
8px 16px |
body-md (Inter, 14px, semibold 500) |
DEFAULT (0.25rem / 4px) |
primary-container (#2563eb) |
#ffffff |
navy-text (#1e293b) |
navy-text (#1e293b) |
navy-text (#1e293b) |
|
| border |
background |
label-font |
label-color |
focus-border |
radius |
1px solid border (#e2e8f0) |
#ffffff |
label-caps (JetBrains Mono, 12px, 600, uppercase) |
slate-400 (#64748b) |
2px solid primary-container (#2563eb) |
DEFAULT (0.25rem / 4px) |
|
| background |
border |
padding |
radius |
shadow |
#ffffff |
1px solid border (#e2e8f0) |
24px |
lg (0.5rem / 8px) |
none |
|
| height |
padding |
font |
gap |
dot-size |
radius |
24px |
0 8px |
label-caps (JetBrains Mono, 12px) |
4px |
8px |
full (9999px) |
|
| divider |
hover-bg |
1px solid divider (#f1f5f9) |
#f8fafc |
|
| shadow |
radius |
0px 4px 12px rgba(30, 41, 59, 0.05) |
lg (0.5rem / 8px) |
|
|
This design system is engineered for high-stakes operational environments, such as infrastructure management, fintech dashboards, and enterprise-grade SaaS. It prioritizes clarity, speed of recognition, and functional authority.
The design style is Corporate / Modern with a lean toward Minimalism. It utilizes a "density-focused" aesthetic that ensures critical information is never lost. The visual mood is precise and reliable, using sharp typography and a structured grid to convey a sense of technical excellence.
The palette is anchored by an ultra-clean background (#f7f9fb), which reduces eye strain while maintaining a crisp, modern feel.
- Primary Container (
#2563eb): Electric blue used for primary calls-to-action, active states, and critical highlights.
- Primary (
#004ac6): Darker blue variant for hover/pressed states and high-emphasis elements.
- On-Surface (
#191c1e): Near-black for primary typography, providing high-contrast legibility.
- Slate Scale (
#64748b → #cbd5e1): Secondary text and disabled states.
- Success (
#0d7a2e), Warning (#8c5000), Error (#ba1a1a): Saturated semantic colors for status signals.
Tri-font strategy to differentiate intent:
- Hanken Grotesk (Headlines): Sharp contemporary grotesque for titles and displays.
- Inter (Body): Exceptional UI legibility for dense data and long-form text.
- JetBrains Mono (Labels/Technical): Monospaced font for metadata, labels, and system status.
Fixed-Fluid Hybrid: Desktop views capped at 1280px; internal containers use a fluid 12-column grid.
- 8px linear scale for spacing; 4px for tight component internals
- 24px gutters between data-heavy widgets
- Mobile: 16px margins, 4-column grid, xl spacing reduced 25%
Tonal layers and crisp outlines instead of heavy shadows:
- Background:
#f7f9fb; Cards: #ffffff with 1px #e2e8f0 border
- Active inputs: 2px primary border
- Modals only: subtle 12px blur shadow at 5% navy
Soft (0.25rem / 4px) — modern but professional.
- Buttons, inputs, chips: 4px radius
- Cards, modals: 8px radius
- Status pills: fully rounded
- Primary:
bg-[#2563eb] text-white font-medium
- Secondary:
border border-[#1e293b] text-[#1e293b]
- Ghost:
text-[#1e293b] no bg/border until hover
- Default:
bg-white border border-[#e2e8f0]
- Label: JetBrains Mono, uppercase,
#64748b
- Focus: 2px
#2563eb border
bg-white border border-[#e2e8f0] padding 24px, radius 8px, no shadow
- Uppercase JetBrains Mono label with 8px colored dot prefix
- Fully rounded pill shape
- 1px
#f1f5f9 dividers
#f8fafc hover background on interactive rows
A class-based dark mode is supported via the dark class on <html>, persisted to localStorage.
- A Stimulus
theme controller toggles the dark class and persists to localStorage.
- An inline
<script> in <head> reads storage before paint to prevent flash.
- Toggle buttons in dashboard header, public header, and auth header.
| Token |
Light |
Dark |
surface |
#f7f9fb |
#0f172a |
surface-dim |
#d8dadc |
#1e293b |
surface-container-lowest |
#ffffff |
#020617 |
on-surface |
#191c1e |
#f1f5f9 |
on-surface-variant |
#434655 |
#cbd5e1 |
| Token |
Light |
Dark |
success |
#0d7a2e |
#22c55e |
error |
#ba1a1a |
#f87171 |
warning |
#8c5000 |
#f59e0b |
| Token |
Light |
Dark |
navy |
#1e293b |
#f1f5f9 |
border |
#e2e8f0 |
#334155 |
divider |
#f1f5f9 |
#1e293b |
Use semantic tokens instead of hardcoded colors:
bg-surface-container-lowest instead of bg-whiteborder-border instead of border-[#e2e8f0]text-on-surface-variant instead of text-slate-600