Sonus Lab

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

A portfolio page for an experimental sound design studio. Near-black void canvas, electric cyan, violet and magenta accents, Space Grotesk over Hanken Grotesk.

core colors

typefaces

tokens

agent.kombai.com/kombai-inspiration-library/templates/sonus/index.html

Palette

The system's color tokens.

voltage-violet

#7B5BFF

voltage-cyan

#2EE6E6

voltage-magenta

#FF3D9A

surface-ink

#060608

surface-glass

RGBA(0,0,0,0.6)

text-primary

#E8E8F0

text-white

#FFFFFF

text-muted

RGBA(255,255,255,0.45)

text-faint

RGBA(255,255,255,0.30)

text-hud

RGBA(255,255,255,0.40)

hairline-progress

RGBA(255,255,255,0.05)

hairline-ring

RGBA(46,230,230,0.15)

ring-dock

RGBA(255,255,255,0.10)

gradient-progress

LINEAR-GRADIENT(TO RIGHT, #7B5BFF, #2EE6E6, #FF3D9A)

glow-violet

RADIAL-GRADIENT(CIRCLE, RGBA(123,91,255,0.45), TRANSPARENT 68%)

Typography

Type tokens — family, size.

displayThe quick brown fox jumps'Space Grotesk', sans-serif
clamp(2.5rem, 7vw, 6rem)

display-subThe quick brown fox jumps'Space Grotesk', sans-serif
clamp(2rem, 5vw, 4rem)

shard-titleThe quick brown fox jumps'Space Grotesk', sans-serif
24px

bodyThe quick brown fox jumps'Hanken Grotesk', sans-serif
14px

mono-labelThe quick brown fox jumps'Space Mono', monospace
11px

mono-captionThe quick brown fox jumps'Space Mono', monospace
10px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
xs	4px
sm	8px
md	16px
lg	24px
xl	32px
2xl	40px
section	128px

Border Radius

Corner rounding tokens.

Token	Value	Preview
lg	32px
xl	40px
full	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: sonus-design
version: alpha
description: >
  Sonus Lab is a near-black experimental-sound-design portfolio built on a single
  ink surface (#060608) lit by three neon voltages — electric violet (#7B5BFF),
  cyan signal (#2EE6E6) and hot magenta (#FF3D9A). The signature move is a giant
  circular "lens" hero: a video disc ringed by spinning SVG tick-marks and
  curved text that scales up and fades as you scroll. Below, portfolio "shards"
  bob weightlessly in a parallax grid (pills, squircles and full circles) with a
  chromatic-aberration hover, and a radar-node contact section orbits inside
  concentric rings. Type pairs a tight uppercase Space Grotesk display with a
  Hanken Grotesk body and pervasive Space Mono bracket-labels ([ REC ], [ 96 kHz ]).
colors:
  # Brand / Voltage
  voltage-violet: '#7B5BFF'    # primary accent — lens rim, shard edge glow, headline span, rings
  voltage-cyan: '#2EE6E6'      # signal accent — mono HUD labels, curved lens text, node dots
  voltage-magenta: '#FF3D9A'   # alert accent — REC dot, selection, active dock tab, Spotify node
  # Surface
  surface-ink: '#060608'       # the single page background for every section
  surface-glass: 'rgba(0,0,0,0.6)'  # floating dock fill (black/60 + backdrop blur)
  # Text
  text-primary: '#E8E8F0'      # root body text color
  text-white: '#FFFFFF'        # headline / shard titles
  text-muted: 'rgba(255,255,255,0.45)'  # body copy under headings
  text-faint: 'rgba(255,255,255,0.30)'  # footer mono caption
  text-hud: 'rgba(255,255,255,0.40)'    # corner HUD coordinates
  # Hairlines
  hairline-progress: 'rgba(255,255,255,0.05)'  # scroll-progress track
  hairline-ring: 'rgba(46,230,230,0.15)'       # concentric radar rings (cyan, ~8-15% alpha)
  ring-dock: 'rgba(255,255,255,0.10)'          # dock ring-1
  # Gradient
  gradient-progress: 'linear-gradient(to right, #7B5BFF, #2EE6E6, #FF3D9A)'  # scroll bar
  glow-violet: 'radial-gradient(circle, rgba(123,91,255,0.45), transparent 68%)'  # lens halo / aura
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(2.5rem, 7vw, 6rem)
    fontWeight: 500
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-sub:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: clamp(2rem, 5vw, 4rem)
    fontWeight: 500
    lineHeight: 1.1
    textTransform: uppercase
  shard-title:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 24px
    fontWeight: 500
    textTransform: uppercase
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  mono-label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.4em
    textTransform: uppercase
  mono-caption:
    fontFamily: "'Space Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:
  lg: 32px       # rounded-[2rem] squircle shards
  xl: 40px       # rounded-[2.5rem] squircle shards
  full: 9999px   # circle / pill shards, dots, dock, HUD pills
spacing:                      # base unit: 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 40px
  section: 128px              # py-32 section rhythm
components:
  scroll-progress:
    backgroundColor: '{colors.hairline-progress}'
    fillGradient: '{colors.gradient-progress}'
    height: '1px'
    note: 'fixed top bar, width scales with --scroll var'
  hud-label:
    textColor: '{colors.voltage-cyan}'
    typography: '{typography.mono-label}'
    note: 'fixed corner readouts like [ -12 dB ], [ REC ], [ 96 kHz ]'
  hero-lens:
    border: '1px ring rgba(123,91,255,0.6)'
    rounded: '{rounded.full}'
    boxShadow: 'inset 0 0 80px 20px rgba(0,0,0,0.8), 0 0 60px rgba(123,91,255,0.4)'
    note: 'circular video disc + spinning SVG tick rim + curved cyan textPath'
  shard:
    textColor: '{colors.text-white}'
    typography: '{typography.shard-title}'
    rounded: '{rounded.xl}'
    overlay: 'linear-gradient(to top, rgba(0,0,0,0.7), transparent)'
    hoverEdge: '2px ring {colors.voltage-violet} + shadow 0 0 40px rgba(123,91,255,0.6)'
    note: 'aspect-ratio variants; bob float animation; chromatic-aberration hover'
  radar-node:
    dotColor: '{colors.voltage-cyan}'
    labelColor: '{colors.voltage-cyan}'
    typography: '{typography.mono-caption}'
    hoverDot: 'box-shadow 0 0 18px 4px rgba(46,230,230,0.8)'
    note: 'absolute-positioned dots; label reveals on hover; elastic wobble'
  dock:
    backgroundColor: '{colors.surface-glass}'
    rounded: '{rounded.full}'
    ring: '{colors.ring-dock}'
    backdropFilter: 'blur(12px)'
    padding: '8px'
    activeTab: 'text {colors.voltage-magenta} on bg rgba(255,61,154,0.1)'
    note: 'fixed bottom view-switcher [ ORBIT ] [ GRID ] [ LIST ]'
motion:
  scroll-progress: 'width bound to Lenis scroll progress via --scroll CSS var'
  lens-spin: 'SVG tick rim rotates 360deg over 60s linear infinite'
  lens-scale: 'hero lens scale 1 -> 3.2 and fade out as page scrolls (JS scroll-driven)'
  bob: 'shards float vertically; bob1 7s (-22px), bob2 9.5s (-32px), bob3 8.2s (-16px) ease-in-out infinite'
  aura-pulse: 'violet radial aura opacity .45->.7 + scale 1->1.12 over 9s'
  chromatic-aberration: 'on shard hover, cyan/magenta mix-blend layers shift +/-4px over .4s; meta fades up'
  ring-rotate: 'concentric rings rotate 1turn over 24s linear loop (anime.js)'
  node-wobble: 'radar node elastic translateX wobble 600ms on mouseenter (anime.js)'
  shard-halo: 'motion.js animates boxShadow glow in/out 0.35s on shard hover'
  pointer-parallax: 'lens + specular highlight follow pointer position'
icons:
  library: Tabler (tabler-icons-webfont)
  style: outline
  sizes: { base: 16px, lg: 30px }
  color: '{colors.voltage-violet}'
  usage: 'ti-radio (signal heading), ti-radar-2 (radar center), ti-radio cyan/violet'

Sonus Lab

sonus-design · alpha

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

Overview

Sonus Lab is an experimental-sound-design studio site rendered as a dark "deep listening" instrument. Everything sits on one near-black ink surface (#060608) so the three neon voltages can sing: electric violet #7B5BFF is the primary accent (lens rim, shard hover edge, headline accents, orbit rings), cyan #2EE6E6 is the "signal" color carrying every mono HUD readout and the curved text around the lens, and hot magenta #FF3D9A is the alert/selection voltage (the pulsing REC dot, text selection, the active dock tab). The hallmark move is the hero lens: a circular video disc set inside a violet ring, wrapped by a slowly spinning SVG tick-rim and curved cyan text ("SONUS LAB · SONIC IDENTITY · DEEP LISTENING…"), with a violet radial halo behind it. As you scroll, the whole lens scales up past 3x and fades. The catalog section floats six portfolio shards — a mix of squircles, full circles and pill shapes — that bob weightlessly in a parallax grid and reveal a chromatic-aberration shimmer (offset cyan/magenta blend layers) plus a violet glow on hover. The contact section is a radar: labeled neon dots scattered inside concentric rotating rings around a ti-radar-2 icon. Type is a tight uppercase Space Grotesk display against a quiet Hanken Grotesk body, with Space Mono bracket-labels ([ 96 kHz ], [ 432 Hz / A=440 ]) acting as the studio's instrumentation HUD.

Colors

Brand / Voltage. Three saturated neons do all the work. voltage-violet #7B5BFF is the dominant accent — the lens ring (ring-[#7B5BFF]/60), shard hover edges (ring-2 ring-[#7B5BFF]), the "SIGNALS IN THE VOID" headline span, the radar center icon, and several ring borders. voltage-cyan #2EE6E6 is the signal/instrument color: all font-mono HUD labels, the curved textPath and tick circle in the lens SVG, the crosshair guides, and several radar dots/labels. voltage-magenta #FF3D9A is the alert accent: the pulsing [ REC ] dot, the page selection: background, the active [ ORBIT ] dock tab, and the Spotify node.

Surface. A single surface-ink #060608 backs every section — there is no secondary panel color. The only filled surface is surface-glass rgba(0,0,0,0.6) (the floating dock, bg-black/60 + backdrop-blur-md).

Text. Root text is text-primary #E8E8F0; headlines and shard titles go pure text-white. Body copy is muted at rgba(255,255,255,0.45); corner HUD coordinates at white/40; the footer at white/30.

Hairlines. The scroll-progress track is white/5; the concentric radar rings are cyan/violet hairlines at very low alpha (border-[#2EE6E6]/15 down to /8); the dock has a ring-white/10.

Gradient. The fixed scroll bar runs from-[#7B5BFF] via-[#2EE6E6] to-[#FF3D9A]. Soft violet radial glows (rgba(123,91,255,0.45→0.22)) form the lens halo and the section "aura". A conic-gradient(from 0deg, rgba(46,230,230,0.12), transparent 35%) sweeps the radar rings. Shard images get a from-black/70 to-transparent bottom scrim.

Typography

Three Google Fonts, imported together: Space Grotesk (display, .font-display), Hanken Grotesk (body, .font-body) and Space Mono (.font-mono). All are open-source so no substitution is needed. Display is always uppercase, medium (500), set very tight (leading-[0.92], tracking-tight). Mono is the signature texture — small (10–11px), wide letter-spacing (tracking-[0.4em] / tracking-widest), uppercase, almost always bracketed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.5rem, 7vw, 6rem)	500	0.92	tight	Section headlines (FLOATING WORKS)
display-sub	clamp(2rem, 5vw, 4rem)	500	tight	normal	"BROADCAST INTO THE VOID"
shard-title	24px (text-2xl) / 20px	500	normal	normal	Portfolio shard names
body	14px (text-sm)	400	1.625	normal	Intro paragraph
mono-label	11px	400	normal	0.4em / widest	HUD readouts, section eyebrows
mono-caption	10px	400	normal	widest	Shard meta, footer

Layout

Base unit is the 4px Tailwind scale; sections breathe on a py-32 (128px) rhythm. The page is three full-bleed sections, all on #060608, contained at max-w-7xl / max-w-6xl with px-8 gutters. Hero is a min-h-screen centered composition: a min(70vmin, 640px) lens disc dead-center, framed by fixed corner HUD readouts and faint full-width/height crosshair guides. Catalog is an asymmetric grid-cols-2 md:grid-cols-3 of shards with varied mt-* offsets and per-card data-scroll-speed parallax, so the works appear to float at different depths. Signal centers a h-[280px] radar field of absolutely-placed nodes inside a giant 1100px ring stack that bleeds off the bottom edge. A pill dock is fixed bottom-5, and the scroll-progress bar is fixed top-0. Whitespace is generous and dark; the void itself is a design element.

Elevation & Depth

Depth comes from glow, not boxes. The lens uses layered inset + outer shadows (inset 0 0 80px 20px rgba(0,0,0,0.8) for the lens-cup vignette plus 0 0 60px rgba(123,91,255,0.4) violet bloom). Shards have no resting shadow; on hover they gain a violet ring (shadow-[0_0_40px_rgba(123,91,255,0.6)]) and a JS-animated drop glow (0 20px 60px rgba(123,91,255,0.45)). The only real "glass" is the dock (backdrop-blur-md over black/60). Radial auras and conic ring sweeps provide ambient atmospheric depth behind everything.

Shapes

A deliberately round, organic geometry — fitting for a sound studio. Shards mix full circles / pills (rounded-full), squircles at rounded-[2rem] (32px) and rounded-[2.5rem] (40px). The hero lens, radar rings, node dots, the dock and the REC dot are all perfectly circular. There are essentially no sharp rectangles in the UI; even hover edges trace the same rounded silhouette (-inset-px ring matching each shard's radius).

Components

Scroll progress — fixed top-0 1px bar; white/5 track, fill is the violet→cyan→magenta gradient, width = calc(var(--scroll)*100%).
HUD label — font-mono 11px cyan bracket text in the four hero corners ([ -12 dB ], [ 96 kHz ], [ REC ] with pulsing magenta dot, [ 432 Hz / A=440 ]).
Hero lens — circular video clipped in inset-5 rounded-full, violet ring-1, double inset/outer shadow; overlaid spinning SVG tick-rim + curved cyan textPath; violet blur-3xl halo; pointer-following specular highlight.
Shard — <a> block, varied aspect-ratio, bobbing float; cover image + black bottom scrim; hidden shard-meta (Space Grotesk title + cyan mono meta) reveals on hover with the chromatic-aberration layers and violet edge ring.
Radar node — flex-col dot + hidden mono label; dot 2.5–3px colored by voltage; label fades in and dot gains cyan glow on hover; elastic wobble.
Dock — fixed bottom-5 pill, black/60 + blur, ring-white/10; three mono buttons; active [ ORBIT ] is magenta on magenta/10, others white/50 hover:text-white.

Motion

Motion is the personality here, driven by Lenis smooth-scroll plus three animation libs (anime.js, motion.js) and CSS keyframes. The hero lens scales 1→3.2 and fades as you scroll past it (JS), while its tick-rim spins a full turn every 60s. Shards bob vertically forever (7–9.5s ease-in-out) and shift at different parallax speeds. The violet aura pulses (opacity + scale, 9s). On shard hover, chromatic-aberration cyan/magenta layers slide ±4px over 0.4s and the meta + glow fade up. The radar rings rotate a full turn over 24s; nodes do an elastic translateX wobble on hover; the lens and its specular highlight follow the pointer.

Iconography

Tabler icon webfont, outline style. Sparse usage: ti-radio next to the "[ 003 / SIGNAL ]" eyebrow (base/16px, magenta context) and ti-radar-2 as the 30px (text-3xl) violet radar center. Icons are accents, not a system — the real "icons" of this design are the mono bracket labels and the neon dots.

Do's and Don'ts

Do keep a single near-black surface and let the three voltages carry all emphasis — never introduce a second panel color.
Do bracket mono labels ([ … ]) in cyan and keep them uppercase, wide-tracked.
Do keep shapes round: circles, pills and 32–40px squircles only.
Do express depth with glow, radial auras and rings — not flat drop shadows on rectangles.
Don't use voltage colors as large fills; they are for thin rings, dots, text and glows.
Don't set display type lowercase or loose — it is uppercase, medium, tight.
Don't add hard borders or sharp corners; it would break the orbital, fluid feel.

Known Gaps

The lens scale/opacity values (1→3.2, fade window) are computed in JS from scroll position, not authored as a single token; figures here are read from the script math.
The SVG tick-rim lines are generated in JS (72 ticks); the rim is described by behavior, not static markup.
Letter-spacing for display is given as -0.01em to represent Tailwind's tracking-tight; the exact computed value depends on the Tailwind build.
Several alpha-tinted hairlines (/15, /12, /10, /8) are summarized under one hairline-ring token rather than enumerated individually.