Skip to main content
Back to Examples

Pace & Pulse

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

Visit site

A landing page for a seamless activewear brand. Soft off-white canvas, mint and coral accents, Azeret Mono throughout.

13
core colors
3
typefaces
26
tokens
agent.kombai.com/kombai-inspiration-library/templates/pacepulse/index.html
01

Palette

mint
#9DEBC6
coral
#FF7A85
lavender
#B7A6F0
slate
#2B2B3A
cream
#FBF7F4
cream-70
RGBA(251,247,244,0.70)
cream-60
RGBA(251,247,244,0.60)
cream-50
RGBA(251,247,244,0.50)
cream-40
RGBA(251,247,244,0.40)
hair
#9DEBC6
lav-glow
RADIAL-GRADIENT(CIRCLE AT 50% 50%, RGBA(183,166,240,0.55), RGBA(183,166,240,0) 70%)
mesh
RADIAL-GRADIENT(40% 50% AT 20% 30%, RGBA(255,122,133,0.25), TRANSPARENT 70%), RADIAL-GRADIENT(50% 60% AT 80% 70%, RGBA(183,166,240,0.28), TRANSPARENT 70%)
vel-bar
LINEAR-GRADIENT(TO RIGHT, #9DEBC6, #B7A6F0, #FF7A85)
02

Typography

displayThe quick brown fox jumps'Clash Grotesk', sans-serif
clamp(15vw, 8.5rem, 11rem)
bodyThe quick brown fox jumps'General Sans', sans-serif
16px
monoThe quick brown fox jumps'Azeret Mono', monospace
11px
mono-microThe quick brown fox jumps'Azeret Mono', monospace
10px
03

Spacing & Shape

TokenValuePreview
xs4px
sm8px
md16px
lg24px
xl32px
2xl48px
04

Border Radius

TokenValuePreview
sm0px
md0px
lg0px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: pacepulse-design
version: alpha
description: >
  A seamless-activewear landing page rendered as a runner's telemetry HUD. The
  surface is a deep slate-violet (#2B2B3A) and the type is huge, condensed Clash
  Grotesk — much of it stroked-outline rather than filled — over an Azeret Mono
  data layer. Three voltages drive everything: mint (#9DEBC6) hairlines and
  system text, coral (#FF7A85) primary action and waveform, and lavender
  (#B7A6F0) data accents and radial glow. Signature moves: a fixed 30% duotone
  side rail with live HUD readouts, a scroll-velocity blur smear on the gallery,
  a horizontal scroll-pinned "kinetic blur" belt, an SVG waveform that draws on
  scroll, and a randomized barcode footer. Geometry is sharp — zero radius
  everywhere — with gridded telemetry cards separated by hairline gaps.
colors:
  # Brand / Voltages
  mint: '#9DEBC6'        # hairlines, system/status text, primary hero button fill
  coral: '#FF7A85'       # primary CTA, waveform stroke, outline accents, alerts
  lavender: '#B7A6F0'    # data accents, radial glow, secondary outline fill
  # Surface
  slate: '#2B2B3A'       # page background, card fills, button text on voltage
  # Text
  cream: '#FBF7F4'       # primary heading + body text, outline stroke color
  cream-70: 'rgba(251,247,244,0.70)'  # body paragraph muted
  cream-60: 'rgba(251,247,244,0.60)'  # secondary mono lines
  cream-50: 'rgba(251,247,244,0.50)'  # captions, tertiary mono
  cream-40: 'rgba(251,247,244,0.40)'  # card labels, faint footer
  # Hairlines
  hair: '#9DEBC6'        # all borders use the mint .hair rule
  # Gradient / Glow
  lav-glow: 'radial-gradient(circle at 50% 50%, rgba(183,166,240,0.55), rgba(183,166,240,0) 70%)'  # side-rail + card glow
  mesh: 'radial-gradient(40% 50% at 20% 30%, rgba(255,122,133,0.25), transparent 70%), radial-gradient(50% 60% at 80% 70%, rgba(183,166,240,0.28), transparent 70%)'  # hero drifting mesh
  vel-bar: 'linear-gradient(to right, #9DEBC6, #B7A6F0, #FF7A85)'  # live velocity meter
typography:
  display:
    fontFamily: "'Clash Grotesk', sans-serif"
    fontSize: clamp(15vw, 8.5rem, 11rem)
    fontWeight: 600
    lineHeight: 0.82
    letterSpacing: -0.5px
  body:
    fontFamily: "'General Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  mono:
    fontFamily: "'Azeret Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 2px
    textTransform: uppercase
  mono-micro:
    fontFamily: "'Azeret Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 2px
    textTransform: uppercase
rounded:
  sm: 0px
  md: 0px
  lg: 0px
spacing:                  # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  topbar:
    backgroundColor: '{colors.slate}'   # bg-[#2B2B3A]/90 + backdrop-blur-sm, sticky
    textColor: '{colors.mint}'
    typography: '{typography.mono}'
    rounded: '{rounded.sm}'
    border: '1px {colors.hair} (bottom only)'
    padding: '16px 24px / md:48px'
  primary-button:
    backgroundColor: '{colors.coral}'   # end CTA; hero CTA uses mint fill
    textColor: '{colors.slate}'
    typography: '{typography.mono}'
    rounded: '{rounded.sm}'
    padding: '16px 40px'
    hover: 'fill swaps to mint (#9DEBC6) / hero swaps to transparent + mint text'
  spec-card:
    backgroundColor: '{colors.slate}'   # cells over a mint/30 grid gap
    textColor: '{colors.cream}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.sm}'
    border: '1px {colors.hair}'
    padding: '16px–28px'
  gallery-figure:
    backgroundColor: '{colors.slate}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.sm}'
    border: '1px {colors.hair}'
    padding: 'figcaption 12px'
  side-rail:
    backgroundColor: '{colors.slate}'   # duotone image + lav-glow, fixed 30% width
    textColor: '{colors.mint}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.sm}'
    border: '1px {colors.hair} (left only)'
motion:
  meshdrift: 'hero background-position drift, 18s ease-in-out infinite'
  blur-smear: 'scroll-velocity → CSS var(--vel) drives blur + skewX + scaleX on gallery figures'
  vel-bar: 'Lenis scroll velocity widens the meter 5%→100% live'
  waveform: 'SVG path strokeDashoffset draws 0→1 across page scroll (motion scroll())'
  horizontal-pin: 'gallery pinned 340vh; track translateX driven by scroll progress'
  reveal-up: 'GSAP hero spans y:60→0, opacity 0→1, stagger 0.08, 0.9s power3.out'
  count-up: 'anime.js count from 0 to data-target, 1600ms outExpo on intersect'
  cursor: 'blinking block █ 1s step-end infinite'
  drain-line: 'vertical gradient lines translateY -100%→200%, 2.6s–5s linear'
  clock: 'HUD clock ticks 00:00:00 each second'
icons:
  library: inline glyphs / unicode (→, █, ⚡); no icon font
  style: text glyphs
  sizes: { sm: 10px, md: 11px, lg: 14px }
  color: '{colors.coral}'

Pace & Pulse

pacepulse-design · alpha

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

Overview

Pace & Pulse is a seamless-activewear product page disguised as a runner's telemetry console. The whole page sits on a deep slate-violet surface (#2B2B3A) and reads in two voices: enormous condensed display type in Clash Grotesk — much of it rendered as a 1.5px -webkit-text-stroke outline rather than a fill — and a pervasive Azeret Mono data layer of uppercase, widely-tracked system strings (> SYS.READY, CADENCE 182 SPM, // LIVE). Three voltages carry the energy: mint #9DEBC6 owns every hairline border and system/status label, coral #FF7A85 owns the primary call-to-action, the drawn waveform, and alert accents, and lavender #B7A6F0 handles data accents and the soft radial glow. The layout splits on large screens into a fixed 30% duotone "subject" side rail with live HUD readouts and a 70% scrolling main column, joined by a coral SVG waveform that draws itself as you scroll. Inside, a hero on a slowly drifting mesh, a horizontally-pinned "kinetic blur" gallery whose figures smear with scroll velocity, a hairline-gridded telemetry dashboard with count-up stats and a live velocity meter, and an end-track CTA capped by a randomly-generated barcode. Geometry is uniformly sharp — there is no border-radius anywhere.

Colors

Brand / Voltages. The system runs on three accents. Mint #9DEBC6 (.hair) is the connective tissue — every border, the system text, the status readouts (// LIVE), and the hero's primary button fill. Coral #FF7A85 is the action and motion color — the end CTA fill, the SVG waveform stroke (with a coral drop-shadow glow), outline-stroke headings (.txt-outline-coral), and the cursor block. Lavender #B7A6F0 carries data accents (STRIDE 1.42 M, stat figures) and the radial lav-glow.

Surface. A single page background, slate #2B2B3A, is reused as the fill for every telemetry card so the mint grid gaps read as hairlines, and as the text color sitting on the voltage-filled buttons.

Text. Cream #FBF7F4 is the primary ink for headings and body, and is the default -webkit-text-stroke color for outline type. Muted body uses cream at 70% (cream-70); descending mono tiers use 60 / 50 / 40% for secondary lines, captions, and faint labels/footer.

Hairlines. All borders use the mint .hair rule (border-color:#9DEBC6): section dividers, card borders, the side-rail left edge, the topbar bottom edge.

Gradient / Glow. lav-glow is a lavender radial used behind the side rail and the core spec card. The hero mesh layers a coral and a lavender radial at low opacity and animates its background-position. The live velocity meter is a mint→lavender→coral horizontal gradient.

Typography

Three fonts, all loaded from CDNs. Display is Clash Grotesk (Fontshare, weights 400–700) — a condensed grotesque used at extreme sizes (8.5rem, 11rem, 15vw/18vw) with line-height 0.82–0.9 and tight tracking. Body is General Sans (Fontshare, 400–600). The data layer is Azeret Mono (Google Fonts, 400–600), always uppercase with wide tracking (tracking-widest ≈ 0.1em, up to tracking-[0.4em] on the vertical rail label). Substitutes if a face is unavailable: Clash Grotesk → Archivo/Anton-condensed; General Sans → Inter; Azeret Mono → JetBrains Mono / IBM Plex Mono.

TokenSizeWeightLine-heightTrackingUsage
display8.5rem–11rem / 15–18vw6000.78–0.92tighthero, section heads, big numerals
body16px (text-base)4001.625normaldescriptive paragraphs
mono11px400normal~2px (widest)topbar, section tags, CTA labels
mono-micro10px400normal~2px–0.4emHUD readouts, captions, card labels

Layout

Base unit 4px on the Tailwind scale (gaps and padding in 4/16/24/32/48px steps). On lg+ the page is a two-column composition: a fixed 30%-wide full-height side rail pinned to the right with a duotone runner image and live HUD, and a 70%-wide scrolling main. A 90px-wide fixed SVG sits at the 70% seam and draws a coral waveform on scroll. The main column stacks: a sticky mono topbar; a full-viewport hero (mesh background, system boot lines, four-line outline headline, CTA row, a 3-up hairline spec grid); a 340vh gallery section that pins for one screen and scrolls a horizontal track of mixed-width figures (18vw–34vw) and text panels; a telemetry section with a live velocity meter and a 4-column hairline-gap card grid (one card spans col-span-2 row-span-2); and an end-track CTA with a giant outline headline, button, barcode strip, and mono footer. Whitespace is generous and vertical; hairlines do the dividing work.

Elevation & Depth

There are no box-shadows on UI surfaces — depth comes from hairline borders, the mint-grid gaps between same-color cards, layered radial glows (lav-glow, mesh), and duotone image treatment. The only shadows are SVG drop-shadow glows on the coral waveform and the end-track divider line (drop-shadow(0 0 6px rgba(255,122,133,0.6))). The sticky topbar uses backdrop-blur-sm over a 90%-opacity slate fill.

Shapes

Sharp throughout — rounded is 0px at every tier. No pills, no soft corners; buttons, cards, figures, and the meter are all hard rectangles. The signature shape language is the hairline grid (cells separated by 1px mint gaps) and the stroked-outline letterform.

Components

  • Topbar — sticky, slate/90 + backdrop-blur-sm, mono 11px, mint left label PACE&PULSE, muted center // SEAMLESS_TRAINING_SYSTEM, coral [ V3.0 ]; mint bottom hairline; padding 16px / md 48px.
  • Primary button — end-track: coral fill, slate text, mono, no radius, 16×40px, hover→mint fill (ACQUIRE SET → £128). Hero variant: mint fill, slate text, border-mint, hover→transparent with mint text (ACQUIRE SET →).
  • Spec card — slate fill on a mint/25–30 grid, mint hairline border, mono labels (cream-40) over large voltage figures; some carry an inset lav-glow.
  • Gallery figure — slate-bordered (mint hairline) image with a mono figcaption bar (LONG_SLEEVE_01 · mint price); affected by blur-smear.
  • Side rail — fixed 30%, duotone image (coral multiply + slate lighten overlays), lav-glow, mint HUD corners (SUBJECT_01, clock, CADENCE 182 SPM, // LIVE) and a vertical-rl label.
  • Velocity meter — 3px-tall slate/10 track with a mint→lavender→coral fill that widens live with scroll speed; coral ⚡ PACE OPTIMAL flag appears past a velocity threshold.
  • Barcode — JS-generated row of 90 random-width/height bars in cream / mint / coral, bottom-aligned over a hairline.

Motion

Scroll is smoothed by Lenis (lerp 0.09). Its velocity feeds a --vel CSS var that drives the gallery blur-smear (blur + skewX + scaleX) and widens the velocity meter. The coral SVG waveform draws via strokeDashoffset over page scroll (motion scroll()); the gallery horizontal track is pinned across 340vh and translated by scroll progress. The hero mesh drifts on an 18s meshdrift loop; vertical drain-line gradients fall on 2.6–5s loops; the cursor block blinks 1s step-end. GSAP staggers the hero headline up (reveal-up, 0.9s power3.out), anime.js runs the stat count-ups (1600ms outExpo on intersect), and a JS interval ticks the HUD clock.

Iconography

No icon font or SVG icon set — affordances are typographic glyphs: the arrow → (coral, nudges right on hover), the blinking block █ cursor, and ⚡ on the pace flag. Decorative vector work is bespoke inline SVG: the side-seam coral waveform and the end-track divider line, both with coral drop-shadow glows.

Do's and Don'ts

  • Do keep every border on the mint .hair color and keep card gaps as hairline mint grids — that grid is the system's structure.
  • Do preserve the three-voltage division of labor: mint = system/borders, coral = action/motion, lavender = data/glow.
  • Do keep display type huge and often outline-stroked; let the mono layer narrate as uppercase, wide-tracked system strings.
  • Don't introduce border-radius, drop-shadows on UI surfaces, or a fourth accent — the look depends on sharp edges and a tight palette.
  • Don't fill all headlines solid; the outline/fill alternation is the signature.
  • Don't lose the telemetry voice (clock, velocity meter, HUD readouts) — it's what makes a product page read as a console.

Known Gaps

  • Display fontSize is expressed as a clamp() summarizing the responsive range actually used (15vw/18vw mobile up to 8.5rem/11rem desktop); the HTML uses discrete Tailwind arbitrary values, not a literal clamp.
  • letterSpacing for mono is approximated from Tailwind tracking-widest (~0.1em) and the display tracking from tracking-tight; rail label reaches tracking-[0.4em].
  • Glow/mesh/gradient values are transcribed from the CSS rules; their animated appearance is described, not the per-frame state.