name: civic-design
version: alpha
description: >
  An editorial, civic-minded studio site on a warm bone paper surface
  (#F4F1EB) with ink-near-black text (#141E28) and two grounded
  "voltages" — a forest green (#1A6B4A) and a sky blue (#2E7BB8). The
  signature moves are a full-bleed video hero with content pinned to the
  bottom-left, a scrolling marquee over an ink-black studio section,
  oversized counted statistics, a numbered services list whose rows wipe
  to ink on hover, and a giant masked CIVIC / DESIGN footer wordmark.
  Type pairs the chunky geometric grotesque Syne for display with DM Sans
  for body and DM Mono for all the uppercase tracked labels. Geometry is
  almost entirely sharp-edged — pills appear only on tags and status dots.
colors:
  # Brand / Voltage
  accent-green: '#1A6B4A'   # primary voltage: eyebrows, dots, CTA arrow, hover fills, em emphasis in light sections
  accent-blue: '#2E7BB8'    # secondary voltage: italic accent words, category labels, footer slash, big statement numbers
  # Surface
  bg-primary: '#F4F1EB'     # bone/paper page background (hero text, work + services sections)
  bg-secondary: '#E8EFF4'   # pale blue image placeholder fill behind work cards
  surface: '#FFFFFF'        # white — light CTA fill, all text on dark sections, nav logo
  hero-base: '#1A2A30'      # dark slate fallback behind hero video
  # Text
  text-primary: '#141E28'   # ink near-black: headings + body on light; also the dark section/footer background
  text-muted: '#5A7080'     # slate-grey muted body, stat labels, descriptions
  # Hairlines (on light)
  hairline-strong: 'rgba(20, 30, 40, 0.18)'  # section dividers, header rules, service-row separators
  hairline-soft: 'rgba(20, 30, 40, 0.14)'    # card category underline
  # Hairlines & text (on dark)
  on-dark-line: 'rgba(244, 241, 235, 0.18)'  # dividers/borders on ink sections
  on-dark-muted: 'rgba(244, 241, 235, 0.6)'  # muted body text on ink
  # Overlay / scrim
  card-tag-scrim: 'rgba(20, 30, 40, 0.78)'   # blurred dark chip behind image tags
  hero-scrim: 'rgba(15, 22, 28, 0.86)'       # darkest stop of the hero gradient overlay
typography:
  display:
    fontFamily: "'Syne', sans-serif"
    fontSize: clamp(28px, 3.2vw, 52px)
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -0.02em
  display-mega:
    fontFamily: "'Syne', sans-serif"
    fontSize: clamp(80px, 12vw, 200px)
    fontWeight: 800
    lineHeight: 0.88
    letterSpacing: -0.05em
  heading:
    fontFamily: "'Syne', sans-serif"
    fontSize: clamp(22px, 2vw, 30px)
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.01em
  body:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  body-small:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-mono:
    fontFamily: "'DM Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.22em
    textTransform: uppercase
rounded:                      # almost everything is sharp; pills only
  none: 0px
  pill: 999px
  full: 9999px
spacing:                      # base unit 4px; clamp() used for section rhythm
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  '2xl': 48px
  '3xl': 64px
components:
  nav:
    backgroundColor: transparent
    textColor: '{colors.surface}'
    typography: '{typography.label-mono}'
    rounded: '{rounded.none}'
    padding: '24px 48px'
    # fixed, transparent, sits over the hero video; logo uses Syne 16px /0.06em with a soft text-shadow
  heroCta:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-primary}'
    typography: '{typography.body-small}'
    rounded: '{rounded.none}'
    padding: '11px 20px'
    # white block button, 1.5px white border, circular green arrow chip; hover fills green/white
  heroEyebrow:
    backgroundColor: transparent
    textColor: '{colors.surface}'
    typography: '{typography.label-mono}'
    rounded: '{rounded.pill}'
    padding: '5px 10px'
    # outlined pill on the video with a leading green dot (ring-shadowed)
  workCardTag:
    backgroundColor: '{colors.card-tag-scrim}'
    textColor: '{colors.surface}'
    typography: '{typography.label-mono}'
    rounded: '{rounded.none}'
    padding: '6px 10px'
    # blurred dark chip pinned top-left on each work image
  serviceRow:
    backgroundColor: '{colors.bg-primary}'
    textColor: '{colors.text-primary}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '44px 0'
    # numbered grid row; on hover an ink fill wipes in from the left and all text flips to white, arrow slides + greens
  footerAvailable:
    backgroundColor: transparent
    textColor: '{colors.accent-green}'
    typography: '{typography.label-mono}'
    rounded: '{rounded.pill}'
    padding: '8px 14px'
    # outlined green status pill with a pulsing dot
motion:
  hero-video-settle: 'scale(1.04) -> scale(1) over 2s cubic-bezier(0.4,0,0.2,1)'
  hero-entrance: 'eyebrow/words/subhead/CTAs staggered translateY+opacity; headline words add skewY(3deg) -> 0, ~90ms apart'
  clip-reveal: 'headings & service rows wipe via clip-path inset(0 100% 0 0) -> 0, 0.7-1s cubic-bezier(0.4,0,0.2,1)'
  counters: 'data-target numbers ease-in-out count up over 1200ms on intersect'
  marquee: 'marquee-scroll translateX(0 -> -50%) 38s linear infinite'
  service-hover: 'left-origin scaleX(0->1) ink fill 0.5s; padding 0.35s; arrow translateX(8px)'
  parallax: 'studio photo translateY at -0.08x scroll via rAF'
  footer-wordmark: 'per-char clip-path wipe 0.6s staggered; 3px green top rule scaleX 1.4s; available dot pulse 1.6s'
icons:
  library: inline unicode glyphs (no icon font)
  style: 'typographic arrows/dots — ↓ ↗ → ● ·'
  sizes: { sm: 11px, md: 22px, lg: 28px }
  color: '{colors.accent-green}'

Civic Design Studio

civic-design · alpha

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

Overview

Civic is the site for a fictional London civic-design studio, and it carries itself like a printed annual report that learned to scroll. The page sits on a warm bone paper (#F4F1EB) with ink-near-black type (#141E28), and it runs on two grounded voltages: a forest green (#1A6B4A) for civic seriousness and a sky blue (#2E7BB8) for the italic accents and big numbers. The hero is a full-bleed muted-autoplay video over a layered dark scrim, with all the content — outlined eyebrow pill, word-by-word Syne headline, subhead, a white block CTA and a mono "Start a project" link — pinned compactly to the bottom-left, plus a right-aligned meta column of coordinates and availability. Below it the system is relentlessly editorial: numbered project entries (01, 02) in an index grid, an ink-black studio section with a 38s marquee and oversized counted statistics, a six-row services list where each row wipes to solid ink on hover, and a closing ink footer dominated by a giant CIVIC / DESIGN wordmark that's masked to fade at the bottom and animates in character-by-character. The type story is Syne (800/700, tight negative tracking) for everything that shouts, DM Sans for calm 17px body, and DM Mono for every uppercase, widely-tracked label and coordinate. Geometry is almost entirely sharp — the only curves are status-dot circles and the rare outlined pill.

Colors

Brand / Voltage. Two accents do all the coloring work. accent-green (#1A6B4A) is the primary voltage: it tints work/services eyebrows, the leading hero-eyebrow dot, the circular CTA arrow chip, the marquee dot, the em emphasis inside light-section headings, the footer top rule and the pulsing "Available" pill. accent-blue (#2E7BB8) is the secondary voltage: italic accent words in the hero and pull-quote, work category labels and superscript indices, the services count, the big statement number, and the / in the footer wordmark.

Surface. bg-primary (#F4F1EB) is the bone paper behind the hero text, work, and services sections. bg-secondary (#E8EFF4) is a pale blue fill that shows through work-card image placeholders. surface (#FFFFFF) is pure white — the light CTA fill and the color of all type on the dark sections. hero-base (#1A2A30) is the dark slate that sits behind the hero video before it loads.

Text. text-primary (#141E28) is the ink used for headings and body on light surfaces — and, inverted, it is also the background of the studio/stats section and the footer. text-muted (#5A7080) is a desaturated slate for descriptions, stat labels, and secondary body.

Hairlines. On light, dividers and section rules use rgba(20,30,40,0.18), with a softer rgba(20,30,40,0.14) under card category labels. On the ink sections, borders use rgba(244,241,235,0.18) and muted text uses rgba(244,241,235,0.6).

Scrims. Image tags sit on a blurred rgba(20,30,40,0.78) chip. The hero overlay layers two gradients whose darkest stop is rgba(15,22,28,0.86) at the bottom, keeping the bottom-left text legible over any footage.

Typography

Three Google Fonts, loaded via one fonts.googleapis.com/css2 request: Syne (500/700/800) is the display grotesque — chunky, with tight negative letter-spacing (down to -0.05em on the mega numbers) and italicized accent words. DM Sans (400/500/700) is the body and UI face at a comfortable 17px / 1.65. DM Mono (400/500) handles every uppercase, widely-tracked label, eyebrow, coordinate, and meta row (typically 10–12px with 0.16–0.22em tracking).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(28px, 3.2vw, 52px)	800	1.02	-0.02em	hero headline, service names
display-mega	clamp(80px, 12vw, 200px)	800	0.88	-0.05em	stat numbers, footer wordmark scale
heading	clamp(22px, 2vw, 30px)	700	1.15	-0.01em	work-card titles
body	17px	400	1.65	—	default body copy
body-small	14px	400	1.5	—	subhead, summaries, CTA labels
label-mono	11px	400	1.6	0.22em (uppercase)	eyebrows, tags, meta, coordinates

Layout

Base unit is 4px; vertical section rhythm is built almost entirely from clamp() (e.g. clamp(96px, 14vh, 160px) section padding). Content sections center inside a max-width: 1400px with clamp(24px, 4vw, 56px) gutters. The hero is a 100vh full-bleed video with a bottom-left content block laid out as a minmax(0,1fr) auto grid — text on the left, a right-aligned meta stack — plus an absolutely-positioned top-right corner tag. Work is an index: a 1.4fr / 1fr header over a vertical list of 96px | 1.3fr | 1fr items (number, image, body). Stats is a 1.1fr 1.1fr 1.5fr grid of bordered cells, the third being a parallaxing studio photo, capped by a 1fr 2.2fr statement row. Services is a flat stack of 90px 2.4fr 1.6fr auto rows. The footer is a 1fr 1fr 1fr info grid above a single oversized wordmark. Whitespace is generous and confident; the composition leans on alignment and rules rather than boxes.

Elevation & Depth

This is a near-flat system: there are essentially no drop shadows on UI. Separation comes from hairline rules, full-bleed color blocks (ink sections vs. bone sections), and backdrop-filter: blur(4px) on the dark image-tag chips. The only shadow-like effects are the soft text-shadow on the nav logo over video, and the ring-style box-shadow: 0 0 0 Npx rgba(26,107,74,...) glow used on the green status dots (animated in the footer "Available" pulse). Depth in the hero is achieved purely with layered linear-gradient scrims; depth in stats with subtle parallax.

Shapes

Overwhelmingly sharp. Cards, images, chips, buttons, and section blocks all have 0 radius — even the work-image tags and the white hero CTA are hard rectangles. The only rounded elements are full circles (status dots, the hero CTA arrow chip) and the rare outlined pill (border-radius: 999px) used for the hero eyebrow and the footer "Available" badge. The aesthetic is grid-and-rule, not card-and- shadow.

Components

• Nav — fixed, transparent bar over the hero; Syne 700 logo (CIVIC DESIGN, 0.06em, soft text-shadow) left, DM Sans 13px links right; no background, hidden links under 768px.
• Hero eyebrow — outlined pill (1px rgba(244,241,235,0.28), radius 999px) with a leading green dot; mono 10px / 0.22em uppercase, "Design Studio · London".
• Hero CTA — white rectangular block, 1.5px white border, 11px/20px padding, DM Sans 13px; trailing 22px circular green "↓" arrow chip; hover fills the button green with white text and inverts the chip.
• Hero link — bare mono uppercase link with a bottom hairline border, "Start a project →".
• Work card tag — blurred dark chip (rgba(20,30,40,0.78), blur 4px), square, mono 10px white, pinned top-left on the image (e.g. "Wayfinding").
• Work card — square image (4:3, scales 1.04 on hover) over a body block with a blue mono category label (underlined), Syne title, muted summary, and a mono client/scope meta row.
• Stat cell — bordered grid cell with a mono head row, a display-mega counted number (green "+" suffix), a Syne label, and muted detail.
• Service row — 90px 2.4fr 1.6fr auto grid; mono number, Syne name, muted desc, → arrow; on hover a left-origin ink fill wipes in, text flips white, number greens-via-blue, arrow slides 8px and turns green; rows also clip-reveal on scroll.
• Footer "Available" pill — outlined green pill (1px rgba(26,107,74,0.45)) with a pulsing green dot, "Available Q3 2025".
• Footer wordmark — giant Syne 800 CIVIC / DESIGN, uppercase, masked to fade out at the bottom, animated in per character with a blue /.

Motion

Entrance and scroll choreography is the heart of this template. The hero video settles from scale(1.04) to 1 over 2s; hero content staggers in (eyebrow, then headline words ~90ms apart with a skewY(3deg) un-skew, then subhead, CTAs, and meta). Headings and service rows reveal via clip-path: inset(0 100% 0 0) -> 0 (0.7–1s). Statistic numbers count up with an ease-in-out tween over 1200ms on intersect. The studio marquee scrolls translateX(0 -> -50%) on a 38s linear loop. Service-row hover runs a left-origin scaleX(0->1) ink fill (0.5s) with a padding nudge and arrow slide. The studio photo parallaxes at -0.08x scroll via a rAF loop. The footer rule grows scaleX over 1.4s, the wordmark wipes in per character, and the "Available" dot pulses on a 1.6s loop. An IntersectionObserver drives reveals, with a 1500ms setTimeout fallback that force-reveals everything.

Iconography

No icon library — all "icons" are typographic unicode glyphs set in the text fonts: downward ↓ (hero CTA), ↗ (footer email), → (services, links), and filled bullets ● / middots · for the dots and separators. Arrow glyphs are the primary interactive affordance and animate on hover (translate / slide). Status dots are CSS circles in accent-green with ring-shadow glows. Color follows context: green on light/affordances, blue on accents.

Do's and Don'ts

• Do keep the page on bone (#F4F1EB) with ink type, and reserve full ink sections (#141E28) for the studio block and footer.
• Do use Syne for anything large or expressive, DM Mono for every uppercase tracked label, and DM Sans for running body.
• Do keep edges sharp — pills and circles are the only curves, used only for status dots, the CTA arrow chip, and the two outlined badges.
• Do let green carry affordances/civic seriousness and blue carry italic accents and big numbers.
• Don't add drop shadows or rounded cards; separation is hairlines and color blocks, not elevation.
• Don't introduce a third accent or recolor the voltages.
• Don't flatten the motion — the staggered entrance, clip-wipes, counters, marquee, and service-row ink fill are the personality.

Known Gaps

• Spacing tokens are an inferred 4px scale; the template mostly uses clamp() expressions for section rhythm rather than a fixed step scale, so xl/2xl/ 3xl are representative rather than exhaustive.
• The hero overlay is two stacked linear-gradient scrims; only the key stops (darkest rgba(15,22,28,0.86)) are tokenized.
• display-mega represents the largest Syne ramp (stat numbers / wordmark scale); actual sizes vary by element via clamp.
• Fonts load through one combined Google Fonts css2 URL; the per-face url in style-guide.json reuses that combined request.