One warm fabric canvas, an editorial uppercase type system in Chivo, monospace metadata, and a paper-to-ink inversion. Toggle the mode — the identity holds in both. Everything is in this one file; the full written standard sits at the end, ready to copy.
Time Capsule Tapes documents real families through documentary-style photography. The brand is the feeling of a warm archive caught on film: a fabric-textured canvas the colour of sun-faded terracotta and limestone, fine grain over everything, and one deep oxide red used sparingly as the accent. It is editorial and quiet, never glossy. The voice is plain and human; the imagery carries the emotion, the design just frames it.
Full-bleed imagery is the hero. Type, chrome and accents stay deferential — they label and frame, they never compete with the picture.
No pure black, no pure white. Every neutral is warmed toward paper or ink. Depth comes from grain, vignette and a fabric gradient — not hard shadows.
One accent red. One type pairing. Uppercase headlines, monospace metadata. The confidence is in what is left out.
#9E2A14) as the single accent.The brand is dual by construction. Most sections are warm paper (#F4ECDC) over the dark fabric gradient; the limestone sections invert to warm ink (#241F18) over stone (#E7DECC). Only the text tokens swap — the grain, vignette and layout never change. Toggle the control above to flip this whole page between the two.
Default identity. Warm paper text and one red accent over the terracotta gradient.
hello@timecapsuletapes.comThe inversion used on limestone sections. Same geometry, warm ink replaces paper.
hello@timecapsuletapes.comPaper and its alphas carry text on dark; ink and its alphas carry text on stone. Hairlines are always a low-alpha tint of the text colour, never a neutral grey. Red is the only chromatic accent — used for the active dot, the section number, selection, and the rare emphasis.
Chivo for everything spoken aloud — monumental uppercase headlines and relaxed body. Chivo Mono for everything labelled — indices, kickers, navigation, captions, timestamps. The sans/mono contrast is the brand's "archivist" signal. Headlines are uppercase, tightly tracked, set at line-height under 1; body stays sentence-case and open.
| Role | Family | Size | Weight | Line / Track |
|---|---|---|---|---|
| Display / hero | Chivo | clamp(3.4rem, 9vw, 8.6rem) | 700 | 0.9 / -.018em |
| Section headline | Chivo | clamp(2rem, 4vw, 3.9rem) | 700 | 0.92 / -.014em |
| Sub-headline | Chivo | clamp(1.5rem, 2.4vw, 2.3rem) | 700 | 1.02 / -.005em |
| Body | Chivo | clamp(1.2rem, …, 1.4rem) | 400 | 1.6 / normal |
| Kicker / eyebrow | Chivo Mono | clamp(.6rem, .74vw, .72rem) | 500 | 1.3 / .26em |
| Nav / label | Chivo Mono | clamp(.6rem, .72vw, .7rem) | 500 | — / .2em |
| Index | Chivo Mono | .7rem | 500 | — / .24em |
Six stacked layers build the signature feel. They are fixed, full-bleed and behind all content. Get these right and any layout reads on-brand; skip them and it looks like a generic dark site.
The base canvas: linear-gradient(150deg, #C9BFA6, #B85A39 46%, #8A2414) over a deep red root.
Two photo plates fade across each other over 1.25s as sections change.
Fractal-noise SVG, soft-light, opacity .5. The texture that makes it feel shot, not rendered.
A soft radial darkening at the edges to seat the type and focus the centre.
One shared black plate whose opacity is dialled per section for text contrast.
A warm light streak sweeps across on load, then content assembles beat by beat.
There are no filled buttons or pills. Calls to action are monospace labels with a single growing rule. Navigation, indices and kickers are all tracked mono. Imagery desaturates at rest and warms to full colour on hover.
Two easing curves do all the work. Nothing is linear, nothing bounces. Crossfades are slow (around a second); micro-interactions are quick (.3–.4s). Decorative loops are reserved for the load sequence only.
Backgrounds, colour inversion, hovers. The everyday curve.
The cinematic intro beats — a longer, smoother deceleration.
Micro-interactions .3–.4s · colour & chrome .9s · background crossfade 1.25s.
Film-leak reveal, then brand, headline, side copy and chrome resolve 250ms apart.
Sections fill the viewport and breathe on a fluid gutter. The base step is 4px; spacing grows on a consistent scale. Content holds to a wide measure and the gutter scales with the viewport.
| Token | Value | Use |
|---|---|---|
| --gut | clamp(22px, 4.2vw, 76px) | page side gutter |
| --maxw | 1680px | max content width (site); centred |
| Section | min-height: 100svh | each section fills the viewport |
| Section pad | clamp(120px,16vh,200px) top | vertical rhythm between bands |
| Grid gap | clamp(40px, 7vw, 120px) | two-column hero / offer gap |
The complete brief below is the same content as the rendered sections above, written out in full with examples, recipes, anti-patterns and a ship-ready checklist. Hand this whole file to a designer or an AI and they have everything. Copy the raw markdown or download it as DESIGN.md.