/* ========================================================================== Tino — design tokens One accent (Tino Pink), everything else ink, white and greys. Light front door (site, Welcome, App Store). Dark studios (the apps). Contrast ratios are WCAG 2.x, computed against the ground named. ========================================================================== */ :root { /* ---------------------------------------------------------------- Pink -- Pink is precious: it marks Tino (its presence, its work, its edits) and at most one primary moment per view. Never decoration. */ --pink: #DB34F2; /* Tino Pink. Tino's dot, line, ring, range. 3.63:1 on white -> shapes/UI only, not small text 5.07:1 on --studio-ground */ --pink-ink: #B01FC8; /* Pink text on light. 5.42:1 on white, 4.98:1 on --surface-2, 4.75:1 on --pink-wash */ --pink-deep: #9A1AB0; /* Pressed / hover of pink-ink. 5.85:1 on --pink-wash */ --pink-on-dark: #E57BF7; /* Pink text on dark studio grounds. 7.45:1 on --studio-ground, 6.74:1 on --studio-panel, 5.79:1 on --studio-raised */ --on-pink: #111114; /* Text on a --pink fill: 5.19:1. (White on --pink is 3.63:1 -> fails small text. For white text use a --pink-ink fill: 5.42:1.) */ /* DEPRECATED. Do not use. VEHICLE.md rules out pink washes, pink-filled pills and pink outlines. Kept only so kit.html's history swatches render. */ --pink-wash: #FBEBFE; --pink-wash-a: rgba(219, 52, 242, 0.10); --pink-wash-dark: rgba(219, 52, 242, 0.16); --pink-line: rgba(219, 52, 242, 0.42); /* ---------------------------------------------------- Light front door -- Ink on white. Apple-like greys, a hair cool so pink sits cleanly. */ --white: #FFFFFF; --ink: #111114; /* Primary text. 18.85:1 on white */ --ink-2: #46464C; /* Secondary text. 9.37:1 on white */ --ink-3: #6B6B73; /* Tertiary / captions. 5.28:1 on white, 4.85:1 on --surface-2 */ --ink-4: #A1A1A8; /* Disabled, placeholders, non-text marks only */ --surface: #FFFFFF; /* Page ground */ --surface-2: #F5F5F7; /* Quiet section / card ground */ --surface-3: #EBEBEE; /* Pressed, wells, tracks */ --line: #E3E3E8; /* Hairline on white */ --line-2: #EFEFF2; /* Softer hairline, dividers inside cards */ --line-strong: #CFCFD6; /* Outline buttons, inputs */ /* --------------------------------------------------------- Dark studio -- Charcoal and graphite, like a pro tool. Only ever "inside a studio". */ --studio-ground: #141416; /* Window / panel ground */ --studio-panel: #1E1E21; /* Sidebars, inspectors */ --studio-raised: #2A2A2E; /* Popovers, tiles, raised controls */ --studio-raised-2: #36363B; /* Hover on raised */ --studio-line: rgba(255, 255, 255, 0.08); --studio-line-2: rgba(255, 255, 255, 0.14); --studio-text: #F5F5F7; /* 16.90:1 on --studio-ground */ --studio-text-2: #A8A8B0; /* 7.79:1 on ground, 7.04:1 on panel */ --studio-text-3: #85858D; /* 5.03:1 on ground, 4.54:1 on panel */ /* ---------------------------------------------------------------- Type -- Geist for everything; Geist Mono only for timecodes and numbers. */ --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Scale (desktop). size / line-height / tracking. Large sizes run tight. */ --t-80: 80px; --lh-80: 1.02; --tr-80: -0.045em; /* Hero headline */ --t-64: 64px; --lh-64: 1.04; --tr-64: -0.04em; /* Page headline */ --t-48: 48px; --lh-48: 1.06; --tr-48: -0.035em; /* Section headline */ --t-32: 32px; --lh-32: 1.12; --tr-32: -0.025em; /* Sub-section */ --t-24: 24px; --lh-24: 1.25; --tr-24: -0.018em; /* Lead / card title */ --t-19: 19px; --lh-19: 1.42; --tr-19: -0.01em; /* Intro body */ --t-17: 17px; --lh-17: 1.5; --tr-17: -0.006em; /* Body */ --t-14: 14px; --lh-14: 1.43; --tr-14: 0; /* UI / small */ --t-12: 12px; --lh-12: 1.34; --tr-12: 0.004em; /* Caption / legal */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 680; /* -------------------------------------------------------------- Layout -- */ --max: 1200px; --max-wide: 1280px; /* the one wide measure: studio bands and wide stages */ --max-text: 680px; --gutter: 16px; /* phone; 32px from 734px; auto beyond --max */ --nav-h: 52px; /* 4px base spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; /* One inter-section gap. Sections pad the top only, so two in a row never stack their padding; the last block on a page gets .section-end. */ --section-y: clamp(64px, 8vw, 112px); /* The studio band: one geometry for every dark panel on every page. Centred, never wider than --band-max, 12px from the viewport below that. */ --band-max: 1280px; --band-r: 32px; --band-y: clamp(72px, 9vw, 120px); /* Radii — continuous-feeling, never pill unless a pill */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* cards, studio panels */ --r-2xl: 36px; /* full-bleed panel inner */ --r-pill: 999px; --r-icon: 22.37%; /* macOS squircle approximation for app tiles */ /* Shadows — soft, low, never glowing */ --shadow-1: 0 1px 2px rgba(17, 17, 20, 0.06); --shadow-2: 0 1px 2px rgba(17, 17, 20, 0.05), 0 6px 18px rgba(17, 17, 20, 0.06); --shadow-3: 0 2px 6px rgba(17, 17, 20, 0.05), 0 18px 48px rgba(17, 17, 20, 0.10); --shadow-window: 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 30px 80px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.18); /* Focus: the person's own focus is ink, never pink (pink means Tino). Ink on white 18.85:1, studio text on studio ground 16.90:1. */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); --focus-ring-dark: 0 0 0 2px var(--studio-ground), 0 0 0 4px var(--studio-text); /* -------------------------------------------------------------- Motion -- Calm and springy. Spring curves overshoot a hair, then settle. */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* standard */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entrances */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moves */ --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* small overshoot */ --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.04); /* presses, toggles */ /* A true spring for browsers that support linear() (stiffness ~170, damping ~22) */ --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.089 25.6%, 1.085 28.4%, 1.042 34.9%, 1.006 41%, 0.993 45.5%, 0.99 50.3%, 1 63.6%, 1.001 77%, 1); --d-1: 120ms; /* hover, press */ --d-2: 200ms; /* small UI */ --d-3: 320ms; /* menus, toggles */ --d-4: 560ms; /* reveals */ --d-5: 900ms; /* hero entrances */ } /* Tablet and up */ @media (min-width: 734px) { :root { --gutter: 32px; } } /* Phone type: large sizes step down, tracking stays tight */ @media (max-width: 733px) { :root { --t-80: 48px; --t-64: 40px; --t-48: 34px; --t-32: 26px; --t-24: 21px; --t-19: 18px; } } @media (min-width: 734px) and (max-width: 1068px) { :root { --t-80: 64px; --t-64: 52px; --t-48: 40px; } } @media (prefers-reduced-motion: reduce) { :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; --d-5: 0ms; } }