Vellum

vellum-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Vellum presents twenty-eight concrete residences as a printed catalogue of plates, and the interface behaves like a gallery wall. The page surface is a warm concrete grey #C8C4BC; light "wall text" sections drop to bone #EDEAE3 and the statement, data table and footer invert to near-black ink #1A1A1A with bone type. A single oxide-orange voltage #D24B16 does all the accenting — eyebrow labels, the giant Roman plate numerals, the active nav pill, primary buttons, the drawn rules, even the ::selection highlight. The whole composition is built from thin translucent hairlines (rgba(26,26,26,0.22) on light, rgba(237,234,227,0.22) on dark) that segment the max-w-[1440px] canvas into a ledger of bordered cells — there is no corner radius and no shadow anywhere; structure is drawn, not lifted. Type is a three-voice system: compressed Archivo Black (weight 900, font-stretch: 125%, always uppercase) for the display and the oversized numerals, JetBrains Mono at 9–11px with 0.25em tracking for every label and meta line, and Hanken Grotesk for body and the principal's blockquote. Photography is desaturated (grayscale(0.85)) and revealed on scroll with a left-to-right clip-path wipe while the plate numeral rises into place.

Colors

Brand / Voltage. A single accent, oxide #D24B16, carries every highlight: eyebrow labels ("Exhibition 01", "Plate 01", "Wall Text 02"), the large plate numerals I & III, the active "Enquire" nav cell, primary buttons on hover, the rule-x divider, the footer's top hairline bar, table plate references, and the ::selection background.

Surface. concrete #C8C4BC is the default page background (header is the same at 95% with backdrop-blur-xs). bone #EDEAE3 is the light Materials section and the inverse text color on dark surfaces. ink #1A1A1A is the page text color and the fill for the Statement, Checklist header row, and footer.

Text. On light surfaces text steps down through opacity of ink: ink-85 for the subhead, ink-80 for body copy, ink-60 for mono medium labels, ink-55 for section counts, ink-50 for micro field labels. On dark surfaces: bone solid, bone-70 attribution, bone-45 footer micro labels, bone-40 input placeholder.

Hairlines. hairline rgba(26,26,26,0.22) rules every cell on light surfaces; hairline-light rgba(237,234,227,0.22) does the same on dark.

Gradient / Overlay. Image captions sit on a caption-scrim bottom-up gradient (from-black/60 to-transparent) or on an ink/70 chip.

Typography

Three families loaded from Google Fonts (Archivo 400/600/900, Hanken Grotesk 400/500/700, JetBrains Mono 400/500/700). The display face is Archivo set to weight 900 with font-stretch: 125% and text-transform: uppercase — the compression and caps are the brand signature. Hanken Grotesk handles body and the medium-weight pull quote; JetBrains Mono handles all labels with wide 0.25em–0.3em tracking. No bespoke fonts — all three are open-source.

Note: the hero subhead uses display at clamp(1.3rem,3.2vw,2.4rem) / lh 1.02; the footer wordmark scales to clamp(5rem,23vw,20rem) at lh 0.7.

Layout

Base unit 4px. The entire site is a single max-w-[1440px] centered column divided into full-width horizontal sections, each separated by a border-b hairline. Inside, two-column CSS grids drive the rhythm: the hero is 45% / 55% (copy / image), plates alternate lg:grid-cols-2 with the image and text swapping order, Materials is 40% / 60%, the Statement is 62% / 38%. Data is presented as bordered grids — 4-up fact strips, a 2-column materials ledger, and a 5-column specifications table (grid-cols-[1.4fr_1fr_1fr_0.8fr_1fr]) that scrolls horizontally inside min-w-[680px]. Images are tall (min-h-[55vh]–88vh), full-bleed within their cell, object-cover. The dominant move is the ledger: nothing floats; every block is a cell in a drawn grid.

Elevation & Depth

Flat by design. There are no box-shadows on surfaces — depth is created entirely by hairline borders and the light/dark surface inversions. The only shadows are the drop-shadow-[0_0_30px_rgba(0,0,0,0.4-0.5)] glows behind the oversized plate numerals so they read against busy photography, and a bg-gradient-to-t from-black/60 scrim under image captions. The header uses backdrop-blur-xs over concrete/95.

Shapes

Strictly rectilinear — rounded.none (0px) everywhere. No pills, no soft cards. The geometry is all right angles and 1px hairlines; the personality comes from the grid divisions and the compressed type, not from corner treatment.

Components

• nav-link — transparent, mono-micro caps, left hairline, 12×20px; hover fills ink with bone text. Active "Enquire" cell is solid oxide with bone text.
• button-primary — solid ink, bone text, mono-label caps, 16×24px, hairline border, no radius; hover background → oxide. Label e.g. "Request The Folio →".
• button-ghost — transparent with solid ink 1px border, underlined offset-4, mono-label; hover text → oxide. Label "View Plates".
• fact / data cell — transparent, right+bottom hairline, 16px pad; micro caps label (ink-50) over a 12px uppercase value. Used in hero stats, materials ledger.
• table-head-cell — ink fill, bone text, mono-micro, hairline-light borders; body rows are 12px uppercase with plate refs in oxide.
• enquire-form — single hairline-light bordered bar on dark; transparent email input (placeholder bone-40) + solid oxide submit button "Submit →" that hovers to bone/ink.
• image-caption — mono-micro bone text on a black-to-transparent scrim or an ink/70 chip, e.g. "Fig. A — West elevation at noon".

Motion

Scroll-driven via GSAP + ScrollTrigger over Lenis smooth scroll. Three signature moves: plate images reveal with a left-to-right clip-path wipe (inset(0 100% 0 0) → inset(0 0% 0 0), 1s power3.out, trigger top 75%); plate numerals rise (y:40, opacity:0 → in, 0.9s, trigger top 85%); and the statement rule-x draws horizontally (scaleX 0 → 1 from the left, 0.9s). Nav and buttons use CSS transition-colors on hover. Lenis provides inertial smoothWheel scrolling.

Iconography

No icon library is loaded. Direction and action are signaled by typed arrow glyphs (→) inside mono labels — "Request The Folio →", "Submit →". All other ornament is typographic: Roman numerals, "Fig." / "Det." captions, and MMXXVI-style Roman dates.

Do's and Don'ts

• Do keep every block inside the hairline grid — borders define structure, not fills.
• Do use the single oxide #D24B16 voltage for accents only; let it stay rare.
• Do set all display and label text in uppercase with wide mono tracking.
• Do keep corners at 0 and surfaces flat; reveal photography with the clip wipe.
• Don't add shadows, rounded corners, or a second accent color.
• Don't mix the three type voices' roles (Archivo display, Mono label, Hanken body).
• Don't present full-color photography — desaturate to grayscale(0.85).

Known Gaps

• Spacing scale is inferred from the recurring Tailwind paddings (p-4, px-6/10/12, py-12/14/16/24) onto a 4px base; named steps (xs–2xl) are an approximation of the values actually used, not a declared scale.
• font-stretch: 125% on the display face renders only where the variable Archivo axis is supported; the visual width may vary by browser.
• The backdrop-blur-xs value is Tailwind's token; exact blur radius not specified in the markup.