Reference · read before building any website
A shared visual identity for the analysis / dataset / project documentation websites
this user builds with Claude. Adapted from
Thariq Shihipar's
The Unreasonable Effectiveness of HTML, with a warm-archive palette
(ivory + clay + oat + olive). Read this file first; pick a layout idiom (§01); copy
the :root tokens into the site's <style> block; apply
§02–§09 identically regardless of idiom. Concrete reference examples in the
examples/ sibling folder are real sites from the user's BIA scraping
project — the visual patterns are general, the example content is incidental.
two layouts · everything else is shared
Every site uses the palette, fonts, eyebrow + indexed-h2 + count-pill section pattern, and SVG conventions documented below. What varies is layout — and the choice is binary. When starting a new site, pick the idiom first, then apply the rest of this guide identically either way.
#1c1a17) with bright cream nav text. 6–9 hash-routed panels with fade transition. Single panel visible at a time.#F4EDDD) with scroll-spy table-of-contents. All content visible in one continuous scroll, anchor-linked. Editorial register.Default is A. When in doubt, pick tabbed-dark — it's strictly better on mobile (real difference, not marginal) and matches the in-production sites. Pick B only when the content is genuinely a single linear narrative every reader will read top-to-bottom, OR when the user explicitly asks for it.
What's the same in both: palette tokens (sections 02), typography (03), section-header signature (04), cards/keyfacts (05), status pills + severity tags (06), SVG illustration conventions (07), anti-patterns (08). What differs: sidebar background, navigation pattern, page structure (panels vs sections), and the SVG count (~8 panel mastheads vs ~10–13 per-section thumbs).
warm archive · one accent · color does work
One accent (clay), one supporting hue (olive), one neutral fabric (oat), and a grayscale ramp. Color appears only when it carries meaning — accent for active state, olive for success/derived fields, rust for warnings/severity, oat for selected backgrounds. Never decorative.
serif display · sans body · mono eyebrow
Three families, each doing visible work. Display serif (Instrument Serif) for headings — its high-contrast strokes carry the editorial register. Sans (Inter) for body and UI — readable at 14–17px. Mono (JetBrains Mono) for eyebrows, code, IDs, file paths, and any machine-readable atom. Italic-clay emphasis is the signature flourish: pick one word per page to italicize in clay inside the h1.
eyebrow · indexed h2 · count pill
Every major section gets the same three-piece header: a mono index digit in clay, a serif h2, an optional mono count pill on the right, and a clay-prefixed eyebrow underneath. This replaces the plain h2 + pilcrow-anchor pattern from the v1 sites. The index digit makes sections scannable at a glance during scroll; the count pill carries a relevant scale number; the eyebrow gives a one-line subtitle for what's in the section.
─── what's in the dataset
Top 20 birthplaces of DAR members in this corpus, after normalizing state-name conventions.
04, serif h3, eyebrow above with leading clay rule.1.5px borders · 8–14px radius · no shadows
Cards always carry 1.5px borders (the single most distinctive not-AI-default touch),
8–14px border-radius, and no shadow except on the hero rotated card. Backgrounds are
--paper; never gray. Numbers in keyfact tiles use --serif with
tabular-nums for column alignment.
color carries meaning, not mood
Status pills are full rounded (999px radius), filled, mono — used in timeline/status tables for done/now/next workflow states. Severity tags are 4px-radius, outlined, mono uppercase — used inline next to field names to mark derived, sparse, or empty coverage.
line drawings · palette as semantic stroke/fill
Per-section thumbnails are inline SVGs (~120×80 viewBox) using palette
colors as semantic class names. Stroke-width is always 2.5 for that
drawn-not-rendered quality. Below is the legend — copy these classes into the site's
<style> and reference by class on every <rect>,
<circle>, <line>, <path>.
--g500) and grey fill (--g300). The neutral baseline.stroke-dasharray: 4 4). Flowchart "future" / "uncertain" edges.Composition rules. Every thumbnail uses one or two clay elements
maximum (the visual focus), olive for secondary positive elements, grey for everything else,
rust only for warning thumbnails. Stroke-width 2.5 universally — that's what gives
the drawn-not-rendered feel. Border-radius on rectangles 4–6px to match the larger UI.
stroke-linecap: round on lines is mandatory.
things that make the page look generated
If the artifact starts looking like any three of these, restart.
No full-bleed gradient mastheads. Plain ivory background with type doing the work; the rotated paper-vs-row figure is the only allowed hero flourish.
One accent (clay), one supporting (olive), one warning (rust). Never multiple shades of the same hue creating "depth" — there is no depth, the layout is flat.
📊 Analytics, 🚀 Status, 🔍 Coverage — no. Use the indexed mono digit + serif h2 + clay rule eyebrow signature. The mono digit IS the icon.
Cards live on ivory with 1.5px borders, no shadow. The only allowed shadow is on the hero
rotated row figure (0 12px 32px rgba(20,20,19,.10)).
Never. The era of backdrop-filter: blur() as decoration is over for these
sites. Real opaque borders.
Headlines are left-aligned. Sections are left-aligned with the indexed mono digit at the margin. Centered display headings read as conference posters.
when restyling an existing site
:root { ... } block from this file's <style>
section into the target site. Bring all 14 palette tokens, the 3 font families, and
the dark-mode media query.<div class="sec-head"> with mono index digit + h2 + count pill,
and add a <p class="sec-eyebrow"> immediately after.border: 1px to border: 1.5px. Replace any
shadow that isn't the hero figure's with no shadow.<em>...</em>).-2.5deg /
+1.5deg rotations.