/* House UI kit. Set by Sully on 2026-09-16. Direction: follow Apple, ultra premium, high end. This file extends tokens.css (load that first, then this); it does not replace it. The plain-English decisions live in the vault: ~/Developer/agnostify-vault/03 Rules Reference/UI style kit.md Values were lifted from the Agnostify guided demo (orb-lab-site, public/demo/shared/guided.css, dark default with a light toggle) and the Swiss index kit on agnostify.com (src/site/swiss-index.css). Revised 2026-09-17 from Sully's demo taste sheet, measured against apple.com, iCloud, Apple TV and Music on the web: the primary is a 44px capsule with a body-size label and no shadow; two weights (400, 600); display tracking -0.015em, display line height 1.08, body 1.5; cards keep a soft shadow, buttons and controls carry none; glass at 80 percent with saturate. One foundation, two modes: apps, tools, dashboards (dark by default) the light toggle agnostify.com surfaces (Swiss text kit) Accent is per product. The lavender pair below is Agnostify's and is only the default: a new product sets --accent, --accent-soft and --accent-line once, at kickoff, on its own root. Everything else stays. */ /* The one face we self-host. It lives here, beside the stack that names it, so a surface can load the kit and nothing else and still get its own type. studio.css declares the same two faces for the legacy demos; an identical second declaration is harmless, and that sheet is being retired. */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/hanken-grotesk-wght-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/hanken-grotesk-wght-latin.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Type. One family per surface, hierarchy from size and weight only. */ /* Apple's own face where it exists, and the one face we self-host everywhere else. Hanken Grotesk is served from public/demo/shared/fonts by the @font-face in studio.css, which every demo page loads, so nothing after it is reachable in practice; sans-serif covers the swap window only. */ --kit-sans-app: -apple-system, BlinkMacSystemFont, 'Hanken Grotesk', sans-serif; --kit-sans-marketing: 'Helvetica Neue', Helvetica, Arial, sans-serif; --kit-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* code, ids, tabular data only */ /* Six sizes. Nothing below 11px ships (the demo went to 8px; that was the one thing the taste pass flagged). */ --fs-display: clamp(30px, 3.6vw, 44px); --fs-title: 21px; --fs-heading: 15px; --fs-body: 16px; --fs-ui: 13px; --fs-small: 11px; --lh-display: 1.08; --lh-body: 1.5; /* a 24px line box at 16px, on the 8px grid */ --lh-ui: 1.4; --track-display: -0.015em; /* Apple's tightest shipped value (80px on apple.com) */ --track-title: 0em; --track-eyebrow: 0.16em; --fw-regular: 400; /* two weights only. Hanken Grotesk is variable and would render a 500, but hierarchy here comes from size. */ --fw-semibold: 600; /* Radius scale. Grows with the element; nested boxes are concentric (inner = outer minus the gap). The phone frame in the demo is the model: 42 outside, 7 of padding, 35 inside. Five steps plus the capsule; a page normally shows four of them. */ --r-control: 10px; /* chips, segmented inner, quiet and icon buttons */ --r-field: 12px; /* inputs, textareas, list rows, step chips, the full-width block primary */ --r-card: 16px; /* coach cards, source cards, small panels */ --r-panel: 22px; /* game frame, workbench, feature panels */ --r-shell: 28px; /* the app window itself */ --r-pill: 999px; /* Spacing on the 8px grid; control padding runs about 1.5x wider than tall. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --control-h: 44px; --control-h-compact: 40px; /* Icons: 24-grid line icons drawn in currentColor, one stroke weight. */ --icon: 20px; --icon-sm: 16px; --icon-stroke: 1.7; /* Motion: quick and decelerating. Press is a 2% scale, never a colour change. */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 180ms; --t-base: 240ms; --t-arrive: 450ms; --press: scale(0.98); } /* ---------- Product mode. Dark is the default; light is the toggle. ---------- */ [data-kit="product"] { color-scheme: dark; --font: var(--kit-sans-app); --bg: #101014; /* page behind the app */ --surface: #19181e; /* the app window */ --surface-2: #28242f; /* tonal control ground: segmented, icon hover, progress track */ --surface-3: #382c4b; /* selected tonal */ --ink: #f1eef5; --muted: #a5a0af; --faint: #8a8494; /* 4.88:1 on --surface; small text set in it must clear AA (2026-09-18) */ --line: rgba(255, 255, 255, 0.08); /* hairline */ --line-strong: rgba(255, 255, 255, 0.14); /* shell edge, field border */ --accent: #bca3e9; /* Agnostify lavender, dark ground */ --accent-soft: #382c4b; --accent-line: rgba(188, 163, 233, 0.35); /* The primary action is ink-filled, not accent-filled. Accent is reserved for state and signal: current step, progress, links, selection. */ --primary-bg: #eeebf4; --primary-fg: #27222e; --primary-hover: #d8c8ed; --success: #a0c3af; --success-soft: #273d34; --danger: #f2a7b1; --danger-soft: #3a2229; --focus: #bca3e9; /* The amber of an attention dot: a control asking to be pressed. Signal only, never a surface. --orb-rim is the outer stop of an orb's radial gradient, whose core is --accent. */ --attention: #e0a52a; --orb-rim: #d46adb; --shadow-shell: 0 24px 90px rgba(0, 0, 0, 0.25); --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.2); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-kit="product"][data-theme="light"] { color-scheme: light; --bg: #f2f1f5; --surface: #fdfcfe; --surface-2: #eeebf2; --surface-3: #ede8f7; --ink: #24232a; --muted: #706e79; --faint: #767080; /* 4.67:1 on --surface; was #99929f at 2.95 (2026-09-18) */ --line: rgba(36, 35, 42, 0.08); --line-strong: rgba(36, 35, 42, 0.14); --accent: #7155b7; /* Agnostify lavender, light ground */ --accent-soft: #ede8f7; --accent-line: rgba(113, 85, 183, 0.28); --primary-bg: #26232e; --primary-fg: #ffffff; --primary-hover: #4b3c65; --success: #43715c; --success-soft: #eaf1ed; --danger: #a13544; --danger-soft: #fdf1f2; --focus: #8a72c6; /* The same amber warmed for a light ground: 3.11:1 on --surface, so the mark clears the 3:1 floor a meaningful shape is held to, and --primary-bg on it clears 4.5:1 for a label at 4.84:1. */ --attention: #d97706; --orb-rim: #b04ab8; --shadow-shell: 0 2px 6px rgba(47, 32, 48, 0.03), 0 25px 80px rgba(47, 32, 48, 0.04); --shadow-card: 0 12px 32px rgba(41, 34, 57, 0.1); --highlight-top: none; } [data-kit="product"] body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } [data-kit="product"] svg { width: var(--icon); height: var(--icon); stroke-width: var(--icon-stroke); } [data-kit="product"] button, [data-kit="product"] a { touch-action: manipulation; } /* A product surface styles its own actions, so a link is never a blue underline by default. This lived in the legacy studio.css until a demo loaded the kit alone and shipped an underlined capsule and a default-blue wordmark link. */ [data-kit="product"] a { color: inherit; text-decoration: none; } [data-kit="product"] :is(button, a)[disabled], [data-kit="product"] :is(button, a)[aria-disabled="true"] { opacity: 0.45; cursor: default; } [data-kit="product"] :is(button, a, input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; } /* Type roles. */ [data-kit="product"] .k-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-semibold); } [data-kit="product"] .k-display span { color: var(--faint); } /* the second, quieter line */ [data-kit="product"] .k-title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: var(--track-title); font-weight: var(--fw-semibold); } [data-kit="product"] .k-heading { font-size: var(--fs-heading); font-weight: var(--fw-semibold); } [data-kit="product"] .k-eyebrow { display: block; font-size: var(--fs-small); letter-spacing: var(--track-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; color: var(--accent); } [data-kit="product"] .k-muted { color: var(--muted); } [data-kit="product"] .k-small { font-size: var(--fs-small); color: var(--muted); } [data-kit="product"] .k-num { font-variant-numeric: tabular-nums; } /* Surfaces. Separation by tone; cards and the shell carry a soft shadow, controls never do. Hairlines only where needed. */ [data-kit="product"] .k-shell { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-shell); box-shadow: var(--shadow-shell); overflow: hidden; } [data-kit="product"] .k-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); } [data-kit="product"] .k-card { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); } [data-kit="product"] .k-hairline { border: 0; border-top: 1px solid var(--line); margin: 0; } [data-kit="product"] .k-glass { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-kit="product"] .k-glass { background: color-mix(in srgb, var(--surface) 92%, transparent); } } /* The two action weights. Primary is an ink-filled capsule. Secondary is text. */ [data-kit="product"] .k-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--control-h); padding: 12px 22px; border: 0; border-radius: var(--r-pill); background: var(--primary-bg); color: var(--primary-fg); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 20px; /* 12 + 20 + 12 = 44px */ transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); cursor: pointer; } [data-kit="product"] .k-primary:hover { background: var(--primary-hover); } [data-kit="product"] .k-primary:active { transform: var(--press); } [data-kit="product"] .k-primary svg { width: var(--icon-sm); height: var(--icon-sm); } /* Full-width variant only (a phone's bottom action). Apple's full-width buttons are blocks, not capsules. */ [data-kit="product"] .k-primary.k-block { display: flex; width: 100%; border-radius: var(--r-field); } [data-kit="product"] .k-text { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h-compact); padding: 6px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-ui); cursor: pointer; transition: color var(--t-fast) var(--ease-out); } [data-kit="product"] .k-text:hover { color: var(--accent); } /* Quiet tonal button: the only third shape, for icon buttons and secondary actions inside cards. Low-alpha ground, no visible border. */ [data-kit="product"] .k-quiet { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--control-h-compact); padding: 10px 13px; border: 0; border-radius: var(--r-control); background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-ui); cursor: pointer; transition: background var(--t-fast) var(--ease-out); } [data-kit="product"] .k-quiet:hover { background: var(--surface-3); } [data-kit="product"] .k-icon { width: 40px; min-height: 40px; padding: 0; border-radius: var(--r-pill); background: none; color: var(--muted); } [data-kit="product"] .k-icon:hover { background: var(--surface-2); color: var(--ink); } /* Segmented control: concentric by construction (inner 10 + 4 padding = 14 outer). */ [data-kit="product"] .k-segment { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: calc(var(--r-control) + var(--s-1)); background: var(--surface-2); } [data-kit="product"] .k-segment > button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--control-h-compact); padding: 8px 18px; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); font: inherit; font-size: var(--fs-ui); cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } [data-kit="product"] .k-segment > button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); } [data-kit="product"][data-theme="light"] .k-segment > button[aria-pressed="true"] { background: var(--surface); } /* Selectable rows and tiles: hairline at rest, accent tint when chosen. */ [data-kit="product"] .k-choice { border: 1px solid var(--line); border-radius: var(--r-field); background: var(--surface); color: var(--muted); } [data-kit="product"] .k-choice[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); } /* Fields. */ [data-kit="product"] .k-field { width: 100%; padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; } [data-kit="product"] .k-error { font-size: var(--fs-small); color: var(--danger); } /* Progress: 4px track, accent fill, no border. */ [data-kit="product"] progress.k-progress { width: 100%; height: 4px; display: block; appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); color: var(--accent); } [data-kit="product"] progress.k-progress::-webkit-progress-bar { background: var(--surface-2); } [data-kit="product"] progress.k-progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); } [data-kit="product"] progress.k-progress::-moz-progress-bar { background: var(--accent); } /* Arrive: the one page-level animation. */ @keyframes k-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } [data-kit="product"] .k-arrive { animation: k-arrive var(--t-arrive) var(--ease-out) both; } /* Embedded platform previews (Instagram, TikTok) keep their own look; the app theme never leaks into them. Scope them with .k-platform. */ [data-kit="product"] .k-platform { color-scheme: light; } /* ---------- Marketing mode: the Swiss index kit on agnostify.com. ---------- */ [data-kit="marketing"] { color-scheme: dark; --font: var(--kit-sans-marketing); --bg: #000000; --ink: #f2f2f4; --muted: color-mix(in srgb, #f2f2f4 70%, transparent); --action: var(--ink); /* no accent on marketing actions */ --focus: currentColor; --track-display: -0.045em; --track-action: -0.035em; --track-eyebrow: 0.015em; --fs-action: 16px; --fs-action-primary: 18px; --fs-action-compact: 14px; --fs-nav: 18px; } [data-kit="marketing"] :is(h1, h2, h3) { font-family: var(--font); font-weight: 700; letter-spacing: var(--track-display); } [data-kit="marketing"] :is(h1, h2) { line-height: 1.08; } [data-kit="marketing"] .k-eyebrow { font-family: var(--font); font-weight: 700; letter-spacing: var(--track-eyebrow); } /* Text actions: bold, uppercase, aligned in rows, no surface of any kind. Underline is for hover, focus and the current or pressed state only. */ [data-kit="marketing"] .k-action { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 48px; padding: 0.65rem 0.2rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--action); font-family: var(--font); font-size: var(--fs-action); font-weight: 700; line-height: 1.25; letter-spacing: var(--track-action); text-transform: uppercase; text-decoration: none; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color 140ms ease; cursor: pointer; } [data-kit="marketing"] .k-action.k-action-primary { font-size: var(--fs-action-primary); } [data-kit="marketing"] .k-action.k-action-compact { font-size: var(--fs-action-compact); } [data-kit="marketing"] .k-nav { font-size: var(--fs-nav); font-weight: 700; } [data-kit="marketing"] .k-action:is(:hover, [aria-current="page"], [aria-pressed="true"]):not(:disabled) { text-decoration: underline; } [data-kit="marketing"] .k-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; text-decoration: underline; } [data-kit="marketing"] .k-action:disabled, [data-kit="marketing"] .k-action[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } @media (max-width: 360px) { [data-kit="marketing"] .k-action { font-size: 14px; min-height: 44px; } } /* ---------- Both modes ---------- */ [data-kit] *, [data-kit] *::before, [data-kit] *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { [data-kit] *, [data-kit] *::before, [data-kit] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } [data-kit] .k-primary:active { transform: none; } }