Cadence

cadence-design · alpha

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

Overview

Cadence is an editorial, paper-warm marketing page for one-on-one music lessons. The whole canvas sits on a cream #EFE9DF with near-black #2B2A28 ink and a luxurious 2.0 body line-height, so the page reads like a printed score with a lot of air. Its identity is built from one metaphor — the musical stave — rendered as sets of five 1px hairlines at 32% ink that separate every section and literally skew with scroll velocity. A single terracotta #B5715A is the voltage: it carries the logo, every link and hover, the play buttons, the price CTA-on-hover, and a multiply-blended dot that trails the (hidden) cursor. A muted sage #7E8C73 plays second accent on eyebrows and the pricing slider, with a one-off ochre #B89B5E on a single timeline numeral. Type is a serif/sans pair: Source Serif 4 carries display and headings (and turns italic for poetic asides), while Work Sans Light handles body and uppercase tracked labels. Geometry is deliberately square — cards, images and panels are sharp and hairline-bordered — with rounded-full reserved for the cursor, play buttons, slider thumb and the single ink-filled pill CTA. Motion is the finish: GSAP + ScrollTrigger + Lenis drive curtain-style clip-path wipes (hero, portrait overlays), a note that descends a treble-clef spine while you scroll the timeline, and cream waveform bars that rise on hover.

Colors

Brand / Accent. terracotta #B5715A is the primary voltage — the music-note logo, nav hover, hero underlined link, the descending timeline note, every play-button fill, the cursor dot, and the CTA's hover fill. sage #7E8C73 is the secondary accent on the eyebrow labels for the timeline and pricing sections, the range-slider thumb, and the four pricing feature icons. ochre #B89B5E appears once, as the tint of the "03" numeral in the timeline.

Surface. paper #EFE9DF is the page background, the fill of timeline and pricing cards, and the text color used on dark cards. ink #2B2A28 is the near-black used for body text, the dark portrait-card backgrounds, the primary CTA fill, and the stave lines.

Hairlines. hairline #d0d0cc is the 1px border on the .hairline cards, panels, and the divider grid in pricing (used as a gap-px background).

Tints. Text and structural elements lean on alpha-over-ink: rgba(43,42,40,0.70) for body paragraphs, 0.60 for captions, 0.55 for fine print, 0.30 for the timeline spine lines, and 0.32 for the stave hairlines themselves.

Overlays / Gradient. Portrait cards use a rgba(43,42,40,0.55) scrim that wipes in on hover; each caption sits over a linear-gradient(to top, rgba(43,42,40,0.85), rgba(43,42,40,0)) for legibility.

Typography

Two Google Fonts, imported together: Source Serif 4 (optical-size axis, 400/500/600 + italics) for everything expressive, and Work Sans (300/400/500) for body and labels. Source Serif 4 is open-source; no substitution needed. Body text runs at font-weight 400 but a light, airy feel via line-height: 2.0. Italic Source Serif is a recurring device for sub-headings and quotes.

Layout

Base unit is 4px on the Tailwind scale; section padding is px-10 lg:px-16 with pt-24 pb-28 rhythm. The page is a single vertical column of full-bleed sections divided by five-line stave dividers. The hero is an asymmetric 40% / 60% split — a tall image panel (revealed by clip-path) beside a left-aligned serif headline. The timeline is a centered max-w-6xl two-column alternating layout straddling a vertical "spine" of five thin lines, a treble-clef SVG, and a descending note. Teachers use a 3-column CSS masonry grid (auto-rows-[20px] with row-[span_N]) mixing portraits with a terracotta quote tile. Pricing is a centered max-w-3xl hairline panel with a custom range slider laid over stave lines and a 2×2 feature grid built from gap-px hairlines. Whitespace is generous and editorial.

Elevation & Depth

The system is almost entirely flat and hairline-driven — depth comes from 1px #d0d0cc borders, not shadows. The only shadows are functional/decorative: the descending timeline note carries a soft terracotta ring shadow-[0_0_0_6px_rgba(181,113,90,0.12)], and the range thumb has a hard box-shadow: 0 0 0 1px #2B2A28 ring plus a 3px paper border. The cursor dot uses mix-blend-mode: multiply for an inky overlay effect. Portrait depth is a tonal scrim + caption gradient rather than elevation.

