Material Philosophy

This design system draws from physical precedent. The Beolit 15, Braun ET66, Japanese lacquerware—objects that age with grace, where surface texture reveals craft. We're not building Apple's liquid glass. That's cool. We're building something warmer: depth without transparency, presence without coldness, tactility without gimmickry.

Every glass surface in this system has grain. Not blur, not frost, but actual luminous imperfection—the way light moves through aged materials. The RGB channels are warm (#F9F6F0 in light, #1C1812 in dark) because pure white and pure black create halation, a glow that makes low-vision users work harder to parse text edges. Warmth is legibility.

The six registers exist to give surfaces hierarchy without hierarchy. A button isn't "higher" than a card because it's brighter or bigger. It's higher because it has more tactile depth, more inset shadow, more dimensional presence. This serves the people this system is built for: users whose visual field is narrowed, who need redundant signals — not color alone, but shape, position, shadow, and depth in concert. Shape, position, shadow, depth—not color alone. The register metaphor extends this principle into naming: a vocabulary borrowed from acoustic experience, for a system that serves visual experience—and whatever lies adjacent to it.

Accessibility as Design Intent

Not compliance. Conviction.

SonarUI begins from a premise most design systems skip: people with low vision and blindness are first-class citizens, not edge cases to accommodate after the fact. WCAG guidelines are a floor here, not a destination. Every decision in this system asks what the ceiling looks like — and builds toward it. The reasons behind each choice come from how vision actually degrades across conditions, not from abstract compliance checklists or empathy exercises. Contrast ratios, warm ink tones, redundant signals, generous spacing — these aren't bolt-ons. They are the design.

These decisions make the design better for everyone. That's not a coincidence—it's the point.

Contrast Reference (WCAG 2.1)

Simulated Visual Context

Below: same case study card under standard vision, low-contrast simulation, and protanopia (red-blind) simulation. Information never depends on color alone.

Token Architecture

Three-tier system: Primitives (raw values) → Semantics (mode-aware) → Components (applied). This structure keeps light/dark mode in sync without duplication.

Token Flow

Color System

Ink Primitives (0–1000)

Surface Register System

In music, a register describes the resonant range of a voice: chest, mixed, head, falsetto. Each sits at a different depth in the body. You feel the difference before you analyze it. You don't need to see someone singing to know they've shifted into a higher register. This system borrows that language deliberately — as a quiet homage to people who navigate the world through non-visual senses. Hierarchy here is perceptual, not decorative.

The glass effect compounds this intent. These surfaces are semi-transparent not because it's fashionable, but because light perception often survives conditions that destroy visual acuity. Warm ambient glow through a frosted surface is legible at registers of vision most design systems ignore. At Base, the surface is nearly opaque — dense, grounded, warm. At Peak, it becomes 62% transparent: 28px of blur, maximum depth, a surface that catches and scatters light even when text cannot be resolved. Someone who sees only warm light still perceives the difference. That's the ceiling the system is built toward.

3D Depth Stack

The Six Registers

Register 5: Summit — States

Size Variants

Default for inline actions. XL for hero CTAs, empty-state prompts, and section-level calls to action.

Five Interaction Rules

Typography

Two families: Source Serif 4 variable (serif, headings) and Inter (sans-serif, body). Source Serif 4 leverages optical sizing and a continuous weight axis — display sizes run at 300, H1 at 350, H2 at 400. Lighter weight at large sizes reads as confident restraint, and the low stroke contrast between thick and thin strokes serves low-vision users better than high-contrast serifs.

Component Library

Case Study Card

Stat Card

Motion Principles

Motion serves clarity, never distraction. Reduced motion preference disables all transitions—no exceptions.

Usage Guidelines

When to Use Each Register

Anti-Patterns