Meridian Design System
Meridian is a design system built for clarity, consistency, and calm. It powers every surface of the Meridian analytics platform — from dense data tables to onboarding flows. This document is the single source of truth for color, typography, spacing, and foundational component patterns.
Design Principles
- Clarity over decoration. Every visual choice must reduce cognitive load. If an element doesn’t help the user understand or act, remove it.
- Systematic consistency. Tokens — not one-off values — drive all decisions. A spacing value or color that isn’t in the system doesn’t ship.
- Accessible by default. All foreground/background pairings meet WCAG 2.1 AA contrast minimums (4.5:1 for text, 3:1 for UI elements). We test with real screen readers, not just automated scans.
- Progressive density. Interfaces start spacious and tighten as users gain expertise. The system supports both comfortable and compact modes through a single spacing scale.
Color Palette
Meridian’s palette is organized into semantic groups. Each group has a base value plus a tonal range from 50 (lightest) to 950 (darkest). The interactive explorer below shows every token.
Palette Tokens
| Token |
Base Hex |
Usage |
--m-primary |
#2E5CFF |
Actions, links, active states |
--m-secondary |
#7C3AED |
Accent, secondary actions, tags |
--m-neutral |
#64748B |
Text, borders, disabled states |
--m-success |
#059669 |
Positive outcomes, confirmations |
--m-warning |
#D97706 |
Caution states, approaching limits |
--m-error |
#DC2626 |
Errors, destructive actions |
--m-surface |
#F8FAFC |
Page backgrounds, card fills |
--m-ink |
#0F172A |
Primary text |
Color Explorer
Typography
Meridian uses a two-font system: Inter for UI text and JetBrains Mono for code and data. Both are variable fonts loaded from Google Fonts, with a system font fallback stack for offline and fast-loading scenarios.
Font Stacks
| Role |
Stack |
| Sans |
'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif |
| Mono |
'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace |
Type Scale
The scale follows a 1.250 (Major Third) ratio. All sizes derive from a configurable base — usually 16px for comfortable mode and 14px for compact mode.
| Token |
Default Size |
Weight |
Line Height |
Letter Spacing |
--m-display |
48px |
700 |
1.1 |
-0.03em |
--m-h1 |
32px |
700 |
1.2 |
-0.02em |
--m-h2 |
25.6px |
600 |
1.25 |
-0.015em |
--m-h3 |
20.5px |
600 |
1.3 |
-0.01em |
--m-h4 |
16.4px |
600 |
1.35 |
-0.005em |
--m-body |
16px |
400 |
1.55 |
0 |
--m-caption |
12.8px |
400 |
1.4 |
0.01em |
--m-overline |
11px |
600 |
1.3 |
0.06em |
Typography Scale Previewer
Spacing System
Meridian uses a 4px base unit with a geometric scale. All spacing values are multiples of 4, which keeps layouts aligned to a consistent vertical and horizontal rhythm.
| Token |
Value |
Common Use |
--m-space-1 |
4px |
Icon padding, tight gaps |
--m-space-2 |
8px |
Inline element gaps |
--m-space-3 |
12px |
Compact component padding |
--m-space-4 |
16px |
Default component padding |
--m-space-5 |
20px |
Group gaps |
--m-space-6 |
24px |
Card padding |
--m-space-8 |
32px |
Section gaps |
--m-space-10 |
40px |
Layout gutters |
--m-space-12 |
48px |
Section padding |
--m-space-16 |
64px |
Page margins |
--m-space-20 |
80px |
Hero spacing |
Spacing & Contrast Visualizer
Color Distribution
The chart below shows how Meridian’s palette distributes lightness across semantic groups. Each curve represents one color group — the goal is even tonal coverage so that every shade pairing produces usable contrast.
Component Patterns
Meridian components are built from these primitives. Every component maps directly to the tokens defined above — no magic numbers.
| Variant |
Background |
Text |
Border |
Use Case |
| Primary |
--m-primary-500 |
white |
none |
Main CTA, form submit |
| Secondary |
transparent |
--m-primary-500 |
--m-primary-200 |
Secondary actions |
| Ghost |
transparent |
--m-neutral-600 |
none |
Tertiary, toolbars |
| Danger |
--m-error-500 |
white |
none |
Destructive confirmations |
Border Radius Tokens
| Token |
Value |
Use |
--m-radius-sm |
4px |
Badges, tags |
--m-radius-md |
8px |
Buttons, inputs |
--m-radius-lg |
12px |
Cards, dialogs |
--m-radius-xl |
16px |
Panels, popovers |
--m-radius-full |
9999px |
Avatars, pills |
Shadow Tokens
| Token |
Value |
Use |
--m-shadow-sm |
0 1px 2px rgba(15, 23, 42, 0.05) |
Subtle lift |
--m-shadow-md |
0 4px 12px rgba(15, 23, 42, 0.08) |
Cards, dropdowns |
--m-shadow-lg |
0 12px 32px rgba(15, 23, 42, 0.12) |
Dialogs, popovers |
--m-shadow-xl |
0 24px 48px rgba(15, 23, 42, 0.16) |
Modals |
Usage Guidelines
Do
- Reference tokens by name:
var(--m-primary-500), not #2E5CFF
- Use the spacing scale for all padding, margin, and gap values
- Pair heading weights with body weights for hierarchy (700/600 headings, 400 body)
- Test color pairings with the contrast checker above before shipping
Don’t
- Introduce new colors outside the palette without a design system RFC
- Mix font stacks — Inter for UI, JetBrains Mono for code, nothing else
- Use
px for font sizes in CSS — use rem mapped to the scale tokens
- Apply shadows for decorative purposes — shadows communicate elevation
Changelog
| Version |
Date |
Changes |
| 1.3.0 |
2026-04-01 |
Added warning color group, updated neutral 50 |
| 1.2.0 |
2026-03-15 |
Introduced compact mode spacing multiplier |
| 1.1.0 |
2026-02-20 |
Switched from SF Pro to Inter for cross-platform |
| 1.0.0 |
2026-01-10 |
Initial release |