Shapes

Square by default — cards, images, panels and the stave lines are all sharp (rounded: 0). The radius vocabulary is binary: hairline-bordered rectangles versus full pills. rounded-full (9999px) is reserved for the cursor dot, the circular play buttons (44–48px), the slider thumb (26px), and the one ink-filled pill CTA. Waveform bars get a near-imperceptible 1px radius.

Components

• Primary CTA — ink #2B2A28 fill, paper text, full pill, px-10 py-4, serif label "Start your first free lesson →"; hovers to terracotta.
• Text link (hero) — terracotta text with a 2px terracotta bottom-border, serif, arrow that nudges right on hover ("Find your teacher →").
• Nav link — uppercase 13px Work Sans, ink, hover terracotta; the header CTA adds an ink bottom-border that turns terracotta.
• Timeline card — paper fill, 1px hairline, square, p-8; oversized tinted serif numeral, serif H3, ink-70 body.
• Teacher card — ink background holding a cover image, 1px hairline, square; hover wipes in a 0.55 scrim with rising cream waveform bars and a terracotta play button; caption over a bottom gradient.
• Quote tile — terracotta fill, paper text, large italic serif quote.
• Pricing panel — paper fill, 1px hairline, square, p-10 lg:p-14; 7xl serif price, custom range slider over stave lines, gap-px 2×2 feature grid.
• Range thumb — 26px sage circle, 3px paper border, 1px ink ring.

Motion

Motion is central and orchestrated with GSAP + ScrollTrigger over Lenis smooth scroll (lerp 0.09). Scroll velocity feeds a clamped --skew (±6deg) that gently skews every stave line in real time. A createAnimatable (anime.js) terracotta dot trails the pointer with a 350ms out(4) ease, replacing the native cursor (cursor: none). The hero image wipes open via clip-path inset (1s, power2.inOut) while hero lines stagger up. Timeline and teacher cards reveal in batches (autoAlpha + y:32, ~0.6s, staggered); a note element scrubs down the treble-clef spine as the timeline scrolls. Portrait overlays wipe in on hover (0.7s) with waveform bars scaling up (stagger 0.02); the price number pops with back.out(2) on each slider change.

Iconography

Tabler icons via the @tabler/icons-webfont CDN, used as <i class="ti ti-*">. Mostly outline glyphs (ti-music, ti-arrow-narrow-right, ti-clock, ti-device-laptop, ti-notes, ti-refresh), with filled play glyphs (ti-player-play-filled) inside play buttons. Sizes follow Tailwind text sizes (~13px meta, ~20px feature icons, ~24px logo). Default color is terracotta for brand/links and the play buttons; pricing feature icons are sage. Icons are decorative/affordance markers, never load-bearing alone.

Do's and Don'ts

• Do keep the cream-on-ink palette and let a single terracotta carry every link, hover and primary action.
• Do divide sections with five-line stave hairlines and preserve the 2.0 body line-height for the airy, printed-score feel.
• Do use Source Serif 4 (italic for asides) against Work Sans labels in uppercase wide tracking.
• Do keep cards/panels square with 1px #d0d0cc hairlines; reserve pills for the cursor, play buttons, slider thumb and the one CTA.
• Don't add drop shadows or rounded card corners — depth here is hairlines, not elevation.
• Don't introduce a second strong accent; sage and ochre stay quiet and supportive.
• Don't restore the native cursor or remove the velocity skew — they are the signature interactions.

Known Gaps

• Display H1 size is clamp-approximated from Tailwind text-5xl lg:text-[5.2rem]; the spec records the 2.25rem→5.2rem range.
• Heading/italic sizes vary by instance (text-2xl through text-7xl); table lists representative ranges rather than every occurrence.
• Spacing scale is inferred from Tailwind utility classes used (4px base), not an explicit design-token scale in the source.
• Motion timings/easings are read from the GSAP/anime.js calls; the per-bar waveform heights are randomized at runtime (Math.sin-based), so exact bar shapes are generative.