--- version: alpha name: cthdrl-design-analysis description: "A brutalist-editorial single-page studio site — pure black canvas, oversized NB Akademie display type in warm cream ink, tight monospace labels, and a full-bleed hairline-arc line-art motif. Sharp square edges (zero radius) throughout, a duplicated marquee headline suggesting kinetic scroll motion, and a strict two-color foreground/background discipline broken only by rare, low-frequency accent hexes whose usage context was not visually confirmed." colors: primary: "#e7ded1" canvas: "#000000" accent-maroon: "#4c0b02" accent-rust: "#871a03" accent-brown: "#6e1815" accent-crimson: "#981d26" accent-red: "#b60122" accent-red-deep: "#b4041c" accent-olive: "#7d820e" accent-olive-light: "#778818" accent-chartreuse: "#a8b428" accent-indigo: "#1e1594" accent-magenta: "#6d0251" typography: display-h1: fontFamily: "NB Akademie, Archivo, sans-serif" fontSize: 120.96px fontWeight: 400 lineHeight: 0.85 letterSpacing: normal body-mono: fontFamily: "NB Akademie Mono, Space Mono, monospace" fontSize: 11px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.0455em button: fontFamily: "NB Akademie, Archivo, sans-serif" fontSize: 35px fontWeight: 400 lineHeight: 1.0 letterSpacing: normal rounded: none: 0px spacing: xxs: 10px xs: 11px sm: 30px md: 45px lg: 50px components: button-primary: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-mono}" padding: 11px 30px nav-index-counter: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-mono}" hero-headline: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.display-h1}" hero-marquee-ticker: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.display-h1}" body-label: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-mono}" text-link: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-mono}" decorative-arc: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.none}" --- ## Overview cthdrl's landing page is a monochrome, brutalist-editorial studio site: a black canvas (`{colors.canvas}` — #000000) carrying a single warm cream ink (`{colors.primary}` — #e7ded1) for every headline, label, and line. There is no secondary UI palette in the rendered surface — the discipline is foreground/background only, reinforced by zero border-radius everywhere and 1px hairline strokes for the only decorative geometry on the page (large arcing circles that bleed off the viewport). Type carries almost the entire brand voltage. **NB Akademie** is set at ~121px, weight 400, with an extremely tight 0.85 line-height — three stacked headline lines nearly touch, reading as a dense architectural block rather than airy display type. A duplicate copy of the same headline appears higher and slightly offset in the "before" vs. "after" screenshot pair, indicating a horizontal marquee/ticker treatment layered behind or above the hero. Supporting copy runs in **NB Akademie Mono** at a small 11px with tight negative tracking (-0.0455em) — the labels ("NEW YORK / LOS ANGELES," "0/14," "BUILD@CTHDRL.CO") read as coded, technical annotations rather than soft marketing copy. The layout is a strict two-column split defined by a full-height vertical hairline near center, with the nav bar spanning both columns at top. Everything is flat: no shadows, no gradients, no rounded corners were measured anywhere in the system. **Key Characteristics:** - Pure black canvas (`{colors.canvas}`) with a single cream ink (`{colors.primary}`) — no secondary neutral scale was measured. - NB Akademie display type at 120.96px / weight 400 / line-height 0.85 — an unusually tight, almost-collapsed leading that reads as intentionally dense/architectural. - NB Akademie Mono for all supporting copy at 11px with -0.0455em tracking — small, technical, all-caps label voice. - Zero border radius (`{rounded.none}`) system-wide — every edge is square, consistent with the brutalist reading. - A duplicated hero headline visible at two scroll/animation states — a marquee/ticker component appears to drive kinetic motion rather than static hierarchy. - Thin 1px arc/circle line-art bleeds full-width behind the hero copy — the system's only ornamental device, entirely achromatic. - A sparse family of low-frequency accent hexes (reds, olives, an indigo, a magenta) was captured in the computed CSS scan but is not visible in either reference screenshot — treated here as a documented-but-unconfirmed decorative layer (see Known Gaps). - Spacing is compact and irregular by measured frequency (10px, 11px, 30px, 45px, 50px) rather than a clean geometric scale — consistent with a hand-tuned, editorial layout rather than a systemized component library. ## Colors ### Foreground / Background - **Primary** (`{colors.primary}` — #e7ded1): The system's only foreground color. Used for the hero headline, nav labels, body-mono copy, the index counter, the email link, and the button-primary text. It reads as warm off-white/parchment rather than pure white — the max-contrast ink against the black canvas. - **Canvas** (`{colors.canvas}` — #000000): The page floor. True black, used behind the entire viewport including the nav bar. ### Accent (unconfirmed usage) A set of eleven low-frequency accent hexes was captured by the computed-style scan, each appearing only once: `{colors.accent-maroon}` (#4c0b02), `{colors.accent-rust}` (#871a03), `{colors.accent-brown}` (#6e1815), `{colors.accent-crimson}` (#981d26), `{colors.accent-red}` (#b60122), `{colors.accent-red-deep}` (#b4041c), `{colors.accent-olive}` (#7d820e), `{colors.accent-olive-light}` (#778818), `{colors.accent-chartreuse}` (#a8b428), `{colors.accent-indigo}` (#1e1594), `{colors.accent-magenta}` (#6d0251). None of these appear in the two reference screenshots, which are entirely black-and-cream. They may power an animated grain/spectrum layer, a hover/focus state, or a canvas-based effect that wasn't captured mid-animation. Document them as reserved tokens; do not apply them to primary text, headlines, or the button-primary component until their actual usage context is confirmed. ## Typography ### Font Family The system runs on **NB Akademie** for display and **NB Akademie Mono** for everything else — both are commercial/licensed grotesk faces, not open-source. Because they cannot be shipped as-is, substitute with: - **NB Akademie → Archivo** (or Neue Haas Grotesk Text as a paid alternative) — Archivo shares the squared, no-nonsense grotesk character and holds up at the extreme tight line-height cthdrl uses. - **NB Akademie Mono → Space Mono** (or JetBrains Mono) — a geometric monospace that preserves the technical, coded feel of the tracked-in label copy. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-h1}` | 120.96px | 400 | 0.85 | normal | Hero headline, marquee-ticker duplicate | | `{typography.button}` | 35px | 400 | 1.0 | normal | Button-primary label (NB Akademie, not mono) | | `{typography.body-mono}` | 11px | 400 | 1.2 | -0.0455em | Nav labels, index counter, location/CTA/description copy, email link | ### Principles Only three type roles were measured — a display role, a mid-size button role, and a small tracked-in mono role. There is no measured h2/h3/body-paragraph size between 11px and 121px; the system appears to deliberately skip a middle register, letting the huge display headline and the tiny mono labels carry all hierarchy with nothing in between. Do not invent an intermediate size — treat the gap as a genuine two-register system until further pages are captured. The mono role's negative tracking (-0.0455em) at such a small size is unusual — most systems add positive tracking to small caps for legibility. Here the type is tightened instead, reinforcing the compressed, dense reading of the whole system. ### Note on Font Substitutes NB Akademie and NB Akademie Mono are commercial retail typefaces and must not be redistributed. Archivo (display) and Space Mono (label/mono) are recommended open-source substitutes that preserve weight-400 grotesk geometry and monospace technical character respectively. ## Layout ### Spacing System - **Measured values only:** `{spacing.xxs}` 10px · `{spacing.xs}` 11px · `{spacing.sm}` 30px · `{spacing.md}` 45px · `{spacing.lg}` 50px. - These five discrete values are the only spacing captured by the computed-style scan; they read as small/mid-range component gaps (nav item gaps, label-to-value gaps, column gutters) rather than a full macro-to-micro scale. - Large vertical gaps visible in the screenshots (nav-to-hero, hero-to-footer-info) exceed the largest measured value (50px) — those larger rhythms were not captured numerically and should not be assumed; see Known Gaps. ### Grid & Container - A full-height vertical hairline sits just right of horizontal center, splitting the page into a wider left content column and a narrower right column that holds the scrolling ticker text and the "0/14" index counter. - The nav bar spans the full width above the hairline split, with four label groups: logo mark, "CTHDRL/STUDIO," "WORK/CONTACT," and (in the right column) the scrolling ticker copy. - Below the hero headline, a three-column info row (location, CTA + email, descriptive paragraph) sits left of the hairline, each column set in `{typography.body-mono}`. ### Whitespace Philosophy Density is asymmetric: the hero headline block is set almost line-on-line (0.85 line-height) while the space between the headline block and the info row below is comparatively vast. This creates a "type as monument, everything else whispers" rhythm — a hallmark of the brutalist-editorial genre this site belongs to. ## Elevation & Depth No shadow values were captured in the analysis (`shadows: []`), and no shadows are visible in either reference screenshot. The system is entirely flat: | Level | Treatment | Use | |---|---|---| | Flat | No shadow, no border, no elevation | Every surface — nav, hero, info row | | Hairline stroke | 1px `{colors.primary}` stroke at low visual weight | Decorative arc/circle line-art, vertical column divider | Depth in this system is not achieved through z-axis shadow — it's achieved through **layering and motion**: the ticker headline duplicate sits at a different horizontal offset than the static hero headline across the two captured states, implying a scrolling/kinetic layer stacked behind or above the primary type block. This is the system's substitute for elevation. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Universal — button-primary, and by visual inference every other edge on the page (nav, info blocks, dividers) | No rounded corners were measured anywhere in the system. This is a deliberate brutalist choice — combined with the tight-leading display type, it reinforces a hard-edged, architectural read. ### Decorative Geometry The large circular/arc strokes that bleed across the hero are vector line-art, not corner-radius tokens — thin (~1px), achromatic (`{colors.primary}` at what appears to be reduced opacity), and scaled to intersect the vertical column divider. They are the only curved forms in an otherwise entirely square-edged system. ## Components ### Navigation **`top-nav`** — Full-width bar pinned to the top of the page. Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.body-mono}`. Carries a small three-diamond glyph mark at far left, then two stacked label pairs — "CTHDRL / STUDIO" and "WORK / CONTACT" — set at small mono size with a slash-separated two-line stack. **`nav-index-counter`** — The "0/14" counter fixed at top-right of the hero band, set in `{typography.body-mono}`, `{colors.primary}`. Reads as a slide/section index, reinforcing the coded, technical label voice. ### Hero **`hero-headline`** — The three-line "— NAVIGATING / CULTURAL CURRENTS / IN A DIGITAL WORLD" statement, set in `{typography.display-h1}` (NB Akademie, 120.96px / 400 / 0.85 line-height), color `{colors.primary}`, opening with an em-dash prefix. Fills nearly the full viewport width across the left column. **`hero-marquee-ticker`** — A duplicate line of copy ("...N, SOFTWARE, AND MARKETING SYSTEMS FOR THE..." / "DESIGN, SOFTWARE, AND MARKETING SYSTEMS FOR..." across the two captured states) rendered in the same `{typography.display-h1}` size but positioned in the right column and top-cropped by the nav bar. The differing text position between the two screenshots indicates continuous horizontal scroll — a marquee/ticker treatment layered above the static hero. ### Info Row **`body-label`** — Small mono text blocks below the hero: location ("NEW YORK / LOS ANGELES"), CTA line ("LETS BUILD SOMETHING THAT MATTERS"), and description paragraph ("WE ARE A COLLECTION OF DESIGNERS, STRATEGISTS, AND CREATIVE TECHNOLOGISTS..."). All set in `{typography.body-mono}`, `{colors.primary}`, laid out in three columns with `{spacing.sm}`–`{spacing.md}` range gaps. **`text-link`** — The underlined email address "BUILD@CTHDRL.CO" sitting inline within the CTA column, `{colors.primary}`, `{typography.body-mono}`, underline as the only affordance (no color shift, no button chrome). ### Button **`button-primary`** — Measured directly from the analysis: text color `{colors.primary}`, `{rounded.none}` (0px), zero padding, set in `{typography.button}` (NB Akademie, 35px / 400 / line-height 1.0). No background fill was captured — it behaves as a large, unstyled text-button rather than a filled CTA chip, consistent with the system's flat, no-chrome aesthetic. ### Decorative **`decorative-arc`** — Full-bleed thin circular/arc strokes in `{colors.primary}`, `{rounded.none}` is not applicable here (vector stroke, not a corner radius) — included as a component reference for consistency. These arcs cross the vertical column divider and extend beyond the viewport edges on both the top and bottom of the hero band. ## Do's and Don'ts ### Do - Keep the foreground/background pairing to exactly `{colors.primary}` on `{colors.canvas}` for all primary text and UI. The system's power comes from restraint, not palette breadth. - Set display headlines in `{typography.display-h1}` at the measured 0.85 line-height — loosening the leading breaks the dense, architectural read that defines the brand. - Keep every corner at `{rounded.none}` (0px). Any rounded corner immediately reads as off-brand for this system. - Use `{typography.body-mono}`'s negative tracking (-0.0455em) for all small label copy — it is intentional, not a rendering artifact. - Reserve decorative arc line-art for full-bleed background moments only; never use it to frame or box content. - Treat the ticker/marquee duplicate headline as a distinct animated layer, not a second static headline — it should move independently of the primary hero block. ### Don't - Don't apply the low-frequency accent hexes (`{colors.accent-*}`) to primary text, headlines, or the button-primary component until their actual usage is confirmed — they were not observed in the rendered screenshots. - Don't add drop shadows, gradients, or glassmorphism — no shadow values exist in this system and none should be introduced. - Don't invent a mid-size type role between the 11px mono label and the 120.96px display headline — the two-register jump is a deliberate structural choice, not a missing token. - Don't round any corner. A single rounded element will read as inconsistent against the otherwise square-edged system. - Don't fill `button-primary` with a background color — it was measured as a bare text treatment with zero padding, not a chip or pill. ## Responsive Behavior Only a single desktop-width capture of the landing page was analyzed, and no breakpoint, mobile, or tablet data was captured in the analysis. The guidance below is therefore **inferential design guidance**, not measured fact, and should be validated against an actual mobile capture before being treated as canonical: - The two-column hairline-divided layout would likely need to collapse to a single column below a conventional tablet breakpoint, with the ticker/index-counter column stacking beneath or above the primary hero headline. - The 120.96px display headline would need to scale down substantially on narrow viewports to avoid line-wrapping mid-word; an exact mobile size was not measured and should not be assumed. - The three-column info row (location / CTA / description) would likely stack to a single column on mobile. - The decorative arc line-art, being full-bleed and viewport-relative, would need to be re-scaled or cropped rather than reflowed. ## Iteration Guide 1. Focus on ONE component at a time. Reference its YAML key directly (`{component.hero-headline}`, `{component.body-label}`). 2. Preserve the two-register type system — display (`{typography.display-h1}`) and mono-label (`{typography.body-mono}`) — until a genuinely new size is measured from additional pages. 3. Never introduce a border-radius value other than `{rounded.none}` without new measured evidence. 4. Use `{token.refs}` everywhere — never inline a hex, including for the unconfirmed accent set. 5. Never document hover. Default and Active/Pressed states only, per system policy. 6. Before applying any `{colors.accent-*}` token to a visible surface, confirm its actual usage context (likely an animation, canvas effect, or hover state) via a fresh capture — do not assume it belongs on static text. 7. When adding new pages (Work, Contact — both linked in nav but not captured), extend this document rather than starting a new one; note any new type sizes, spacing values, or colors as newly measured, not inferred. ## Known Gaps - Only the landing page was captured (`captured_pages: ["landing"]`); Work and Contact pages referenced in the nav were not analyzed. - The eleven low-frequency accent hexes (each frequency 1) have no confirmed visual context — they do not appear in either reference screenshot and may belong to an animation, canvas/WebGL effect, or a state not captured mid-transition. - No border-radius values were measured except the single `0px` on button-primary; this has been generalized to a system-wide `{rounded.none}` based on visual inspection of the screenshots, but no other component's radius was independently confirmed. - No shadow data exists in the analysis (`shadows: []`); the "flat" elevation model is inferred from the absence of shadow data plus visual inspection, not from a positive absence-check across all elements. - Spacing data is limited to five discrete values (10, 11, 30, 45, 50px); the large macro-level gaps visible between the hero and the footer info row in the screenshots exceed all measured values and were not captured numerically. - No responsive/breakpoint data was captured — the Responsive Behavior section above is inferential guidance only. - NB Akademie and NB Akademie Mono are commercial typefaces; exact foundry licensing terms were not verified, and `fonts_licensed` was empty in the analysis. Open-source substitutes are documented as a precaution regardless. - The marquee/ticker behavior (speed, direction, loop point) is inferred from two static screenshots showing the headline at two different horizontal offsets — actual animation timing was not measured. - Hover and hover-adjacent states (e.g., on the email `text-link` or nav items) were not captured and are out of scope per the no-hover-documentation policy.