name: driftwood-design
version: alpha
description: >
  Driftwood is a sleep-tracker night log rendered as a luminous twilight scene.
  A deep teal radial-gradient surface (#0A1F28 → #123540) holds a glowing,
  hand-drawn "river of sleep" whose gradient stroke flows from violet REM
  through teal deep-pool toward an amber dawn (#F2B66D). Four soft blurred blobs
  sit behind everything; a giant Fraunces display numeral states the score, with
  italic serif poetry as captions and Geist Mono for tiny tracked labels and
  metrics. The geometry is fully organic — blurred blobs, SVG bézier currents,
  glowing dots and a rising sun — with no hard cards or borders anywhere.
colors:
  # Surface / atmosphere
  surface-deep: '#0A1F28'      # outermost stop of page radial gradient
  surface-mid: '#0F2A35'       # mid stop of page gradient
  surface-near: '#123540'      # innermost (top-left) stop of page gradient
  blob-teal: '#15454f'         # top-left ambient blob
  # Brand / voltage accents (the three "currents")
  teal: '#8FD3CB'              # primary accent — deep sleep, river, glow dots
  violet: '#B9A7D4'            # secondary accent — REM, upper logo wave
  amber: '#F2B66D'             # dawn voltage — sun, awake, surfacing, selection
  # Light highlights along the river
  teal-bright: '#9ad6ce'       # river gradient mid-stop
  amber-soft: '#fcd9a3'        # core gradient warm tip / sparkle
  violet-core: '#d9ccef'       # core gradient cool start
  # Text
  text-primary: '#dfeaec'      # body default (root text color)
  heading-cool: '#eef6f5'      # logo + score numeral
  heading-warm: '#fbe9cf'      # shore heading / metric values
  text-violet: '#d9c8ef'       # italic restfulness poem
  text-warm: '#e7d8c0'         # shore italic caption
  label-teal: '#8FD3CB'        # mono section labels (RESTFULNESS)
  label-amber: '#f3cf9d'       # mono labels in dawn zone
  muted: '#7d99a0'             # date sub-line
  label-bronze: '#cda36e'      # shore metric mono labels
  # Gradient (river stroke)
  river-violet: '#B9A7D4'
  river-teal: '#8FD3CB'
  river-amber: '#F2B66D'
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 170px
    fontWeight: 300
    lineHeight: 1
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
  heading:
    fontFamily: "'Fraunces', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
  body:
    fontFamily: "'General Sans', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  mono-label:
    fontFamily: "'Geist Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2.75px       # tracking-[0.25em] on 11px
    textTransform: uppercase
  mono-metric:
    fontFamily: "'Geist Mono', monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
rounded:                         # everything is either pill or px-blob
  full: 9999px                   # blobs, dots, avatar, sun
spacing:                          # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 36px                        # header / section horizontal padding (px-14)
components:
  logo-wordmark:
    textColor: '{colors.heading-cool}'
    typography: '{typography.display-italic}'   # text-2xl Fraunces, tracking-tight
  score-numeral:
    textColor: '{colors.heading-cool}'
    typography: '{typography.display}'
    note: 'drop-shadow glow 0 0 30px #8FD3CB55; GSAP breathing scale yoyo'
  mono-label:
    textColor: '{colors.label-teal}'
    typography: '{typography.mono-label}'
  river-svg:
    note: 'bézier path, stroke url(#riverGrad) violet→teal→amber, width 46 body + 120 glow blur'
  timeline-dot:
    backgroundColor: '{colors.teal}'
    rounded: '{rounded.full}'
    note: 'w-3/3.5/4 glowing dots; teal/violet/amber by stage; shadow 0 0 14-18px'
  stage-legend-dot:
    rounded: '{rounded.full}'
    note: 'radial-gradient fill + matching 0 0 16px glow; sizes shrink by stage'
  rising-sun:
    rounded: '{rounded.full}'
    note: 'radial #fbe3bd→#F2B66D→#e29a45; box-shadow 0 0 80px 30px #F2B66D55'
  avatar:
    rounded: '{rounded.full}'
    note: 'ring-2 ring teal/40 + shadow 0 0 18px #8FD3CB44'
motion:
  shimmer-drift: 'shimmerDrift keyframe — translateX 0 → -220px, 5s/7s linear infinite (river core bands)'
  glow-pulse: 'glowPulse keyframe — opacity 0.55 ↔ 0.95, 6s ease-in-out (score halo)'
  score-breathing: 'GSAP scale yoyo, 6s sine.inOut, repeat -1'
  river-draw: 'GSAP strokeDashoffset len→0, 2.4s power2.out on load; glow/cores fade-in stagger'
  sun-rise: 'GSAP ScrollTrigger — sun y -140 + scale 1.1, dawn-wash opacity→1, scrub 1'
icons:
  library: inline SVG
  style: hand-drawn wave logo (rounded strokes) — no icon set
  stroke: 2-2.4px
  color: '{colors.teal}'

Driftwood

driftwood-design · alpha

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

Overview

Driftwood is a sleep-tracker "night log" staged as a single luminous twilight scene rather than a dashboard. The page surface is a deep teal radial gradient (#123540 near the top-left fading to #0A1F28), over which four large blurred .blob glows (teal, violet, amber, soft lilac) breathe quietly. The signature move is the river of sleep: a hand-drawn SVG bézier current that runs across the page, stroked with a gradient that travels from violet REM (#B9A7D4) through teal deep-pool (#8FD3CB) to an amber dawn (#F2B66D), layered as a blurred 120px glow, a 46px body, and two thin shimmering "core" bands that drift left forever. Glowing timeline dots ride the current with mono time labels (11 PM…6 AM) and italic serif captions (light drift, deep pool, rem, surfacing). Type is a duet: Fraunces as the display/serif voice — a giant 170px light score numeral and italic poetry — against Geist Mono for tiny tracked uppercase labels and metric readouts, with General Sans carrying plain body text. The scene resolves at the bottom in a "shore" where a radial-gradient rising sun lifts on scroll and an amber dawn-wash intensifies. There are no cards, no borders, no boxes — everything is gradient, glow and curve.

Colors

Surface / atmosphere. The page is #driftwood-root, a radial gradient from surface-near #123540 (18% 30%) through surface-mid #0F2A35 to surface-deep #0A1F28. Behind it sit four .blob elements (blur 70px): a teal blob-teal #15454f, a translucent teal #8FD3CB55, an amber #F2B66D44, and a lilac #B9A7D43a.

Brand voltages. Three currents carry the whole identity: teal #8FD3CB (deep sleep, the river, glow dots), violet #B9A7D4 (REM, the upper logo wave), and amber #F2B66D (dawn — the sun, the "Awake" stage, "surfacing", and the selection highlight #F2B66D/30). River light-stops add teal-bright #9ad6ce, violet-core #d9ccef and amber-soft #fcd9a3.

Text. Body default is text-primary #dfeaec. Headings split by warmth: heading-cool #eef6f5 (logo, score) and heading-warm #fbe9cf (shore heading, metric values). Poetic captions use text-violet #d9c8ef and text-warm #e7d8c0. Mono labels are label-teal #8FD3CB, label-amber #f3cf9d and label-bronze #cda36e; the date sub-line is muted #7d99a0.

Gradient. The river linearGradient runs #B9A7D4 → #8FD3CB → #9ad6ce → #B9A7D4 → #F2B66D; the inner core gradient runs #d9ccef → #c9f3ec → #e3d6f7 → #fcd9a3. The dawn-wash and sun are amber radial gradients.

Typography

Two web faces plus one mono are imported. Fraunces (Google Fonts, optical sizing 9–144, weights 300–700, with italics) is the display/serif voice. General Sans (Fontshare, 400/500/600) is the body sans. Geist Mono (Google Fonts, 300–600) carries every label and metric. All three are real imports — no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	170px	300	1	—	The score numeral "92"
display-italic	24px	400	1.3	—	Restfulness poem, wordmark
heading	48px	400	1.05	—	"Woke 6:42 AM" shore heading
body	14px	400	1.4	—	Stage legend labels, plain text
mono-label	11px	400	1	0.25em (≈2.75px)	RESTFULNESS, section eyebrows
mono-metric	24px	400	1	—	7h 18m, 52 bpm, 94% readouts

Mono labels also appear at 10px/11px with tracking from tracking-wide to tracking-[0.3em], always uppercase. Captions on the river use Fraunces italic at text-sm/text-xl.

Layout

Base unit 4px (Tailwind). The page is a single full-height column (min-h-screen overflow-clip), no max-width container — content stretches edge to edge with px-14 (36px) horizontal padding on header and text sections; the river SVG spans full width at px-2. Vertical rhythm flows top-to-bottom as a narrative: header → score + poem → full-bleed river (380px tall) → stage legend → shore (rising sun + metrics). The river section uses an inset-0 absolute overlay for glowing dots and italic captions positioned by percentage. The shore is a two-column flex (metrics left, 360×300px sun stage right). Whitespace is generous and airy; the scene reads as one continuous twilight, not stacked cards.

Elevation & Depth

There are no box-shadows-as-cards and no borders. Depth comes entirely from glow and blur: filter: blur(70px) ambient blobs, SVG feGaussianBlur (stdDeviation 11 / 5) on the river glow and cores, and drop-shadow / box-shadow glows on luminous objects — the score (0 0 30px #8FD3CB55), dots (0 0 14–18px in their stage color), the avatar ring (0 0 18px #8FD3CB44), and the sun (0 0 80px 30px #F2B66D55). Layering is z-index only (z-10/z-20), with the river behind the dot/caption overlays.

Shapes

Everything round or organic. The only explicit radius token is rounded-full 9999px, used for blobs, glow dots, legend dots, the avatar and the sun. The river is freehand bézier curve; the dawn-wash and halos are radial gradients. Nothing is rectangular, carded, or bordered — there are zero straight-edge containers in the design.

Components

• Logo wordmark — inline SVG wave (teal #8FD3CB 2.4px + violet #B9A7D4 2px strokes, amber dot) beside "Driftwood" in Fraunces text-2xl, tracking-tight, color #eef6f5, with a drop-shadow 0 0 10px #8FD3CB66.
• Score numeral — Fraunces light 170px, #eef6f5, glow 0 0 30px #8FD3CB55; GSAP "breathing" scale yoyo + a pulsing radial halo behind it.
• Mono eyebrow — Geist Mono 11px, 0.25em tracking, uppercase, teal/amber.
• River — three stacked SVG paths (glow 120px blur / body 46px / core 10px + 2.5px shimmer) on a violet→teal→amber gradient stroke; ellipse "deep pool" pools.
• Timeline dot — rounded-full glowing dot (w-3 to w-4) colored by stage (teal/violet/amber) with a matching 0 0 14–18px shadow + mono time label.
• Stage legend — four rows: a radial-gradient rounded-full dot (shrinking by stage) + matching glow, a text-sm body label and a mono metric (e.g. "Deep · 1h 54m").
• Shore metrics — bronze mono 10px labels over warm mono-metric 24px values (TOTAL SLEEP, TIME IN BED, RESTING HR, RESTFULNESS).
• Rising sun — rounded-full radial gradient (#fbe3bd→#F2B66D→#e29a45) with a wide amber box-shadow and a blurred ground reflection.
• Avatar — 40px rounded-full image, ring-2 teal/40, teal glow shadow.

Motion

Motion is constant and gentle. CSS keyframes: shimmerDrift translates the two core bands -220px (5s / 7s linear infinite) so the river always flows; glowPulse breathes the score halo opacity 0.55↔0.95 over 6s. GSAP adds a "breathing" score scale (6s sine.inOut yoyo), an on-load river draw-in (strokeDashoffset len→0, 2.4s power2.out) with a staggered fade of glow/core layers, and a ScrollTrigger sequence at #shore that lifts the sun (y -140, scale 1.1) and ramps the dawn-wash opacity to 1 with scrub: 1. All motion is authored and active.

Iconography

No icon library. The only icon is a bespoke inline-SVG wave logomark (two rounded bézier strokes in teal and violet plus an amber circle), drawn at 34px with a teal drop-shadow. Everything else "icon-like" — timeline dots, legend dots, the sun — is a glowing circle, not a glyph.

Do's and Don'ts

• Do keep the teal/violet/amber three-current palette mapped to deep / REM / dawn meaning, and let the river gradient run cool-to-warm left-to-right.
• Do build depth from blur and glow, and keep every shape round or organic.
• Do pair Fraunces (display + italic poetry) with Geist Mono (tiny tracked labels and metrics); keep General Sans only for plain body text.
• Don't introduce cards, borders, hairlines or hard rectangles — there are none in the system.
• Don't flatten the motion; the drifting river and breathing score are core to the mood.
• Don't use saturated or pure-white fills for surfaces; keep the muted twilight teal background and pastel-glow accents.

Known Gaps

• Sizes/weights are read from Tailwind utility classes and inline styles; where a utility maps to a range (Fraunces opsz 9–144, mono 10–11px labels), the table records the representative value used in markup.
• The mono-label letterSpacing 2.75px is the computed value of tracking-[0.25em] at 11px; other labels vary from tracking-wide to tracking-[0.3em].
• Body font-weight/line-height for General Sans use Tailwind defaults (400 / ~1.4) since no explicit values are set.
• River geometry, blob positions and dot placement are exact from the HTML but are descriptive, not tokenized.