Skip to content
VVVER

Design System / 00

Introduction

Rules for building monochrome React interfaces with semantic color, editorial type, open layouts, and controlled motion.

Principles

Use semantic color. Components inherit ink and paper tokens instead of choosing literal colors. Muted companion tints may identify a local status or mark; saturated color belongs in photography and video.

Assign type by role. The package is face-agnostic; this catalog uses Switzer for the primary and uppercase micro-label registers, Geist Mono for code and telemetry, Crimson Text for the optional serif voice, and Saira Semi Condensed as a rare display accent.

Avoid card-like boxes. Use scale, spacing, source order, and 1px rules at 14–20% ink — not rounded cards, decorative fills, or shadows.

Dim on interaction. Hover and press step down the opacity ladder without dimming readable information below the /60 floor. Persistent state stays clear, and keyboard focus receives a visible current-color outline.

Use motion to explain change. Four curve roles cover direct entrances, exits, curtains, and masked type. Interaction feedback stays under 400ms; only transform and opacity interpolate. With reduced motion enabled, each animation resolves to its complete state without movement.

Keep material traceable. Texture is faint, static, deterministic, and opt-in. Dates, sources, frame numbers, and credits must describe real production information.

Instead of animated grain and random distress, prefer a crop that establishes place or action, a caption that identifies the subject, a production note with real dates, or a visible focus state.

Contents