Meridian Labs builds precision instruments for climate research. Our design system reflects clarity, trust, and scientific rigor.
Tagline: Measure what matters.
Color System
Our palette is built on three seed hues. Every tint, shade, and semantic color is derived automatically by VB's OKLCH engine.
Brand Palette
Semantic Colors
Status Colors
Typography
We use a three-font stack: a serif for headings, a sans-serif for body, and a monospace for data and code.
Heading Font
Body Font
Monospace Font
Spacing Scale
A consistent spacing scale ensures visual rhythm. All values are derived from a 4px base unit.
Shapes and Elevation
Border Radius
Our radius scale moves from sharp to fully rounded.
Shadow Elevation
Shadows communicate depth and interaction hierarchy.
Border Widths
Motion
Animations should feel purposeful, not decorative. Respect prefers-reduced-motion.
Duration Tokens
| Token | Value | Use |
|---|---|---|
--duration-instant | 50ms | Micro-interactions (checkbox, toggle) |
--duration-fast | 100ms | Hover states, tooltips |
--duration-normal | 200ms | Most transitions |
--duration-slow | 350ms | Page transitions, modals |
--duration-slower | 500ms | Complex animations |
Component Showcase
Core UI components rendered with our brand theme.
Voice and Tone
We communicate with clarity, precision, and warmth. Technical accuracy is non-negotiable, but jargon is not a badge of honor.
Principles
- Be precise — Use exact numbers and units. "0.1 ppm" not "very accurate."
- Be human — Write for people, not papers. Short sentences. Active voice.
- Be honest — State limitations. "Works best above 0C" not "works everywhere."
Examples
- "Your sensor detected 415.2 ppm CO2 — 2% above the weekly average."
- "The atmospheric carbon dioxide concentration reading from your deployed unit has indicated an elevated level relative to the rolling mean."
- "Calibration takes about 10 minutes."
- "Please allow sufficient time for the calibration procedure to complete."