name: tidewater-design
version: alpha
description: >
  A deep slate-teal editorial surface (#111B22) for a coastal-expedition brand,
  lit by two voltages: a sea-glass sage (#A8C5BE) for eyebrows, links and the
  primary CTA, and an amber brass (#D4A84B) for rules, the structural quotemark
  and the secondary CTA. The type story pairs an airy high-contrast Italiana
  display with a black Bodoni Moda for editorial weight, set on a light
  Inter Tight body and a JetBrains Mono italic used for coordinates and
  eyebrows. Signature moves: a 55/45 split hero with a char-flip headline over
  a parallaxing video, a magnetic-cursor atlas grid, a scroll-driven dark→cream
  theme inversion, and sticky stacked field-dispatch panels. Geometry is
  near-rectilinear — no border radii on surfaces, only pills are absent and
  circles appear as the cursor ring and quote dots.
colors:
  # Surface
  bg-primary: '#111B22'      # page background, hero panes, footer
  bg-secondary: '#172532'    # The Atlas section surface
  surface-light: '#E8DFCE'   # cream inversion target / mobile Mark background
  # Text
  text-primary: '#E8DFCE'    # headings + body on dark (cream)
  text-muted: '#7B95A0'      # muted captions, atlas body, cites
  text-dark: '#1A2530'       # text on light/accent fills (CTA labels)
  # Brand
  accent-1: '#A8C5BE'        # sea-glass sage: eyebrows, links, primary CTA
  accent-2: '#D4A84B'        # amber brass: rules, quotemark, secondary CTA
  # Hairlines
  hairline-sage: 'rgba(168, 197, 190, 0.15)'  # footer-bottom border
  # Gradient / overlay
  overlay-scrim: 'rgba(17, 27, 34, 0.55)'      # hero vignette / panel scrim ink
typography:
  display:
    fontFamily: "'Italiana', serif"
    fontSize: clamp(30px, 4vw, 56px)
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.04em
  display-editorial:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(64px, 5.5vw, 82px)
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.01em
  quote:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(26px, 3.5vw, 48px)
    fontWeight: 900
    lineHeight: 1.25
    fontStyle: italic
  body:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
  body-small:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.75
  label:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.12em
    textTransform: uppercase
  mono-eyebrow:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.1em
    fontStyle: italic
rounded:
  none: 0px        # all surfaces, cards, buttons, CTAs
  qbar: 2px        # quotemark bar top corners only
  full: 9999px     # atlas cursor ring + quote dots (circles)
spacing:            # base unit 4px; section padding uses 6vw gutters
  xs: 4px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 36px
  xxl: 72px
  section: 110px
components:
  nav:
    backgroundColor: 'transparent → {colors.bg-primary} (rgba .95 + blur 14px on scroll)'
    textColor: '{colors.text-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '24px 0 (14px 0 scrolled)'
  nav-cta:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text-dark}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '8px 20px'
  hero-cta:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text-dark}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '14px 28px'
  footer-cta-btn:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px 22px'
  atlas-col:
    backgroundColor: 'transparent (on {colors.bg-secondary})'
    textColor: '{colors.text-muted}'
    typography: '{typography.body-small}'
    rounded: '{rounded.none}'
    padding: '0; 1px sage separator at .3 opacity'
  footer-cta-box:
    backgroundColor: 'transparent'
    textColor: '{colors.text-primary}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '36px 28px; 1px {colors.accent-2} border'
motion:
  ease-expo: 'cubic-bezier(0.16, 1, 0.3, 1) — section reveals, footer logo'
  hero-char-flip: 'per-char rotateX(-90deg)→0 + opacity, 550ms, 30ms stagger'
  atlas-reveal: 'translateY(30px) skewY(4deg)→0 over 700ms ease-expo'
  magnetic-cursor: '90px ring lerps to mouse (0.12); columns scale/brighten by proximity (radius 420px)'
  theme-inversion: 'rAF-driven dark→cream lerp across Mark scroll (progress 0.15→0.55)'
  panel-blur-in: 'opacity + blur(10px)→0 + translateY(18px), 800ms ease-expo'
  footer-logo-track: 'letterSpacing 0.5em→0.04em + fade, 1100ms ease-expo'
  hero-parallax: 'video scale 1→1.055 + opacity 1→0.5; text pane floats -12px on scroll'
icons:
  library: inline glyphs / CSS shapes (no icon font)
  style: 'text arrows (→) on links/CTAs; quotemark built from CSS bars + dots'
  sizes: { arrow: inline-with-text }
  color: '{colors.accent-1} (links) / {colors.accent-2} (quotemark)'

Tidewater

tidewater-design · alpha

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

Overview

Tidewater is the design system behind "Horizon," a coastal-expedition brand. The surface is a deep slate-teal #111B22 with a slightly warmer second surface #172532 for The Atlas section, and a cream #E8DFCE that doubles as the primary text color and as the destination of a scroll-driven theme inversion. Two voltages carry the brand: a sea-glass sage #A8C5BE (--accent-1) on eyebrows, links and the primary sage CTA, and an amber brass #D4A84B (--accent-2) on the hero rule, the structural quotemark, and the secondary footer CTA. The type story is editorial and high-contrast: an airy Italiana serif for logos and headlines, a black Bodoni Moda (900) — including an italic cut for the pull-quote — for editorial weight, Inter Tight at weight 300 for body, and a JetBrains Mono italic for coordinates and eyebrows. The geometry is rectilinear: surfaces, cards and buttons carry no border radius; the only curves are the 90px magnetic cursor ring and the quotemark dots. Signature moves are a 55/45 split hero with a char-flip headline over a parallaxing video, a magnetic-cursor atlas grid, a dark→cream theme inversion, and sticky stacked field-dispatch panels with a blur-to-sharp entrance.

Colors

Surface. bg-primary #111B22 is the page background, both hero panes and the footer. bg-secondary #172532 is the warmer surface of The Atlas section. surface-light #E8DFCE is the cream the Mark section inverts to (and the static mobile Mark background).

Text. text-primary #E8DFCE (cream) is used for headings and body on dark. text-muted #7B95A0 carries muted captions, atlas body copy, and cites. text-dark #1A2530 is the legible label color on light/accent fills (e.g. CTA text on the sage button).

Brand. accent-1 #A8C5BE is the sea-glass sage used for the mono eyebrows, all link text, and the primary CTA fill (hover #bcd4ce). accent-2 #D4A84B is the amber brass used for the hero rule, the CSS quotemark, the footer separators/CTA border, and the secondary footer CTA fill (hover #e0b55a).

Hairlines. Footer's bottom rule uses rgba(168, 197, 190, 0.15); atlas separators are accent-1 at 0.3 opacity; the footer top border and CTA box use solid accent-1/accent-2.

Gradient / overlay. The hero video carries a top/bottom scrim (rgba(17,27,34,…) from 0.22→0→0.28) plus a right-edge vignette to 0.55; the crossing panels use a bottom-up ink gradient from rgba(17,27,34,0.85) to 0.10.

Typography

Four families, all from Google Fonts: Italiana (display/logo), Bodoni Moda (opsz 6–96, weight 900, roman + italic) for editorial heads and the pull-quote, Inter Tight (300/400/500 + italic 300) for body and labels, and JetBrains Mono (italic 400) for coordinates and eyebrows. All are open-source, so no substitution is required.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(30px,4vw,56px)	400	1.05	0.04em	Italiana — logo, hero/panel headlines, dests
display-editorial	clamp(64px,5.5vw,82px)	900	1.0	-0.01em	Bodoni Moda — Atlas headline
quote	clamp(26px,3.5vw,48px)	900 italic	1.25	—	Bodoni Moda italic — Mark pull-quote
body	16px	300	1.65	—	Inter Tight — hero sub, panel excerpts
body-small	14px	300	1.75	—	Inter Tight — atlas body, footer links
label	11px	500	—	0.12em, uppercase	Inter Tight — nav, CTAs, atlas links
mono-eyebrow	11px	400 italic	—	0.1em	JetBrains Mono — coords, eyebrows, cite

Layout

Base unit is 4px; section gutters use 6vw and content is capped at max-width: 1440px (Mark 1200px, panel content 860px). The page is a single long scroll composition: a fixed nav; a full-viewport hero split 55fr/45fr (video left, text right); The Atlas, a 3-column grid (1fr 1fr 1fr, 48px gap) with a magnetic cursor; The Mark, a 250vh sticky scroll stage driving a theme inversion; The Crossing, a 350vh stack of three sticky 100vh panels layered by z-index; and a 3-column footer (1.8fr 1.6fr 1.3fr). Whitespace is generous and editorial — large section padding (110px top on Atlas) and ample headline margins.

Elevation & Depth

There are no drop shadows. Depth is built from gradients and layering: the fixed nav gains a glassy rgba(17,27,34,0.95) fill with backdrop-filter: blur(14px) when scrolled; hero and panel imagery sit under linear-gradient scrims; the crossing panels stack by z-index with a slight scale-down (to 0.96) as the next panel locks over them. The custom cursor uses mix-blend-mode: screen. Borders (1px sage/amber) stand in for cards.

Shapes

Rectilinear by default — every surface, card, and button has border-radius: 0. The system uses no pills. The only curves are circular: the 90px magnetic cursor ring (border-radius: 50%) and the two quotemark dots; the quotemark bars carry a tiny 2px 2px 0 0 top radius. Visual rhythm comes from thin rules — the 80px amber hero rule, 1px atlas separators, and 1px footer borders.

Components

• nav — transparent, fixed; becomes rgba(17,27,34,0.95) + 14px blur on scroll; uppercase 11px label links at 0.75 opacity; pads 24px→14px.
• nav-cta ("Begin →") — sage accent-1 fill, text-dark label, no radius, 8px/20px padding, hover #bcd4ce.
• hero-cta ("Begin Your Expedition →") — sage fill, text-dark, 14px/28px, lifts -1px on hover.
• footer-cta-btn ("Begin an Expedition →") — amber accent-2 fill, bg-primary label, 12px/22px, hover #e0b55a.
• atlas-col — coordinate (mono, sage), dest (Italiana 30px), 1px sage separator at 0.3, body (Inter 14px muted), uppercase sage link; magnetic scale/brighten on cursor proximity.
• footer-cta-box — 1px amber border, 36px/28px padding, Italiana 20px copy + amber CTA; slides in from translateX(30px).
• mark-quotemark — pure CSS: two 5px amber bars (68px tall) + two 8px amber dots forming a structural open-quote.

Motion

Motion is rAF- and IntersectionObserver-driven with a custom expo easing cubic-bezier(0.16,1,0.3,1). The hero headline splits into per-character spans that flip in on rotateX(-90deg)→0 (550ms, 30ms stagger). On scroll the hero video dims (opacity→0.5) and scales (1→1.055) while the text pane floats up 12px. The Atlas headline reveals with translateY(30px) skewY(4deg)→0 (700ms); its columns respond to a magnetic 90px cursor ring, scaling and brightening by proximity (radius 420px, lerp 0.12). The Mark section interpolates background, text and muted colors from dark to cream across scroll progress 0.15→0.55. The Crossing panels enter blur-to-sharp (blur(10px)→0, 800ms) as each becomes active. The footer logo expands its tracking from 0.5em to 0.04em over 1100ms.

Iconography

No icon font is loaded. "Icons" are typographic right-arrows (→) appended to nav, CTA, and link labels, and a bespoke CSS quotemark built from two amber bars plus two amber dots. Arrow glyphs inherit their link/CTA color; the quotemark is accent-2.

Do's and Don'ts

• Do keep surfaces, cards and buttons square (radius 0) — only the cursor ring and quote dots are circular.
• Do reserve sage #A8C5BE for eyebrows/links/primary CTA and amber #D4A84B for rules/quotemark/secondary CTA.
• Do pair Italiana with black Bodoni Moda for editorial contrast, and use JetBrains Mono italic only for coordinates and eyebrows.
• Don't introduce drop shadows; depth comes from gradients, blur-glass and z-index layering.
• Don't thicken the body — Inter Tight stays at weight 300.
• Don't let the two accents swap roles or appear as large fills beyond the defined CTAs.

Known Gaps

• The "reduced motion" block in the stylesheet is empty (an authored placeholder with no rules).
• Scroll-driven inversion and parallax values are interpolated live in JS; the hex stops here are the keyframe endpoints (dark #111B22→cream #E8DFCE), not every intermediate frame.
• Hover tints #bcd4ce (sage CTA) and #e0b55a (amber CTA) are one-off literals not promoted to tokens.