Design System · Spec Sheet
Meridian
A calm, token-driven design system — built accessibility-first and shipped to production in Elementor using native containers and widgets only.
WCAG 2.1 AA
WCAG 2.2 AA
Elementor • native widgets
11 components
01 — Foundations
Tokens are the single source of truth · set as Global Colors & Fonts in Elementor
Color
Ink
#0E1612
Primary text · dark fills
Neon accent
#00FF88
Fills & markers only — never text on light
Deep green
#008044
Text-safe accent · AA on bg (≈4.7:1)
Background
#F5F8F6
Cool near-white page base
Surface
#FBFDFC
Cards & raised surfaces
Accent discipline: neon #00FF88 reads ~1.3:1 on the light background, so it is never used as text there — only as a fill beneath ink text, a marker, or a focus ring. The deep-green form carries every accent-colored word. Same hue, two jobs.
Typography
Hanken Grotesk
Display & body · 400–800
JetBrains Mono
Labels & metadata · 400–600
Spacing scale
8-step
2xs
8px
xs
12px
sm
18px
md
24px
lg
40px
xl
56px
Radius
fixed 44px swatch
Chip
6px
Image
11px
Card
18px
Pill
999px
02 — Component library
Live specimen · tokens used · accessibility status
Every component below is production-shipped and maps 1:1 to native Elementor primitives — no HTML/embed widgets anywhere.
Badges
Heading widget · 2 variants
1.4.3 Contrast ✓
Elementor • native widgets
Two variants — green tint for accessibility/positive callouts, ghost for neutral metadata. Pill radius 999. Mono type at 11px, ink text for AAA contrast on both fills.
1.4.3 Contrast ✓
1.4.11 Non-text ✓
1.3.1 Info ✓
Ink #0E1612 text on both fills clears AAA. 1px border color meets 3:1 non-text contrast on the F5F8F6 background. Labels are semantic content, not decorative.
1.4.3 Contrast ✓
2.5.8 Target ✓
2.4.7 Focus ✓
Min-height 44px meets 2.2 target size. Primary uses ink text on neon (≈13:1). Focus ring switches to ink on the neon fill so it stays visible.
Capability list
Icon List widget
- Interaction design
- Design systems
- Prototyping
1.3.1 Info & Relationships ✓
Real list semantics (<ul>). Neon square is a decorative marker only — the text carries all meaning.
Links
Text-link · 5 states
default
View case study
hover
View case study
focus
View case study
visited
View case study
disabled
View case study
1.4.1 Use of Color ✓
2.4.7 Focus Visible ✓
State is never color-only: hover adds a 2px underline, focus a deep-green ring at 3px offset, disabled a strike + reduced opacity. Disabled links carry aria-disabled and are non-focusable.
Project card
Container + Image/Heading/Text
CASE IMAGE · 16:10
Fintech · 0→1
+38% retention
Atlas — finance OS
Unified accounts into one calm daily ritual.
1.4.11 Non-text ✓
1.1.1 Alt text ✓
Whole card is one link with a descriptive accessible name. Hover lift is decorative; border darkens for a non-color cue. Images require meaningful alt.
Stats & Experience row
Flex / Grid container
10+
Years designing
6
Teams led
40M+
Users reached
Staff Product Designer
Monarch Labs
2021—Present
1.4.10 Reflow ✓
1.4.12 Text Spacing ✓
Grid rows collapse to a single column on mobile without loss of content or function. Line-height and spacing survive user text-spacing overrides.
03 — WCAG 2.1 / 2.2 conformance
Target: AA · ★ = new in 2.2
Each success criterion below is designed into the system rather than retrofitted. The two criteria introduced in WCAG 2.2 (Target Size, Focus Not Obscured) are flagged.
SC
Criterion
How Meridian meets it
Level
1.4.3
Contrast (Minimum)
Ink on bg ≈15:1; deep-green text ≈7:1; ink on neon ≈13:1.
AA
1.4.11
Non-text Contrast
Borders, focus rings, and markers all clear 3:1 against their backdrop.
AA
1.4.1
Use of Color
Links underline on hover; focus is a ring — never color alone.
A
1.3.1
Info & Relationships
Real landmarks, heading order, and list semantics via native widgets.
A
1.4.10
Reflow
Grids collapse to one column at 320px CSS width; no horizontal scroll.
AA
1.4.12
Text Spacing
Layout survives user line-height / letter-spacing overrides.
AA
2.4.7
Focus Visible
Persistent 2px deep-green ring (ink on neon), 3px offset, never removed.
AA
★ 2.5.8
Target Size (Minimum)
Every interactive control is ≥ 44×44px. New in 2.2.
AA
★ 2.4.11
Focus Not Obscured
Sticky header offsets scroll so a focused control is never hidden. New in 2.2.
AA
2.3.3
Animation from Interactions
prefers-reduced-motion zeroes all transitions. (AAA, met.)
AAA
04 — Why this matters
A few decisions in this system that speak to how I work.
Accessibility as a constraint, not a checklist
The two-tone accent exists because neon fails contrast as text. The system encodes the rule so no one can misuse it later — good decisions made cheap to keep.
Designed for the real build environment
Every component maps to native Elementor containers and widgets — zero custom-code widgets. Designers hand off, marketers maintain, nothing rots.
Tokens are the contract
Color, type, spacing, and radius live as global values. Change one token, the whole surface updates consistently — the definition of a system, not a set of screens.
Restraint is the aesthetic
One accent, two typefaces, an eight-step spacing scale. The discipline is the point — it reads as calm and considered because every element earns its place.