The Build Log — Design System

The look Arijit approved after a long design pass (2026-07-06/07). Warm, fresh, optimistic editorial — approachable where the rest of AI content is dark tech-noir. Every content surface (blog, carousel, social image) inherits these tokens + components. Motion is restrained (color-morph only). Reading always stays clean.

1. Palette — Fresh Meadow is LOCKED (2026-07-07)

Fresh Meadow is THE palette. The on-page live picker was REMOVED (distracting on mobile). The other three (Sunshine/Lily/Sky) are kept below only as documented brand alternates for other surfaces/future use — not a switcher on the blog. Tokens are CSS custom properties; components read the tokens.

Pastel data set (bars, accents, palette-independent): --p1 green #7FBF7F · --p2 sunshine #F4C95D · --p3 blush #F2A0AE · --p4 sky #8FC7D8 · --p5 lilac #C4A5E2.

Rules: accent used sparingly (labels, key numbers, 1 line). Reading text is --body on near-white. Never put body text over color.

2. Typography

• Display / headings: Fraunces (600/700), small-caps for eyebrows & labels, tight tracking on big sizes (h1 -0.028em).
• Body / reading: Newsreader (400), italic for standfirst/captions/pull-quotes.
• Mono: JetBrains Mono — ONLY inside the terminal component. Never for captions/labels (that reads "tech," not "editorial").
• Scale: h1 clamp(52px,10vw,96px) · section h2 clamp(34px,6vw,54px) · body 19–20px / 1.78 · labels ~16–18px small-caps.

3. Background (the ONE motion)

A fixed, blurred 4-corner pastel mesh whose colors morph/rotate between the corners (~20s loop) via CSS @property color interpolation. Subtle, classy, "alive." opacity ~.5, blur ~32px. Rejected (do NOT use): floating petals/bubbles, moving shapes, position-drift (invisible), heavy animation. Color-morph only. Add prefers-reduced-motion respect in prod.

4. Components (the catalog the carousel + blog share)

• Masthead / nameplate — "The Build Log" small-caps + issue line + running folios (print cue).
• Opening — eyebrow (small-caps accent) → big Fraunces title → italic standfirst → credit line.
• Pinned photo ("polaroid") — white matted card, tilt varied (left/straight/right via nth), prominent domed pushpin (::before, accent-tinted, highlight + shadow), soft drop shadow, italic serif caption. Straightens on hover. This is the signature.
• Beats — Why / How / What it buys you small-caps accent labels (NOT mono pills).
• Terminal — light Claude-Code style (chevron + prompt + status line dir·cost·tok·claude·%), mono, on --card. Authenticity texture.
• Tiles — 3-up stat tiles, Fraunces number + italic label, top-rule.
• Bars — multi-pastel (p1..p5), Fraunces numerals.
• Method card — rounded, soft shadow, small-caps kicker + numbered list.
• Enforcement ladder — 3 rungs, top rung accent-tinted, small-caps rung labels.
• Appendix table — small-caps headers, Fraunces numerals right-aligned.
• Money line / CTA / pull-quote / drop-cap / ❀ divider — editorial devices.
• ~~Palette picker~~ — REMOVED 2026-07-07 (distracting on mobile). Blog is locked to Fresh Meadow; no on-page switcher.

5. Carousel inheritance

The LinkedIn carousel (currently "Evidence Noir" dark) should be re-skinned to this Fresh Editorial system: warm off-white slides, Fraunces display, multi-pastel data, the same accent logic. One brand across blog + social. (Carousel generator: linkedin-carousel.skill → build_carousel.py slides.json; swap its palette/fonts to these tokens.)

6. Motion & restraint principles (hard-won this session)

1. Reading clarity first — color + motion live at the margins, never behind text.
2. One motion idea (color-morph). No literal floating objects.
3. Accent is a spice, not a base.
4. Warmth over starkness (off-white paper, not pure white).
5. Every visual must earn its place (Arijit's own thesis).