A quiet theme for slow websites.

Warm near-black, one amber, a serif that whispers. Driftwood is a small CSS system for sites that would rather be felt than scrolled — portfolios, galleries, journals, tools that stay out of the way.

Use Driftwood See the components

Three habits, no decoration

The shell stays dark

Content carries all the color. The background is a warm near-black, surfaces lift by a breath, and the single amber appears only where something is active or asked for.

Nothing moves fast

Transitions run on long exponential ease-outs — a quarter second for state, whole seconds for atmosphere. Grain and glow drift; the interface itself barely stirs.

The chrome dissolves

Headers and controls are guests. They fade when idle, return on touch, and never compete with what the page is actually for.

Take it with you

One stylesheet, no build step, nothing to install. The download is the whole theme: driftwood.css, this page as a starter, and the README.

Download the theme Just the CSS

Unzip, then link driftwood.css in your page's <head>.
Add <div class="grain" aria-hidden="true"></div> as the last child of <body> for the film-grain layer.
Copy the .atmosphere block from index.html if you want the drifting glow.

Component reference

Palette — OKLCH, warm hue 80–95

bg surface ink muted amber glow-dusk glow-blush

Type — serif italic display, system body

The drift, held for a moment

Body text sits in the system sans at 15px over a 1.6 line height, capped at 65 characters so long passages stay calm and readable.

Captions and labels are the muted warm gray.

Buttons

Chips — filters, tags, moods

Fields

Name

Note