The values, and why each one is what it is

Color

Never pure white, never pure black

The cards are warm paper under a light gray sky with soft white clouds, and the darkest ink is cocoa. Pure black on pure white is a harsher contrast than any screen needs, and it reads as clinical — so the system does not contain either. Night holds the same law from the other end: its deepest ground is #060914 and its lightest ink #e4eef5.

Day's accents, the recommended family, are named for the tradition the system takes its ethics from: saffron for renunciate robes, turmeric for ritual gold, clay for earthen lamps, bodhi for the fig tree of awakening, peacock for India's bird, indigo for the Champaran satyagraha crop, monsoon for gray-blue rain skies. Nothing high-chroma, nothing poppy.

The classic family is the original accent set, kept because a consuming app built a full range of person-gradients directly on it. One rename: its blue-violet is --periwinkle-*, because it used to be called --indigo-* at a different value from the tradition set's indigo, and two different colors cannot share one name.

Night keeps every hue Day chose, anchored on its 300 step where Day anchors on 600, with a lighter 200 because a dark ground needs brighter ink. Only one family is new: frost, the pale ice at the core of every glow. Warnings are clay in both — Low Embers at night — and never red.

Gradients

One gradient owns a screen

All of them run at 155°, with stops at 0 / 30 / 60 / 100%. They are moments of emphasis, not decoration. The sky behind a Day screen and the stars behind a Night one are the ground, not a gradient of their own. Two gradients side by side is the rule this system breaks least gladly.

Each one ships as .ah-surface--<name>, which sets the gradient and the ink measured to work on it. A 155° ramp spans a wide lightness range, so no single ink can carry text across all of it; the surface therefore carries its own. A gradient that cannot clear AA at any ink opacity is marked surface-only — put text on them in an opaque card, which is this system's pattern anyway.

Day

Night

Type

Two voices, and the split is the tone

Both aesthetics pair Fraunces, a variable serif carrying emotional weight, with DM Sans for utility. The type is the same in Day and Night on purpose: a person moving between them has not moved between two products. An emotional line is set apart in italics and a factual line stays plain.

The size scale is musical and deliberately uneven — there is no 12px and no 14px. It is expressed in rem at the same computed sizes it has always rendered, so raising your browser's font size actually works.

Space

A 4px grid, composed like a magazine

The grid is mechanical; the composition is not. Generous negative space is a principle, not a preference: at least one full unit of air above and below a heading, and if a section feels crowded, remove elements before shrinking type.

Elevation

Paper in Day, light in Night

Day's shadows are warm brown-tinted and layered, never harsh and never black. --shadow-md carries an inner white highlight, and that highlight is what makes a card read as paper rather than as a floating rectangle.

Night cannot use shadow — a drop shadow is invisible on a dark ground. The same token names do a different job there: an inset hairline ring establishes the edge, an inner top highlight suggests a lit surface, and emphasis comes from --glow-* rather than from a brighter fill.

Motion

Settling, not pouncing

Nothing snaps and nothing overshoots. Every easing curve in the system ends at 1.0 with no value above it, which is a mechanical guarantee that no transition can bounce. A press shrinks by 3%; a sheet rises over 550ms and decelerates into place. Motion mimics settling, not predator movement.

Ambient

Night's field, and why it asks for nothing

Night ships an optional decorative layer: a dark field with additive bloom, film grain, scanlines, a vignette, and line geometry. The references for it are WebGL pieces with a full postprocessing chain — but additive blending is mix-blend-mode: plus-lighter, noise is feTurbulence, scanlines are a repeating gradient, and RGB shift is a per-channel feOffset. None of it needs a renderer, a canvas, or a byte of JavaScript.

The quietest layer is .ah-ambient--stars: a faint, static field of stars in a fixed arrangement, so the sky is the same every night. It does not twinkle and it never moves. Day has its counterpart in .ah-sky, a light gray sky with three large, soft white clouds that never move. Both are the ground a screen sits on, and neither carries meaning.