name: studio-kor-design
version: alpha
description: >
  An editorial, print-shop portfolio for a fictional Berlin book designer set on
  warm paper (#F4F1E8) with near-black ink (#111011), a single signal red
  (#CC1818) and a secondary teal (#009A9A). The signature move is the Roboto Flex
  variable font driven live on its weight/width/optical-size axes — the hero name
  breathes toward the cursor, project titles thicken and widen on hover. Hairline
  rules, crop marks, corner crosshairs, register marks and a calibration strip
  frame the page like a type specimen sheet. Fraunces italic carries the literary
  voice; Inter sets the spaced-out uppercase metadata. Geometry is sharp — zero
  border-radius everywhere — and depth comes from 1px rules and hard offset
  shadows, never soft blur.
colors:
  # Surface
  paper: '#F4F1E8'        # primary page surface (--paper)
  dust: '#D4CDB8'         # image placeholder / card backgrounds (--dust)
  red-pale: '#F9EDED'     # tinted red wash, defined token (--red-pale, unused in markup)
  # Ink / Dark
  ink: '#111011'          # body text, all rules/crosshairs/borders, dark case column (--ink)
  dark: '#1A1717'         # footer background (--dark)
  case-dark: '#004B4B'    # talks venue image fallback bg (deep teal)
  # Brand / Accent
  red: '#CC1818'          # signal red — hover state, accents, marquee separators (--red)
  teal: '#009A9A'         # secondary accent — talks section bg, order buttons (--teal)
  teal-bright: '#2DBDBD'  # JS-lerped teal on inverted publications scroll
  # Text on dark
  paper-on-ink: '#F4F1E8' # paper used as text/foreground over ink and teal sections
  # Hairlines
  hairline-ink: '#111011'             # 1px rules on paper
  hairline-paper: 'rgba(244,241,232,0.3)'  # 1px rules on dark/teal (--rule-paper)
  hairline-paper-35: 'rgba(244,241,232,0.35)' # marquee + talk-row borders on teal
typography:
  display:
    fontFamily: "'Roboto Flex', sans-serif"
    fontSize: clamp(4rem, 15.5vw, 15rem)
    fontWeight: 850
    lineHeight: 0.78
    letterSpacing: -0.045em
  display-condensed:
    fontFamily: "'Roboto Flex', sans-serif"
    fontSize: clamp(3.5rem, 14vw, 18rem)
    fontWeight: 900
    lineHeight: 0.82
  serif-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    fontStyle: italic
  tag-serif:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(15px, 1.5vw, 22px)
    fontWeight: 400
    lineHeight: 1.45
    fontStyle: italic
  eyebrow:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.3em
    textTransform: uppercase
  meta:
    fontFamily: "'Inter', sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.3em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
rounded:                      # brutalist: everything is sharp; only the cursor dot is round
  none: 0px
  full: 9999px                # custom cursor + register-mark circles only
spacing:                      # rem-based; base unit 0.5rem (8px)
  xs: 0.5rem
  sm: 0.75rem
  md: 1.5rem
  lg: 2rem
  xl: 4rem
  section: 8rem
components:
  eyebrow-label:
    textColor: '{colors.ink}'
    typography: '{typography.eyebrow}'
  project-row:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '2rem 0'
    # 1px top+bottom hairline; title shifts to red + wght 900/wdth 151 on hover
  pub-card:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '1.5rem'
    # 1px currentColor border; hover = 10px 10px 0 currentColor hard shadow + 3px lift
  order-button:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.paper}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    padding: '0.75rem'
  waitlist-button:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    padding: '0.75rem'
    # 1px currentColor border
  cursor:
    backgroundColor: 'transparent'
    rounded: '{rounded.full}'
    # 12px ring, 1px ink border, mix-blend-mode difference; grows to 24px red on row hover
motion:
  hero-reveal: 'per-letterform clip-path inset wipe, 0.9s cubic-bezier(.86,0,.07,1), staggered 80ms'
  variable-breathe: 'hero name wght 500→1000 / wdth 95→151 toward cursor within 420px radius'
  hover-thicken: 'project title font-variation-settings 0.4s ease → wght 900 wdth 151, color red'
  clip-reveal: 'clip-path inset(0 100% 0 0)→0 over 0.9s cubic-bezier(.86,0,.07,1)'
  mask-wipe: 'ink ::after overlay scaleX 1→0, 0.9s cubic-bezier(.86,0,.07,1)'
  theme-inversion: 'sticky publications section lerps paper↔ink bg/text across 300vh scroll'
  velocity-marquee: 'JS rAF translateX, 35s constant loop, pauses on hover'
  fan-deck: 'process stills fan in with staggered rotations -9/-3/2/7/11deg, 0.9s'
  footer-stamp: 'letter-spacing 0.08em→-0.01em wind-down over 0.9s on scroll-in'
  card-hover: 'pub-card translate(-3px,-3px) + hard offset shadow, 0.4s ease'
icons:
  library: inline glyphs / typographic marks (no icon font)
  style: 'unicode marks — ● dot, ✕ cross, ☉ sun, ✱ asterisk, ↳ ↘ arrows, register crosshair (CSS pseudo-elements)'
  color: '{colors.red}'

Studio Kor

studio-kor-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 Kor is the one-page portfolio of a fictional Berlin book designer, built to read like a printed type specimen sheet. The surface is warm paper (--paper #F4F1E8) carrying near-black ink (--ink #111011); a single signal red (--red #CC1818) marks every active or accented moment and a quieter teal (--teal #009A9A) owns the talks section and "order" buttons. The whole page is boxed by four fixed 1px frame lines with corner crosshairs, and a custom mix-blend-difference cursor ring trails the pointer. The signature move is the Roboto Flex variable font animated live across its wght, wdth and opsz axes: the giant INA·KOR lockup breathes toward the cursor (wght 500→1000, wdth 95→151 within a 420px radius) and project titles thicken to wght 900 / wdth 151 and turn red on hover. Editorial voice comes from Fraunces italic (taglines, captions, body asides) against spaced-out uppercase Inter metadata. Geometry is uncompromisingly sharp — border-radius: 0 everywhere except the round cursor and the register-mark circles — and depth is built from hairline rules, crop marks, register marks and hard offset shadows rather than blur. Two scroll set-pieces anchor the page: a 300vh sticky "publications" section that lerps the whole panel from paper to full ink inversion, and a teal talks section with a JS velocity marquee in Fraunces italic.

Colors

Surface. --paper #F4F1E8 is the page background and the foreground/text color over every dark panel. --dust #D4CDB8 fills image placeholders and card image wells. --red-pale #F9EDED is defined as a token but not used in the markup.

Ink / dark. --ink #111011 sets all body text, every 1px rule, crosshair, crop mark and border, plus the dark case-study left column. --dark #1A1717 is the footer background. A deep teal #004B4B backs the talks venue image.

Brand / accent. --red #CC1818 is the signal color — hover states, the "KOR" word and dot in the hero, marquee separators, the red rule under the hero, sup references and highlighted CV rows. --teal #009A9A backs the entire talks section and the "order" buttons; a brighter #2DBDBD is computed in JS for the teal subtitle when the publications section inverts.

Hairlines. On paper, rules are solid --ink. On dark/teal panels they drop to rgba(244,241,232,0.3) (--rule-paper) and rgba(244,241,232,0.35) for the marquee borders and talk rows, with 0.2 for inner talk-row separators.

Typography

Three Google Fonts families, loaded via one css2 @import: Roboto Flex (the variable display face, axes opsz 8–144 / wdth 25–151 / wght 100–1000), Fraunces (the literary serif, used italic for taglines, captions, body and descriptions), and Inter (400/500/600, all uppercase metadata, eyebrows, nums, buttons, footer). Roboto Flex is exercised across its full axis range — from hairline wght 200 / wdth 151 "est." numerals to wght 900 / wdth 25 footer stamp condensation.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(4rem,15.5vw,15rem)	850 (var)	0.78	-0.045em	Hero name, section H2s
display-condensed	clamp(3.5rem,14vw,18rem)	900 (var)	0.82	0.08em→-0.01em	Footer INA·KOR stamp
serif-italic	15px	400	1.55	—	Body asides, captions, descs (italic Fraunces)
tag-serif	clamp(15px,1.5vw,22px)	400	1.45	-0.005em	Hero tagline (italic Fraunces)
eyebrow	11px	400	1.2	0.3em	Section eyebrows (uppercase Inter)
meta	10px	400	1.4	0.3em	Nums, labels, buttons (uppercase Inter)
body	12px	400	1.6	—	CV rows, footer cols, small body (Inter)

Layout

Base unit is rem-driven, effectively 0.5rem (8px) steps. The page is a single vertical scroll of full-width sections padded 8rem 4rem (heros and process go larger; mobile collapses to 1.5rem). A fixed 1px frame inset 2rem from all edges with corner crosshairs boxes the whole document, and four rotated edge-nav labels sit centered on each side. The hero is a CSS grid specimen sheet (calibration strip / center stage / 5-column index strip) with vertical rails and a floating register mark. Work is a 4-column project-row grid (1fr 7fr 3fr 1fr) of hairline-separated rows. The case study is a 38%/62% split with an image that overflows its column. Publications is a 300vh outer wrapper with a sticky 100vh inner panel holding a 3-column card grid. Talks is a full-bleed teal band. About is a 3fr 6fr 3fr editorial grid with marginalia. Whitespace is generous and deliberate — margin is treated as load-bearing structure.

Elevation & Depth

There are no soft shadows. Depth is built entirely from 1px hairlines (rules, grid dividers, borders, crosshairs, crop marks, register marks) and hard offset shadows: pub cards lift to box-shadow: 10px 10px 0 currentColor with a translate(-3px,-3px) on hover, and the center process fan-card carries a static 8px 8px 0 var(--ink). The custom cursor uses mix-blend-mode: difference. The publications set-piece creates depth through full paper↔ink theme inversion.

Shapes

Brutalist and sharp: border-radius: 0 on every panel, card, button, image well and rule. The only curves are border-radius: 50% on the 12px custom cursor ring (growing to 24px red over project rows) and the two concentric register-mark circles. Outlined typography (-webkit-text-stroke) appears in the talks heading and the oversized ✕ on the venue image.

Components

• Eyebrow label — uppercase Inter 11px, 0.3em tracking, ink (or paper at 0.6 opacity over dark); prefixed with "— SECTION 0N /".
• Project row — paper bg, 1px ink top+bottom hairline, 2rem 0 padding, zero radius; title in Roboto Flex thickens to wght 900 / wdth 151 and turns red on hover (e.g. "DIE STILLE", "CONCRETE / TONGUE").
• Pub card — paper bg, 1px currentColor border, 1.5rem padding, zero radius; hover = 10px 10px 0 currentColor hard shadow + 3px lift.
• Order button — teal fill, paper text, uppercase Inter 12px / 0.3em, 0.75rem padding, zero radius; label "↳ ORDER".
• Waitlist button — transparent with 1px currentColor border, same type; label "WAITLIST".
• Cursor — 12px transparent ring, 1px ink border, round, difference blend; grows to 24px solid red over .proj-row.
• Hero index cell — bordered grid cell with red [ 0N ] num, Roboto Flex uppercase label, italic Fraunces value.

Motion

Authored and active (no reduced-motion disable in markup). Hero letterforms reveal via per-glyph clip-path wipes (0.9s cubic-bezier(.86,0,.07,1), 80ms stagger) then breathe toward the cursor on the variable axes within a 420px radius. Project titles animate font-variation-settings over 0.4s on hover. Scroll reveals use IntersectionObserver toggling .is-in: clip-reveal, skew-settle, mask-wipe (ink overlay scaleX 1→0), stagger-rise, fan-deck cards fanning in with staggered rotations, and talk rows rising. The publications section runs a rAF scroll-progress lerp inverting paper↔ink across 300vh. The talks marquee is JS-driven translateX (35s constant loop, pause on hover). The footer stamp winds letter-spacing from 0.08em to -0.01em on scroll-in.

Iconography

No icon font. All marks are inline unicode/typographic glyphs — ● red dot separators, ✕ crosses (marquee, talks), ☉ and ✱ in nav/footnotes, ↳ ↘ ↘ directional arrows — plus CSS pseudo-element crosshairs, crop marks and the register mark (concentric circles + crosshair). Accent marks render in --red.

Do's and Don'ts

• Do keep border-radius: 0 on all surfaces; reserve circles for the cursor and register marks.
• Do use red sparingly as the single signal color and teal only for the talks band and order CTAs.
• Do drive emphasis through Roboto Flex axis changes (wght/wdth/opsz), not added colors.
• Do build dividers and depth from 1px hairlines and hard offset shadows.
• Don't introduce soft/blurred drop shadows or gradients.
• Don't mix face roles — Fraunces stays italic-editorial, Inter stays uppercase-metadata, Roboto Flex stays display.
• Don't add a second accent hue; the palette is paper/ink/red/teal/dust only.

Known Gaps

• --teal-bright #2DBDBD is read from the JS lerp branch, not a CSS token; the publications inversion sweeps continuous rgb values between paper and ink (endpoints documented, intermediate values are runtime-computed).
• --red-pale #F9EDED is declared in :root but not referenced in the markup.
• The case-dark #004B4B is the talks venue image background fallback, used behind a photo so rarely visible.
• Variable-font axis ranges and hover targets are read from JS; rendered weights depend on Roboto Flex's loaded axes.
• Spacing scale is inferred from rem-based padding values; no formal spacing token set exists in the source.