/* ============================================================ XyloTech Design System — Colors & Type Source of truth for every artifact in this brand. ============================================================ */ /* ---------- FONTS ---------- Primary face in the pitch deck is Calibri (Microsoft). We substitute Carlito — a metric-compatible open replacement — so layout reflows identically when web fonts load. Nunito is used for some emphatic display lines in the deck. */ @import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ============================================================ COLOR — RAW PALETTE ============================================================ */ /* Greens — the brand's spine. Walk from deep forest → mint. */ --xt-ink: #020A04; /* near-black w/ green tint — base canvas */ --xt-ink-2: #0A150A; /* slightly lifted ink */ --xt-bark: #0D2418; /* deep bark / card base */ --xt-bark-2: #0F2A1C; /* card hover / surface 2 */ --xt-moss: #014D3C; /* dim moss — borders, dividers */ --xt-moss-2: #0D4F3C; --xt-pine: #016B52; /* mid pine — secondary fills */ --xt-leaf: #028A6A; /* leaf — supporting brand green */ --xt-xylo: #138266; /* XYLO GREEN — primary brand */ --xt-xylo-2: #1B8A6B; /* hover variant */ --xt-fern: #2D7A4F; /* fern — wood-grain accent */ --xt-sage: #4A7A5A; /* dusty sage — muted text on dark */ --xt-mint: #02C39A; /* MINT — bright accent / links / focus */ --xt-mint-2: #5DCAA5; /* soft mint — pills, chips */ --xt-sprout: #5FD85F; /* sprout — positive deltas, "yes" */ --xt-glow: #00F1CE; /* hi-vis cyan-mint — data viz peaks */ /* Warm accent — used sparingly for caution / contrast peaks. */ --xt-amber: #E8930A; /* Neutrals on dark */ --xt-paper: #FFFFFF; --xt-paper-2: #EFEFEF; /* default body text on dark */ --xt-mist: #CCCCCC; --xt-fog: #BBBBBB; --xt-stone: #AAAAAA; /* secondary text */ /* ============================================================ COLOR — SEMANTIC ============================================================ */ --bg: var(--xt-ink); --bg-elev-1: var(--xt-ink-2); --bg-elev-2: var(--xt-bark); --bg-elev-3: var(--xt-bark-2); --fg: var(--xt-paper-2); --fg-strong: var(--xt-paper); --fg-muted: var(--xt-stone); --fg-subtle: var(--xt-sage); --border: color-mix(in srgb, var(--xt-moss) 60%, transparent); --border-strong: var(--xt-moss); --divider: color-mix(in srgb, var(--xt-paper) 8%, transparent); --primary: var(--xt-xylo); --primary-hover: var(--xt-xylo-2); --primary-fg: var(--xt-paper); --accent: var(--xt-mint); --accent-soft: var(--xt-mint-2); --accent-bright: var(--xt-glow); --positive: var(--xt-sprout); --warning: var(--xt-amber); --info: var(--xt-mint); --link: var(--xt-mint); --link-hover: var(--xt-glow); --focus-ring: color-mix(in srgb, var(--xt-mint) 65%, transparent); /* ============================================================ TYPE — RAW ============================================================ */ --font-sans: 'Carlito', 'Calibri', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: 'Manrope', 'Carlito', 'Calibri', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Sizes — derived from the deck's pt scale (pt × 1.333 ≈ px). */ --t-hero: clamp(44px, 6.4vw, 96px); /* slide title */ --t-display: clamp(32px, 4.2vw, 56px); /* section opener */ --t-h1: 40px; --t-h2: 30px; --t-h3: 22px; --t-h4: 18px; --t-body: 16px; --t-small: 14px; --t-eyebrow: 12px; --t-mono: 13px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-loose: 1.65; --ls-display: -0.01em; --ls-eyebrow: 0.18em; /* ALL-CAPS eyebrows are wide */ --ls-mono: 0; /* ============================================================ SPACING / RADII / SHADOW / MOTION ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; /* default card radius — soft but architectural */ --r-xl: 28px; --r-pill: 999px; /* Shadows — two layers. Outer for elevation on dark canvas (slight green tint, never neutral). Inner for inset chrome. */ --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px -8px rgba(0,0,0,.55); --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(2,195,154,.06); --shadow-glow: 0 0 0 1px rgba(2,195,154,.35), 0 12px 36px -10px rgba(2,195,154,.35); /* Motion — slow, organic. No bounces; nothing perky. */ --ease-out: cubic-bezier(.2, .8, .25, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 600ms; } /* ============================================================ SEMANTIC TYPE STYLES Use these classes directly, OR copy the rule into a component. ============================================================ */ .xt-hero, h1.xt-hero { font-family: var(--font-sans); font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 700; color: var(--fg-strong); } .xt-display { font-family: var(--font-sans); font-size: var(--t-display); line-height: var(--lh-snug); font-weight: 700; color: var(--fg-strong); } .xt-h1, h1 { font-family: var(--font-sans); font-size: var(--t-h1); line-height: var(--lh-snug); font-weight: 700; color: var(--fg-strong); } .xt-h2, h2 { font-family: var(--font-sans); font-size: var(--t-h2); line-height: var(--lh-snug); font-weight: 700; color: var(--fg-strong); } .xt-h3, h3 { font-family: var(--font-sans); font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: 700; color: var(--fg-strong); } .xt-h4, h4 { font-family: var(--font-sans); font-size: var(--t-h4); line-height: var(--lh-normal); font-weight: 700; color: var(--fg-strong); } p, .xt-body { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg); text-wrap: pretty; } .xt-small { font-family: var(--font-sans); font-size: var(--t-small); line-height: var(--lh-normal); color: var(--fg-muted); } /* Eyebrow — the all-caps wide-tracked label seen above titles on every section. Often colored mint or sage. */ .xt-eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); } code, .xt-mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); color: var(--accent); } /* Stat — the giant green number block that appears all over the deck. Manrope 800 reads as serious + engineered, vs. Nunito's softer feel. */ .xt-stat { font-family: var(--font-display); font-size: clamp(56px, 7vw, 120px); line-height: 0.9; font-weight: 800; color: var(--xt-mint); letter-spacing: -0.03em; } .xt-stat-label { font-family: var(--font-sans); font-size: var(--t-small); font-weight: 700; color: var(--fg); letter-spacing: 0.06em; text-transform: uppercase; } /* Brand mark wordmark — XyloTech wordmark, single-color (mint). Use Nunito 800, tight tracking, mint by default. The logo stack mark (assets/logo-xylotech-stacked.png) is the only two-tone treatment; the typeset wordmark stays mono. */ .xt-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--xt-mint); }