Anthozoa

anthozoa-design · alpha

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

Overview

Anthozoa is a coral-restoration nonprofit landing page built as one long scroll-driven descent into the deep ocean. The dominant surface is an abyssal blue-black #0A1922 (--bg-abyss), deepening to #061119 in media wells and lifting to #10242E for panels. Against that darkness a single bioluminescent teal #3DF0D2 (--lume) carries every interactive accent — CTAs, links, map pins, the drawn depth spine — while a coral-warning orange-red #FF5A3D (--flare) acts as the counter-voltage for the crisis section, "stakes" badges, and danger callouts. The page's signature inversion flips the whole world to a warm "bone" #F2E8D6 for the donate section, recoloring eyebrows to rust #7B3F22. The type story is editorial and scientific at once: an optical Fraunces serif at light weight 300 with font-variation-settings:"opsz" 144 and SOFT/WONK tuning carries displays (including a 220px footer manifesto), its italic 500 used for poetic accents; JetBrains Mono voices every eyebrow, label, spec sheet and button in wide uppercase tracking; Inter handles body copy. The geometry is deliberately near-flat — hairline #243944 rules, square image frames, no card radius — with the only curves being 999px pill CTAs and round map pins.

Colors

Surface. --bg-abyss #0A1922 is the page background and the resting state of nav/hero/science/program/footer. --bg-surface #10242E fills the program image frame; #061119 (deepest well) backs hero/science media and the sites map; science panels alternate #0d2029 and #0a1922. The inversion surface is --bg-bone #F2E8D6 (donate section, hero/footer headline ink). Cards on the bone surface are pure white #FFFFFF with warm #d8caa9 borders.

Brand / Voltage. --lume #3DF0D2 is the one accent voltage — primary button fills, link hovers, the nav-CTA outline, program nodes and SVG spine, map reveal dots, and italic display accents. --flare #FF5A3D is the warning counter-voltage: crisis eyebrow, the rotated "stake" badge, the "MOST CHOSEN" stamp, method 03's tag, and the bone-section's accent. --rust #7B3F22 colors eyebrows and small labels on the bone surface.

Text. Body on dark is --ink-mist #C4D6DA; on bone it's near-black --ink-bone #1A1410 with #4a3f30 for muted bone body. A descending ladder of muted blues handles secondary type: #8aa0a8 (captions/legend), #7a8c92 (stat labels), #5a7480 (faint mono), #3a5a68 (depth gauge / planned pins).

Hairlines. --rule #243944 is the universal 1px hairline — section top-borders, image-frame borders, the data-cell divider grid, and footer rules.

