/**
* Awaken Logic -- External Brand Token System
* Version: 1.0
* Date: 2026-04-24
* Scope: Public-facing website and future SaaS client platform
* Authority: 03-Marketing/2026-04-24-pr004-phase2-ia-content-plan.md
*
* GOVERNANCE:
* These tokens are the single source of truth for the Awaken Logic
* external brand. All website, platform, and marketing design work
* derives from this file. Changes must be versioned.
*
* SEPARATION OF CONCERNS:
* These tokens govern the PUBLIC brand (awakenlogic.ai).
* The internal tool palette (Command Centre / Origin) uses a separate
* warm parchment system documented in 05-Admin/Command-Centre/Design/.
* The two systems must not be mixed.
*
* USAGE:
* Import this file as the first stylesheet in any Awaken Logic
* public-facing HTML document:
*
* Then reference tokens throughout component CSS:
* color: var(--color-ink-primary);
*/
/* ============================================================
1. COLOUR SYSTEM
============================================================ */
:root {
/* -- 1a. Surface (backgrounds) -------------------------------- */
--color-surface-primary: #fafbfc; /* Page background. Cool near-white. */
--color-surface-secondary: #f0f3f8; /* Section fills, subtle alternating bands. */
--color-surface-tertiary: #e4e9f2; /* Deeper section treatment, callout blocks. */
--color-surface-card: #ffffff; /* Card and modal backgrounds. */
--color-surface-overlay: rgba(15, 23, 41, 0.48); /* Modal scrim. */
/* -- 1b. Ink (text) ------------------------------------------- */
--color-ink-primary: #0f1729; /* All primary body copy and headings. */
--color-ink-secondary: #3d4f6e; /* Supporting copy, sub-headings, descriptions. */
--color-ink-tertiary: #7a8fa8; /* Captions, labels, meta text, placeholders. */
--color-ink-inverse: #fafbfc; /* Text on dark/accent backgrounds. */
--color-ink-disabled: #b0bece; /* Disabled state copy. */
/* -- 1c. Border / Rule --------------------------------------- */
--color-border-subtle: #dde4ef; /* Default: cards, dividers, form inputs. */
--color-border-default: #b8c5d9; /* Hover state; emphasis borders. */
--color-border-strong: #7a8fa8; /* Active state; focus rings base. */
/* -- 1d. Accent -- Authority Navy ---------------------------- */
/*
* Primary brand accent. Navy carries institutional authority,
* academic weight, and enterprise trust -- the correct register
* for Awaken Logic's B2B positioning against Korn Ferry /
* Deloitte Human Capital / Qualtrics.
* Evidence: Navy is the highest-trust colour in B2B enterprise
* contexts (multiple published colour psychology studies).
*/
--color-accent: #1a3657; /* Primary CTA buttons, active nav, key headings. */
--color-accent-hover: #142c48; /* Darker hover state for buttons. */
--color-accent-active: #0f2137; /* Pressed / active state. */
--color-accent-interactive: #2d5f9c; /* Links, inline CTAs, icon accents -- lighter for legibility. */
--color-accent-soft: #e8edf7; /* Pill backgrounds, evidence strip, subtle highlights. */
--color-accent-soft-hover: #d8e2f2; /* Hover on soft accent fills. */
--color-accent-border: #b5c8e8; /* Borders on accent-soft components. */
/* -- 1e. Semantic colours ------------------------------------ */
--color-success: #1a5c38;
--color-success-soft: #e6f4ec;
--color-success-border: #a8d9bc;
--color-warning: #9a6800;
--color-warning-soft: #fef7e6;
--color-warning-border: #f5d27a;
--color-danger: #8a1e1e; /* Red retained for error / danger states only. */
--color-danger-soft: #faeaea;
--color-danger-border: #e8a8a8;
--color-info: #2d5f9c; /* Same as accent-interactive; info callouts. */
--color-info-soft: #e8edf7;
--color-info-border: #b5c8e8;
/* -- 1f. Evidence layer -------------------------------------- */
/*
* The evidence strip and academic citation blocks use a distinct
* treatment to signal scholarly grounding without disrupting the
* primary layout. Evidence ink uses the same navy family but at
* a slightly lighter value to allow the cited names to stand out
* against the soft fill.
*/
--color-evidence-fill: #e8edf7; /* Evidence strip / citation block background. */
--color-evidence-border: #b5c8e8;
--color-evidence-ink: #1a3657; /* Named researcher text. */
--color-evidence-label: #3d4f6e; /* "Built on peer-reviewed research" label text. */
/* -- 1g. Platform / SaaS surfaces (reserved for Phase 4+) --- */
/*
* These tokens are reserved now so Phase 4 (client platform)
* inherits the same token vocabulary. Do not use in Phase 1 UI.
*/
--color-platform-bg: #0c0f1a; /* Authenticated dashboard dark background. */
--color-platform-surface: #141929; /* Card background on platform dark mode. */
--color-platform-ink: #e8edf7; /* Primary text on platform dark. */
--color-platform-ink-muted: #7a8fa8;
--color-platform-accent: #4a8fd4; /* Interactive elements on dark platform. */
--color-platform-border: rgba(232, 237, 247, 0.12);
/* ============================================================
2. TYPOGRAPHY SYSTEM
============================================================ */
/* -- 2a. Font families --------------------------------------- */
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--font-citation: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/*
* Inter is the primary typeface. It is available as a Google Font
* (free), has excellent legibility across all sizes, and reads as
* precision and professionalism -- not startup-casual. Load via:
*
*
*
* Future upgrade option: Söhne by Klim Type (premium licence,
* higher distinctiveness, used by Linear and Stripe). Transition
* at Phase 2/3 if budget allows.
*/
/* -- 2b. Font sizes ------------------------------------------ */
--text-hero: clamp(44px, 5.5vw, 68px); /* Hero headline. Single dominant statement. */
--text-h1: clamp(36px, 4vw, 52px); /* Page-level heading. */
--text-h2: clamp(28px, 3vw, 40px); /* Section heading. */
--text-h3: clamp(22px, 2.5vw, 30px); /* Sub-section heading. */
--text-h4: 20px; /* Component heading, card title. */
--text-h5: 17px; /* Tight heading, spec card label. */
--text-body-lg: 18px; /* Lead paragraph, intro copy. */
--text-body: 17px; /* Standard body copy. */
--text-body-sm: 15px; /* Supporting detail, secondary copy. */
--text-label: 13px; /* Form labels, nav items, badges. */
--text-micro: 12px; /* Captions, footnotes, meta. */
--text-evidence: 13px; /* Academic citation text in evidence strip. */
/* -- 2c. Font weights ---------------------------------------- */
--weight-regular: 400;
--weight-medium: 500; /* Primary emphasis. CTA buttons, headings, nav. */
--weight-semibold: 600; /* Reserved: hero headline and critical callouts only. */
/*
* Two-weight rule: use 400 and 500 for 90% of the site.
* 600 is for the hero headline and primary CTA buttons only.
* This creates hierarchy without visual noise.
*/
/* -- 2d. Line heights ---------------------------------------- */
--leading-tight: 1.15; /* Hero headline and large display text. */
--leading-heading: 1.3; /* Section headings h2-h4. */
--leading-body: 1.7; /* Standard body copy. */
--leading-loose: 1.85; /* Long-form text; academic/research copy. */
/* -- 2e. Letter spacing -------------------------------------- */
--tracking-tight: -0.02em; /* Hero headline: tightens at large sizes. */
--tracking-normal: 0; /* Body copy default. */
--tracking-wide: 0.04em; /* Label text, evidence strip names. */
--tracking-caps: 0.08em; /* ALL-CAPS labels and badges. */
/* -- 2f. Measure (max line length) --------------------------- */
--measure-tight: 52ch; /* Headings and sub-heads. */
--measure-body: 68ch; /* Body copy. Readability standard: 65-75 chars. */
--measure-wide: 85ch; /* Full-width text blocks, spec cards. */
/* ============================================================
3. SPACING SYSTEM
============================================================ */
/*
* Base unit: 4px. All spacing values are multiples of the base.
* This creates a consistent vertical rhythm across all pages.
*/
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--space-11: 192px;
/* -- 3a. Semantic spacing aliases ---------------------------- */
--gap-component: var(--space-2); /* Within components (icon + label gap). */
--gap-element: var(--space-4); /* Between elements within a section. */
--gap-section: var(--space-9); /* Between page sections. */
--gap-page: var(--space-10); /* Top/bottom page padding. */
/* -- 3b. Layout widths --------------------------------------- */
--width-content: 1280px; /* Max page content width. */
--width-reading: 760px; /* Optimal reading column. */
--width-narrow: 560px; /* Tight columns: spec cards, forms. */
--width-gutter: clamp(24px, 5vw, 80px); /* Responsive horizontal page margin. */
/* ============================================================
4. BORDER AND SHAPE SYSTEM
============================================================ */
--radius-sm: 3px; /* Badges, micro pills, small tags. */
--radius-md: 6px; /* Buttons, form inputs, small cards. */
--radius-lg: 10px; /* Content cards, panels, callout blocks. */
--radius-xl: 16px; /* Large cards, hero panels. */
--radius-full: 9999px; /* Pill shapes. */
--border-width: 0.5px; /* Default hairline border. */
--border-width-md: 1px; /* Emphasis border (hover, active states). */
--border-width-thick: 2px; /* Featured card highlight (used sparingly). */
--border-default: var(--border-width) solid var(--color-border-subtle);
--border-emphasis: var(--border-width-md) solid var(--color-border-default);
--border-accent: var(--border-width-thick) solid var(--color-accent);
/* ============================================================
5. ELEVATION AND SHADOW
============================================================ */
/*
* Minimal shadow system. Awaken Logic's design language is flat
* and precise -- shadows are used only where depth is functionally
* meaningful (dropdowns, modals, sticky nav), not decoratively.
*/
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.06); /* Subtle card lift. */
--shadow-md: 0 4px 12px rgba(15, 23, 41, 0.08),
0 1px 3px rgba(15, 23, 41, 0.04); /* Cards, dropdowns. */
--shadow-lg: 0 12px 32px rgba(15, 23, 41, 0.10),
0 4px 10px rgba(15, 23, 41, 0.06); /* Modals, sticky nav. */
--shadow-focus: 0 0 0 3px rgba(45, 95, 156, 0.28); /* Focus ring: accent-interactive. */
/* ============================================================
6. MOTION AND TRANSITION SYSTEM
============================================================ */
/*
* Motion principle: animation enhances comprehension; it never
* decorates. Every animated element makes the interface feel
* more responsive -- not more performative.
* Reference: Linear.app motion language.
*/
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* General easing. Snappy in, smooth out. */
--ease-enter: cubic-bezier(0, 0, 0.2, 1); /* Elements entering the screen. */
--ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Elements leaving. */
--ease-linear: linear; /* Progress bars, counters. */
--duration-instant: 50ms; /* State changes: checkbox, toggle. */
--duration-fast: 150ms; /* Hover states, button press feedback. */
--duration-standard: 250ms; /* Section entry, card appearance. */
--duration-deliberate: 400ms; /* Page transitions, modal open/close. */
--duration-slow: 600ms; /* Hero entrance, marquee. Maximum for UI. */
--transition-fast: var(--duration-fast) var(--ease-standard);
--transition-standard: var(--duration-standard) var(--ease-standard);
--transition-deliberate: var(--duration-deliberate) var(--ease-standard);
/* Reduced motion: always respect prefers-reduced-motion. */
/* Applied via the @media block at the bottom of this file. */
/* ============================================================
7. COMPONENT TOKENS
============================================================ */
/* -- 7a. Navigation ----------------------------------------- */
--nav-height: 64px;
--nav-bg: var(--color-surface-card);
--nav-border: var(--border-default);
--nav-ink: var(--color-ink-secondary);
--nav-ink-hover: var(--color-ink-primary);
--nav-ink-active: var(--color-accent);
--nav-cta-bg: var(--color-accent);
--nav-cta-bg-hover: var(--color-accent-hover);
--nav-cta-ink: var(--color-ink-inverse);
--nav-cta-radius: var(--radius-md);
/* -- 7b. Buttons -------------------------------------------- */
--btn-height-sm: 34px;
--btn-height-md: 44px;
--btn-height-lg: 52px;
--btn-primary-bg: var(--color-accent);
--btn-primary-bg-hover: var(--color-accent-hover);
--btn-primary-ink: var(--color-ink-inverse);
--btn-primary-radius: var(--radius-md);
--btn-primary-weight: var(--weight-medium);
--btn-secondary-bg: transparent;
--btn-secondary-bg-hover: var(--color-surface-secondary);
--btn-secondary-ink: var(--color-ink-secondary);
--btn-secondary-border: var(--border-default);
--btn-secondary-radius: var(--radius-md);
--btn-text-ink: var(--color-accent-interactive);
--btn-text-ink-hover: var(--color-accent);
/* -- 7c. Cards ---------------------------------------------- */
--card-bg: var(--color-surface-card);
--card-border: var(--border-default);
--card-radius: var(--radius-lg);
--card-padding: var(--space-6);
--card-padding-sm: var(--space-5);
--card-featured-border: var(--border-width-thick) solid var(--color-accent);
/* -- 7d. Form inputs ---------------------------------------- */
--input-height: 44px;
--input-bg: var(--color-surface-card);
--input-border: var(--border-default);
--input-border-hover: var(--border-emphasis);
--input-border-focus: var(--border-width-md) solid var(--color-accent-interactive);
--input-radius: var(--radius-md);
--input-ink: var(--color-ink-primary);
--input-placeholder: var(--color-ink-tertiary);
--input-label-ink: var(--color-ink-secondary);
--input-label-size: var(--text-label);
--input-shadow-focus: var(--shadow-focus);
/* -- 7e. Badges and pills ----------------------------------- */
--badge-radius: var(--radius-sm);
--badge-padding: 2px 8px;
--badge-size: var(--text-micro);
--badge-weight: var(--weight-medium);
--badge-tracking: var(--tracking-caps);
/* -- 7f. Evidence strip ------------------------------------- */
--evidence-strip-bg: var(--color-evidence-fill);
--evidence-strip-border-top: var(--border-width) solid var(--color-evidence-border);
--evidence-strip-border-bottom: var(--border-width) solid var(--color-evidence-border);
--evidence-strip-padding: var(--space-5) var(--space-4);
--evidence-strip-size: var(--text-evidence);
--evidence-strip-weight: var(--weight-medium);
--evidence-strip-tracking: var(--tracking-wide);
--evidence-name-ink: var(--color-evidence-ink);
--evidence-label-ink: var(--color-evidence-label);
/* -- 7g. Footer --------------------------------------------- */
--footer-bg: var(--color-surface-secondary);
--footer-border: var(--border-default);
--footer-ink: var(--color-ink-tertiary);
--footer-ink-heading: var(--color-ink-secondary);
--footer-ink-link: var(--color-ink-secondary);
--footer-ink-link-hover: var(--color-ink-primary);
/* -- 7h. Spec card (Awaken PS product page) ----------------- */
--spec-card-bg: var(--color-surface-secondary);
--spec-card-border: var(--border-default);
--spec-card-radius: var(--radius-lg);
--spec-card-label-ink: var(--color-ink-tertiary);
--spec-card-value-ink: var(--color-ink-primary);
--spec-card-divider: var(--border-default);
/* -- 7i. Industries strip ----------------------------------- */
--industry-chip-bg: var(--color-surface-secondary);
--industry-chip-border: var(--border-default);
--industry-chip-radius: var(--radius-full);
--industry-chip-ink: var(--color-ink-secondary);
--industry-chip-size: var(--text-label);
/* -- 7j. Section dividers ----------------------------------- */
--divider-color: var(--color-border-subtle);
--divider-width: var(--border-width);
}
/* ============================================================
8. TYPOGRAPHY UTILITY CLASSES
============================================================ */
.text-hero {
font-family: var(--font-heading);
font-size: var(--text-hero);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-ink-primary);
}
.text-h1 {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-ink-primary);
}
.text-h2 {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: var(--weight-medium);
line-height: var(--leading-heading);
color: var(--color-ink-primary);
}
.text-h3 {
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: var(--weight-medium);
line-height: var(--leading-heading);
color: var(--color-ink-primary);
}
.text-body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
color: var(--color-ink-secondary);
}
.text-body-lg {
font-family: var(--font-body);
font-size: var(--text-body-lg);
font-weight: var(--weight-regular);
line-height: var(--leading-loose);
color: var(--color-ink-secondary);
}
.text-label {
font-family: var(--font-body);
font-size: var(--text-label);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
color: var(--color-ink-tertiary);
}
.text-evidence {
font-family: var(--font-body);
font-size: var(--text-evidence);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
color: var(--color-evidence-name-ink);
}
/* ============================================================
9. GLOBAL BASE RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
color: var(--color-ink-primary);
background-color: var(--color-surface-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video, svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--color-accent-interactive);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent);
}
a:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
/* ============================================================
10. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
11. DARK MODE (PLATFORM -- RESERVED FOR PHASE 4)
============================================================ */
/*
* The public marketing site (Phase 1-3) is light mode only.
* Dark mode tokens are reserved here for the authenticated
* client platform (Phase 4+) and apply only when the data-theme
* attribute is set explicitly on the element.
* Do not apply prefers-color-scheme auto-switching to the
* marketing site -- the brand experience is light mode.
*/
[data-theme="platform-dark"] {
--color-surface-primary: var(--color-platform-bg);
--color-surface-secondary: var(--color-platform-surface);
--color-surface-card: #1c2438;
--color-ink-primary: var(--color-platform-ink);
--color-ink-secondary: #b8c8de;
--color-ink-tertiary: var(--color-platform-ink-muted);
--color-border-subtle: var(--color-platform-border);
--color-border-default: rgba(232, 237, 247, 0.20);
--color-accent-interactive: var(--color-platform-accent);
--color-accent-soft: rgba(74, 143, 212, 0.15);
}
/* ============================================================
CHANGE LOG
============================================================
v1.0 -- 2026-04-24 -- Initial system. External brand only.
Navy authority anchor (#1a3657) established as primary accent.
Warm parchment internal tool palette explicitly separated.
Evidence layer tokens added for homepage credibility strip.
Platform dark mode tokens reserved for Phase 4 SaaS launch.
============================================================ */