Studio Œ

studio-oe-design · alpha

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

Overview

Studio Œ is an editorial branding-studio landing page built on a deep teal-black field (--bg-primary #0D1A1C) inked in warm parchment (--text-primary #F5EDD8), with two adjacent darks (#1A2E2C, #243430) used to tint stacked panels. The whole type story rests on an italic Fraunces display face tuned to its highest optical size (opsz 144, SOFT 0, weight 500) — every headline, title, name and wordmark is italic Fraunces with tight -0.025em tracking. Around it sit three supporting voices: Italiana for wide-tracked (0.32em) uppercase eyebrows, Inter Tight for 17px body copy at a generous 1.7 line-height, and italic JetBrains Mono for the small uppercase captions, indices and coordinates that give the page its log-book feel. Two voltages do all the accenting: a burnt amber (--accent-1 #E8621A) owns links, hovers, the cursor dot and the active index, while a teal-sage (--accent-2 #4DAA8C) handles secondary labels and the footer email. The signature moves are theatrical and scroll-driven: a full-bleed hero video sits behind a refractive glass card (real backdrop-filter blur plus an animated SVG turbulence "water" distortion), then three full-viewport pinned scenes follow — sticky-stacked work panels, a pinned split text/image swap, and a cursor-tracked client list that floats a 320×420 image preview under the pointer. Geometry stays near-flat: the only rounded element is the hero card; everything else is hairlines and hard edges.

Colors

Surface. Three darks: --bg-primary #0D1A1C is the page, hero overlay base and footer's adjacent dark; --bg-secondary #1A2E2C backs the footer, the split-pin, panel tone 2 and the cursor-preview card; --surface #243430 tints the third stack panel's text field. Brand voltages. --accent-1 #E8621A (burnt amber) is the dominant accent — nav-link hover, hero-CTA hover fill, stack/cursor links, the active counter index, the footer rule, the cursor dot and list-item hover. --accent-2 #4DAA8C (teal-sage) is the quieter secondary — section eyebrows (.stack-eyebrow, .split-section-label, .cursor-eyebrow) and the footer email. Text. --text-primary #F5EDD8 (parchment) for all headings and primary copy; --text-muted #A89E8A (warm grey) for captions, meta, descriptions and indices. Body sub-copy frequently uses rgba(245,237,216,…) at 0.65–0.92 alpha rather than the muted token. Hairlines. Parchment at low alpha: 0.14 for list/section rules, 0.12 for footer grid tops, 0.08 for the footer's outer rules. Glass. The hero card uses a white rgba(255,255,255,0.35) border over a parchment-tinted translucent gradient; the hero overlay darkens the video with a top-to-bottom rgba(13,26,28,…) 0.55 → 0.18 → 0.6 gradient.

Typography

Four families, all loaded from Google Fonts in one @import: Fraunces (variable, opsz 9–144, wght 400–900, SOFT 0–100, italic), Inter Tight (400/500/600), Italiana, and JetBrains Mono (italic 400/500). Fraunces is the soul of the system — used exclusively in italic at opsz 144 / SOFT 0 for big display and opsz 60 for the nav logo and footer names. Italiana provides the high-contrast serif eyebrow; Inter Tight is the only sans (body and CTA labels); JetBrains Mono italic is the captioning voice. No bespoke faces — all four are open-source via Google Fonts.

Layout

Base unit 4px; the recurring rhythm is 20 / 28 / 36 / 48 / 64 / 80px with horizontal page padding of 64px on desktop (24px under 900px). The page is a fixed translucent nav over a 100vh hero, then three tall scroll-pinned sections each 400vh with a sticky top:0 100vh pin: Section 1 sticky-stacks three absolute panels (two-column 1fr/1fr image-text, alternating via data-side); Section 2 is a pinned 1fr/1fr split with image stack on one side and swapping text panels on the other, plus a vertical progress rail; Section 3 is a normal-flow cursor-tracked list (grid 80px / 1fr / auto) inside an overflow:hidden, cursor:none section. Content blocks cap at max-width: 1280px centered. On mobile all three pins are dropped — sections collapse to stacked, single-column, full-height-ish blocks with transforms forced off. Whitespace is generous and cinematic: sections breathe at 100–220px vertical padding.

Elevation & Depth

Mostly flat, depth created by overlap and one heavy glass moment. The hero card is the elevation set-piece: a deep 0 36px 80px -24px rgba(0,0,0,0.55) drop shadow plus three inset highlight/shadow lines and a 0 0 0 1px inset ring, over a real backdrop-filter: blur(3px) saturate(125%) and an SVG feDisplacementMap "water" filter. The cursor preview floats with 0 30px 80px -20px rgba(0,0,0,0.5). Everywhere else, separation is by hairline rule (parchment 0.08–0.14 alpha) and by the stack-panel dim/scale (prior panels recede to scale(0.94) at 0.55 opacity). The nav adds a faint blur(2px) backdrop.

Shapes

Near-brutalist rectangularity. The only rounded element is the hero glass card at clamp(18px,1.6vw,28px). Buttons, panels, image frames, progress dots and rules are all hard-cornered (0). The single full-round is the 12px border-radius:50% cursor dot. The character is sharp and editorial — softness is reserved for the one floating glass card.

Components

• nav — fixed, fade-to-transparent gradient + blur(2px); logo Fraunces italic 22px (opsz 60); links italic JetBrains Mono 11px uppercase 0.14em, hover → accent-1. Padding 20px 64px.
• heroCard (.hero-meta) — translucent parchment glass card, 1px rgba(255,255,255,0.35) border, radius clamp(18px,1.6vw,28px), padding clamp(32px,4.5vw,64px)/clamp(28px,5vw,72px); refractive backdrop + layered inset highlights + deep drop shadow.
• heroCta — transparent, 1.5px rgba(245,237,216,0.45) border, square; uppercase 14px label "See Selected Work →"; hover fills accent-1, text white, arrow nudges +6px.
• stackLink / cursorLink — accent-1 uppercase label with a 1.5px accent-1 bottom border; "View Case Study →".
• stackCounter / splitCounter — italic mono "01 / 03" index; the current digit in accent-1 (split counter is a giant Italiana numeral at clamp(80px,12vw,160px) with mix-blend-mode: difference).
• splitProgressDot — 6×28px parchment-25% vertical bar; active → accent-1, grows to 56px tall.
• splitDeliverables — mono italic list, hairline border-top, each prefixed with an accent-1 em-dash "— ".
• cursorPreview — 320×420 fixed image card on bg-secondary, clip-path reveal, cursor-following with lerp, deep shadow.
• cursorDot — 12px accent-1 circle, mix-blend-mode: difference.
• footer — bg-secondary, centered Fraunces wordmark flanked by amber scaleX rules; 3-column mono-labelled grid; email in accent-2.

Motion

Everything is choreographed. On load the hero card runs hero-water-rise (1.4s, cubic-bezier(0.25,0,0.15,1)): rises 60px, scales 0.96→1, with a clip-path inset reveal; headline words individually de-blur (blur(18px)→0) on a JS ~130ms stagger; the hero video scales 1.04→1 over 2s. The hero card's backdrop carries a live SVG turbulence filter whose baseFrequency animates on a 16s loop for a constant water ripple. Scroll drives the two pinned scenes via a requestAnimationFrame loop: stack panels slide translateY(100%)→0 (0.6s cubic-bezier(0.4,0,0.2,1)) with prior panels receding to translateY(-12vh) scale(0.94); the split scene cross-fades image + text panels and animates the progress rail. IntersectionObserver fires the footer: amber rules scaleX(0→1) (0.95s) and the wordmark wipes in per-character via clip-path on an 80ms stagger. The cursor preview follows the pointer with a 0.18 lerp and clip-path reveal. A 1500ms safety timeout force-shows any entrance element that hasn't fired.

Iconography

No icon font. Iconography is pure typographic glyphs: right-arrows (→) on CTAs and links, em-dash (—) bullet markers in deliverable lists and the index counter, and a middot (·) separator throughout eyebrows and meta. Accent glyphs (arrows, list dashes) render in accent-1. The only drawn shape is the 12px circular cursor dot.

Do's and Don'ts

• Do keep every headline in italic Fraunces at opsz 144 / SOFT 0, weight 500, -0.025em tracking — it is the brand.
• Do reserve accent-1 amber for interaction (hovers, links, active index, cursor) and accent-2 sage for quiet secondary labels.
• Do caption with italic JetBrains Mono uppercase at wide tracking, and eyebrow with Italiana at 0.32em.
• Do keep edges hard — hairline rules over shadows; the hero glass card is the one rounded, elevated exception.
• Don't introduce a third accent or recolor the parchment ink.
• Don't add an icon font — stay with unicode arrows, dashes and middots.
• Don't soften corners on buttons, panels or images, and don't drop the scroll-pinned scene structure that defines the page.

Known Gaps

• The hero "water" refraction is an animated SVG feTurbulence/feDisplacementMap filter; its visual result is described qualitatively (the numeric baseFrequency keyframes and scale 14 are read from markup but the perceived effect is approximate).
• Image and video assets are remote CDN URLs (bunny.net); their actual artwork is not inspected — only their roles and frame treatments are described.
• The spacing scale is inferred from the most-repeated values; the design uses many one-off clamp() paddings beyond the named steps.
• Body sub-copy alpha colors (rgba(245,237,216,0.65–0.92)) are used inline rather than as named tokens; captured under Text rather than as discrete tokens.