/* img2ppt design system — the single source of truth for every brand value. Linked by every HTML surface (app, legal, pricing, auth verify, admin). email.py mirrors these values inline because email clients strip stylesheets. The law that governs this file is docs/design-system.md. Read it before you add anything. The short version: - No raw hex, px font-size, px radius or one-off shadow anywhere else in the codebase. If a value is worth using twice it is a token; if it is worth using once it still comes off the scale. - Every length is authored at 100% and multiplied by --ui-scale. Author the 100% number; never bake the multiplication into the literal. - Adding a value here is a design decision, not a convenience. A new token needs a reason the existing ones cannot cover. - /styleguide renders every token and component below. If you change something here, look at that page before you commit. Palette: marker yellow on formal white, ink controls (colour option 16, chosen 2026-09-12 -- design-system.md 2.1). Yellow goes only where a marker pen would; every control is ink. Light theme only, by decision -- see design-system.md 2.5. */ :root { color-scheme: light; /* ---- Global scale --------------------------------------------------- One knob for the size of the whole product. Every length below is authored at its 100% value and multiplied by this, so the scale, the 4px space grid and the nine type steps all stay readable as themselves -- `calc(24px * var(--ui-scale))` says "24 at 100%", which a rebased literal like 26.4px could not. 1.1 because the site reads better one browser-zoom step up: this is that view, at 100% zoom (2026-08-22). Uniform on purpose -- browser zoom scales type and space together, and scaling type alone would change the design's proportions rather than its size. Deliberately NOT scaled, and each for its own reason: - hairlines, borders, focus rings and the 1-3px nudges. A 1.1px border is not a better 1px border, and 2px of focus ring is an accessibility minimum, not a proportion. - --tap. A WCAG 2.5.8 floor in CSS px; it does not grow with taste. - shadows and durations. Zoom moves shadow offsets by a tenth of a pixel (invisible) and does not touch time at all. - email.py's inlined values. Email is not this viewport. Media queries CANNOT read a custom property, so every breakpoint in the page files carries the multiplied number with the arithmetic in a comment beside it. Those are the only literals that must be changed by hand if this knob moves. */ --ui-scale: 1.1; /* Kalam: the hand-drawn marginalia on the landing page only, and the only reason this project loads a second family. Never for UI text, never in the app, admin, email or legal pages -- same boundary as .doodle itself (design-system.md 3). Upright only; do not ask it for an italic. */ --font-hand: Kalam, "Segoe Print", "Bradley Hand", cursive; /* ---- Surfaces ------------------------------------------------------ */ --bg: #ffffff; --bg-2: #faf9f8; --card: #ffffff; /* ---- Text ---------------------------------------------------------- Measured against #ffffff. Every one of these clears AA 4.5:1 for body text, which is why --faint moved off #797775 (4.46 -- a hair short). ink 15.52 : body 11.35 : muted 6.46 : faint 4.52 */ --ink: #242424; --body: #3b3a39; --muted: #605e5c; --faint: #787674; /* ---- Accent: marker yellow ------------------------------------------ The roles changed with the 2026-09-12 retheme, and getting them wrong is the single easiest way to ship an accessibility bug here. --accent (#f5c518, 1.63:1 on white) is DECORATION, the same class as --gold: marker strokes, tints, the strip. Never text at any size, never a meaningful icon, never a border that carries state. If removing the colour would lose information, it cannot be this. --accent-dark (#917306, 4.51:1) is the colour that must be SEEN: state borders, list markers, icon strokes, the focus ring, and the wordmark's coloured span. --accent-ink is --ink: every formerly-coloured word -- links, eyebrows, status text -- is plain ink, and the underline or the position carries the affordance (WCAG 1.4.1; already the rule for prose links, see .link below). Kept as a token so call sites read "this used to be the accent text colour" -- and aliased with var() rather than hand-copied, so the identity the design system asserts cannot silently drift. */ --accent: #f5c518; --accent-dark: #917306; --accent-ink: var(--ink); --accent-soft: #fdf9ea; --accent-line: #f7e8b0; /* Anything drawn ON a dark accent fill -- the ink CTA's label, the navbar's wordmark on the strip's #a07f07 core, the burger bars. Named rather than bare #fff so "is this on an accent fill?" is answerable by reading the declaration. NEVER on --accent itself: white on #f5c518 is 1.63:1. */ --on-accent: #ffffff; /* ---- Brand gradient ------------------------------------------------- The decorative one: the marker-yellow sweep. Symmetric so the notch navbar (which hangs from the strip, centered) always sits on the dark zone for contrast. This is the bright brand signature and it is allowed to stay bright because NO TEXT EVER SITS ON IT. Putting a label on this gradient is a defect. The deep stop IS --accent-dark (#917306), deliberately: the navbar's white labels sit on this core, and 4.51:1 (4.5075) is what finally closed design-system.md 2.1.5 on 2026-09-12 -- the first core of the retheme, #a07f07, left them at 3.80. The margin over the 4.5 floor is less than a hundredth: do NOT lighten this stop by any amount without re-measuring the bar. */ --grad-light: #fdf4d3; --grad-mid: #f9dd76; --grad-deep: #917306; /* The deep zone is 25-75% -- half the viewport -- because the AA claim of design-system.md 2.1.5 depends on geometry as well as colour: nav.css caps the notch bar at 50% of the viewport above its breakpoint, so with a 50% deep core the bar can NEVER outgrow the zone its white labels need, at any width, signed in or out. (The coral-era 38-62% core was narrower than the bar at most widths; its edge labels sat on the blend and nobody had measured them.) Below 726px the media query after this block flattens the sweep instead -- see it for the arithmetic. */ --grad: linear-gradient(90deg, var(--grad-light) 0%, var(--grad-mid) 12%, var(--grad-deep) 25%, var(--grad-deep) 75%, var(--grad-mid) 88%, var(--grad-light) 100%); /* The button gradient is a different HUE on purpose: controls are ink in this scheme, and the ink gradient carries a white label at 14.16:1 and 18.88:1 -- every end of every state clears AA several times over, a deliberate overcorrection after the coral era shipped a 2.46:1 CTA for months. Do not yellow these to "match the strip"; the strip is decoration, this is a control, and no yellow can carry a label. */ --grad-cta: linear-gradient(135deg, #2b2b2b, #111111); --grad-cta-hover: linear-gradient(135deg, #242424, #0a0a0a); --grad-cta-active: linear-gradient(135deg, #111111, #000000); /* ---- Status --------------------------------------------------------- Each pairs a 4.5:1+ text colour with its own tint background. --gold is 1.72:1 and is therefore decoration only: a star fill, never a word, never an icon that has to be seen to be understood. Since 2026-09-12 it sits INSIDE the brand family (a second yellow, a step warmer than --accent) rather than beside it; same decoration-grade rules. Note --warn-bg is within 1.04:1 of --accent-soft: 7.2 ("never colour alone") means the tint may never be the only carrier, so any two chips that can share a view need a non-tint difference -- a word alone is enough only when the words differ AND nothing else matches; see index.html's .pill.run, which carries a pulsing dot for exactly this reason. */ --gold: #ffb900; --ok: #107c41; --ok-bg: #e6f2ea; --bad: #a4262c; --bad-bg: #fbeae9; --warn: #8a5a00; --warn-bg: #fff4d6; /* ---- Third-party brand marks ---------------------------------------- NOT part of our palette, and never to be used for our own UI -- these exist only so the OpenAI / Gemini / Claude marks in the home hero can be drawn in their real colours without a raw hex escaping into a page (rule 1 of docs/design-system.md). Their use is governed by the terms in docs/positioning.md 13; read that before putting a mark on a new surface. Deliberately NOT the icon vendor's flat hexes -- simple-icons lists OpenAI as #412991, which is not a mark anyone has seen. Gemini has no token at all: its 2025 mark carries Google's own multi-colour gradient and is inlined whole in index.html. --brand-claude was a hair off the coral accent the site carried until 2026-09-12; terracotta now reads as a distinct colour beside our yellow and ink, but the rule stands: never place a third-party mark where it could read as our brand. And the site is light-only, so --brand-openai is black; a dark theme needs a pass here. */ --brand-openai: #000000; --brand-claude: #d97757; /* ---- Lines ---------------------------------------------------------- --line and --line-soft are decorative separators at 1.19:1; they are fine for dividing content and NOT fine as the only boundary of an interactive control. WCAG 1.4.11 wants 3:1 for that, which is what --line-strong (3.10:1) is for -- inputs, checkboxes, outline buttons. Lightened from #8a8886 (3.53:1) on 2026-08-24: a 1px 3.53:1 edge around a 48px full-width field read as a dark box drawn around empty space. 3.10:1 is as light as this can legally go -- #979593 is already 2.98:1 and fails 1.4.11 -- so if an input's edge still looks heavy, the answer is a wider field or a filled surface, NOT a lighter value here. See design-system.md 2.1.3. */ --line: #edebe9; --card-line: #edebe9; --line-soft: #f3f2f1; --line-strong: #949290; /* ---- Type ----------------------------------------------------------- One stack everywhere: system-first, with Inter as the named fallback that the public pages also fetch from Google Fonts (design-system.md 2.2 -- this comment claimed "no webfont" until 2026-09-12, which §2.2 had corrected on 2026-08-22). It reads native next to the Office app we hand people a file for. The scale is nine steps. Anything not on it is off-scale. */ --font: -apple-system, "system-ui", Inter, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-display: calc(44px * var(--ui-scale)); --fs-h1: calc(32px * var(--ui-scale)); --fs-h2: calc(24px * var(--ui-scale)); --fs-h3: calc(19px * var(--ui-scale)); --fs-h4: calc(17px * var(--ui-scale)); --fs-body: calc(15px * var(--ui-scale)); --fs-sm: calc(13px * var(--ui-scale)); --fs-xs: calc(12px * var(--ui-scale)); --fs-micro: calc(11px * var(--ui-scale)); /* Tight leading for headings, generous for anything you actually read. */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Negative tracking on large type only -- it is a correction for optical looseness at size, and applying it to body text just hurts legibility. */ --ls-display: calc(-1.2px * var(--ui-scale)); --ls-h1: calc(-.7px * var(--ui-scale)); --ls-h2: calc(-.4px * var(--ui-scale)); --ls-h3: calc(-.2px * var(--ui-scale)); --ls-none: 0; --ls-caps: calc(.6px * var(--ui-scale)); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* ---- Space ---------------------------------------------------------- 4px base. Named by its 100% value so an off-scale number is obvious at the call site: var(--sp-24) is self-evidently on the scale, 26px is not. The name is the step, not the rendered length -- --sp-24 renders at 24 * --ui-scale. */ --sp-2: calc(2px * var(--ui-scale)); --sp-4: calc(4px * var(--ui-scale)); --sp-6: calc(6px * var(--ui-scale)); --sp-8: calc(8px * var(--ui-scale)); --sp-12: calc(12px * var(--ui-scale)); --sp-16: calc(16px * var(--ui-scale)); --sp-20: calc(20px * var(--ui-scale)); --sp-24: calc(24px * var(--ui-scale)); --sp-32: calc(32px * var(--ui-scale)); --sp-40: calc(40px * var(--ui-scale)); --sp-48: calc(48px * var(--ui-scale)); --sp-64: calc(64px * var(--ui-scale)); --sp-80: calc(80px * var(--ui-scale)); --sp-96: calc(96px * var(--ui-scale)); /* ---- Shape ---------------------------------------------------------- Three steps, deliberately. sm for controls, md for containers, full for anything pill-shaped. A fourth value is a design decision, not a tweak. */ /* --r-full is a shape, not a size: 999px means "pill" at any scale. */ --r-sm: calc(8px * var(--ui-scale)); --r-md: calc(12px * var(--ui-scale)); --r-full: 999px; /* ---- Elevation ------------------------------------------------------ Warm-black shadows (the neutral is #241814, not pure black) so they sit on a warm palette without going grey-blue -- tuned under coral, equally at home under marker yellow. Four steps: resting, raised, floating, showcase. Elevation belongs to SURFACES -- a card, a popover, a sheet, a showcase still. Controls are flat (2026-08-22): the accent-tinted --sh-accent and --sh-accent-lg that used to sit under the primary button are gone, and nothing replaces them. See design-system.md 5.1. */ --sh-1: 0 1px 2px rgba(36, 24, 20, .05); --sh-2: 0 4px 12px rgba(36, 24, 20, .08), 0 1px 2px rgba(36, 24, 20, .04); --sh-3: 0 12px 28px rgba(36, 24, 20, .16), 0 2px 6px rgba(36, 24, 20, .06); --sh-4: 0 24px 64px rgba(36, 24, 20, .24), 0 2px 8px rgba(36, 24, 20, .08); /* The halo samples --accent-dark (145,115,6), not the decoration yellow: a focus cue is a state and has to be perceivable. */ --ring: 0 0 0 3px rgba(145, 115, 6, .18); --scrim: rgba(36, 24, 20, .5); /* behind a modal */ /* The one dark surface in a light-only system: a log or code block, where the convention is strong enough that a light one reads as broken. */ --code-bg: #201f1e; --code-ink: #d6d2cf; /* ---- Motion --------------------------------------------------------- The browser's built-in ease-out is too weak to read as deliberate at UI durations, so both curves are the strong versions every surface shares -- a second, hand-rolled bezier somewhere else is a defect, not a variation. ease-out for anything entering or leaving, ease-in-out for something moving from one on-screen place to another. */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --dur-fast: 120ms; /* colour and opacity on a control you are touching */ --dur: 200ms; /* the default: hovers, small reveals */ --dur-slow: 320ms; /* sheets, accordions, anything with travel */ /* ---- Layout --------------------------------------------------------- */ --w-prose: calc(680px * var(--ui-scale)); /* legal and long-form: ~75 characters */ --w-page: calc(860px * var(--ui-scale)); /* a standard content page -- pricing, docs */ --w-content: calc(1100px * var(--ui-scale)); /* the marketing sections */ --w-narrow: calc(620px * var(--ui-scale)); /* centred section headers */ /* The one full-bleed step, for a showcase whose whole point is size: the before/after gallery. It breaks out of the page container on purpose, so it is capped rather than allowed to run to the width of a 5K display. */ --w-wide: calc(1920px * var(--ui-scale)); /* A floor in CSS px rather than a proportion, so it does not scale: WCAG 2.5.8 and Apple both ask for 44, and 44 is what a finger is. */ --tap: 44px; /* minimum touch target, coarse pointers */ } /* The gradient's deep zone is a percentage of the viewport, and the notch bar is centred content: below the navbar's own breakpoint the bar grows wider than the 38-62% core, and its outer labels -- Sign in, the burger, a signed-in email -- slide onto the light sweep, where white is illegible (--grad-mid is 1.34:1 under white). So at phone widths the deep zone widens to cover any bar the cap allows (the bar may run to 100% minus 16px when it carries an email; content starts ~20px in, and 2% of even the widest phone viewport is inside that), and the strip reads as a solid brand band with light tips. Same breakpoint as the navbar's burger (660 * --ui-scale -- a media query cannot read the knob, theme.css rule). All three notch surfaces sample this one token, so they stay seamless. */ @media (max-width: 726px) { /* 660 * --ui-scale */ :root { --grad: linear-gradient(90deg, var(--grad-light) 0%, var(--grad-deep) 2%, var(--grad-deep) 98%, var(--grad-light) 100%); } } /* ===================================================================== * * BASE * ===================================================================== */ /* Every in-page jump eases instead of teleporting: the .peek cue under the dropzone, the nav's Examples and FAQ links, the footer's. It needs no reduced-motion guard of its own -- the block below already forces scroll-behavior back to `auto` -- and .sec's scroll-margin-top is what keeps the landing clear of the fixed notch bar. */ html { scroll-behavior: smooth; } body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--body); } /* One focus ring for the whole product. Never remove it without replacing it. No border-radius here on purpose: outline already follows the element's own corners, and setting it would flatten pill-shaped controls the moment they take focus. */ :where(button, a, input, textarea, select, [tabindex]):focus-visible { /* --accent-dark, never --accent: the ring is a state, non-text contrast needs 3:1, and 4.51 clears it where 1.63 cannot (design-system.md 2.1). */ outline: 2px solid var(--accent-dark); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== * * BUTTONS — four variants, three sizes, one base. * * Variant picks the weight in the hierarchy, size picks the room it takes. * The rule for choosing between a button and a link is in design-system.md * 5.2 and it is about behaviour, not appearance: a control that PERFORMS an * action is a button, a control that NAVIGATES is a link. A