/* =============================================================================
CHOPAKA LABS — DESIGN TOKENS (single source of truth)
-----------------------------------------------------------------------------
This file is the ONE place brand values live. Everything that renders the
brand — this design project's HTML, and the Svelte/Tailwind product codebase —
should consume these variables rather than hard-coding hex values or fonts.
To change the brand: edit a value HERE. Do not copy hex codes elsewhere.
TWO LAYERS:
1. RAW PALETTE — the fixed brand colors (--steel, --slate-800, --cloud …).
These never change between light/dark. Use them when you
specifically mean that exact brand color (e.g. the wordmark).
2. SEMANTIC ROLES — what a color is FOR (--color-bg, --color-text,
--color-primary …). These REMAP per theme. Build UI against
these so the same markup works in dark OR light.
THEMING: dark is the default (:root). Add data-theme="light" to (or
any container) to switch that subtree to the light theme.
…
How it's consumed:
• Plain HTML / CSS .... → var(--color-bg)
• Tailwind v4 ......... @import "tokens.css"; map roles in an @theme block (see README)
• Tailwind v3 ......... reference the vars in tailwind.config.js (see README)
Brand v1 — LOCKED 2026-05. Palette: Slate & Steel.
============================================================================= */
:root {
/* =========================================================================
LAYER 1 — RAW PALETTE (fixed; identical in every theme)
========================================================================= */
/* ---- Slate (dark surfaces) ------------------------------------------- */
--slate-900: #24252c; /* deepest surface */
--slate-800: #2f3038; /* dark base background */
--slate-700: #3a3b45; /* dark cards, panels */
--slate-600: #494a56; /* dark hairlines on raised surfaces, dividers */
/* ---- Paper (light surfaces) ------------------------------------------ */
--paper: #f6f7f8; /* light base background (cool near-white) */
--paper-card: #ffffff; /* light cards / raised surfaces */
--cloud-2: #ebeced; /* light recessed fill / subtle tint */
/* ---- Brand color ----------------------------------------------------- */
--steel: #577198; /* PRIMARY — the "PAKA" color, CTAs */
--steel-deep: #44587a; /* steel pressed/hover; steel-as-text/link on light */
--sky: #6f9ec3; /* ACCENT — active state, kickers; link on dark */
/* ---- Neutrals / text ------------------------------------------------- */
--cloud: #dededf; /* primary text on dark + the mark on dark */
--cloud-dim: #abafb8; /* muted text on dark */
--mist: #838894; /* tertiary text (works on either theme) */
--ink: #24252c; /* primary text on light (= slate-900) */
--ink-muted: #5c616b; /* muted text on light (AA on paper) */
/* hairlines */
--line: rgba(222,222,223,0.12); /* hairline on dark */
--line-light: rgba(36,37,44,0.12); /* hairline on light */
/* ---- Functional / status (NEVER brand identity) ---------------------- */
--online: #3fae6b; /* live node, success */
--alert: #e0584e; /* freeze warning, danger */
--online-ink: #2e8f55; /* darker online for text/icons on light (AA) */
--alert-ink: #c0392f; /* darker alert for text/icons on light (AA) */
/* ---- Typography ------------------------------------------------------ */
/* Load from Google Fonts:
Archivo (500-900) · IBM Plex Sans (400-600) · IBM Plex Mono (400-500) */
--font-display: 'Archivo', sans-serif; /* wordmark, lockups, headlines — wt 800/900 */
--font-body: 'IBM Plex Sans', sans-serif; /* UI, paragraphs, labels */
--font-mono: 'IBM Plex Mono', monospace; /* coordinates, serials, readings, kickers */
/* type weights (semantic) */
--wt-display: 900;
--wt-headline: 800;
--wt-strong: 600;
--wt-medium: 500;
--wt-body: 400;
/* ---- Type scale (modular; rem @ root 16px) --------------------------- */
/* px equivalents in comments. Web/app use rem (respects user zoom);
decks & print use the px values on their fixed canvas. */
--text-xs: 0.75rem; /* 12px — fine print, legal */
--text-sm: 0.875rem; /* 14px — captions, secondary UI, kicker base */
--text-base: 1rem; /* 16px — body */
--text-md: 1.125rem; /* 18px — lead / large body */
--text-lg: 1.25rem; /* 20px — card titles, h4 */
--text-xl: 1.5rem; /* 24px — h3 */
--text-2xl: 1.875rem; /* 30px — h2 */
--text-3xl: 2.25rem; /* 36px — h1 (page) */
--text-4xl: 3rem; /* 48px — display */
--text-5xl: 3.75rem; /* 60px — large display */
--text-6xl: 4.5rem; /* 72px — hero */
--text-7xl: 6rem; /* 96px — deck hero */
/* line-heights (pair tighter LH with larger sizes) */
--lh-none: 1; /* display / big numerals */
--lh-tight: 1.1; /* headlines */
--lh-snug: 1.25; /* subheads, card titles */
--lh-normal: 1.5; /* body */
--lh-relaxed: 1.6; /* long-form reading */
/* letter-spacing (tracking) */
--tracking-tight: -0.02em; /* display (Archivo 900) */
--tracking-snug: -0.01em; /* headlines */
--tracking-normal: 0; /* body, data */
--tracking-wide: 0.08em; /* small caps labels */
--tracking-kicker: 0.2em; /* mono kickers, all-caps */
/* ---- Radius ---------------------------------------------------------- */
--radius-sm: 6px; /* small chips / favicons */
--radius-md: 12px; /* cards */
--radius-lg: 16px; /* panels, stages */
--radius-xl: 28px; /* app icons */
/* ---- Spacing (8px base; the --space-* ramp) -------------------------- */
/* One ramp for padding, gaps, and stacks across web, app, decks, print.
8px-aligned (the 4px and 12px steps are the half-steps you'll actually use
for control padding). Build component spacing from THESE, not magic numbers. */
--space-0: 0;
--space-1: 0.25rem; /* 4px — icon↔label gap, hairline insets */
--space-2: 0.5rem; /* 8px — tight stacks, chip padding */
--space-3: 0.75rem; /* 12px — control inner padding (y) */
--space-4: 1rem; /* 16px — default gap, card padding (sm) */
--space-5: 1.5rem; /* 24px — card padding, group spacing */
--space-6: 2rem; /* 32px — between blocks */
--space-7: 3rem; /* 48px — section sub-rhythm */
--space-8: 4rem; /* 64px — large section padding */
--space-9: 5.5rem; /* 88px — top-level section rhythm (= --section-y) */
/* ---- Controls (heights + tap target) --------------------------------- */
/* Interactive control heights. Visual height can be small on desktop, but the
POINTER/TAP target must clear --tap-min on touch — pad it out, don't shrink. */
--control-sm: 32px; /* dense desktop UI, inline controls */
--control-md: 40px; /* default button / input height */
--control-lg: 48px; /* primary mobile actions, list rows */
--tap-min: 44px; /* MINIMUM hit target on touch (iOS HIG / Material) — never below */
/* ---- Focus ring ------------------------------------------------------ */
/* One keyboard-focus treatment system-wide: a 2px ring with a 2px offset gap
so it reads on any surface (the gap shows the bg, not the control fill).
Color is theme-aware via --color-focus (set in the semantic layer). */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
/* ---- Icons ----------------------------------------------------------- */
/* Base UI set: Lucide (2px stroke, 24px grid, round cap/join). Bespoke
brand icons live in assets/icons/ on the same grid. Stroke = currentColor. */
--icon-sm: 16px; /* dense UI, inline with text */
--icon-md: 20px; /* default UI */
--icon-lg: 24px; /* primary actions, nav */
--icon-xl: 32px; /* feature / empty states */
--icon-stroke: 2; /* px on the 24px grid */
/* ---- Motion ---------------------------------------------------------- */
/* Calm, deliberate, physical. Motion explains a state change — never decoration.
Enters decelerate (ease-out / settle); exits accelerate (ease-in). */
--dur-instant: 80ms; /* toggles, press feedback */
--dur-fast: 140ms; /* hover, small UI, exits */
--dur-base: 220ms; /* default UI transition, surface enter */
--dur-slow: 360ms; /* panels, sheets, route change */
--dur-slower: 600ms; /* hero / large deliberate moves */
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* default UI — gentle decelerate */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* enters — strong settle */
--ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exits — accelerate away */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moving A→B on screen */
--ease-settle: cubic-bezier(0.34, 1.12, 0.64, 1); /* tiny settle — status confirms ONLY, not springy */
/* ---- Layout rhythm --------------------------------------------------- */
--content-max: 1000px; /* max content width */
--gutter: 40px; /* desktop side gutter (22px on mobile) */
--section-y: 88px; /* vertical rhythm between sections */
/* =========================================================================
LAYER 2 — SEMANTIC ROLES · DARK THEME (default)
Build product UI against THESE, not the raw palette above.
========================================================================= */
--color-bg: var(--slate-800); /* page background */
--color-bg-deep: var(--slate-900); /* recessed areas, footers */
--color-surface: var(--slate-700); /* cards, panels */
--color-surface-raised: var(--slate-600); /* popovers, raised controls */
--color-border: var(--line); /* hairlines, dividers */
--color-text: var(--cloud); /* primary text */
--color-text-muted: var(--cloud-dim); /* secondary text */
--color-text-subtle: var(--mist); /* tertiary / captions */
--color-primary: var(--steel); /* primary fill / CTA */
--color-primary-hover: var(--sky); /* CTA hover (lighter on dark) */
--color-on-primary: #ffffff; /* text/icon on a primary fill (white = 4.98:1 on steel, AA; cloud was 3.7:1 — fail) */
--color-link: var(--sky); /* links, interactive text (4.6:1 on bg — AA; drops to 3.9:1 on cards, see audit) */
--color-accent: var(--sky); /* accent / active state */
--color-focus: var(--sky); /* keyboard focus ring on dark (4.6:1 on bg) */
--color-online: var(--online); /* status: live/success */
--color-alert: var(--alert); /* status: alert/danger */
--color-mark: var(--cloud); /* the ridge mark fill */
--shadow-card: none; /* dark uses borders, not shadow */
--shadow-icon: 0 10px 26px rgba(0,0,0,0.4);
--shadow-pop: 0 12px 32px rgba(0,0,0,0.45);
}
/* =============================================================================
LAYER 2 — SEMANTIC ROLES · LIGHT THEME
Slate-on-cloud. For marketing web, print, packaging, and app light mode.
Apply with data-theme="light" on or any container.
============================================================================= */
[data-theme="light"] {
--color-bg: var(--paper); /* page background */
--color-bg-deep: var(--cloud-2); /* recessed areas, footers */
--color-surface: var(--paper-card); /* cards, panels */
--color-surface-raised: var(--paper-card); /* popovers (lifted via shadow) */
--color-border: var(--line-light); /* hairlines, dividers */
--color-text: var(--ink); /* primary text */
--color-text-muted: var(--ink-muted); /* secondary text (AA) */
--color-text-subtle: var(--mist); /* tertiary / captions */
--color-primary: var(--steel); /* primary fill / CTA (white text = 5:1) */
--color-primary-hover: var(--steel-deep); /* CTA hover (darker on light) */
--color-on-primary: #ffffff; /* text/icon on a primary fill */
--color-link: var(--steel-deep); /* links use deep steel for contrast (6.7:1) */
--color-accent: var(--steel); /* sky is too low-contrast for accents on white */
--color-focus: var(--steel-deep); /* keyboard focus ring on light (6.7:1 on paper) */
--color-online: var(--online-ink); /* darker status colors for legibility on white */
--color-alert: var(--alert-ink);
--color-mark: var(--slate-900); /* mark goes slate on light surfaces */
--shadow-card: 0 1px 2px rgba(36,37,44,0.06), 0 6px 20px rgba(36,37,44,0.08);
--shadow-icon: 0 10px 26px rgba(36,37,44,0.18);
--shadow-pop: 0 12px 32px rgba(36,37,44,0.16);
}
/* =============================================================================
BRAND NAME TREATMENT · the "Paka" two-tone · IMPLEMENTATION CONTRACT
-----------------------------------------------------------------------------
Every brand name is set in TWO colors so the "Paka" family reads as one family.
Wrap ONLY the Paka/PAKA syllable; leave the rest untouched so it inherits the
ambient color. Two parts, two rules:
1. THE PAKA SYLLABLE (Paka / PAKA — the part you wrap)
Pick the class by what it sits ON, not by theme:
• On a solid UI surface (default) ....... .nm-paka → Steel (--color-primary)
• Over a photo / dark imagery ........... .nm-paka--photo → Sky (--color-accent)
• Embossed/debossed on molded hardware .. (no class) — single-tone, can't two-tone a molding
Steel and Sky are the ONLY two values. Never green, never a custom hex.
2. THE REST (CHO, Node, Home, Ntrol, GE, LABS — the part you DON'T wrap)
It INHERITS the surface's ambient text/mark color. Do NOT hardcode it.
Because it inherits, it is theme-aware automatically:
• on dark/slate surfaces it resolves to Cloud (light)
• on the light-first website it resolves to ink/Slate (dark)
⚠️ "PAKA blue, everything else light" is only the DARK-surface case. On a
light page the rest is DARK. Hardcoding a light hex breaks the website.
Markup — wrap the prefix only, let the rest fall through:
CHOPAKA LABS
PakaNode · Block 3
PakaHome (over a photo)
Casing is fixed: PakaNtrol · PakaNode · PakaHome (capital N / N / H). See D-026.
============================================================================= */
.nm-paka { color: var(--color-primary); } /* Steel — default, on solid surfaces */
.nm-paka--photo { color: var(--color-accent); } /* Sky — over photography / dark imagery */