name: prism-design
version: alpha
description: >
  PRISM is a pitch-black, single-page generative-art studio site built around one
  fixed Spline halo (a chromatic ring) that is transformed across seven pinned
  scroll movements. The surface is pure black (#000); the only persistent "ink" is
  a warm bone-white (#f4f1ec) used at three opacities. Type is the whole identity:
  an optical-size Fraunces serif at opsz 144 (light, often italic) carries every
  headline and figure, while Inter sets micro HUD labels in wide-tracked uppercase.
  Color in the brand sense lives only in motion — chromatic-aberration fringes
  (red #ff2a00, blue #1e6bff, green #00ff88) on the assembling wordmark and full-hue
  procedural canvases revealed through the halo's aperture as a "portal". There are
  no cards, no shadows, no radii on UI: everything is hairlines, raw type, and a
  custom difference-blend cursor.
colors:
  # Brand / Ink
  ink: '#f4f1ec'                          # bone-white — all headings, active text, cursor
  ink-dim: 'rgba(244,241,236,0.55)'       # secondary text, eyebrows, contact links
  ink-faint: 'rgba(244,241,236,0.28)'     # HUD meta, labels, captions at rest
  # Surface
  bg: '#000000'                           # page background, intro mask, watermark patch
  # Hairlines
  hairline: 'rgba(244,241,236,0.08)'      # section top borders (figures/practice/index grids)
  hairline-soft: 'rgba(244,241,236,0.07)' # index row dividers
  # Selection / cursor
  selection: 'rgba(244,241,236,0.18)'     # ::selection background
  cursor-dot: '#ffffff'                   # 6px cursor dot (difference blend)
  cursor-ring: 'rgba(255,255,255,0.55)'   # 38px cursor ring border (0.95 on hover)
  # Chromatic accents (motion only — fringe + canvas)
  fringe-red: '#ff2a00'                   # left chromatic-aberration fringe on end wordmark
  fringe-blue: '#1e6bff'                  # right chromatic-aberration fringe
  fringe-green: '#00ff88'                 # vertical chromatic fringe
typography:
  display:
    fontFamily: '"Fraunces", "PP Editorial New", "Migra", "Times New Roman", serif'
    fontSize: clamp(56px, 11.5vw, 196px)  # hero / end wordmark
    fontWeight: 300
    lineHeight: 0.86
    letterSpacing: -0.04em                # opsz 144
  manifesto:
    fontFamily: '"Fraunces", serif'
    fontSize: clamp(28px, 4.6vw, 78px)
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.015em               # italic; animates wght 200→700 on scroll
  statement:
    fontFamily: '"Fraunces", serif'
    fontSize: clamp(19px, 1.85vw, 28px)
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: -0.005em               # opsz 144, em-wrapped italics
  figure:
    fontFamily: '"Fraunces", serif'
    fontSize: clamp(28px, 3.4vw, 52px)
    fontWeight: 300
    lineHeight: 1                         # opsz 144 figure numerals
    letterSpacing: -0.015em
  cap-label:
    fontFamily: '"Fraunces", serif'
    fontSize: clamp(22px, 2.0vw, 32px)
    fontWeight: 300
    lineHeight: 1.1                       # practice column headings
    letterSpacing: -0.01em
  body:
    fontFamily: '"Inter", system-ui, sans-serif'
    fontSize: clamp(13.5px, 1.0vw, 15px)
    fontWeight: 400
    lineHeight: 1.55                       # work/practice descriptions
    letterSpacing: 0.01em
  eyebrow:
    fontFamily: '"Inter", system-ui, sans-serif'
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.34em
    textTransform: uppercase               # section eyebrows / counters
  hud:
    fontFamily: '"Inter", system-ui, sans-serif'
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.34em
    textTransform: uppercase               # frame-meta, scroll-cue, footers
rounded:                                   # UI is borderless/sharp; round only for circles
  none: 0
  full: 9999px                             # cursor dot/ring, halo point, portal clip
spacing:                                   # base unit 4px; layout pad is fluid
  xs: 4px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 64px
  pad: clamp(24px, 4vw, 64px)              # global gutter (--pad; 22px under 720px)
components:
  nav:
    textColor: '{colors.ink-dim}'
    typography: '{typography.eyebrow}'
    padding: '22px {spacing.pad}'
    # fixed top, mix-blend-mode: difference, pointer-events on links only; hover → ink
  eyebrow:
    textColor: '{colors.ink-dim}'
    typography: '{typography.eyebrow}'
    # "Statement", "Selected Work", "Practice", "Index"
  counter:
    textColor: '{colors.ink-dim}'
    typography: '{typography.eyebrow}'
    # "N°003 / VII" — the N° digits switch to italic Fraunces 14px ink
  figure:
    textColor: '{colors.ink}'
    typography: '{typography.figure}'
    # "EST. 2026", "N° XII" — Roman numerals, em-italic accents, opsz 144
  grid-divider:
    border: '1px solid {colors.hairline}'
    # top border on statement-figures / practice-grid / index-cols
  hud-meta:
    textColor: '{colors.ink-faint}'
    typography: '{typography.hud}'
    # "01 · Hero" frame counter + "Scroll" cue, both mix-blend-mode: difference
  cursor:
    backgroundColor: '{colors.cursor-dot}'
    border: '1px solid {colors.cursor-ring}'
    rounded: '{rounded.full}'
    # 6px dot + 38px ring (→64px on hover), difference blend, magnetic on links
  intro-mask:
    backgroundColor: '{colors.bg}'
    textColor: '{colors.ink-dim}'
    typography: '{typography.hud}'
    # full-screen load mask, 120px hairline progress bar sweeping in/out
motion:
  ease: 'cubic-bezier(0.22,1,0.36,1)  (--ease) — primary site easing'
  smooth-scroll: 'Lenis duration 1.25, exponential easing; drives ScrollTrigger'
  intro: 'load mask fades (autoAlpha 0, 0.55s power2.out) once Spline ready + 600ms min'
  hero-reveal: 'halo flips scaleX 0→1 (1.0s power4.out); wordmark chars rise yPercent 110→0 stagger 0.075; tagline fades'
  halo-journey: 'single fixed Spline ring scaled/positioned across 7 pinned frames (1→2.6 full-bleed, side-anchored 0.65, below-grid 0.50, 0.30 between index cols, collapse to point)'
  collapse-explode: 'halo shrinks to a radial-gradient bright point, holds, then explodes; PRISM letters fly in from chromatic burst with blur 20→0'
  chromatic-fringe: 'end wordmark text-shadow fringes red/blue/green converge to 0 as letters settle'
  variable-weight: 'Fraunces wght animates 200→700 on scroll for .manifesto and work titles'
  portal: 'three procedural <canvas> works (Spectrum hue-drift gradients, Drift particle field, Cipher mutating serif) revealed through a clip-path circle at the halo aperture, flaring open then contracting'
  cursor: 'ring lerps toward pointer (0.18); magnetic pull on links via gsap power3.out + elastic release'
  scroll-cue: 'cuepulse — 28px bar scaleX 0.3↔1, 2.2s loop'
icons:
  library: none
  style: 'no icon set; UI is type-only. Sole graphic element is the Spline halo + procedural canvases'
  color: '{colors.ink}'

PRISM

prism-design · alpha

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

Overview

PRISM is a black-void, scroll-cinematic homepage for a fictional generative-art studio, and its entire design system is built to disappear behind one moving object: a fixed Spline halo (url=prod.spline.design/FBe7sPEuZGNZ4lg5) — a chromatic ring that is scaled, offset, dimmed, collapsed to a point, and re-grown across seven pinned ScrollTrigger movements. The surface is pure black (--bg #000) and the only persistent color is a single warm bone-white (--ink #f4f1ec) deployed at three opacities (0.55 dim, 0.28 faint) — there is no second brand color in static state. The voice is typographic: an optical-size Fraunces serif pinned to opsz 144, kept light (wght 300, frequently italic) and tightly tracked (-0.04em), sets the wordmark (clamp(56px, 11.5vw, 196px), line-height 0.86), the manifesto, the statement, and every Roman-numeral figure; Inter handles only the micro HUD — 11px/10px uppercase at 0.34em tracking. Real color exists exclusively in motion: chromatic-aberration fringes (#ff2a00 red / #1e6bff blue / #00ff88 green) on the assembling end-wordmark, and three full-hue procedural <canvas> scenes revealed through the halo's aperture as a "portal". The geometry is anti-UI — zero radii on anything but circles, zero shadows, hairlines at rgba(...,0.08), and a custom difference-blend dot+ring cursor that goes magnetic over links.

Colors

Ink (brand). Everything readable is one bone-white, --ink #f4f1ec, at three levels: full ink for headings, the active wordmark, and the cursor; --ink-dim rgba(244,241,236,0.55) for secondary copy, eyebrows, counters, and contact links; --ink-faint rgba(244,241,236,0.28) for HUD meta, labels, and captions at rest. Surface. --bg #000 is the page, the intro mask, and the patch that masks Spline's watermark — there is one flat black everywhere. Hairlines. Section grids carry a rgba(244,241,236,0.08) top border; index rows divide at 0.07. Selection & cursor. ::selection is rgba(244,241,236,0.18); the cursor dot is #fff, the ring border rgba(255,255,255,0.55) (→0.95 + 0.06 fill on hover). Chromatic accents appear only under motion: the end-wordmark's converging fringes use #ff2a00, #1e6bff, #00ff88; the portal canvases paint full hsla() hue sweeps (Spectrum), warm amber-white particles (Drift, hue 30–60), and a dark wash with red/blue glyph offsets (Cipher).

Typography

Two families, loaded from Google Fonts in one stylesheet link (Fraunces ital+opsz 9..144 wght 200..900, plus Inter wght 100..900). Fraunces is the display and editorial face — variable optical size locked to opsz 144 via font-variation-settings, kept at wght 300, italic for accents, with --serif falling back to PP Editorial New / Migra / Times. Inter (--sans, system-ui fallback) is reserved for the HUD and body micro-copy with ss01/ss02/cv11 features on. The bespoke fallbacks PP Editorial New and Migra are commercial; the loaded face is the open Fraunces, so substitution is faithful.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56px,11.5vw,196px)	300	0.86	-0.04em	hero + end wordmark (opsz 144)
manifesto	clamp(28px,4.6vw,78px)	300 (→700 on scroll)	1.05	-0.015em	"We make light behave." italic
statement	clamp(19px,1.85vw,28px)	300	1.5	-0.005em	studio statement, em-italic
figure	clamp(28px,3.4vw,52px)	300	1	-0.015em	EST. 2026 / N° XII numerals
cap-label	clamp(22px,2.0vw,32px)	300	1.1	-0.01em	Practice column headings
body	clamp(13.5px,1.0vw,15px)	400	1.55	0.01em	work / practice descriptions
eyebrow	11px	400	—	0.34em	section eyebrows + counters (uppercase)
hud	10px	400	—	0.34em	frame-meta, scroll-cue, footers (uppercase)

Layout

Base unit is 4px; the global gutter is fluid --pad clamp(24px,4vw,64px) (22px under 720px), and content caps at --maxw 1480px. The page is a vertical stack of full-viewport .frame sections (min-height:100vh, content vertically centered), but the real structure is choreographic: Frames 1, 2, 5, Statement, Work, Practice, Index, and Coda are each pinned with ScrollTrigger and animated rather than scrolled. The hero is a three-row grid (meta-top / centered wordmark / meta-bottom). Editorial sections use a head row (eyebrow + N° counter) over a grid — statement is two columns (text left, halo floats into the empty right), figures are a three-column hairline-topped row, Practice is a four-column grid (two columns under 1024px), Index is a two-column magazine spread of year+title rows. Whitespace is vast and intentional; the halo occupies the negative space.

Elevation & Depth

There are no box-shadows and no glass on UI. Depth is built purely with z-index layering against the black void: the halo stage at z:30, portal canvases above it at z:32, the bright collapse point at z:31, manifesto at z:35, content sections at z:36, nav/HUD at z:60, cursors at z:9999, and the intro mask at z:200. The only "glow" is .halo-point, a radial-gradient white sphere (opaque core fading to transparent at 78%) used for the collapse-to-point beat. The single authored shadow is the text-shadow: 0 0 36px rgba(0,0,0,0.65) keeping the manifesto legible over the halo's chromatic edge, plus the motion-only chromatic text-shadow fringes on the end wordmark. Reading contrast over canvases comes from a portal-vignette (bottom 34% black gradient).

Shapes

Anti-UI geometry: every interface element is either a sharp rectangle or has no box at all. Nothing uses border-radius except true circles — the cursor dot and ring, the halo collapse point, and the portal clip-path: circle(...). There are no rounded cards, pills, or chips because there are no cards, pills, or chips. The recurring "shape" is the hairline: 1px borders at rgba(244,241,236,0.07–0.08) separating grid sections and index rows.

Components

• Nav — fixed top bar, Inter 11px uppercase 0.34em --ink-dim, mix-blend-mode: difference, pointer-events on links only; "PRISM" left, "Manifesto / Contact" right; hover → full ink; data-magnetic.
• Eyebrow — section label, Inter 11px uppercase --ink-dim ("Statement", "Selected Work", "Practice", "Index").
• Counter — "N°003 / VII"; the numeral switches to italic Fraunces 14px full ink, the rest stays Inter uppercase faint.
• Figure — large Fraunces numeral block: "EST. 2026", "N° XII", "IV" with em-italic accents and a faint Inter label beneath.
• Grid divider — 1px rgba(244,241,236,0.08) top border on the figures, practice, and index grids; index rows divide at 0.07.
• HUD meta — bottom-left frame counter "01 · Hero" and bottom-right "Scroll" cue (with a pulsing 28px bar), Inter 10px uppercase faint, difference blend.
• Cursor — 6px white dot + 38px ring (rgba(255,255,255,0.55) border), difference blend; ring grows to 64px with 0.06 fill on hover; magnetic pull on links/[data-magnetic].
• Intro mask — full-screen #000 load overlay, "PRISM — 2026" with a 120px hairline progress bar sweeping in then collapsing from the right.
• Portal works — three full-screen <canvas> renderers (Spectrum, Drift, Cipher) shown only through the circular halo aperture, with a bottom vignette and a cross-faded caption (italic Fraunces title + Inter meta + serif client).

Motion

Motion is the product. Smooth scrolling runs through Lenis (duration 1.25, exponential easing) feeding GSAP ScrollTrigger; the site easing is cubic-bezier(0.22,1,0.36,1). After a load mask that waits for the Spline scene (or a 2.2s failsafe), the hero plays: the halo flips open scaleX 0→1 (1.0s power4.out), the wordmark letters rise yPercent 110→0 on a 0.075 stagger, and the tagline fades up. From there a single fixed halo is transformed across seven pinned frames — scaling to 2.6× full-bleed behind the manifesto, anchoring at 0.65 to the right of the statement, dropping to 0.50 below the Practice grid, shrinking to 0.30 between the Index columns, and twice collapsing to a bright radial-gradient point that explodes the PRISM wordmark outward (letters fly from a chromatic burst, blur 20→0, red/blue/green text-shadow fringes converging to zero). Headlines animate Fraunces wght 200→700 on scroll. The Work section opens a clip-path portal at the halo aperture revealing three procedural canvases (hue-drifting radial gradients, a 260-particle field, a mutating italic serif glyph). The cursor ring lerps toward the pointer (0.18) and goes magnetic over links; the scroll-cue bar pulses on a 2.2s loop.

Iconography

No icon library. The UI is entirely typographic — Roman numerals, N°, wide-tracked uppercase labels, and a hairline scroll bar stand in for icons. The sole graphic elements are the Spline halo and the three procedural canvases.

Do's and Don'ts

• Do keep the surface pure black and all text the one bone-white at its three opacities (1 / 0.55 / 0.28).
• Do set every headline in Fraunces light at opsz 144, italic for accents, with tight negative tracking; set every micro-label in Inter uppercase 0.34em.
• Do keep color out of the static layout — it belongs only to the chromatic fringe and the portal canvases under motion.
• Do keep all UI sharp; reserve border-radius for true circles only.
• Don't add box-shadows, glass, gradients, or rounded cards — depth is z-index layering and hairlines.
• Don't introduce a second typeface or a colored accent in the chrome.
• Don't scroll sections normally where the spec pins them — the halo's continuity depends on the pinned choreography.

Known Gaps

• The halo itself is a remote Spline scene (prod.spline.design/FBe7sPEuZGNZ4lg5); its exact colors/geometry are rendered by Spline, not defined in the HTML.
• Spacing tokens are inferred from a 4px base plus the fluid --pad; the markup is mostly fluid clamp()/vw values rather than a fixed scale.
• PP Editorial New and Migra (Fraunces fallbacks) are commercial; only Fraunces is actually loaded, so the rendered display face is the open Fraunces.
• Chromatic-fringe and portal-canvas colors are read from inline rgba/hsla literals in the script; the live appearance is animated and time-based.
• The @media (prefers-reduced-motion) block is present but empty (no overrides).