name: blackwood-design
version: alpha
description: >
  A deep oxford-navy editorial system for an executive-education brand, set in
  Playfair Display and Source Serif 4 with a single antique-gold voltage
  (#B8902E). The page alternates between dark navy (#0E1B33) and a warm
  ivory (#F3EEE4) spread, threaded by hairline gold rules, slate-blue body
  copy, and an oxblood (#6E2A2A) reserved for pull-quotes. Signature moves:
  giant ghosted Roman numerals behind the curriculum, scaleX gold rules that
  draw on scroll, a drop-cap on faculty paragraphs, oversized inline gold
  statistics, and uppercase Montserrat micro-labels with wide tracking. No
  cards, no radius, no shadow — pure typographic rule-and-column composition.
colors:
  # Brand / Voltage
  gold: '#B8902E'        # the single accent — wordmark, rules, eyebrows, CTAs, inline stats
  oxblood: '#6E2A2A'     # reserved pull-quote / blockquote color, italic Playfair
  # Surface
  navy: '#0E1B33'        # primary dark page surface, hero panel, header, footer
  ivory: '#F3EEE4'       # light spread surface (faculty), and light text on navy
  # Text
  text-light: '#F3EEE4'  # headings/body on navy
  text-dark: '#0E1B33'   # headings/body on ivory, drop-cap
  slate: '#48587A'       # body/muted subtext, ghosted numerals, secondary eyebrows
  # Hairlines (alpha over base)
  hairline-gold: 'rgba(184,144,46,0.70)'   # wordmark underline (#B8902E/70)
  hairline-navy: 'rgba(14,27,51,0.10)'     # section divider on ivory (#0E1B33/10)
  hairline-slate: 'rgba(72,88,122,0.25)'   # section divider on navy (#48587A/25)
  hairline-oxblood: 'rgba(110,42,42,0.30)' # blockquote border (#6E2A2A/30)
  numeral-ghost: 'rgba(72,88,122,0.15)'    # giant Roman numerals (#48587A/15)
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(2.25rem, 5vw, 4.5rem)   # text-4xl … text-7xl across heads
    fontWeight: 500
    lineHeight: 1.04
  display-italic:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(1.5rem, 4vw, 3.75rem)   # pull-quotes / invitation quote
    fontWeight: 400
    lineHeight: 1.2
  body:
    fontFamily: "'Source Serif 4', serif"
    fontSize: 1.125rem                       # text-lg
    fontWeight: 400
    lineHeight: 1.85
  label:
    fontFamily: "'Montserrat', sans-serif"
    fontSize: 10px
    fontWeight: 500
    letterSpacing: 4px                        # tracking-[0.4em] eyebrows
    textTransform: uppercase
  nav:
    fontFamily: "'Montserrat', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 2.75px                      # tracking-[0.25em]
    textTransform: uppercase
rounded:                  # no radius anywhere — sharp editorial geometry
  none: 0px
spacing:                  # base unit 4px (Tailwind scale); section rhythm is large
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 36px
  section-y: 112px        # py-28
  section-y-lg: 176px     # lg:py-44
components:
  wordmark:
    textColor: '{colors.gold}'
    typography: '{typography.display}'
    # 'BLACKWOOD' tracking-[0.18em], gold hairline underline (#B8902E/70)
  nav-link:
    textColor: '{colors.text-light}'
    typography: '{typography.nav}'
    # underline bar scaleX 0→1 + letter-spacing widen to 0.42em on hover
  eyebrow:
    textColor: '{colors.gold}'
    typography: '{typography.label}'
    # also slate variant for secondary section labels
  hero-cta:
    textColor: '{colors.gold}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    # text-[12px] tracking-[0.3em] preceded by a 20px gold hairline (h-px w-5)
  gold-rule:
    backgroundColor: '{colors.gold}'
    # h-px full-width rule above each curriculum module, draws via scaleX on scroll
  pull-quote:
    textColor: '{colors.oxblood}'
    typography: '{typography.display-italic}'
    rounded: '{rounded.none}'
    # border-y in {colors.hairline-oxblood}, py-7, offset -mr-16/-ml-16
  inline-stat:
    textColor: '{colors.gold}'
    typography: '{typography.display}'
    # 1.9em gold figures (84% / $140k / 3.2×) inline in slate-navy serif sentence
  request-link:
    textColor: '{colors.text-light}'
    typography: '{typography.nav}'
    # 1px under-bar #48587A → #6E2A2A on hover
motion:
  reveal: 'GSAP from autoAlpha 0, y 28 → 0, duration 0.6, ease power2.out, ScrollTrigger start top 88%'
  gold-rule-draw: 'GSAP fromTo scaleX 0 → 1, duration 0.85, ease power2.inOut, ScrollTrigger start top 90%'
  nav-hover: 'anime.js — letterSpacing 0.25em→0.42em (350ms) and bar scaleX 0→1 from left (320ms), ease out(3)'
  parallax: 'Locomotive Scroll data-scroll-speed="-0.5" on hero and faculty images (130% height, top -15%)'
icons:
  library: none
  style: none
  # no icon library; "icons" are typographic hairline rules and ghosted Roman numerals

Blackwood

blackwood-design · alpha

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

Overview

Blackwood is a dark, editorial executive-education system that reads like a private-college prospectus. Its surface alternates between a deep oxford navy #0E1B33 (hero, curriculum, outcomes, admission, footer) and a warm ivory spread #F3EEE4 for the faculty section. A single antique-gold voltage #B8902E carries every accent — the BLACKWOOD wordmark, eyebrows, hairline rules, the CTA dash, and oversized inline statistics — while a muted slate-blue #48587A does the work of body copy and ghosted background numerals. The type story is three-faced and serif-led: Playfair Display for all display headings (medium 500, tight 1.04 leading) and italic pull-quotes, Source Serif 4 for generous 1.85 body prose, and Montserrat for tiny uppercase micro-labels with extreme tracking (0.25–0.4em). The geometry is strictly rectilinear — zero border-radius, zero shadow — built entirely from columns, full-bleed images, and 1px rules. Signature moves: giant ghosted Roman numerals (I–IV at 9rem, #48587A at 15% alpha) behind each curriculum movement, gold rules that draw via scaleX on scroll, a Playfair drop-cap on faculty paragraphs, an oxblood #6E2A2A reserved exclusively for italic pull-quotes, and 1.9em gold figures embedded inline in a serif sentence.

Colors

Brand / Voltage. gold #B8902E is the only accent and appears everywhere that matters: the wordmark, all eyebrows, the hero CTA dash and label, every gold rule above curriculum modules, the outcomes vertical rule, and the three inline statistics. oxblood #6E2A2A is held in reserve for italic pull-quotes and their border-y (hairline-oxblood rgba(110,42,42,0.30)), plus the request-link hover under-bar.

Surface. navy #0E1B33 is the dominant page surface and the hero text panel; ivory #F3EEE4 is both the faculty-spread background and the light text color on navy.

Text. On navy, headings and body use text-light #F3EEE4; on ivory they use text-dark #0E1B33. slate #48587A is the workhorse muted color — hero subtext, all curriculum/faculty body paragraphs, secondary eyebrows, the outcomes corner labels, and (at 15% alpha, numeral-ghost) the giant Roman numerals.

Hairlines. Several alpha hairlines structure the page: hairline-gold rgba(184,144,46,0.70) under the wordmark, hairline-navy rgba(14,27,51,0.10) dividing ivory sections, hairline-slate rgba(72,88,122,0.25) dividing navy sections, and hairline-oxblood rgba(110,42,42,0.30) bordering blockquotes.

Typography

All faces load from a single Google Fonts @import: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,400&family=Montserrat:wght@400;500;600&display=swap. Playfair Display (.font-display) is the display/serif voice; Source Serif 4 (.font-body) is the reading face; Montserrat (.font-label) is the only sans, used solely for uppercase tracked micro-labels. All three are open-source — no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	text-4xl → text-7xl (clamp ~2.25–4.5rem)	500	1.04	normal	hero h1, all section h2/h3
display-italic	text-2xl → text-6xl	400	1.2–1.4	normal	pull-quotes, invitation quote
body	1.125rem (text-lg)	400	1.85 (1.5 outcomes)	normal	all reading paragraphs, drop-cap intro
label	9–10px	500	normal	0.3–0.4em	eyebrows, figcaptions, corner labels
nav	11–12px	500	normal	0.25–0.35em	nav links, CTA, request link

The drop-cap (.drop-cap::first-letter) is Playfair 5.2rem, weight 600, line-height 0.78, navy #0E1B33, floated left on faculty intro paragraphs.

Layout

Base unit 4px (Tailwind), but the section rhythm is deliberately grand: py-28–py-44 vertical padding, px-10 md:px-16 lg:px-24 horizontal gutters, content capped at max-w-6xl (curriculum, faculty), max-w-4xl (outcomes), and max-w-3xl (admission). The hero is a 45/55 split — a full-bleed parallax image left, navy text panel right, min-h-[90vh]. The curriculum stacks four 220px_1fr two-column modules each gapped by gap-24. Faculty is a two-up grid-cols-2 magazine spread (image + prose), the second alternating order. The outcomes block is a single left-ruled column. Whitespace is expansive and quiet — the composition is built from columns, rules, and full-height images, no boxes.

Elevation & Depth

Entirely flat. There are no box-shadows and no glass/blur. Depth comes from (1) the navy/ivory surface contrast, (2) parallax on the full-bleed images (object-cover at 130% height, top -15%, Locomotive data-scroll-speed -0.5), and (3) 1px hairline rules and border-t dividers between sections. Faculty portraits are grayscale.

Shapes

There is no border-radius anywhere — every edge is square (rounded.none = 0). The shape language is rule-and-column: 1px horizontal gold rules, a 1px vertical gold rule beside the outcomes copy, border-y/border-t hairlines, and the wordmark's gold underline. The only "ornament" is the giant ghosted Roman numerals.

Components

• wordmark — BLACKWOOD in Playfair, tracking-[0.18em], gold #B8902E, with a #B8902E/70 hairline underline and a 9px Montserrat sub-label (Institute of Executive Study).
• nav-link — Montserrat 11px uppercase, #F3EEE4 (active item gold), with a gold under-bar that scaleX-reveals and letter-spacing that widens on hover.
• eyebrow — Montserrat 10px uppercase tracking-[0.4em], gold (or slate for secondary), e.g. The Blackwood Executive MBA · Est. 1887.
• hero-cta — a 20px gold hairline (h-px w-5) + Explore the Programme in gold Montserrat 12px tracking-[0.3em]; no button chrome.
• gold-rule — h-px full-width gold bar above each curriculum module that draws from scaleX 0→1 on scroll.
• pull-quote — italic Playfair text-2xl→3xl, oxblood #6E2A2A, framed by border-y #6E2A2A/30, py-7, offset -mr-16/-ml-16 to bleed.
• inline-stat — 84%, $140k, 3.2× set at 1.9em in gold inside a slate-navy serif sentence on navy.
• request-link — Request an Interview in #F3EEE4 Montserrat with a 1px under-bar (#48587A → #6E2A2A on hover).

Motion

Driven by GSAP + ScrollTrigger, anime.js, and Locomotive Scroll. Headlines and eyebrows fade-and-rise (autoAlpha 0, y 28, 0.6s, power2.out, start top 88%). Gold rules draw via scaleX 0→1 (0.85s, power2.inOut, start top 90%). Nav links animate on pointerenter: letter-spacing 0.25em→0.42em (350ms) and the bar scaleX 0→1 from left (320ms), ease out(3), reversing from the right on leave. Full-bleed images parallax via Locomotive data-scroll-speed="-0.5".

Iconography

No icon library is loaded. The visual "icons" are typographic: the giant ghosted Roman numerals (I–IV, Playfair 9rem at #48587A/15) and the 1px hairline rules and dashes (CTA dash, gold rules, vertical outcomes rule). All decorative weight is carried by type and rule, never by glyphs from an icon set.

Do's and Don'ts

• Do keep gold #B8902E as the single accent and reserve oxblood #6E2A2A strictly for pull-quotes.
• Do keep every corner square — no border-radius, no shadows, no cards.
• Do use Montserrat only for tiny uppercase tracked labels; never for body.
• Do let the navy/ivory surface alternation and 1px rules carry structure.
• Don't introduce a second accent color or a colored background panel.
• Don't round corners, add box-shadows, or wrap content in card chrome.
• Don't set body copy in a sans face or tighten the generous 1.85 leading.
• Don't shrink the expansive section padding or the wide label tracking.

Known Gaps

• Display sizes are responsive Tailwind steps (text-4xl…text-7xl); the clamp(...) token values are summarized approximations of those breakpoints.
• Font weights for the display face vary by element (mostly font-medium 500, pull-quotes 400, drop-cap 600); the token records the dominant weight.
• Hairline colors are expressed as resolved rgba from Tailwind alpha utilities (e.g. #B8902E/70 → rgba(184,144,46,0.70)).