name: tideline-design
version: alpha
description: >
  Tideline Swim is a high-contrast, editorial swimwear landing page built on a
  near-black ink and warm off-white "optic" palette, lit by two voltages: a
  swimming-pool cyan (#19BBD6) and a hot tangerine (#FF6A3C). The signature move
  is moiré: SVG vertical-stripe patterns that warp into hand-drawn wave-line
  overlays, drifting under GSAP. Type is all Space Grotesk in tight-tracked
  uppercase for display and Archivo for body, with outline ("stroke") headline
  treatments. Geometry is brutalist and gridded — zero radius everywhere, hairline
  ink borders, full-bleed 12-column compositions and a 1440px max width.
colors:
  # Brand / Voltage
  cyan: '#19BBD6'      # pool-cyan accent — vertical ticker rail, badges, marquee diamonds, button hover
  tang: '#FF6A3C'      # tangerine accent — labels, badges, button hovers, ::selection, hairline underline
  # Surface
  ink: '#121316'       # near-black — dark sections, header CTA, text, hairlines, stripe fills
  optic: '#F6F6F4'     # warm off-white — page surface, text on ink, stroke-optic outlines
  # Text (tints of ink/optic via opacity)
  ink-80: 'rgba(18,19,22,0.8)'    # body copy on optic
  ink-70: 'rgba(18,19,22,0.7)'    # product prices / secondary
  ink-60: 'rgba(18,19,22,0.6)'    # meta labels on optic
  optic-80: 'rgba(246,246,244,0.8)' # body copy on ink
  optic-70: 'rgba(246,246,244,0.7)' # footer links / secondary on ink
  optic-40: 'rgba(246,246,244,0.4)' # footer fine print / placeholders
  # Hairlines
  hairline-ink: '#121316'           # 1px / 2px solid ink dividers and grid gaps on light sections
  hairline-optic: 'rgba(246,246,244,0.2)' # faint optic dividers on dark sections
  # Gradient
  depthwave: 'linear ink → ink@15% → ink (#depthwave SVG)' # horizontal fade over stripe rail
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(3.5rem, 9vw, 8rem)
    fontWeight: 700
    lineHeight: 0.82
    letterSpacing: -0.04em
    textTransform: uppercase
  heading:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(2.5rem, 6vw, 5rem)
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.04em
    textTransform: uppercase
  label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 12px
    fontWeight: 500
    letterSpacing: 0.22em
    textTransform: uppercase
  body:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:                      # brutalist — everything is square
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
spacing:                      # 4px base unit; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
components:
  navLink:
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    # text-xs · hover:tang
  ctaDark:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.optic}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '16px 32px'   # py-4 px-8 (header CTA: py-3 px-6)
    # hover:bg-tang
  ctaLight:
    backgroundColor: '{colors.optic}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    # hover:bg-tang — used on dark sections
  linkUnderline:
    textColor: '{colors.tang}'
    typography: '{typography.label}'
    # border-b-2 border-tang, hover→ink
  productCard:
    backgroundColor: '{colors.optic}'
    rounded: '{rounded.none}'
    padding: '20px'        # p-5 on the text block, border-t border-ink
    # aspect-3/4 image, grayscale+contrast filter, group-hover:scale-105
  badge:
    backgroundColor: '{colors.tang}'  # or {colors.cyan}
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '4px 8px'     # text-[10px], py-1 px-2
    # labels: New / Back / Lookbook
  specRow:
    backgroundColor: '{colors.optic}'
    typography: '{typography.label}'
    padding: '16px 20px'   # py-4 px-5, 1px ink gaps
    # value highlighted in {colors.tang}
  emailForm:
    backgroundColor: 'rgba(246,246,244,0.05)'  # bg-optic/5
    rounded: '{rounded.none}'
    padding: '20px'        # input px-5 py-5
    # border border-optic/40; button bg-tang hover:bg-cyan
  marquee:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.optic}'
    typography: '{typography.label}'
    # border-y, diamond separators in tang/cyan, GSAP loop
