The drin design system.
A precise, intelligent visual language. One cinematic moment of warmth at the gate — then a calm, near-black interface lit only by white light and glass. This document defines the rules that keep it coherent.
Two palettes, one rule.
drin runs on a strict separation. The ember palette — pulled from the sunset gate — is reserved exclusively for the hero. Every surface below the fold belongs to the core palette: deep black, glass, and cool white light. Warmth marks the threshold; precision lives beyond it.
Core palette
The working surface of the entire product. Cool-neutral blacks layered for depth, a single cool-white as the only luminous accent, and a calm text ramp.
Ember palette HERO ONLY
Sampled directly from the gate at sunset. These warm tones never appear as UI accents — they live only inside the hero video and its glow. Treat them as cinematography, not interface.
Typography
A clean geometric system. Sora carries display and headings with tight tracking; Geist handles UI and body; Geist Mono labels signals, data and metadata.
Spacing & radius
A 4-based spatial scale keeps rhythm consistent. Radii stay generous and soft to support the glass language.
Motion
Restrained and premium. Everything eases out — fast to start, slow to settle. Motion is transform/opacity only, so the interface stays flawless under load. Interaction is rich; decoration is quiet.
Buttons
One luminous primary, one glass ghost. Hover lifts with a soft white halo — never color.
Surfaces & glass
Two surface modes for contrast: flat black panels for calm, frosted glass for moments that should feel premium and alive. Glass cards track the cursor with a soft sheen and tilt subtly in 3D.
Glass feature card
Frosted fill, luminous top edge, cursor-tracked sheen and a 3-degree parallax tilt. For premium, interactive moments.
Flat panel
Opaque, quiet, structural. The default surface for dense content where calm beats spectacle.
Signal surface
Used where live data lives. Pairs with the cool-white pulse to signal that something is happening right now.
Signal cards
The core unit of the product — the moment something interesting appears. Icon code, headline, mono metadata, and a single relevance score. Calm, scannable, decisive.
Data tiles
Quiet dashboard units. Big Sora numerals, mono labels, and white-light data marks — bars, sparklines and a radial gauge. No chart junk, no color noise.