name: refracted-design
version: alpha
description: >
  An editorial agency site for a fictional Berlin studio ("Refracted Studio /
  Prism & Co.") built around a single conceit: light through a prism. The page
  alternates a warm bone surface (#F3EDDA) with deep ink panels (#131112), and
  refracts three saturated "voltages" through them — magenta (#C93A8A), citron
  (#D8C844), and cyan (#38AECC). The signature move is a pointer-reactive
  kaleidoscope hero of eight mirrored photo slices, paired with a custom
  difference-blend cursor and a spring-following ring. Type is a high-drama
  pairing of DM Serif Display (huge, often italic, near-zero leading) for
  display and Inter for UI/body and uppercase 0.2em–0.3em tracked tags.
  Geometry is overwhelmingly flat: square-cornered photo frames, hairline
  dividers, and a single pill — the email CTA.
colors:
  # Surface
  bone: '#F3EDDA'      # primary warm page surface; light sections, hero
  ink: '#131112'       # deep near-black; dark panels (manifesto, work, contact, footer), text on bone
  # Brand / Voltages
  magenta: '#C93A8A'   # primary accent: dots, progress bar, hover bars, italic emphasis, Preview tag
  citron: '#D8C844'    # secondary accent: section labels, stat dots, win-badges, marquee ghost
  cyan: '#38AECC'      # tertiary accent: italic emphasis, email hover fill, magnetic cursor glow
  # Text
  on-ink: '#F3EDDA'    # bone text on ink panels
  on-bone: '#131112'   # ink text on bone surface
  muted-num: '#888888' # case-row index numbers
  # Hairlines (alpha-on-bone)
  hairline-15: 'rgba(243,237,218,0.15)' # case-row dividers (bone/15)
  hairline-10: 'rgba(243,237,218,0.10)' # footer top border (bone/10)
  hairline-30: 'rgba(243,237,218,0.30)' # hero scroll track (bone/30)
typography:
  display:
    fontFamily: "'DM Serif Display', serif"
    fontSize: 'clamp(2.25rem, 18vw, 11rem)'
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: '-0.02em'
  display-italic:
    fontFamily: "'DM Serif Display', serif"
    fontSize: 'clamp(2.25rem, 14vw, 11rem)'
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: '-0.02em'
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  tag:
    fontFamily: "'Inter', sans-serif"
    fontSize: 10px
    fontWeight: 500
    letterSpacing: '0.2em'
    textTransform: uppercase
  nav:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: '0.25em'
    textTransform: uppercase
rounded:
  none: 0px      # photo frames, badges, panels — default geometry
  full: 9999px   # dots, cursor, ring, email CTA pill, arrow chips
spacing:          # base unit: 4px (Tailwind scale); section rhythm in 8px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  section: 128px  # py-32 vertical section padding
components:
  navbar:
    typography: '{typography.nav}'
    textColor: '{colors.on-ink}'
    background: 'transparent (mix-blend-difference)'
    padding: '24px 32px'
    rounded: '{rounded.none}'
  sectionLabel:
    typography: '{typography.tag}'
    textColor: '{colors.citron}'   # magenta in the About section
    note: 'bracketed index e.g. "[ 01 ] Manifesto"'
  caseRow:
    background: '{colors.ink}'
    textColor: '{colors.on-ink}'
    borderTop: '1px {colors.hairline-15}'
    typography: '{typography.display}'
    padding: '32px 0'
    rounded: '{rounded.none}'
    hoverBar: '2px {colors.magenta}'
    hoverName: '{colors.citron}'
  winBadge:
    background: '{colors.citron}'
    textColor: '{colors.ink}'
    typography: '{typography.tag}'
    fontWeight: 500
    padding: '4px 8px'
    rounded: '{rounded.none}'
  previewTag:
    background: '{colors.magenta}'
    textColor: '{colors.on-ink}'
    typography: '{typography.tag}'
    padding: '4px 8px'
    rounded: '{rounded.none}'
  teamCard:
    imageRatio: '3/4'
    imageFilter: 'grayscale(1) contrast(1.05) → grayscale(0) on hover'
    nameTypography: '{typography.display}'
    rounded: '{rounded.none}'
    statusDot: 'magenta / citron / cyan, 8px, {rounded.full}'
  emailButton:
    background: '{colors.bone}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    border: '1px {colors.bone}'
    padding: '12px 12px 12px 32px'
    rounded: '{rounded.full}'
    hoverBackground: '{colors.cyan}'
    arrowChip: 'ink fill, bone arrow, 48px circle, {rounded.full}'
  cursor:
    dot: '18px {colors.ink} circle, mix-blend-difference, {rounded.full}'
    ring: '48px, 1px {colors.ink} border, {rounded.full}, spring-follow'
motion:
  cursorSpring: 'rAF lerp — dot 0.35, ring 0.12 follow factor'
  magneticCursor: 'on [data-cursor]: ring grows to 120px, fills rgba(56,174,204,0.35) cyan; 0.4s power3.out'
  kaleidoReactive: 'pointermove rotates/scales wrap (rot dx*40, scale 1+|dy|*0.15) + per-slice rotation; 1.2–1.4s power3.out'
  kaleidoIdle: 'continuous +=360deg over 80s linear, repeat -1'
  heroReveal: 'h1 spans yPercent 120→0 stagger 0.12 power4.out; tags fade-up'
  caseHover: 'magenta bar scaleX 0→1 (0.45s), preview image cross-fades + scale 1.08→1 (0.7s)'
  teamReveal: 'autoAlpha + y60 on scroll (ScrollTrigger top 85%), stagger by column'
  teamTilt: 'image rotateX/rotateY ±10deg + scale 1.03, perspective 800'
  marquee: 'marq keyframe translateX -50% over 30s linear infinite'
  progressBar: 'fixed 2px magenta, width = --scroll * 100% on scroll'
icons:
  library: inline unicode glyphs
  style: 'arrows ↗ → and ∞; no icon font'
  sizes: { sm: 16px }
  color: '{colors.on-ink}'

Refracted Studio

refracted-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root custom properties + Tailwind arbitrary values. Fictional/sample product; described factually.

Overview

Refracted is a single-page portfolio for a fictional Berlin creative studio that takes its name literally: every visual gesture splits one source into many. The page swings between a warm bone surface (#F3EDDA) and deep ink panels (#131112), and through both it refracts three saturated voltages — magenta (#C93A8A), citron (#D8C844), and cyan (#38AECC). The hero is the thesis statement: a min(75vmin) kaleidoscope built from eight mirrored Unsplash photo slices that rotates idly forever and reacts to the pointer, with a giant italic DM Serif Display headline ("Refracted Studio.") laid over it in mix-blend-difference so it inverts against whatever spins beneath. The whole UI hides the system cursor (cursor:none) and replaces it with a difference-blend dot plus a spring-following ring that swells to a cyan glow over interactive elements. Type pairs that dramatic serif (huge, leading 0.85, frequently italic) against Inter for body copy and tiny 0.2em–0.3em uppercase tags. Geometry is almost entirely flat and square — photo frames, badges, and dividers carry no radius at all — broken only by perfect circles (dots, cursor) and the one pill: the hello@refracted.studio email CTA.

Colors

Surface. Two surfaces alternate down the page. bone #F3EDDA is the primary warm paper (hero, About/Team) set on :root --bone; ink #131112 (--ink) is the deep near-black backing the Manifesto, Work, Contact, and Footer. Text simply inverts: ink on bone, bone on ink (on-bone, on-ink).

Brand / Voltages. Three accents are defined as CSS variables and used sparingly as light "refractions." magenta #C93A8A (--magenta) is the primary signal — brand dot, scroll/progress-bar, case-row hover bars, the Preview tag, and italic word emphasis. citron #D8C844 (--citron) handles section labels ([ 01 ] Manifesto), stat/status dots, the solid win-badges in the work list, and the ghosted marquee. cyan #38AECC (--cyan) is the rarest — italic emphasis, the email button's hover fill, and the magnetic cursor's glow (rgba(56,174,204,0.35)).

Text. muted-num #888888 colors the case-study index numbers; opacity utilities (opacity-60, /80) handle most secondary text rather than discrete tokens.

Hairlines. Borders are bone at low alpha on the ink panels: bone/15 (rgba(243,237,218,0.15)) for case-row dividers, bone/10 for the footer rule, bone/30 for the hero scroll track.

Typography

Two Google Fonts, imported at the top of the <style>: DM Serif Display (display, weight 400, with an italic axis) and Inter (400/500/600). DM Serif is the star — set enormous, with negative tracking (-0.02em) and crushed leading, and switched to italic for emphasis words and alternating case-study names. Inter carries everything functional: body copy, nav, and the ubiquitous .tag (10px, 0.2em, uppercase).

Token	Size	Weight	Line-height	Tracking	Usage
display	up to 11rem / 18vw	400	0.85	-0.02em	Hero headline, section H2s, case names, stats
display-italic	up to 14vw	400	0.9	-0.02em	Emphasis words, italic case names, marquee
body	14px (text-sm/text-xs)	400	1.5	—	Paragraphs, captions, addresses
tag	10px	500	—	0.2em	Uppercase labels, badges, eyebrows
nav	11px	500	—	0.25em	Header nav, footer meta

Layout

Base unit is 4px (Tailwind), with section vertical rhythm on py-32 (128px) and py-40 (160px) panels. The page is a vertical sequence of full-bleed sections, each px-8 (32px) gutter, with inner content capped at max-w-6xl/max-w-7xl and centered. The hero is min-h-screen flex-centered with the kaleidoscope absolutely filling it and floating accent dots/tags pinned by percentage offsets. The Work section is a 12-column grid: a 7-col case-study list beside a 5-col sticky preview stage (aspect-[3/4]) that swaps images on row hover. The Team section is a 2/3-column grid with deliberate per-card top-margin offsets (md:mt-24, md:mt-8, md:mt-16, md:mt-20) for a cascading, irregular baseline. Whitespace is generous and editorial; a fixed mix-blend-difference header and a 2px magenta scroll-progress bar frame the whole experience.

Elevation & Depth

Essentially flat — there are no box-shadows anywhere. Depth comes from (1) the hard bone/ink surface alternation, (2) hairline borders at low alpha, (3) mix-blend-mode:difference on the cursor, header, hero headline, and hero tags so they invert against content, and (4) motion-borne layering (the sticky preview, the kaleidoscope, scroll reveals). Photo frames sit on faint tinted backgrounds (ink/5, bone/5). The marquee CTA uses citron/15 ghost text behind the headline for atmospheric depth.

Shapes

A strict binary. Almost everything is square (rounded.none = 0): photo frames, win-badges, the Preview tag, panels, dividers. The only curves are perfect circles (rounded.full): the brand/status dots (8px), accent dots (12–16px), the custom cursor (18px) and ring (48px), and the 48px arrow chip — plus the single pill, the email CTA, which is the one soft, friendly object in an otherwise hard-edged composition.

Components

• Navbar — fixed, transparent, mix-blend-difference bone text; 11px / 0.25em uppercase; magenta brand dot + "Prism & Co." + Berlin coordinates; no radius.
• Section label — bracketed eyebrow [ 0n ] Title, .tag style, citron (magenta in the About section).
• Case row — ink panel, bone/15 top hairline, 12-col grid; large DM Serif name (italic on alternates) + muted-num index + citron win-badge + ↗; magenta .bar wipes in and name turns citron on hover, driving the sticky preview.
• Win badge — solid citron fill, ink text, .tag style, px-2 py-1, square. Labels like "+312% Sales", "D&AD Gold".
• Preview tag — magenta fill, bone text, .tag, square; "Preview".
• Team card — aspect-[3/4] grayscale photo that colorizes and tilts on hover; DM Serif name + role caption + colored status dot.
• Email button — bone pill, ink text, DM Serif 2xl–3xl, hello@refracted.studio + ink arrow chip; hover fills cyan. The signature interactive object.
• Cursor — 18px ink difference-blend dot + 48px ringed outline that springs behind it and swells to a cyan glow over [data-cursor].

Motion

Heavily GSAP-driven (GSAP 3 + ScrollTrigger). The custom cursor runs a requestAnimationFrame lerp loop (dot follow 0.35, ring 0.12). The kaleidoscope rotates +=360° over 80s forever and additionally reacts to pointer move (wrap rotate dx*40, scale 1+|dy|*0.15, per-slice rotation; 1.2–1.4s power3.out). Hero headline spans rise from yPercent:120 with 0.12 stagger (power4.out); tags fade up. Case rows wipe a magenta bar (scaleX 0→1, 0.45s) and cross-fade the preview image (scale 1.08→1, 0.7s). Team cards reveal on scroll (autoAlpha + y:60, ScrollTrigger top 85%) and tilt under the pointer (rotateX/Y ±10°, scale 1.03, perspective 800). The CTA marquee scrolls translateX(-50%) over 30s linear infinite. A fixed 2px magenta progress bar tracks scroll via the --scroll custom property.

Iconography

No icon font. All "icons" are inline Unicode glyphs: ↗ for the case-row / social affordances, → inside the email arrow chip, and ∞ as a stat value. Color follows context (bone on ink). Decorative geometry is provided by small filled circles (dots) rather than icons.

Do's and Don'ts

• Do alternate bone and ink panels for rhythm and let the three voltages appear sparingly as accents, never as fills covering large areas (except the citron win-badges).
• Do keep DM Serif huge with crushed leading and lean on italics for emphasis; keep Inter tags tiny and widely tracked.
• Do keep everything square except dots, the cursor, and the one email pill.
• Do preserve the mix-blend-difference cursor/header/headline so they invert against the kaleidoscope.
• Don't add box-shadows or soft rounding to photo frames, badges, or panels — depth here is surface contrast and hairlines, not elevation.
• Don't introduce a fourth accent color or recolor the magenta progress bar / hover bars.
• Don't show the default cursor; the custom cursor + ring is core to the feel.

Known Gaps

• Display fontSize is expressed as a representative clamp(); the HTML uses responsive vw/rem breakpoints (text-[18vw] md:text-[14vw] lg:text-[11rem], text-6xl md:text-8xl, etc.) rather than a single fluid value.
• Body covers a small range (text-sm 14px / text-xs 12px); listed as 14px.
• Hero image slices and all photography are remote Unsplash URLs; colors of those images are not part of the token system.
• Secondary text relies on opacity utilities (opacity-60//80) rather than discrete muted-text color tokens; only muted-num #888 is an explicit value.