/* ============================================================ EXACORE — Foundations: Color & Type ------------------------------------------------------------ Monochrome-dominant, engineered, monoline-geometric brand. Black ink on paper white, a true-neutral gray ramp, and a single electric "signal" accent reserved for interaction and live agent activity. Borders over shadows. Sharp geometry. ============================================================ */ /* ---- Webfonts (Google Fonts) ----------------------------------- Brand had no defined typeface (placeholder site used Arial). These were SELECTED to match the logo's geometric monoline character and the developer/agentic positioning: - Space Grotesk → display (geometric, technical) - IBM Plex Sans → body / UI (engineered, neutral, legible) - JetBrains Mono → code / data (developer-native) Swap the @import for local @font-face if you self-host. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* ===== BRAND INK & PAPER ===== */ --ink: #0A0B0D; /* near-black — logo, primary text */ --ink-soft: #16181C; /* raised black surfaces */ --paper: #FFFFFF; /* pure white */ --paper-warm: #FAFAF8; /* default page background (off-white) */ /* ===== NEUTRAL RAMP (cool true-gray) ===== */ --n-50: #F6F7F8; --n-100: #ECEDEF; --n-200: #DEE0E3; --n-300: #C7CACE; --n-400: #9DA1A8; --n-500: #71757D; --n-600: #51555C; --n-700: #393C42; --n-800: #24262B; --n-900: #141518; /* ===== ACCENT — "Signal" deeper azure ===== */ /* Cloud / precision / interactive. Also = live-agent activity. Reserved, Nordic, engineering-calm — restrained on purpose. */ --accent-50: #ECF1FC; --accent-100: #D5E2F8; --accent-200: #AFC4F2; --accent-300: #7E9EEA; --accent-400: #4A74DE; --accent-500: #1F50D0; /* PRIMARY accent */ --accent-600: #1840A8; --accent-700: #133180; --accent-800: #0F2660; --accent-900: #0B1B45; /* ===== SEMANTIC (muted technical tones) ===== */ --success: #1E9E6A; --success-bg:#E7F6EF; --warning: #B8791A; --warning-bg:#FBF1DE; --danger: #D63B3B; --danger-bg: #FBE9E9; --info: var(--accent-500); --info-bg: var(--accent-50); /* ===== SEMANTIC SURFACE / TEXT TOKENS ===== */ --bg: var(--paper-warm); --surface: var(--paper); --surface-2: var(--n-50); --surface-in1: var(--n-100); --fg1: var(--ink); /* primary text */ --fg2: var(--n-600); /* secondary text */ --fg3: var(--n-500); /* tertiary / muted */ --fg-onaccent: #FFFFFF; --fg-ondark: #F6F7F8; --line: var(--n-200); /* hairline border */ --line-strong: var(--n-300); --link: var(--accent-600); /* ===== TYPE FAMILIES ===== */ --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ===== TYPE SCALE (1.25 major-third-ish, tuned) ===== */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 46px; --text-4xl: 60px; --text-5xl: 78px; --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.55; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrow / label all-caps */ /* ===== SPACING (4px grid) ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ===== RADII (restrained / technical) ===== */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ===== BORDERS ===== */ --bw: 1px; --bw-strong: 1.5px; /* ===== ELEVATION (subtle — borders do the work) ===== */ --shadow-xs: 0 1px 2px rgba(10,11,13,0.05); --shadow-sm: 0 1px 2px rgba(10,11,13,0.06), 0 2px 6px rgba(10,11,13,0.05); --shadow-md: 0 2px 4px rgba(10,11,13,0.06), 0 8px 20px rgba(10,11,13,0.08); --shadow-lg: 0 4px 8px rgba(10,11,13,0.07), 0 18px 40px rgba(10,11,13,0.12); --shadow-accent: 0 6px 22px rgba(31,80,208,0.28); /* ===== MOTION ===== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC TYPE ROLES ============================================================ */ .x-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg3); } .x-display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } .x-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } .x-h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); } .x-h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: var(--leading-snug); color: var(--fg1); } .x-h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); color: var(--fg1); } .x-lead { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 400; line-height: var(--leading-normal); color: var(--fg2); } .x-body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); color: var(--fg1); } .x-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg2); } .x-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--fg1); } .x-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--fg1); font-feature-settings: 'zero' 1; } .x-code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-in1); border: var(--bw) solid var(--line); border-radius: var(--r-xs); padding: 0.08em 0.38em; color: var(--ink-soft); }