motion:
  moireDrift: 'GSAP — #moireA x:-28 dur 6s, #moireB x:-40 dur 8s, repeat -1 yoyo sine.inOut'
  marqueeLoop: 'GSAP — #marquee xPercent:-50, dur 18s, repeat -1, ease none'
  heroParallax: 'GSAP ScrollTrigger — #moireA yPercent:12, scrub on #shop'
  cardReveal: 'GSAP — article y:40 opacity:0 → dur 0.7s power2.out, stagger 0.08s, start "top 88%"'
  imageZoom: 'CSS — group-hover:scale-105 transition-transform duration-700'
  hoverColor: 'CSS — transition-colors on links, CTAs, footer links'
icons:
  library: none — inline SVG patterns + typographic glyphs
  style: vertical-stripe SVG patterns (vstripe-tight/mid/wide), hand-drawn wave paths, ◆ diamond glyph separators
  color: '{colors.ink}' on light / '{colors.optic}' on dark; diamonds in {colors.tang} and {colors.cyan}

Tideline Swim

tideline-design · alpha

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

Overview

Tideline Swim is a brutalist editorial storefront for a sculpted-swimwear "drop." The surface is a warm off-white optic (#F6F6F4) cut against deep near-black ink (#121316), with whole sections flipping between the two. Two voltages do all the accent work: a pool-cyan #19BBD6 and a hot tangerine #FF6A3C — used on labels, badges, the vertical ticker rail, marquee diamonds, hover states and the ::selection highlight. The signature visual is moiré: SVG vertical-stripe pattern fills (vstripe-tight/mid/wide) layered behind grayscale, high-contrast photography and overlaid with hand-drawn wave-line paths, all drifting slowly under GSAP. Display type is Space Grotesk in bold, tightly negative-tracked uppercase (tight-caps, -0.04em), often rendered as an open outline via -webkit-text-stroke; body is Archivo. Geometry is uncompromisingly square — no border radius anywhere, hairline ink borders, gap-px grids that read as drawn lines, and a 12-column layout capped at max-w-[1440px].

Colors

Brand / Voltage. cyan #19BBD6 is the cooler accent — the vertical ticker rail beside the hero, the "Back" badge, alternating marquee diamonds, and the email-button hover. tang #FF6A3C is the dominant accent — eyebrow labels, the "New"/"Lookbook" badges, the hero film-link underline, primary button hovers, spec values, and the ::selection color (tang on optic).

Surface. ink #121316 carries the dark sections (lookbook, fabric image, stockists, footer), the header "Shop The Drop" CTA, all text on light, and every hairline and stripe fill. optic #F6F6F4 is the page background and the text color on every dark section.

Text. Built as opacity tints rather than new hues: body on light is ink/80, prices ink/70, meta labels ink/60; on dark, body is optic/80–optic/70, fine print and placeholders optic/40.

Hairlines. Solid ink at 1px (and 2px under section titles) divides light content; optic/20–optic/40 provides faint dividers and form borders on dark.

Gradient. A single SVG linearGradient #depthwave fades ink → ink@15% → ink horizontally across the hero's right-edge stripe rail to suggest depth.

Typography

Two Google Fonts, imported together: Space Grotesk (400/500/700) for all display, headings and uppercase labels, and Archivo (400/500/600) for body copy. Both are open-source, so no substitution is needed. The system leans on two utility classes: tight-caps (letter-spacing:-0.04em; text-transform:uppercase) for headlines and label-caps (letter-spacing:0.22em; text-transform:uppercase) for eyebrows, nav and metadata. Outline headlines use -webkit-text-stroke:2px with transparent fill in either ink or optic.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.5rem, 9vw, 8rem)	700	0.82	-0.04em	Hero H1 "Tide / Line / Swim"
heading	clamp(2.5rem, 6vw, 5rem)	700	0.85–1	-0.04em	Section H2s ("The Drop", "First In The Water")
label	12px (10–11px variants)	500	—	0.22em	Eyebrows, nav, badges, ticker, marquee, footer
body	16–18px	400	1.5	—	Paragraph copy, prices

The footer wordmark scales to clamp(3rem,13vw,12rem) solid optic; product titles are text-lg tight-caps bold.

Layout

4px base unit on Tailwind's scale; recurring values 8/16/24/32/48/64px. The page is a stack of full-width sections, each centered to max-w-[1440px] with px-8 gutters. The hero is a 12-column split: a 5-col text column (border-right hairline), a 5-col ink image panel with moiré + wave overlays, and a 2-col stripe rail ending in a 48px (w-12) cyan vertical ticker. Product and content grids use gap-px on an ink background so the gaps render as crisp ink lines between optic cells. Sections alternate optic/ink for rhythm; the fabric and stockist blocks are split 6/6 and 7/4 grids. Whitespace is generous vertically (py-20 md:py-28) but the horizontal composition is dense and edge-to-edge.

