/* ========================================================= Toto Design System — tokens Single source of truth. Import in any HTML: ── Philosophy ──────────────────────────────────────────── The six brand colors are the system. We don't dilute them with derivative tints. We use the brand colors at full strength, on cream, and let copy + composition do the work. Three small, justified additions are documented below. ── Typography layers ───────────────────────────────────── Four layers, four jobs, never blurred: Layer Token Family ───────────────────────────────────────────────────── 01 word --font-wordmark Toto Wordmark (custom) 02 disp --font-display Instrument Serif 03 body --font-ui IBM Plex Sans 04 accnt --font-accent Caveat (sparingly) The wordmark font is supplied as a local .woff2 file in /assets/fonts/ — see /assets/fonts/README.md. ========================================================= */ /* ── Web fonts ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ── The wordmark artwork ────────────────────────────────── The "Toto" wordmark is a hand-drawn ARTWORK, not a font. We render it as a CSS mask of a transparent PNG so it can tint any brand color. The data URL lives in toto-wordmark-inline.css. Replace that asset to swap with a new wordmark drawing later. */ @import url('toto-wordmark-inline.css'); /* ── The accent font ─────────────────────────────────────── Local Caveat Regular, supplied by brand owner. Used for one handwritten accent moment per surface (“hey, you made it!”). Same brush family as the wordmark; different glyphs. */ @font-face { font-family: "Toto Accent"; src: url("fonts/toto-wordmark-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ── BRAND PALETTE — the six. Never edited. ─────────── */ --toto-sky: #A8BDD4; /* dusty sky blue */ --toto-wine: #5A2E3F; /* deep wine — primary anchor */ --toto-cream: #F5EFE2; /* page background */ --toto-sage: #5C7A68; /* the "yes" green */ --toto-peach: #E8C49A; /* warm accent */ --toto-warmgray: #7E6E68; /* secondary chrome, metadata */ /* ── THE THREE JUSTIFIED ADDITIONS ─────────────────── */ /* 1) Body-text foreground. Matches index.css --foreground. Warm wine-black (also the breed line-art colour). ~14.6:1 on cream. (Was #1B1411 “ink” earlier — that was off-system.) */ --toto-ink: #2A1B20; /* 2) Pressed/active state for wine buttons. Same hue, darker by ~8% L. Needed for tactile UI feedback. */ --toto-wine-pressed: #421F2C; /* 3) Hairline. Warmgray @ 16% alpha — the only derivative used for borders/dividers. */ --toto-hairline: rgba(126, 110, 104, 0.16); /* ── index.css BRIDGE ──────────────────────────────── Mirrors the Tailwind-v4 token names from index.css so code written against either convention resolves from this one file. Values are identical to index.css (light theme). */ --background: var(--toto-cream); /* #F5EFE2 */ --background-muted: #EAE4D7; --background-secondary: var(--toto-wine); /* #5A2E3F */ --foreground: var(--toto-ink); /* #2A1B20 */ --foreground-muted: var(--toto-warmgray);/* #7E6E68 */ --foreground-secondary: var(--toto-wine); --card: #EFE9DC; --card-foreground: var(--toto-ink); --primary: var(--toto-wine); --primary-foreground: var(--toto-cream); --secondary: #EFE9DC; --secondary-foreground: var(--toto-wine); --border: #C9BEAA; --input: var(--toto-cream); --ring: var(--toto-wine); --info: var(--toto-sky); --warning: var(--toto-peach); --error: #B33A3A; /* the one non-brand colour: destructive/failure */ /* ── Semantic — surface ─────────────────────────────── */ --bg-page: var(--toto-cream); --bg-card: var(--toto-cream); --bg-inverse: var(--toto-wine); --bg-scrim: rgba(27, 20, 17, 0.36); /* ── Semantic — foreground ──────────────────────────── */ --fg-1: var(--toto-ink); --fg-2: var(--toto-warmgray); --fg-display: var(--toto-wine); --fg-on-wine: var(--toto-cream); --fg-on-sage: var(--toto-cream); --fg-on-peach: var(--toto-wine); --fg-link: var(--toto-wine); /* ── Semantic — state ──────────────────────────────── Brand colors carry state. We do not add error red / warning yellow — copy and context carry that signal. */ --success: var(--toto-sage); --accent: var(--toto-peach); --info: var(--toto-sky); /* ── Borders ────────────────────────────────────────── */ --border-hairline: var(--toto-hairline); /* ── Radius — restrained, editorial ─────────────────── */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px; /* ── Spacing (4px base) ─────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Shadows — two steps, soft, never decorative ────── */ --shadow-1: 0 1px 2px rgba(31,20,17,.05), 0 4px 12px rgba(31,20,17,.04); --shadow-2: 0 4px 12px rgba(31,20,17,.06), 0 16px 32px rgba(31,20,17,.08); /* ── Motion ─────────────────────────────────────────── */ --ease-out: cubic-bezier(.4, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .6, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; /* ── Type families — the four layers ────────────────── */ /* 01 · Wordmark — the brand's signature. NOT a font. Rendered as a CSS mask of the hand-drawn PNG — see .wm class below. This token is kept for legacy callers that expect a font-family chain; new code should use .wm. */ --font-wordmark: "Toto Accent", "Brush Script MT", cursive; /* 02 · Display — headlines, page titles, pull quotes. Locked: Instrument Serif at 400 + italic 400. */ --font-display: "Instrument Serif", "Recoleta", Georgia, "Times New Roman", serif; /* 03 · Body / UI — paragraphs, buttons, labels, lists. Locked: IBM Plex Sans at 400, 500, 600, 700. */ --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* 04 · Accent — one handwritten moment per surface. Local Caveat Regular (the brand owner's upload). Brand-distinct from the wordmark artwork — same brush family, different glyphs. */ --font-accent: "Toto Accent", "Brush Script MT", cursive; /* Reserved for technical surfaces — receipts, code, timestamps. */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── Type scale ─────────────────────────────────────── */ --fs-display: 64px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 18px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px; --lh-tight: 1.02; --lh-snug: 1.15; --lh-normal: 1.45; --lh-relaxed: 1.55; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.1em; } /* ── Base ───────────────────────────────────────────────── */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-wrap: pretty; } /* ── Semantic type styles ─────────────────────────────── */ /* Wordmark — the brand signature, rendered as a CSS mask of the hand-drawn PNG. Color follows currentColor / `color:` so the wordmark tints to any brand color. Scale via font-size: height tracks 1em. The inner "Toto" text is hidden visually but kept for screen readers. */ .t-wordmark, .wm { display: inline-block; height: 1em; width: calc(1em * var(--toto-wordmark-ratio, 1.77)); background-color: currentColor; color: var(--toto-wine); -webkit-mask-image: var(--toto-wordmark-image); mask-image: var(--toto-wordmark-image); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: -0.12em; line-height: 1; /* Hide the inner "Toto" text content (kept for a11y / copy-paste) */ text-indent: -200vw; white-space: nowrap; overflow: hidden; } /* Accent — same family, lighter weight; one moment per surface. */ .t-accent { font-family: var(--font-accent); font-weight: 500; font-style: normal; line-height: 1.1; color: var(--toto-wine); } /* Display sets the editorial tone. Used sparingly, sized large. */ .t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 400; color: var(--fg-display); } .t-h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--tracking-tight); font-weight: 400; color: var(--fg-display); } .t-h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; color: var(--fg-display); } .t-h3, h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; font-weight: 400; color: var(--fg-1); } .t-h4, h4 { /* UI-sans for the smallest titles — keeps long lists scannable. */ font-family: var(--font-ui); font-size: var(--fs-h4); line-height: 1.25; font-weight: 600; color: var(--fg-1); } .t-body, p { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); } .t-small { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); } .t-micro { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-2); } .t-eyebrow { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--toto-warmgray); } .t-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }