/* ============================================================ Altris Design System — Foundation tokens Revised palette (w17·26): cool neutrals anchored by graphite, with High Voltage + Prussian used sparingly as accents. ============================================================ */ /* ============================================================ Axia — Altris brand typeface (licensed) Files: Light 300, Regular 400, Bold 700, Black 900 500/Medium maps to Regular via spec fallback; 600 maps to Bold. ============================================================ */ :root { /* ---- Type ---- Axia is the brand typeface (licensed OTF files in assets/fonts/). Archivo is the open-source fallback if the files fail to load. */ --font-sans: "Axia", "Archivo", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* ============================================================ CORE BRAND — confirmed hex values (revised) ============================================================ */ --brand-graphite: #262A2E; /* 01 · Primary — Graphite (near-black) */ --brand-blue: #5F7998; /* 02 · Secondary — Baltic blue */ --brand-steel: #A7ADB3; /* 03 · Mid neutral — Steel */ --brand-mist: #DDDDDD; /* 04 · Light neutral — Mist */ --brand-paper: #EDEDED; /* 05 · Off-white — Paper */ --brand-white: #FFFFFF; /* 06 · White */ /* ---- Accents (sparing use only) ---- Palette names: "High Voltage" = terra, "Prussian" = sky. Canonical palette-named aliases provided below. */ --accent-terra: #F09260; /* Warm accent — High Voltage */ --accent-sky: #A6CAF9; /* Cool accent — Prussian */ --accent-voltage: var(--accent-terra); /* palette-name alias */ --accent-prussian: var(--accent-sky); /* palette-name alias */ /* High Voltage as TEXT on light surfaces must use the darker step — core #F09260 is 2.3:1 on white and fails AA even for labels. terra-70 holds the warm hue at 5.1:1. On dark surfaces core is fine. */ --accent-terra-text: var(--terra-70); /* Legacy aliases — DEPRECATED, scheduled for removal in v0.3. Do not use in new work; map onto new core. */ --brand-ink: var(--brand-graphite); --brand-deep: var(--brand-graphite); --brand-taupe: var(--accent-terra); --brand-cream: var(--brand-paper); /* ============================================================ TONAL SCALES — derived from core 10 steps per family, Carbon-style ============================================================ */ /* Graphite — Primary (anchored on #262A2E) Note: --deep-70 is repointed to graphite so legacy hero stages (which referenced --deep-70 in the old teal palette) now render in the brand's graphite. */ --deep-10: #eef0f2; --deep-20: #d6dade; --deep-30: #b3b9c0; --deep-40: #8a9099; --deep-50: #646b74; --deep-60: #474d54; --deep-70: #262A2E; /* repointed → graphite (was #353a40) */ --deep-80: #262A2E; /* CORE */ --deep-90: #181b1e; --deep-100: #0b0d0f; /* Baltic — Secondary blue (anchored on #5F7998 at step 60) */ --baltic-10: #eef2f7; --baltic-20: #d4dde8; --baltic-30: #b3c1d3; --baltic-40: #92a3bb; --baltic-50: #7689a6; --baltic-60: #5F7998; /* CORE */ --baltic-70: #4d637e; --baltic-80: #3a4d63; --baltic-90: #283648; --baltic-100: #15202c; /* Steel — neutral cool gray (anchored on #A7ADB3 at step 40) */ --steel-10: #f5f6f7; --steel-20: #EDEDED; /* CORE — paper */ --steel-30: #DDDDDD; /* CORE — mist */ --steel-40: #A7ADB3; /* CORE — steel */ --steel-50: #888e95; --steel-60: #6b7177; --steel-70: #50555a; --steel-80: #383c40; --steel-90: #262A2E; /* CORE — graphite */ --steel-100: #0b0d0f; /* High Voltage — warm accent (anchored on #F09260 at step 50) — use sparingly */ --terra-10: #fdeee4; --terra-20: #fbd6bf; --terra-30: #f7bb98; --terra-40: #f3a67c; --terra-50: #F09260; /* CORE */ --terra-60: #cb754a; --terra-70: #a25b39; --terra-80: #76422a; --terra-90: #4a291a; --terra-100: #20120b; /* Sky — cool accent (anchored on #A9CCF5 at step 40) — use sparingly */ --sky-10: #f3f8fe; --sky-20: #dceaf9; --sky-30: #c5dbf6; --sky-40: #A6CAF9; /* CORE */ --sky-50: #8ab1e3; --sky-60: #6e95cb; --sky-70: #54799f; --sky-80: #3c5a78; --sky-90: #253a52; --sky-100: #11202f; /* Graphite/grey neutrals (legacy gr-* tokens) — DEPRECATED, removal in v0.3. The steel-* ramp is the single source of truth for neutrals; gr-* steps now alias it. gr-5 / gr-30 have no steel equivalent and keep literal values until callers migrate. */ --gr-0: var(--brand-white); --gr-5: #f7f7f8; /* unique — no steel step */ --gr-10: var(--steel-20); /* paper */ --gr-20: var(--steel-30); /* mist */ --gr-30: #c4c6c9; /* unique — no steel step */ --gr-40: var(--steel-40); /* steel */ --gr-50: var(--steel-50); --gr-60: var(--steel-60); --gr-70: var(--steel-70); --gr-80: var(--steel-80); --gr-90: var(--steel-90); /* graphite (was ink) */ --gr-100: var(--steel-100); --gr-cream: var(--brand-paper); /* legacy alias */ /* ---- Signal ---- */ --s-success: #4c7a3e; --s-warn: #a37423; --s-error: #9c3a32; --s-info: var(--baltic-60); /* ---- Semantic bindings ---- */ --bg: var(--brand-white); /* Default ground is now white */ --bg-paper: var(--brand-paper); /* Cards, callouts */ --bg-soft: var(--brand-mist); /* Quiet panels */ --bg-white: #ffffff; --bg-deep: var(--brand-graphite); /* Primary dark surface */ --bg-ink: var(--brand-graphite); /* alias */ --ink: var(--brand-graphite); --ink-muted: var(--gr-60); --ink-faint: var(--gr-50); --ink-on-dark: #ffffff; --ink-on-dark-muted: rgba(255,255,255,0.68); --ink-on-dark-faint: rgba(255,255,255,0.42); --rule: rgba(38,42,46,0.14); --rule-bold: rgba(38,42,46,0.28); --rule-on-dark: rgba(255,255,255,0.14); --brand: var(--brand-graphite); --accent: var(--accent-terra); --accent-2: var(--accent-sky); --link: var(--brand-graphite); /* ---- Spacing (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---- Layout ---- */ --sidebar-w: 272px; --content-max: 1040px; --content-pad: 64px; } /* ============================================================ Reset + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1.5; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; } a:hover { color: var(--deep-90); } code, kbd, samp { font-family: var(--font-sans); font-size: 0.9em; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-12) 0; } img { max-width: 100%; display: block; } /* ============================================================ Axia-style type scale ============================================================ */ .t-display-01 { font-size: 88px; line-height: 1.02; letter-spacing: -0.025em; font-weight: 900; } .t-display-02 { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; } .t-h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.018em; font-weight: 900; } .t-h2 { font-size: 32px; line-height: 1.18; letter-spacing: -0.018em; font-weight: 900; } .t-h3 { font-size: 14px; line-height: 1.3; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; } .t-h4 { font-size: 20px; line-height: 1.3; letter-spacing: -0.002em; font-weight: 700; } .t-body-lg { font-size: 19px; line-height: 1.55; font-weight: 400; } .t-body { font-size: 16px; line-height: 1.6; font-weight: 400; } .t-body-sm { font-size: 14px; line-height: 1.55; font-weight: 300; } .t-caption { font-size: 12px; line-height: 1.45; font-weight: 500; letter-spacing: 0.02em; } .t-eyebrow { font-size: 11px; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .t-mono { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; letter-spacing: 0; } .ink-muted { color: var(--ink-muted); } .ink-faint { color: var(--ink-faint); } /* ============================================================ Mobile — tighten gutters and the big display type ============================================================ */ @media (max-width: 768px) { :root { --content-pad: 22px; } .t-display-01 { font-size: 44px; line-height: 1.05; } .t-display-02 { font-size: 36px; line-height: 1.08; } .t-h1 { font-size: 34px; line-height: 1.1; } .t-h2 { font-size: 25px; } .t-body-lg { font-size: 17px; } }