Elevation & Depth

Flat by design — there are no box-shadows. Depth comes entirely from: hairline ink/optic borders, gap-px grid lines, layered SVG stripe patterns, hand-drawn wave overlays, the #depthwave gradient, and image treatments (mix-blend-luminosity, grayscale(1), contrast(1.1–1.2)). Motion-driven moiré drift adds the only sense of three-dimensionality.

Shapes

Strictly rectangular. Every rounded token is 0 — no rounded buttons, cards, badges, inputs or images. Corners are hard, borders are sharp hairlines, and the only curves in the entire page are the decorative hand-drawn wave paths and concentric circles in the SVG overlays.

Components

• navLink — ink text, label type at text-xs, hover:tang, color transition.
• ctaDark — solid ink fill, optic text, label caps, square, py-4 px-8 (header CTA py-3 px-6), hover:bg-tang. Labels: "Shop The Collection", "Shop The Drop".
• ctaLight — optic fill, ink text, square, hover:bg-tang, used on dark sections. Label: "View Full Lookbook".
• linkUnderline — tang text with border-b-2 border-tang, flips to ink on hover. Label: "Watch The Film".
• productCard — optic card, aspect-3/4 grayscale image over a stripe pattern, group-hover:scale-105, text block p-5 with border-t border-ink; title tight-caps bold text-lg, price ink/70.
• badge — small square chip, tang or cyan fill, ink text, label at text-[10px], py-1 px-2. Labels: "New", "Back", "Lookbook".
• specRow — optic list rows on an ink 1px-gap stack; left label, right value in tang (e.g. "240gsm", "UPF 50+", "Italian").
• emailForm — square optic/5 field with optic/40 border, transparent input with optic/40 placeholder, tang "Drop" button that flips to cyan on hover.
• marquee — full-width ink band, optic label text, ◆ diamond separators in alternating tang/cyan, GSAP scroll loop. Items: "Sculpted Fit · Compression Fabric · UPF 50+ · Free Returns".

Motion

GSAP + ScrollTrigger drive everything. Two moiré stripe layers drift side-to-side (#moireA x:-28 over 6s, #moireB x:-40 over 8s) on infinite yoyo sine.inOut. The top marquee loops left (xPercent:-50, 18s, linear). The hero center band parallaxes (yPercent:12, scrubbed against #shop). Product <article>s reveal on scroll (y:40, opacity:0 → 0.7s power2.out, 0.08s stagger, trigger at "top 88%"). Hover states use CSS transition-colors; product images zoom with scale-105 over 700ms.

Iconography

No icon library. Visual "icons" are the inline SVG vertical-stripe patterns (vstripe-tight 7/14px, vstripe-mid 12/24px, vstripe-wide 20/40px), hand-drawn wave paths and concentric circles as decorative overlays (stroke #F6F6F4 or #121316, 1–1.5px), and the ◆ diamond glyph used as marquee separators in tang/cyan. All decorative — there are no UI affordance icons.

Do's and Don'ts

• Do keep every corner square (rounded:0) — the brutalism depends on it.
• Do render display type in Space Grotesk uppercase with tight -0.04em tracking, and reserve label-caps (0.22em) for eyebrows, nav and metadata.
• Do use gap-px on an ink background so grid gaps read as drawn hairlines.
• Do treat photography as grayscale + high-contrast and layer stripe/wave SVGs behind or over it.
• Do let only tang and cyan carry color; everything else is ink/optic and their opacity tints.
• Don't add box-shadows, gradients (beyond the single depthwave rail), or rounded corners.
• Don't introduce a third accent hue or full-color photography.
• Don't disable the moiré/marquee motion — the drift is the brand's signature.

Known Gaps

• Body fontSize is set per-instance via Tailwind (text-base/text-lg → 16/18px); the token records 18px as the dominant display size.
• Color text tints (ink/80, optic/40, etc.) are Tailwind opacity utilities over the base ink/optic hues, expressed here as rgba(...) approximations.
• The #depthwave gradient is described by its stops, not a single resolvable hex.
• Spacing scale is inferred from Tailwind classes actually used; it is not declared in a :root.