/* ========================================================================== ascendai.us — DESIGN TOKENS -------------------------------------------------------------------------- The raw design vocabulary of the Ascend AI corporate site, and nothing else. No layout, no components, no selectors other than :root. Change how the site LOOKS here. Change how it is ARRANGED in site.css. ---- THE DIRECTION ------------------------------------------------------- Modern, AI-native, premium. Dark-first: a near-black ground with layered surfaces, translucent glass panels, restrained warm ambient light, and a single luminous accent. Dark-first is a deliberate choice, not a fashion. It is what makes depth, glow and glass legible — the same layering on white reads as grey mush. ---- WHY IT LOOKS NOTHING LIKE CONTINUO ---------------------------------- Continuo (continuo.ascendai.us) is a light, warm-bone product site in Inter with a teal accent. Ascend AI shares none of that: different ground, different typefaces, different accent, different structure. Ascend AI does not own a teal. If you are tempted to "unify" the two palettes, don't — they share ownership, not identity. ---- HISTORY (so it isn't re-litigated) ---------------------------------- Two earlier drafts were rejected and should not be reintroduced: 1. A teal derived from Continuo's #0A7B6E — automatic carry-over from the product brand, exactly what must not happen. 2. A light, serif, editorial system (Newsreader on paper) — read as a magazine rather than a 2026 technology company. ========================================================================== */ :root { /* ---- TYPEFACES -------------------------------------------------------- Contemporary sans throughout. No serif: the editorial direction was explicitly rejected. --font-display : Sora. Headlines only. Geometric, technical, with enough character to carry a brand at large sizes. --font-sans : Plus Jakarta Sans. All body copy and UI. Warmer and more humanist than the display face, so long copy stays comfortable. --font-mono : JetBrains Mono. Small technical labels, section indices, metadata. Signals engineering, used sparingly. Note none of these is Inter — that is Continuo's typeface. These three are SELF HOSTED from assets/fonts/ — see assets/css/fonts.css. The site makes no third-party font request, and both the privacy notice and the Content-Security-Policy depend on that staying true. Fallbacks are real, not decorative: if a webfont fails to load the page must stay readable and correctly proportioned. -------------------------------------------------------------------- */ --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ---- GROUND + SURFACES ------------------------------------------------ Five elevation steps. Depth comes from these plus borders and glow — never from heavy drop shadows, which read as 2015. --void the page itself --surface-1 sections that lift slightly off the page --surface-2 cards --surface-3 raised elements inside cards, hover states -------------------------------------------------------------------- */ --void: #08090c; --surface-1: #0d0f15; --surface-2: #13161e; --surface-3: #1a1e28; /* Translucent glass. Layered OVER a surface, never used as a flat colour. Requires something behind it to be worth anything. */ --glass: rgba(255, 255, 255, 0.035); --glass-strong: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-bright: rgba(255, 255, 255, 0.16); /* ---- TEXT ------------------------------------------------------------- Contrast against --void #08090C: --text #F2F3F5 ~17.8:1 headings, primary copy --text-soft #C3C8D2 ~11.6:1 lede paragraphs --text-dim #969DAC ~7.1:1 supporting copy --text-faint #6B7280 ~4.6:1 metadata only — never body text Do not lighten the ground or darken these without re-checking. -------------------------------------------------------------------- */ --text: #f2f3f5; --text-soft: #c3c8d2; --text-dim: #969dac; --text-faint: #6b7280; --text-on-accent: #1a1206; /* dark ink for use ON the accent colour */ /* ---- ACCENT ----------------------------------------------------------- Luminous amber-gold. Chosen FROM the corporate positioning rather than adapted from the product. Warm light against cold graphite reads premium and human, it carries a glow convincingly, and it deliberately avoids the blue, teal, violet and neon-purple that every AI company defaults to — while staying nowhere near Continuo's teal. Contrast on --void: --accent ~11.0:1, --accent-bright ~13.4:1. -------------------------------------------------------------------- */ /* ---- AUTHORITATIVE CORPORATE VALUES --------------------------------- These three names and values are set by the Ascend AI corporate identity handoff and are the source of truth. Do not change the hex values here without a corresponding brand decision. --ascend-accent principal corporate accent --ascend-accent-bright restrained highlights, hover, focus --ascend-accent-deep deeper emphasis and supporting states The --accent* names below are internal aliases so the rest of the stylesheet keeps working. Style rules should keep using --accent*; this pair of layers means a brand-level colour change is a three-line edit here and nowhere else. ------------------------------------------------------------------- */ --ascend-accent: #e8a24c; --ascend-accent-bright: #f5bc70; --ascend-accent-deep: #b4762f; --accent: var(--ascend-accent); --accent-bright: var(--ascend-accent-bright); --accent-deep: var(--ascend-accent-deep); /* Ambient light. These are for large soft radial washes behind content, and for focus/hover glows. Keep them low-alpha — the moment a glow is obvious it stops looking expensive. */ --glow-warm: rgba(232, 162, 76, 0.16); --glow-warm-soft: rgba(232, 162, 76, 0.07); --glow-cool: rgba(96, 132, 210, 0.10); /* cool counter-light, for depth only */ /* ---- STATUS ----------------------------------------------------------- Used only by the assistant UI. Colour is always supporting — the text inside a badge or message carries the meaning on its own. -------------------------------------------------------------------- */ --status-ok: #5fd0a8; --status-warn: #e8b04c; /* ---- TYPE SCALE ------------------------------------------------------- Fluid via clamp(): min / preferred(vw-based) / max. The page reflows smoothly from 320px to 1600px+ with no breakpoint jumps in type itself. -------------------------------------------------------------------- */ --step-hero: clamp(2.6rem, 1.5rem + 4.9vw, 5rem); /* h1 only */ --step-2xl: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem); /* section h2 */ --step-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); /* sub-headings */ --step-lg: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem); /* lede paragraphs */ --step-md: 1.0313rem; /* body */ --step-sm: 0.9375rem; /* secondary body */ --step-xs: 0.8125rem; /* captions */ --step-label: 0.75rem; /* mono eyebrows */ --leading-tight: 1.08; --leading-snug: 1.28; --leading-normal: 1.62; /* Tracking. Geometric sans needs negative tracking at display sizes or it looks loose and amateur. */ --track-display: -0.028em; --track-tight: -0.015em; --track-label: 0.16em; --measure: 60ch; /* ---- SPACE + LAYOUT --------------------------------------------------- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-section: clamp(4.5rem, 3rem + 6vw, 9rem); --content-max: 1220px; --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem); --nav-h: 70px; /* ---- SHAPE ------------------------------------------------------------ Generous radii. Modern software UI reads soft; hard corners here would fight the glass and glow. -------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* Shadows are for lift off a dark ground, so they are deep and soft rather than the tight grey shadows that suit light UI. */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55); --shadow-accent: 0 10px 34px rgba(232, 162, 76, 0.22); /* ---- MOTION ----------------------------------------------------------- Short, eased, purposeful. Everything using these is disabled wholesale under prefers-reduced-motion (base.css §6). -------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-med: 280ms; --dur-slow: 700ms; /* ---- STACKING --------------------------------------------------------- Declared in one place so z-index stays arguable. -------------------------------------------------------------------- */ --z-ambient: 0; /* background glows, behind everything */ --z-content: 1; --z-assistant: 90; --z-nav: 100; --z-skip: 200; }