Gradient. The only gradient as content is the DNA helix stroke linear-gradient(90deg, #3DF0D2, #FF5A3D) (lume→flare) in the assisted-gene-flow panel. Decorative overlays use abyss-to-transparent linear fades on media.

Typography

Three families, all loaded from Google Fonts. Fraunces (opsz 9..144, weights 300/500/600 + italics) is the display/editorial face — substitute any high-contrast optical serif if unavailable. Inter (400/500) is body. JetBrains Mono (400/500) is the lab/UI mono voice, always uppercase with wide tracking. Fraunces displays run light (300) with letterSpacing -0.03em and very tight line-heights (0.85–0.96); italic 500 marks accents and is frequently recolored to lume.

Layout

Base spacing unit is 8px; section vertical padding leans on 56/80/120/140px and horizontal gutters on 24px (mobile) / 56px (desktop), inside a 1320px max-width .container. The page is a sequence of tall scroll-driven "outer" sections (height: 300vh/250vh/400vh) each pinning a 100vh position:sticky inner stage. Signature structural moves: the hero is a 1fr/1fr split — a sticky cinematic image left, stacked swapping text panels right; the crisis is a 7fr/5fr split with a clip-path before/after image and a scroll-driven dark→bone theme inversion; the science stack absolutely overlays panels that translate/scale as you scroll; the program is a 1fr/80px/1fr grid with a center SVG depth-spine that draws on scroll; sites is a 16/7 dotted-map with a radial mouse-spotlight mask and a 4-up hairline data grid; donate inverts to bone with a 3-up tilting card grid and a two-column numbered list. Whitespace is generous and editorial, with large numerals bleeding behind panels as texture.

Elevation & Depth

The system is largely flat and hairline-driven: borders (#243944) and 1px-gap grids stand in for shadows across dark sections. Depth comes from layering and blur, not boxes — the nav uses backdrop-filter: blur(14px) saturate(1.1) glass, and label chips on the map blur their abyss backgrounds. Real shadows appear only on warm/accent elements: the rotated flare "stake" badge (0 12px 32px rgba(255,90,61,.25)), the "MOST CHOSEN" stamp (0 4px 16px rgba(255,90,61,.3)), donate tier hover (0 24px 60px rgba(26,20,16,.15)), and glowing focus rings on active nodes/pins (0 0 0 8px rgba(61,240,210,.18)). Giant low-opacity Fraunces numerals (0.10–0.18 alpha) provide background depth in the science stack.

Shapes

Editorial near-flat geometry. Radius is essentially binary: square (0) for all image frames, cards, tiers, data cells, and badges; full pill (999px) for CTAs (primary button, nav-CTA) and round (50%) for dots, nodes, map pins, and the slider thumb. The only 2px softening is on the map label chips. Sharp right angles plus the rotated stake/stamp badges give the page its field-log, scientific-document character.

Components

• Nav — fixed glass bar, rgba(6,17,25,.42) + blur(14px), mono-label type, bone text, 1px lume-tinted bottom border; flips to a translucent bone bar (.is-light) over the donate section.
• Nav CTA — "Adopt a coral →", lume outline pill, fills lume on hover.
• Primary button — "Dive in ↓", solid lume fill on abyss text, pill, 14px 28px, lifts -2px and turns bone on hover.
• Secondary button — "Watch the 4-minute film", text + lume-on-hover underline (border-bottom rule).
• Tier card — white fill, #d8caa9 border, square, 32px pad, 480px min, 3D mouse tilt; outline tier button fills ink-bone on hover.
• Reef tier — inverted ink-bone card with bone text and lume accents.
• Stake badge — flare fill, bone text, rotated -3deg, soft flare shadow ("50% gone since '50").
• Data cell — abyss cells in a 1px-gap grid over --rule → hairline divider table of restoration sites.
• Map pins — round lume dots (flare/monitor/planned variants) with pulsing rings and hover labels.
• Slider — flare thumb on a #d8caa9 2px track, mono scale labels.
• Newsletter input — transparent, bone text, rule underline, mono "Subscribe →" button.

Motion

Everything is scroll- and pointer-driven through a single rAF loop. Hero text panels cross-fade/slide as scroll progress crosses slice thresholds; the hero image scales 1→1.08; headline lines rise from translateY(110%) with staggered delays on a cubic-bezier(.2,.8,.2,1). The crisis section color-mixes abyss→bone in oklab via a --inv scroll variable (and clip-reveals the "alive" image). Science panels stack with translate/scale/opacity and h3s un-skew from skewY(7deg). The program SVG spine draws via strokeDashoffset while depth nodes activate sequentially and a depth counter ticks 3→12→28M. Headlines reveal on intersection via word stagger, clip-path wipes, and collapsing letter-spacing. The footer marquee is a constant 32s JS translate loop; counters count up ease-out over 1800ms; donate tiers tilt ±4deg with the mouse; the map runs a radial spotlight mask under the cursor. Ambient pulse and ring keyframes animate dots and pin rings.

Iconography

Mixed sources. The Tabler icons webfont is linked for UI glyphs; donate tier icons are game-icons SVGs (plant-seed, coral, tropical-fish) recolored via CSS filter to rust/flare/lume. Bespoke inline SVGs carry the brand: the logo (layered-polyp line mark, 1.5px stroke, lume), the DNA double-helix (lume→flare gradient stroke), the acoustic waveform (lume stroke), and the dotted-pattern world map. Style is consistently thin-line/outline at 1.5px, colored lume by default, flare for warnings. Sizes range 18px (UI) to 44px (tier icons). Icons are mostly decorative/diagrammatic rather than functional UI.

Do's and Don'ts

• Do keep the surface abyssal and let a single lume accent carry interaction; reserve flare for danger/warning and "most chosen" emphasis.
• Do pair light-weight Fraunces displays (italic accents in lume) with wide-tracked uppercase JetBrains Mono labels.
• Do use hairline rules and 1px-gap grids instead of shadows on dark surfaces; keep image frames and cards square.
• Do preserve the scroll-driven theatre — pinned stages, panel swaps, the depth-spine draw, the dark→bone inversion.
• Don't introduce a third accent hue or recolor lume/flare away from their roles.
• Don't round card/image corners or drop big soft shadows on dark sections — it breaks the field-log flatness.
• Don't set Fraunces displays in heavy weights or wide tracking, or letter-space the body face; keep tracking negative on serifs and wide on mono only.

Known Gaps

• The accent gradient on the DNA helix and the scroll-velocity marquee speed are read directly from markup; the perceived motion timing is described, not measured.
• Numerous one-off muted blue text values (#8aa0a8, #7a8c92, #5a7480, #3a5a68, #a0b3b9, #5a7480, #1b2f3a) form an informal ladder; the spec captures the representative ones rather than every instance.
• bg-deep #061119, bg-panel-1 #0d2029, and card-bone #FFFFFF are named here for the spec but appear as literal values in the HTML (not CSS variables).
• Fraunces' SOFT/WONK axes and opsz 144 are applied via font-variation-settings and cannot be fully reproduced by a non-variable substitute; substitute a high-contrast optical serif and accept slight drift.