/* ===================================================================================================================== DESK STUDIO DESIGN DIRECTION: "THE PROOF TABLE" One brand. The :root token block below is the brand token set; keep it identical wherever the brand appears. Subject A small studio of bot designers that turns one brief into a matching, scored, checked set of designs. Audience Developers who run coding agents. Job Get the install command into a terminal. Idea A studio proof table. Finished work lies on paper sheets under a warm lamp; every sheet gets print-proof crop marks and a label strip (name, size, score), the way a print shop proofs a job. Chrome stays quiet so the work is the loudest thing on the screen. Boldness One place only: display type. Page titles, scores and the site hero are set large in Bricolage Grotesque. Everything else is Inter at reading size. Type Display: Bricolage Grotesque (headings, big numbers, stamps). Body and UI: Inter. Machine text: Geist Mono on the site, the system mono in the app. Body 16px (site 18px), line 1.5, text under 70 characters wide. Scale: 12 14 16 20 25 31 40, then fluid display. Sentence case everywhere. No all-caps labels, no eyebrows above headings, no middle-dot meta strings (use .meta). Colour Paper and ink, warm. Amber is the one action colour (the logo's eye). The four crew colours come from the bots and carry meaning, never decoration: green = made and signed off, blue = in progress, pink = in review, amber = needs you, red = broke. Soft tints for backgrounds, a darker "-text" for words. Dark theme is the studio at night: espresso paper, same amber. Spacing 4 8 12 16 24 32 48 64 96. Sheets sit 24px apart so crop marks never touch. Surfaces Three roles, three radii. Sheets (designs, previews) 3px with crop marks. Panels (cards, dialogs) 14px. Controls (buttons, inputs) 10px, chips are pills. Depth is a hairline plus a hard 1px lower edge, not a soft grey shadow. Only menus, dialogs and toasts float, and they get a real shadow. Motion No scroll reveals, no hover lift on every card. Motion answers a person: buttons press 1px, panels slide in, bars fill, a design that signs off gets stamped once. One orchestrated moment: the site's bots waking in turn. prefers-reduced-motion turns all of it off. Words Plain, warm, direct. Say what happens ("Make 9 designs", "Download all"). One name per action across button, toast and history. Errors say what broke and what to do, with no apology and no "oops". Empty screens invite the next step. Quality Light and dark, 390 and 1366 wide, 2px focus ring in --focus, 44px touch targets on phones, text contrast 4.5:1 or better (checked against these values), no sideways scroll. ===================================================================================================================== */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/Bricolage-Variable.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap; } :root { /* paper and ink */ --bg: #f8f6f1; --surface: #ffffff; --surface-2: #f0ede5; --surface-3: #e5e1d6; --text: #231a12; --text-2: #4a3f34; --muted: #675c50; --border: #e4dfd3; --border-strong: #cfc8b8; --border-input: #8c8272; /* amber: the action colour */ --accent: #ffaa1c; --accent-hover: #f59e0b; --accent-ink: #1c1409; --accent-text: #8a4b00; --accent-soft: #fff0d2; /* the crew: meaning, not decoration */ --crew-amber: #ffaa1c; --crew-pink: #cc79a7; --crew-blue: #0072b2; --crew-green: #009e73; --crew-orange: #d55e00; --ok: #00704f; --ok-soft: #ddf3eb; --warn: #8a4b00; --warn-soft: #fff0d2; --bad: #b3261e; --bad-soft: #fbe6e4; --info: #00588a; --info-soft: #e1eff8; --review: #a23f78; --review-soft: #f9e6f0; --focus: #8a4b00; --overlay: rgb(35 26 18 / .45); --mark: #a79e8d; /* depth: hairline and hard edge for sheets, real shadow only for what floats */ --edge: 0 1px 0 var(--border-strong); --shadow-1: 0 1px 0 rgb(35 26 18 / .10); --shadow-2: 0 10px 28px -8px rgb(35 26 18 / .22); --shadow-3: 0 24px 64px -12px rgb(35 26 18 / .34); /* radii by role */ --radius-sheet: 3px; --radius-s: 6px; --radius-m: 10px; --radius-l: 14px; --radius-pill: 999px; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* type */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --fs-xs: 12px; --fs-s: 14px; --fs-m: 16px; --fs-l: 20px; --fs-xl: 25px; --fs-2xl: 31px; --fs-3xl: 40px; --fs-display: clamp(40px, 4vw + 24px, 84px); /* motion */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 100ms; --dur: 160ms; --dur-3: 320ms; /* app layout (the site ignores these) */ --sidebar-w: 248px; --topbar-h: 60px; --tabbar-h: 60px; --content-max: 1280px; --checker-a: #efeadf; --checker-b: #f8f6f1; color-scheme: light; } :root[data-theme="dark"] { --bg: #15100b; --surface: #1f1812; --surface-2: #2a2118; --surface-3: #352a1f; --text: #fbf2e3; --text-2: #e2d5c0; --muted: #b8a890; --band-deep: #0f0b08; --border: #3a2e22; --border-strong: #54442f; --border-input: #8b7a62; --accent: #ffaa1c; --accent-hover: #ffbb45; --accent-ink: #1c1409; --accent-text: #ffbf4d; --accent-soft: #3a2a12; --ok: #4cc38a; --ok-soft: #143024; --warn: #ffb84d; --warn-soft: #3a2a12; --bad: #ff7a6e; --bad-soft: #3d1d1a; --info: #7db8e8; --info-soft: #172a3b; --review: #e59cc4; --review-soft: #3a2132; --focus: #ffbf4d; --overlay: rgb(0 0 0 / .62); --mark: #7a6a54; --edge: 0 1px 0 rgb(0 0 0 / .55); --shadow-1: 0 1px 0 rgb(0 0 0 / .5); --shadow-2: 0 10px 28px -8px rgb(0 0 0 / .6); --shadow-3: 0 24px 64px -12px rgb(0 0 0 / .75); --checker-a: #241b13; --checker-b: #1b140e; color-scheme: dark; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------------------------------------------------- SITE LAYER (deskstudio.ai only). Everything above this line is the shared brand layer. Every page: with the theme script in (site/theme.js), then