/* ==========================================================================
OnTheTools brand tokens for the website
--------------------------------------------------------------------------
Source of truth: "OnTheTools brand guide.pdf" (15 Oct 2026, 7 pages) and
the brand kit's 5 Colours/OnTheTools-colours.txt, which were taken from the
app's own lib/theme.ts. Every colour below is a colour the app uses. Do not
add a hue here; a web-only token is a tint/alpha OF a brand colour and is
marked "web".
This file holds tokens, the Inter @font-face and four tiny brand
primitives (wordmark, brand surfaces, the one action, focus). Page layout
belongs in the page's own CSS. Rules for using all this: survey-brand.md.
Light theme only (matches the app). No dark-mode remap on purpose: the
ink "calm space" sections below are a design choice, not a theme.
========================================================================== */
/* --------------------------------------------------------------------------
Font: Inter, self-hosted. Latin subset of Inter 4.001 (SIL OFL 1.1, see
fonts/Inter-OFL.txt), cut from the variable font with both axes kept:
wght 300-800 (300 for big light lines, 800 for the launch lockup)
opsz 14-32 (browser picks it from font-size: text cut at 14-20px,
the tighter "Display" cut from 32px up)
One 70 KB file covers every weight and size. Preload it:
-------------------------------------------------------------------------- */
@font-face {
font-family: "Inter";
src: url("fonts/inter-latin-var.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}
:root {
color-scheme: light;
/* ======================================================================
COLOUR - brand (guide p4 "Brand")
====================================================================== */
--c-orange: #FF6B00; /* THE brand orange. One per view. 'Tools' on white. */
--c-orange-launch: #F45B0A; /* Launch screen; first stop of the brand gradient. */
--c-orange-light: #FF8A1C; /* Last stop of the brand gradient. */
--c-band-1: #F4510B; /* Header band, first stop. */
--c-band-2: #FF6B0B; /* Header band, middle stop. */
--c-band-3: #FF861F; /* Header band, last stop. */
/* COLOUR - text and backgrounds (guide p4) */
--c-ink: #1C1C1E; /* Main text. 'OnThe' on white. 17.0:1 on white. */
--c-grey: #6E6E73; /* Second-line text, labels. 5.07:1 on white, 4.54:1 on page grey. */
--c-grey-light: #8A8A8E; /* Hints inside empty fields ONLY. 3.44:1 - never a control, never body text. */
--c-page: #F2F2F7; /* Page behind white cards. */
--c-white: #FFFFFF; /* Cards and pages. */
--c-card-edge: #DFDFE4; /* Thin line around a card. */
--c-line: rgba(60, 60, 67, 0.14); /* Inner hairline (app LINE). */
/* COLOUR - soft oranges (guide p4) */
--c-orange-tint: #FFF2E8; /* Small tile behind an icon. Never a section background. */
--c-chat-bubble: #FFE7D6; /* Your own messages in chat. */
--c-cream: #FFE1C4; /* Highlighted word in white headings on orange. */
--c-orange-soft-text: #FFD3B0; /* Quiet text on orange. */
--c-orange-line: #F8CDAE; /* Thin orange border. */
--c-tools-on-orange-print: #FFD9BD; /* 'Tools' on orange where opacity is impossible. */
/* COLOUR - money and alerts (guide p4). Green/red mean money state only. */
--c-green: #15803D; /* Money landed. Work done. 5.02:1 on white. */
--c-green-tint: #ECFDF5;
--c-red: #B42318; /* Errors. Delete. Failed payment. 6.57:1 on white. */
--c-red-tint: #FEE4E2;
--c-amber: #F59E0B; /* Warnings (e.g. weather). Icon/dot only, never text. */
/* COLOUR - on dark "calm space" sections (web: white alphas over ink) */
--c-on-ink: #FFFFFF; /* 17.0:1 */
--c-on-ink-muted: rgba(255, 255, 255, 0.64); /* = #ADADAE on ink, 7.6:1 */
--c-on-ink-line: rgba(255, 255, 255, 0.12);
--c-orange-on-ink: var(--c-orange); /* Orange text IS readable on ink: 5.96:1 */
/* COLOUR - on the orange (guide p2/p3) */
--c-on-orange: #FFFFFF;
--a-tools-on-orange: 0.74; /* 'Tools' in the logo on orange: white at 74% */
--a-tagline-on-orange: 0.84; /* Tagline on orange: white at 84% */
/* COLOUR - roles (use these in page CSS, not the raw hexes) */
--text: var(--c-ink);
--text-2: var(--c-grey);
--text-hint: var(--c-grey-light);
--bg: var(--c-white); /* Pages are white unless they lay out cards. */
--bg-cards: var(--c-page); /* A page whose job is a grid of white cards. */
--bg-calm: var(--c-ink); /* The one dark "calm space" a page may have. */
--surface: var(--c-white);
--border: var(--c-card-edge);
--hairline: var(--c-line);
/* ======================================================================
GRADIENTS (guide p3/p4). "Top-left to bottom-right" = "to bottom right".
The only big orange areas allowed: a launch-screen moment and the band.
====================================================================== */
--grad-brand: linear-gradient(to bottom right, #F45B0A 0%, #FF6B00 56%, #FF8A1C 100%);
--grad-band: linear-gradient(to bottom right, #F4510B 0%, #FF6B0B 56%, #FF861F 100%);
/* ======================================================================
TYPE - family
====================================================================== */
--font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-features-tabular: "tnum" 1; /* money, counts, dates in columns */
/* TYPE - weights (Inter variable 300-800) */
--fw-light: 300; /* big marketing lines (mega / hero) */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700; /* the wordmark; button labels */
--fw-extrabold: 800; /* launch lockup wordmark only */
/* TYPE - web scale. The app's nine sizes (guide p5) are kept 1:1 from
heading down; the web adds bigger, lighter lines on top and two small
web-only roles. Each role = size / line-height / weight / tracking.
Phone -> desktop values in comments are at 390 px and 1440 px. */
/* web: one huge line or word per page (e.g. "Sorted.") 57 -> 160 px */
--fs-mega: clamp(3.5rem, 1.2rem + 9.6vw, 10rem);
--lh-mega: 0.9;
--fw-mega: var(--fw-light);
--ls-mega: -0.055em;
/* web: the hero line 42 -> 104 px */
--fs-hero: clamp(2.625rem, 1.3rem + 5.6vw, 6.5rem);
--lh-hero: 0.98;
--fw-hero: var(--fw-light);
--ls-hero: -0.045em;
/* web: section headline 34 -> 68 px */
--fs-display: clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem);
--lh-display: 1.04;
--fw-display: var(--fw-regular);
--ls-display: -0.035em;
/* app "Title" 24/30 bold on phone, grows to 40 px */
--fs-title: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
--lh-title: 1.12;
--fw-title: var(--fw-semibold);
--ls-title: -0.025em;
/* app "Heading" 20/26 SemiBold */
--fs-heading: 1.25rem;
--lh-heading: 1.3;
--fw-heading: var(--fw-semibold);
--ls-heading: -0.0175em;
/* web: intro paragraph under a headline 18 -> 22 px, grey */
--fs-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
--lh-lead: 1.45;
--fw-lead: var(--fw-regular);
--ls-lead: -0.011em;
/* app "Card title" 17/24 SemiBold */
--fs-card-title: 1.0625rem;
--lh-card-title: 1.41;
--fw-card-title: var(--fw-semibold);
--ls-card-title: -0.018em;
/* app "Body" 16/24 Regular, "Body strong" 16/24 SemiBold */
--fs-body: 1rem;
--lh-body: 1.5;
--fw-body: var(--fw-regular);
--fw-body-strong: var(--fw-semibold);
--ls-body: 0;
/* app "Label" 15/20 Medium */
--fs-label: 0.9375rem;
--lh-label: 1.33;
--fw-label: var(--fw-medium);
--ls-label: -0.013em;
/* app "Small" 14/20 Regular - the floor for normal text */
--fs-small: 0.875rem;
--lh-small: 1.43;
--fw-small: var(--fw-regular);
--ls-small: 0;
/* web: small print only ("App screens show sample data.", footer legal) */
--fs-fine: 0.8125rem;
--lh-fine: 1.38;
--fw-fine: var(--fw-regular);
--ls-fine: 0.005em;
/* web: eyebrow over a headline, uppercase */
--fs-eyebrow: 0.75rem;
--lh-eyebrow: 1.33;
--fw-eyebrow: var(--fw-semibold);
--ls-eyebrow: 0.12em;
/* app "Badge" 11/14 SemiBold - tiny badges only (e.g. PRO, "iPhone") */
--fs-badge: 0.6875rem;
--lh-badge: 1.27;
--fw-badge: var(--fw-semibold);
--ls-badge: 0.036em;
/* the orange button's label: 19 px bold = WCAG "large text", which is what
lets white sit on the launch orange (3.31:1, needs 3:1) */
--fs-button: 1.1875rem;
--fw-button: var(--fw-bold);
--ls-button: -0.01em;
/* the wordmark as live text (guide p2): Inter, 28pt optical cut, Bold, -3% */
--wordmark-weight: var(--fw-bold);
--wordmark-tracking: -0.03em;
--wordmark-opsz: 28;
--wordmark-min-width: 100px; /* smallest on screen */
/* ======================================================================
SPACE - 4 px base (app gutters 20, fact rows 24, sections 32)
====================================================================== */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 app gutter */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--space-40: 10rem; /* 160 */
/* fluid layout space */
--gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem); /* page side margin 20 -> 48 */
--section-y: clamp(5rem, 2.6rem + 9.8vw, 11rem); /* between sections 80 -> 176 */
--stack-lg: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); /* headline -> content 40 -> 80 */
--stack-md: clamp(1.25rem, 1rem + 1vw, 2rem); /* headline -> lead 20 -> 32 */
--grid-gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); /* card grids 16 -> 28 */
/* layout widths */
--container: 75rem; /* 1200 content */
--container-wide: 90rem; /* 1440 full-bleed rows (parades, screenshot rails) */
--container-text: 40rem; /* 640 legal / support text column */
--measure: 34em; /* max line length for paragraphs */
--header-h: 4rem; /* 64 */
--tap-min: 44px; /* smallest touch target */
/* ======================================================================
RADII (app RADIUS + web additions). Nest: inner = outer - padding.
====================================================================== */
--r-xs: 6px; /* web: badge, small tag */
--r-control: 12px; /* app: fields, small controls */
--r-card: 14px; /* app: list cards */
--r-panel: 16px; /* app: onboarding / settings cards */
--r-sheet: 20px; /* app: sheets */
--r-tile: 28px; /* web: large feature tiles, image frames */
--r-pill: 999px; /* buttons, search, chips */
--r-app-icon: 22.37%; /* iOS icon mask, close enough to the squircle; the PNG is square */
/* iPhone screenshot corners. The staged shots are 1206x2622 px (iPhone
16/17 Pro). Measured off Xcode's own screen mask for that device
(CoreSimulator "iPhone 16 Pro" framebufferMask PDF): the corner's 45-degree
point sits 55 px in, which is a 188 px circular radius (~62.6 pt) =
15.6% of the width, 7.17% of the height. Use on the ![]()
itself. */
--r-device: 15.6% / 7.17%;
/* ======================================================================
SHADOWS (from the app's styles: black, soft, never coloured glows)
====================================================================== */
--shadow-0: 0 0 0 1px var(--c-line); /* hairline only */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06); /* resting card on white */
--shadow-2: 0 6px 16px rgba(0, 0, 0, 0.14); /* app tile / raised */
--shadow-3: 0 12px 28px rgba(0, 0, 0, 0.16); /* app popover / sheet */
--shadow-action: 0 6px 16px rgba(0, 0, 0, 0.18); /* app's orange button */
--shadow-device: 0 1px 2px rgba(0, 0, 0, 0.05),
0 24px 48px -16px rgba(28, 28, 30, 0.28),
0 64px 120px -48px rgba(28, 28, 30, 0.30); /* web: a floating phone screen */
/* ======================================================================
FOCUS - ink ring (17:1). Orange fails 3:1 on white (2.86:1).
====================================================================== */
--focus-ring: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-ink);
--focus-ring-on-dark: 0 0 0 2px var(--c-ink), 0 0 0 4px var(--c-white); /* on ink or orange */
/* ======================================================================
THE ONE ACTION (orange pill). The app's primaryButton: 56 tall, pill.
Web change, for WCAG: the fill is the launch orange (#F45B0A) not
#FF6B00, and the label is 19 px bold. White on #FF6B00 is 2.86:1, which
fails even large text; white on #F45B0A is 3.31:1, which passes for
large text. The two oranges sit next to each other in the brand gradient.
====================================================================== */
--btn-primary-bg: var(--c-orange-launch);
--btn-primary-bg-hover: var(--c-band-1); /* #F4510B, 3.48:1 */
--btn-primary-fg: var(--c-white);
--btn-primary-h: 56px;
--btn-primary-px: 28px;
/* the quiet button: ink pill (a second action may never be orange) */
--btn-ink-bg: var(--c-ink);
--btn-ink-fg: var(--c-white);
--btn-h: 48px;
--btn-px: 22px;
/* the tertiary button: grey fill pill, ink words (app CHAT_CHIP) */
--btn-quiet-bg: rgba(0, 0, 0, 0.05);
--btn-quiet-bg-hover: rgba(0, 0, 0, 0.1);
/* ======================================================================
MOTION (app MOTION + web reveal). Calm: no bounce, no overshoot.
====================================================================== */
--dur-press: 110ms;
--dur-fade: 200ms;
--dur-entrance: 190ms;
--dur-screen: 330ms;
--dur-reveal: 700ms; /* web: section content arriving on scroll */
--dur-slow: 1200ms; /* web: one slow hero move (nut turn, parade drift) */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--lift-press: scale(0.98); /* press feedback, like the app's PressableScale */
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-press: 1ms;
--dur-fade: 1ms;
--dur-entrance: 1ms;
--dur-screen: 1ms;
--dur-reveal: 1ms;
--dur-slow: 1ms;
--lift-press: none;
}
}
/* ==========================================================================
BRAND PRIMITIVES - opt-in classes, prefixed "ott-". Only things that are
easy to get wrong and are defined by the guide.
========================================================================== */
/* The wordmark as live text (guide p2 "Make it yourself"). Prefer the SVG
files in brand/logo/; use this where live text is better (e.g. a footer).
OnTheTools
Add .ott-wordmark--on-orange on the gradient. Never add a space. */
.ott-wordmark {
font-family: var(--font-sans);
font-weight: var(--wordmark-weight);
letter-spacing: var(--wordmark-tracking);
font-variation-settings: "opsz" var(--wordmark-opsz);
font-optical-sizing: none;
line-height: 1;
white-space: nowrap;
color: var(--c-ink);
}
.ott-wordmark__tools { color: var(--c-orange); }
.ott-wordmark--on-orange { color: var(--c-white); }
.ott-wordmark--on-orange .ott-wordmark__tools {
color: rgba(255, 255, 255, var(--a-tools-on-orange));
}
/* The two brand surfaces. Big orange = one per page at most. */
.ott-surface-brand { background: var(--c-orange-launch) var(--grad-brand); color: var(--c-on-orange); }
.ott-surface-band { background: var(--c-band-1) var(--grad-band); color: var(--c-on-orange); }
.ott-surface-calm { background: var(--c-ink); color: var(--c-on-ink); }
/* The one orange action. One per view. */
.ott-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-primary-h);
padding: 0 var(--btn-primary-px);
border: 0;
border-radius: var(--r-pill);
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
font: var(--fw-button) var(--fs-button)/1 var(--font-sans);
letter-spacing: var(--ls-button);
text-decoration: none;
box-shadow: var(--shadow-action);
cursor: pointer;
transition: background-color var(--dur-fade) var(--ease-standard),
transform var(--dur-press) var(--ease-standard);
}
.ott-action:hover { background: var(--btn-primary-bg-hover); }
.ott-action:active { transform: var(--lift-press); }
/* Focus: visible for keyboard users on every interactive element. */
.ott-focus:focus-visible,
.ott-action:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.ott-surface-brand .ott-focus:focus-visible,
.ott-surface-band .ott-focus:focus-visible,
.ott-surface-calm .ott-focus:focus-visible {
box-shadow: var(--focus-ring-on-dark);
}