/* Design tokens - single source of truth for color, type, space, motion, radii, z-index. See ARCHITECTURE.md §2 (brand foundation) and §7 (design tokens). DIRECTION: a studio's object catalogue. Frankie makes things; the site is the vitrine they sit in, not a portfolio template they get poured into. Raw paper, quiet type, one saturated note, and a catalogue hand for the annotations. Reference: Frankie's "frankly" board. What it actually contains, pin by pin: a blind debossed butter-yellow card held in a hand; a parchment spread with almost nothing on it and a scatter of solid dots floating off the grid; a rack of file spines seen edge-on with vertical type up each one; a pinned collage of translucent sheets, botanical line art and a handwritten note; big serif display sitting on raw stock behind a faint circular stamp; a museum catalogue of stone objects with typewriter object labels. Two things run through all six: things are treated as objects with edges, and the type that describes them is tiny, technical and set apart from the display face. Also teaatshiloh.com (two colors, huge negative space, tracked labels). THE PROJECTS ARE ALLOWED TO LOOK DIFFERENT. This palette is the container. A cobalt illustration set, a riso-green perfume poster and a purple biotech deck all keep their own identity when they sit on it. Nothing here should be applied to the work. The accent is the board's cobalt, used the way the board uses its dots: small, few, and against stone. The nav logo is cobalt (cobalt copies of the brand files); the entry gate mark is graphite and inks cobalt on hover. Font files: /assets/fonts/ - see that folder's README for licensing notes. */ :root { /* The page is light in both system modes, on purpose. The whole direction is a print emulation: raw oat paper, letterpress and deboss, archival captions, and 21 case studies of cut-out artwork matted onto that paper. Inverting the ground would not be a dark theme of this site, it would be a different site, and every cut-out plate would need re-shooting against the new ground. The taste skill's dark-mode mandate carves out exactly this case (.agents/skills/design-taste-frontend §8: "Never assume light-only unless the brief is print-emulating editorial"). Declaring it here rather than leaving it unset is the honest version: the browser renders scrollbars, form controls and the canvas light to match, instead of half-inverting them under a dark OS. */ color-scheme: light; /* ---------- Color ---------- Re-read off the "frankly" board, September 2026, after the oat-and-red version was judged not to feel like the board. What the board is actually made of: putty and stone card stock, a pale sage ground under the "hello, it's me" botanical, greyscale photography, graphite type, and exactly one saturated note: the cobalt dots floating over the Ma:Sonic spread and the blue floral print in the collage. Frankie's own figure drawings (assets/images/archive/) are the same cobalt, so the accent is hers as much as the board's. Grounds are cooler and greyer than the old oat; ink is graphite, not brown. */ --color-bg: #F7F6EC; /* the scanned paper, averaged: the page ground */ --paper: #FDFDF6; /* base under --texture-scan; multiplied, it gives the page */ --color-bone: #ECE9E2; /* bone - a lighter sheet laid on the stone */ --color-bg-raised: #E6E3DB; --color-parchment: #D2CDC1; /* putty - the next sheet down */ --color-surface: #CFCAC0; --color-sage: #CDD4C8; /* the pale sage ground from the board */ --color-sage-deep: #B9C3B4; --color-text: #1D1D1B; /* graphite */ --color-charcoal: #2E2E2B; --color-text-muted: #55544F; /* 7.0:1 on the paper, 5.4:1 on putty */ --color-warm-gray: #8E8B83; /* decorative only, never body text */ --color-border: #BDB8AD; /* Kept so older page CSS still resolves; all pulled toward the grey range. */ --color-olive: #6F725C; --color-moss: #4E5646; --color-clay: #8A6A58; --color-brown: #5B4C40; /* Cobalt. The board's one colour. 7.8:1 on the paper, so it can carry text, but it is still used like the dots: small, few, and deliberate. */ --color-accent: #1F35D1; --color-accent-soft: #8C98E8; /* cobalt that reads on graphite */ /* Graphite: the dark ground. Footer, the statement band, the Planet plate. */ --color-ink: #1B1B19; --color-ink-raised: #262624; --color-ink-text: #E4E1D9; --color-ink-muted: #A3A097; --color-ink-border: #3A3935; --color-inverse-bg: #1B1B19; --color-inverse-text: #E4E1D9; /* Glassine: a translucent sheet laid over a plate, as in the museum-catalogue pin. */ --glassine: rgb(236 233 226 / 0.55); /* ---------- Type ---------- Two voices. The mono is the studio's hand: headings, labels, the archive index, everything that names a thing. It is the face of the "[ graphic design & creative strategy ]" line in the masthead, and Frankie asked for it to carry the site in place of EB Garamond (Sept 2026). Ubuntu is the reading face. Menlo leads the stack so every Mac browser draws the same letters (Chrome never supported ui-monospace, so Frankie was already seeing Menlo; Safari would otherwise swap in SF Mono). DejaVu Sans Mono is Menlo's parent and covers Linux, Consolas covers Windows. System fonts only, so there is nothing to download. Coolvetica survives where it matters: the logo lockup and wordmark are outlined vector artwork in assets/brand/. See ARCHITECTURE.md §2. */ --font-family-mono: Menlo, 'DejaVu Sans Mono', Consolas, 'Liberation Mono', 'Roboto Mono', monospace; --font-family-display: var(--font-family-mono); --font-family-body: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-brand: var(--font-family-display); /* legacy alias */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Ubuntu ships 400/500/700; headings stay regular (see base.css) */ --font-weight-light: 400; /* Fluid type scale. Display sizes are deliberately smaller than before: this direction gets its impact from space and restraint, not from 128px headlines. */ --font-size-xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem); --font-size-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --font-size-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem); --font-size-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); --font-size-3xl: clamp(1.875rem, 1.45rem + 2vw, 3rem); --font-size-4xl: clamp(2.25rem, 1.6rem + 3vw, 4rem); --line-height-tight: 1.12; --line-height-snug: 1.3; --line-height-body: 1.7; /* airier than before; this direction breathes */ /* Tiny tracked labels are a signature of both references. */ --letter-spacing-label: 0.22em; --letter-spacing-wide: 0.1em; /* ---------- Spacing ---------- Base-8, with the top of the scale stretched: negative space is the point. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px; --space-10: 168px; /* ---------- Radii ---------- Near-square. The old 32px cards read as friendly-app; wabi-sabi is cut paper and unglazed edges. The blob logo supplies all the roundness this needs. --radius-full stays for pill-shaped tags only. */ --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-full: 999px; /* ---------- Texture ---------- --texture-scan Frankie's scan of recycled paper (Sept 2026): cream stock with fibres and flecks. Made seamless by tools/papertile.py (mottle kept at 0.2), divided by its own brightest tone so the paper's base is white, then eased to 38% strength so it stays quiet. Always drawn with background-blend-mode: multiply over a background-color: over --paper it gives the cream page, over sage or bone it gives sage or bone paper. It scrolls with the content, so the flecks sit on the page and never on the glass. Two copies at unrelated sizes (440px and 640px wide), so the grain stays fine while the repeat never lines up: a single small tile showed the same fleck clusters marching across the page. The list feeds background-image and background-size together, and a single "multiply" repeats across both layers. --texture-ink a fine white grain for the dark bands, where a multiply has nothing to darken (tools/papertexture.py). */ --texture-scan: url('/assets/brand/texture/paper-scan.webp'), url('/assets/brand/texture/paper-scan.webp'); --texture-scan-size: 440px auto, 640px auto; --texture-ink: url('/assets/brand/texture/paper-ink.png'); /* ---------- Motion ---------- Slower and gentler. Nothing snaps. See ARCHITECTURE.md §9. */ --duration-short: 260ms; --duration-medium: 700ms; --duration-long: 1200ms; --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---------- Z-index scale ---------- */ --z-nav: 100; --z-overlay: 200; --z-modal: 300; /* ---------- Media ---------- */ /* Ceiling for any full-size artifact: hero images, case-study figures, gallery plates. Sized so a whole photo fits on screen under the 80px header without scrolling, on a short laptop as well as a tall desktop. Nothing full-size should set its own max-height instead of this; thumbnails are the exception and cap themselves lower. */ --media-max-h: 70vh; } /* Breakpoints (custom properties aren't usable in media queries yet - documented here for reference, applied as literal values in layout.css / page CSS): 480 - small phones 768 - tablet / nav collapse point 1024 - small desktop 1440 - desktop 1920 - large desktop */