/* ============================================================ SENSEI — Japandi Technical Design System colors_and_type.css Foundational + semantic CSS variables for color and type. Three webfonts only — Roboto Slab (wordmark), Space Grotesk (headlines, titles, labels + machine metadata) and Oxanium (tagline / deck titles); all are freely available on Google Fonts. Body text uses the native system sans, so it costs no download at all. Space Grotesk replaced Space Mono in the v4–v6 type overhaul (Space Mono was rendering key reading areas illegible as a non-proportional face). ============================================================ */ /* Webfonts are loaded via a in each HTML file's (see any preview card or the UI kit index). Roboto Slab in particular must be linked directly — loading it through a nested @import here did not resolve reliably. Space Grotesk / Oxanium are kept as @import fallbacks for portability. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&display=swap'); /* Icon font removed: UI icons are inline SVG symbols (see mark-sprite.js), so they render in the first paint with no font download. */ :root { /* --------------------------------------------------------- 1. CORE COLOR PALETTE (raw brand tokens) --------------------------------------------------------- */ /* Ink — the structural plum. Two depths. */ --ink: #331e38; /* "Primary" in the brand guide — buttons, headings, structure */ --ink-deep: #1c0922; /* Deepest plum — full-bleed auth backgrounds, focus mode */ --ink-tint: #28142d; /* on-primary-fixed */ --ink-soft: #a084a3; /* on-primary-container — muted plum on dark */ /* Washi — warm parchment / paper. */ --washi: #f4e4ba; /* "Secondary" — logo color, highlight text on plum */ --washi-container: #eedfb5; /* secondary-container — tags, soft fills */ --washi-fixed: #f1e1b8; /* secondary-fixed */ --bronze: #695e3d; /* secondary — olive/bronze labels & accents */ --bronze-deep: #504627; /* on-secondary-fixed-variant */ /* Slate — the cool counterpoint (decorative / secondary icons). */ --slate: #70a0af; /* Tertiary (brand guide) — chips, decorative icons */ --slate-ink: #001319; /* tertiary (config) — deepest slate */ --slate-container: #002a34; /* tertiary-container */ --slate-soft: #6494a3; /* on-tertiary-container */ --slate-fixed: #b9eafb; /* tertiary-fixed — pale slate on dark */ --slate-fixed-dim: #9dcede; /* Neutral surfaces — the airy canvas (Ma). */ --background: #f9f9f9; /* surface / background */ --surface-lowest: #ffffff; --surface-low: #f4f3f3; --surface: #eeeeee; /* "Neutral" — primary container surface */ --surface-high: #e8e8e8; --surface-highest: #e2e2e2; --surface-dim: #dadada; --card-warm-grey: #dfdfdc; /* warm grey used in card label bars / recipe panels */ /* Text + lines */ --on-surface: #1a1c1c; /* primary text */ --on-surface-variant:#4c454b; /* secondary text */ --outline: #7d747c; /* strong hairline */ --outline-variant: #cec3cc; /* soft hairline / borders */ --inverse-surface: #2f3131; --inverse-on-surface:#f1f1f1; /* Status */ --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container:#93000a; /* --------------------------------------------------------- 2. SEMANTIC COLOR ALIASES --------------------------------------------------------- */ --fg-1: var(--on-surface); /* primary foreground */ --fg-2: var(--on-surface-variant); /* secondary foreground */ --fg-3: var(--outline); /* tertiary / hint */ --fg-on-ink: var(--washi); /* text on plum backgrounds */ --bg-page: var(--background); --bg-card: var(--surface-lowest); --bg-card-label: var(--card-warm-grey); --bg-inverse: var(--ink-deep); --accent: var(--ink); --accent-text: var(--washi-container); /* text inside a plum button */ --decorative: var(--slate); --border: var(--outline-variant); --border-strong: var(--ink); /* --------------------------------------------------------- 3. TYPE FAMILIES --------------------------------------------------------- */ --font-brand: 'Roboto Slab', serif; /* Logo / wordmark — Bold */ --font-display: 'Space Grotesk', sans-serif; /* Headlines, titles, section heads (weight 600) */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Long-form body — native system sans, no webfont */ --font-action: 'Space Grotesk', sans-serif; /* Buttons, tags, field + nav labels, eyebrows */ --font-mono: 'Space Grotesk', sans-serif; /* Machine metadata — timestamps, code */ --font-deck: 'Oxanium', sans-serif; /* Presentation titles / tagline */ /* --------------------------------------------------------- 4. TYPE SCALE (foundational steps) --------------------------------------------------------- */ --text-display: 48px; /* display-lg */ --text-headline: 32px; /* headline-lg */ --text-title: 20px; /* ALL section + card titles, names */ --text-headline-sm: 20px; /* alias → --text-title (kept for back-compat) */ --text-body: 16px; /* body-md */ --text-body-sm: 14px; /* secondary body / helper copy */ --text-meta: 13px; /* mono metadata — timestamps, counts */ --text-label: 12px; /* label-caps eyebrows / tags (12 is the floor) */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-body: 1.6; --leading-meta: 1.4; --tracking-display: -0.02em; --tracking-meta: 0.05em; --tracking-label: 0.12em; --tracking-wide: 0.2em; /* --------------------------------------------------------- 5. SPACING (8px base — "Ma") --------------------------------------------------------- */ --space-base: 8px; --space-gutter: 24px; --margin-mobile: 16px; --margin-desktop: 64px; --max-width: 1200px; /* --------------------------------------------------------- 6. SHAPE / ELEVATION Sharp (0px) language; depth via tone + hairlines, not shadow. --------------------------------------------------------- */ --radius: 0px; /* everything is square */ --radius-pill: 9999px; /* sole exception: status dots / pills */ --border-hair: 1px solid var(--outline-variant); --border-ink: 1px solid var(--ink); --border-ink-10: 1px solid rgba(51, 30, 56, 0.10); /* The brand avoids drop shadows. These are the only sanctioned "elevations": a faint hairline, and a focus-mode dot texture. */ --shadow-none: none; --texture-dots-light: radial-gradient(rgba(51,30,56,0.04) 1px, transparent 1px); --texture-dots-ink: radial-gradient(rgba(244,228,186,0.05) 1px, transparent 1px); /* Scrim — transparency is ONLY ever a veil over media (photography, video). Used by the category tiles: a plum veil under the name plate so it stays legible on light and dark photo frames alike. */ --scrim-media: rgba(28,9,34,0.55); } /* ============================================================ SEMANTIC TYPE CLASSES Use these directly, or copy the rules into your own sheet. ============================================================ */ .brand { /* wordmark */ font-family: var(--font-brand); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .display, h1.display { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--ink); } h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-headline); line-height: var(--leading-snug); color: var(--ink); } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-headline-sm); line-height: var(--leading-snug); color: var(--ink); } p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body); line-height: var(--leading-body); color: var(--fg-2); } .meta { /* timestamps, captions */ font-family: var(--font-mono); font-size: var(--text-meta); line-height: var(--leading-meta); letter-spacing: var(--tracking-meta); color: var(--fg-2); } .label, label.label { /* field labels, tag text, eyebrows — Space Grotesk chrome */ font-family: var(--font-action); font-weight: 700; font-size: var(--text-label); line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-2); } code, .code { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--ink); }