name: coastal-bold-design
version: alpha
description: >
  A warm, editorial design-studio landing built on a sand-paper surface
  (#F6F2EE) with a cool sea-glass alternate (#E3EBF0) and ink-navy type
  (#1C2B36). Two coastal voltages carry the brand: a terracotta-red (#C8462A)
  for emphasis, rules, and stat numbers, and a teal (#2D8A9E) for eyebrows,
  categories, and links. The signature move is heavy italic Fraunces display
  type — used at 700/900 weights — paired with a DM Mono label voice in
  uppercase tracking and a quiet DM Sans body. Geometry is deliberately
  square (no border-radius anywhere); depth comes from hairlines, a 4px
  accent top-rule on cards, and a single soft hover shadow.
colors:
  # Brand / Voltage
  accent-1: '#C8462A'        # terracotta — rules, stat numbers, hover fills, card top-border, hover links
  accent-2: '#2D8A9E'        # teal — eyebrows, category labels, links, footer email
  # Surface
  bg-primary: '#F6F2EE'      # sand/paper page background; also light text on dark sections
  bg-secondary: '#E3EBF0'    # sea-glass background for the case-studies section
  surface: '#FFFFFF'         # case card fill
  ink-dark: '#2D3A42'        # hero video placeholder fill (slate)
  # Text
  text-primary: '#1C2B36'    # ink navy — headings, body, dark section backgrounds & footer bg
  text-muted: '#617A8A'      # slate-blue — body copy, captions, footer labels
  hero-headline: '#F6F2EE'   # paper-white headline over the hero video
  # Hairlines (rgba)
  hairline-dark: 'rgba(28, 43, 54, 0.1)'    # 1px dividers on light surfaces (project rows, column borders)
  hairline-light: 'rgba(246, 242, 238, 0.12)' # 1px dividers on dark footer
  # Overlays / Gradient
  hero-overlay: 'linear-gradient(to bottom, rgba(28,43,54,0.55) 0%, rgba(28,43,54,0.15) 55%, rgba(28,43,54,0.65) 100%)' # hero video scrim
typography:
  display-hero:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: clamp(40px, 4.2vw, 60px)
    fontWeight: 900
    fontStyle: italic
    lineHeight: 1.0
  display-heading:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: clamp(36px, 4vw, 56px)
    fontWeight: 700
    fontStyle: italic
    lineHeight: 1.08
  display-stat:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: 64px
    fontWeight: 900
    fontStyle: italic
    lineHeight: 1
  display-title:
    fontFamily: "'Fraunces', Georgia, serif"
    fontSize: 22px
    fontWeight: 600
    fontStyle: italic
    lineHeight: 1.2
  mono-label:
    fontFamily: "'DM Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 1.54px
    textTransform: uppercase
  body:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  body-cta:
    fontFamily: "'DM Sans', sans-serif"
    fontSize: 13px
    fontWeight: 500
    letterSpacing: 0.78px
    textTransform: uppercase
rounded:
  none: 0          # everything is square — no border-radius is used anywhere
spacing:                      # base unit 4px; 80px is the page gutter
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 40px
  xxl: 80px
  gutter: 80px
components:
  nav:
    backgroundColor: transparent
    textColor: '{colors.hero-headline}'
    typography: '{typography.mono-label}'
    padding: '28px 80px'
    rounded: '{rounded.none}'
  hero-cta:
    backgroundColor: transparent
    textColor: '#FFFFFF'
    border: '1.5px solid rgba(255,255,255,0.5)'
    hoverBackgroundColor: '{colors.accent-1}'
    typography: '{typography.body-cta}'
    padding: '11px 24px'
    rounded: '{rounded.none}'
  work-cta:
    textColor: '{colors.accent-1}'
    border: 'bottom 1.5px solid {colors.accent-1}'
    hoverColor: '{colors.accent-2}'
    typography: '{typography.body-cta}'
    rounded: '{rounded.none}'
  project-row:
    borderBottom: '1px solid {colors.hairline-dark}'
    typography: '{typography.display-title}'
    padding: '28px 0'
    hoverUnderline: '{colors.accent-1}'
    rounded: '{rounded.none}'
  case-card:
    backgroundColor: '{colors.surface}'
    borderTop: '4px solid {colors.accent-1}'
    textColor: '{colors.text-primary}'
    typography: '{typography.display-title}'
    padding: '28px 28px 32px'
    hoverShadow: '0 12px 40px rgba(28, 43, 54, 0.12)'
    rounded: '{rounded.none}'
  footer:
    backgroundColor: '{colors.text-primary}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.mono-label}'
    padding: '100px 80px 60px'
    rounded: '{rounded.none}'
motion:
  ease: 'cubic-bezier(0.25, 0, 0.15, 1) — the global custom easing'
  hero-words: 'staggered blur(12px)→0 + fade, 0.7s, 120ms apart per word'
  hero-video-settle: 'scale(1.04)→scale(1) over 2s on load'
  count-up: 'elevation 0→312m (1.8s) and projects 0→60+ (1.4s), cubic ease-out'
  heading-wipe: 'clip-path inset(0 100% 0 0)→0 reveal, 0.9s'
  manifesto-lines: 'translateY(100%)→0 line-by-line, 0.8s, 80ms stagger'
  manifesto-invert: 'section flips to dark (#1C2B36 bg / paper text) past 30% scroll, 0.5s'
  rule-grow: 'work rule scaleY(0)→1; footer rules scaleX(0)→1, 0.6–0.8s'
  footer-wordmark: 'per-char clip-path wipe, 40ms stagger'
icons:
  library: none — no icon font or SVG icons
  style: 'glyph arrow ("→") via CSS ::after on case links; "·" and "/" as text separators'
  color: '{colors.accent-2}'

Coastal Bold

coastal-bold-design · alpha

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

Overview

Coastal Bold is a warm, editorial landing page for a fictional Atlantic-coast design studio. The page lives on a sand-paper surface (--bg-primary #F6F2EE) with a cool sea-glass alternate (--bg-secondary #E3EBF0) reserved for the case-studies band, and ink-navy (--text-primary #1C2B36) doing both heading type and the dark backgrounds of the manifesto and footer. Two coastal voltages do all the brand work: a terracotta-red (--accent-1 #C8462A) drives vertical rules, the giant stat numbers, card top-borders, and hover states, while a teal (--accent-2 #2D8A9E) carries eyebrows, category labels, and links. The signature move is heavy italic Fraunces — a high-contrast serif used at 700 and 900 weights for the hero headline, manifesto lines, stats, and the COASTAL wordmark — counterpointed by an all-caps DM Mono label voice with wide tracking and a quiet DM Sans body at 17px/1.65. Geometry is uncompromisingly square: there is no border-radius anywhere. Depth is built from hairlines, a 4px terracotta top-rule on cards, and a single soft hover shadow — never glass or glow. Motion is the personality: blur-to-sharp hero words, count-up tickers (0→312m elevation, 0→60+ projects), clip-path heading wipes, line-by-line manifesto reveals, and a scroll-triggered light→dark inversion of the manifesto.

Colors

Brand / Voltage. accent-1 #C8462A (terracotta) is the primary emphasis color: the 3px work-rule, the 64px italic stat, the 4px card top-border, the footer top/bottom rules, the footer "Available Now" tag, and every hover fill or hover-link target. accent-2 #2D8A9E (teal) is the secondary voltage: hero eyebrow, all work-label/case-cat/project-cat mono labels, the case links, and the footer email; on hover these often shift toward accent-1.

Surface. bg-primary #F6F2EE is the paper page background (and serves as light text on the dark manifesto/footer). bg-secondary #E3EBF0 is the sea-glass background isolating the case-studies section. surface #FFFFFF is the case-card fill. ink-dark #2D3A42 is the placeholder fill behind the hero video before it loads.

Text. text-primary #1C2B36 is ink navy — headings, project titles, case titles, and the dark backgrounds of the manifesto (when inverted) and footer. text-muted #617A8A is the slate-blue used for body copy, stat labels, captions, and footer labels/coords. Over the hero, the headline uses paper-white #F6F2EE and the sub-copy uses rgba(246,242,238,0.82).

Hairlines. On light surfaces, 1px dividers are rgba(28,43,54,0.1) (hairline-dark) — project rows, the work-column left border. On the dark footer, dividers are rgba(246,242,238,0.12) and 0.08 (hairline-light).

Gradient / Overlay. The hero scrim is a vertical linear-gradient of rgba(28,43,54,…) at 0.55 → 0.15 → 0.65, darkening top and bottom to seat the white type.

Typography

Three Google Fonts loaded via one @import-style <link>: Fraunces (an optical-size serif, italic at 600/700/900) for all display; DM Sans (400/500) for body and CTAs; DM Mono (400) for labels. Fraunces is the load-bearing face — almost always italic and heavy. Mono labels are uppercase with wide letter-spacing (0.08–0.14em). If Fraunces is unavailable the stack falls back to Georgia/serif.

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	clamp(40–60px)	900 italic	1.0	—	Hero headline (per-word blur reveal)
display-heading	clamp(36–56px)	700 italic	1.08	—	Section headings, manifesto, footer wordmark
display-stat	64px	900 italic	1	—	Count-up stat number
display-title	22px	600 italic	1.2	—	Project titles, case titles, nav logo
mono-label	11–12px	400	—	0.08–0.14em	Eyebrows, labels, categories, coords, links
body	17px	400	1.65	—	Base body copy
body-cta	13–14px	500	0.06em	—	CTA buttons / underline links (uppercase)

Layout

Base unit is 4px; the dominant page gutter is 80px (collapsing to 24px under 768px). The page is a full-bleed vertical sequence: a 100vh hero with video + gradient overlay and bottom-left anchored content; a two-column WORK section (1fr 1fr) with a sticky left rail and a hairline-divided project list on the right; a centered MANIFESTO band that inverts to dark on scroll; a CASES section on the sea-glass surface with a 3-column card grid (repeat(3,1fr), 28px gap); and a dark FOOTER with a centered rule-flanked wordmark and a 3-column info grid. No max-width container — sections are edge-to-edge padded by the gutter. Whitespace is generous and editorial (120–160px vertical section padding). Mono coordinate strings ("51.4°N / 9.8°W", "312m ELEVATION") act as recurring decorative datapoints.

Elevation & Depth

Almost entirely flat. Depth signals are: 1px hairlines for structure; a 4px terracotta top-border on case cards; and exactly one shadow — 0 12px 40px rgba(28,43,54,0.12) on .case-card:hover. The hero overlay gradient supplies contrast depth over video. No backdrop-blur, no glass, no glow.

Shapes

Strictly rectangular. border-radius is 0 everywhere — cards, buttons, the video, images all keep hard 90° corners. The "shape language" is instead linear: the 3px vertical work-rule, the animated horizontal footer rules, the 4px card top-border, and 1px dividers. This squareness is the system's discipline.

Components

• Nav — fixed, transparent, 28px 80px padding; italic Fraunces logo ("Coastal") in paper-white; mono uppercase links in rgba(246,242,238,0.75), hover → solid paper.
• Hero CTA — transparent with a 1.5px rgba(255,255,255,0.5) border, white uppercase DM Sans label, 11px 24px padding; hover fills terracotta. Label: "See Our Work".
• Work CTA — terracotta text with a 1.5px terracotta bottom-border, hover → teal. Label: "View All Work".
• Project row — 3-col grid (40px 1fr auto), 28px vertical padding, 1px hairline bottom; hover paints a terracotta underline and turns the italic title terracotta. Mono num + italic title + teal mono category.
• Case card — white fill, 4px terracotta top-border, square; 3:2 image (teal placeholder), 28px 28px 32px body; teal category, italic title, muted desc, teal mono "View Case →" link (arrow via ::after). Hover lifts a soft shadow.
• Footer — ink-navy background, paper text; centered COASTAL wordmark flanked by growing terracotta rules; 3-column grid (Studio / Navigate / Available) over rgba(246,242,238,0.12) hairlines; mono copyright base.

Motion

The page is motion-forward, all driven by a custom ease cubic-bezier(0.25,0,0.15,1) and IntersectionObserver (with a 1.5s visibility fallback). Hero: video settles scale(1.04)→1 over 2s; eyebrow fades in; headline words reveal blur(12px)→0 staggered 120ms; an elevation counter tickers 0→312m over 1.8s; sub + CTA rise in. Work: the vertical rule grows scaleY, the heading wipes via clip-path inset, the stat counts 0→60+, and project rows stagger up 80ms apart. Manifesto: lines slide translateY(100%)→0 line-by-line, and the whole section flips dark past 30% scroll. Cases: cards slide in from translateX offsets. Footer: rules grow scaleX from their inner edges and the wordmark wipes per-character (40ms stagger).

Iconography

No icon library — no Tabler, no SVG icon set. The only iconographic element is a CSS-generated right-arrow ("→") appended to case links via ::after, plus typographic separators ("·", "/") in mono coordinate/eyebrow strings. Decorative intent throughout; all in teal #2D8A9E.

Do's and Don'ts

• Do keep all corners square — never introduce border-radius.
• Do set display type in italic Fraunces at 700/900; reserve DM Mono for uppercase tracked labels and DM Sans for body.
• Do use terracotta for emphasis/rules/hover and teal for labels/links — don't swap their roles.
• Do build depth from hairlines, the 4px card rule, and the single hover shadow; keep surfaces matte.
• Don't add glass, glow, or gradients beyond the hero scrim.
• Don't center body text or use Fraunces for body copy.
• Don't drop the mono coordinate/datapoint strings — they carry the coastal character.

Known Gaps

• mono-label letterSpacing is given here as ~1.54px (≈0.14em at 11px); the source uses em values ranging 0.08–0.14em across instances.
• The hero <video>/poster and case images load from a remote Kombai CDN; if they fail (onerror hides them), the ink-dark #2D3A42 video bg and the teal #2D8A9E image bg show through as fallbacks.
• Fonts are loaded via <link> (Google Fonts CSS2), captured as the token url.