Design system
Styles & typography
Fonts, colors, type scale, responsive headings, spacing, and breakpoints used across XCmap.
Tokens live in src/styles/global.css.
01
Fonts
One type family for everything. Loaded from Google Fonts in
BaseLayout.astro.
No local font files.
Primary — Inter
Aa Bb Cc 123
Weights: 400, 500, 600, 700, 800
- CSS var
- --font-sans
- Heading var
- --font-heading
Fallback stack
ui-sans-serif, system-ui, sans-serif
Monospace token
ui-monospace, "Fira Code", monospace
Fira Code is referenced but not loaded.
Weight samples
Regular 400 — body copy and paragraphs
Medium 500 — emphasized body
Semibold 600 — labels, kickers
Bold 700 — section headings
Extrabold 800 — page heroes
02
Colors
All colors are Tailwind tokens from @theme.
Use bg-*,
text-*, and
border-* — never raw hex in components.
Brand
primary
#2563eb
CTAs, links, kickers, icons
bg-primary · text-primary · border-primary
primary-light
#3b82f6
Highlights, lighter accents
bg-primary-light · text-primary-light · border-primary-light
primary-dark
#1d4ed8
Button hover, CTA gradient start
bg-primary-dark · text-primary-dark · border-primary-dark
secondary
#7c3aed
Gradient accents, violet highlights
bg-secondary · text-secondary · border-secondary
secondary-light
#8b5cf6
Softer violet accents
bg-secondary-light · text-secondary-light · border-secondary-light
secondary-dark
#6d28d9
Deeper violet in gradients
bg-secondary-dark · text-secondary-dark · border-secondary-dark
accent
#06b6d4
Cyan accent — reserved
bg-accent · text-accent · border-accent
Neutrals & surfaces
foreground
#0f172a
Headings, primary text
bg-foreground · text-foreground · border-foreground
muted
#64748b
Body secondary, captions, footer
bg-muted · text-muted · border-muted
background
#ffffff
Page background
bg-background · text-background · border-background
surface
#ffffff
Cards, panels
bg-surface · text-surface · border-surface
surface-alt
#f8fafc
Alternate sections, code blocks
bg-surface-alt · text-surface-alt · border-surface-alt
border
#e2e8f0
Dividers, card borders
bg-border · text-border · border-border
Semantic
success
#10b981
Positive states, “Do” labels
bg-success · text-success · border-success
warning
#f59e0b
Caution states
bg-warning · text-warning · border-warning
error
#ef4444
Errors, “Don't” labels
bg-error · text-error · border-error
Live UI combinations
Primary CTA
Semantic states
Surface + border
Card on surface-alt with border token.
Gradient & band classes
Section backgrounds defined in src/styles/home-adsmom.css.
Not color tokens — use these classes on section wrappers.
home2-hero-bg / adsmom-hero-bg Hero backgrounds — blue + violet radial gradients
home2-band-blue Soft blue-violet section band
home2-band-blue-deep Richer blue-violet band
home2-band-ai AI section — surface-alt to white fade
home2-cta-gradient CTA blocks — primary to secondary gradient
home2-text-gradient Gradient text — primary through secondary
home2-hero-bg
Hero gradient
home2-cta-gradient
CTA gradient
home2-band-blue
Section band
Gradient text
home2-text-gradient
| CSS variable | Hex | Tailwind class | Use |
|---|---|---|---|
| --color-primary | #2563eb | bg / text / border-primary | CTAs, links, kickers, icons |
| --color-primary-light | #3b82f6 | bg / text / border-primary-light | Highlights, lighter accents |
| --color-primary-dark | #1d4ed8 | bg / text / border-primary-dark | Button hover, CTA gradient start |
| --color-secondary | #7c3aed | bg / text / border-secondary | Gradient accents, violet highlights |
| --color-secondary-light | #8b5cf6 | bg / text / border-secondary-light | Softer violet accents |
| --color-secondary-dark | #6d28d9 | bg / text / border-secondary-dark | Deeper violet in gradients |
| --color-accent | #06b6d4 | bg / text / border-accent | Cyan accent — reserved |
| --color-foreground | #0f172a | bg / text / border-foreground | Headings, primary text |
| --color-muted | #64748b | bg / text / border-muted | Body secondary, captions, footer |
| --color-background | #ffffff | bg / text / border-background | Page background |
| --color-surface | #ffffff | bg / text / border-surface | Cards, panels |
| --color-surface-alt | #f8fafc | bg / text / border-surface-alt | Alternate sections, code blocks |
| --color-border | #e2e8f0 | bg / text / border-border | Dividers, card borders |
| --color-success | #10b981 | bg / text / border-success | Positive states, “Do” labels |
| --color-warning | #f59e0b | bg / text / border-warning | Caution states |
| --color-error | #ef4444 | bg / text / border-error | Errors, “Don't” labels |
03
Type tokens
Fixed-size design tokens in @theme.
Use responsive classes (type-h1, etc.) for headings.
| Token | Size | Px | Line-height | Use |
|---|---|---|---|---|
| text-display | 4.5rem | 72px | 1.0 | Reserved — not used yet |
| text-h1 | 3.75rem | 60px | 1.1 | Page heroes (desktop) |
| text-h2 | 3rem | 48px | 1.15 | Section headings (desktop) |
| text-h3 | 2.25rem | 36px | 1.2 | Sub-section headings (tablet) |
| text-h4 | 1.875rem | 30px | 1.25 | Section headings (mobile) |
| text-body-lg | 1.25rem | 20px | 1.6 | Subheads, intros |
| text-body | 1rem | 16px | 1.6 | Body copy |
| text-small | 0.875rem | 14px | 1.5 | Labels, captions |
04
Responsive headings
Semantic classes scale across breakpoints so h1 always beats h2, and h2 beats h3. Resize the browser to preview.
| Class | Element | Weight | Mobile (<768px) | Tablet (768–1023px) | Desktop (≥1024px) |
|---|---|---|---|---|---|
| type-h1 | <h1> | 800 extrabold | 36px (text-h3) | 48px (text-h2) | 60px (text-h1) |
| type-h2 | <h2> | 700 bold | 30px (text-h4) | 36px (text-h3) | 48px (text-h2) |
| type-h3 | <h3> | 700 bold | 20px (text-body-lg) | 30px (text-h4) | 36px (text-h3) |
.type-h1
Page hero heading
.type-h2
Section heading
.type-h3
Sub-section heading
Stacked hierarchy
Hero title
Section below hero
Detail block title
05
Body & labels
Body tokens are fixed at all breakpoints — only headings scale responsively.
text-body-lg · 20px · lh 1.6
Hero subheads, section intros, and lead paragraphs. Slightly larger than body for emphasis without jumping a heading level.
text-body · 16px · lh 1.6
Default paragraph text across marketing pages. Pair with text-muted for secondary copy or text-foreground for primary content.
text-small · 14px · lh 1.5
Kicker / footer label
Captions, table cells, footer column headings, and metadata.
06
Spacing & layout
Paddings, margins, and gaps are defined as CSS variables in
global.css
and applied via layout component classes. Homepage sections use
.home2-section or
.home2-section-sm.
Layout tokens
| CSS variable | Tailwind | Size | Px | Use |
|---|---|---|---|---|
| --spacing-container | px-6 | 1.5rem | 24px | Horizontal page padding (.section-container) |
| --spacing-kicker | mt-3 | 0.75rem | 12px | Kicker → heading, heading → subtitle |
| --spacing-header | mt-12 | 3rem | 48px | Section header → main content (.section-content) |
| --spacing-cta | mt-10 | 2.5rem | 40px | Content block → CTA row |
| --spacing-grid | gap-5 | 1.25rem | 20px | Card grids (.section-grid) |
| --spacing-split | gap-10 | 2.5rem | 40px | Two-column split layouts (mobile) |
| --spacing-split-lg | lg:gap-14 | 3.5rem | 56px | Two-column split layouts (desktop) |
| --spacing-card | p-6 | 1.5rem | 24px | Card inner padding |
| --spacing-card-lg | p-8 | 2rem | 32px | Large card / panel padding |
| --spacing-btn-x | px-8 | 2rem | 32px | Primary button horizontal (.btn-primary) |
| --spacing-btn-y | py-3.5 | 0.875rem | 14px | Primary button vertical (.btn-primary) |
Section vertical padding
| Class | Token | Mobile | Tablet+ | Use |
|---|---|---|---|---|
| .home2-hero-section | --spacing-hero-* | 7rem top / 3.5rem bottom | 8rem top / 4rem bottom @768px | Hero only (nav clearance + bottom) |
| .home2-section | --spacing-section-home2 | 4rem (64px) | 5.5rem (88px) @768px | Standard homepage sections |
| .home2-section-sm | --spacing-section-home2-sm | 3rem (48px) | 4rem (64px) @768px | Compact bands (social proof, nav pills) |
| .home-section | — | 5rem (80px) | 7rem (112px) @768px | Legacy marketing sections |
| py-section | --spacing-section | 6rem (96px) | 6rem | Older section components |
| py-section-sm | --spacing-section-sm | 4rem (64px) | 4rem | Compact older sections |
Layout component classes
.section-container mx-auto max-w-7xl px-6 — page content width
.section-header Centered header block, max-w-2xl
.section-header-sm Narrow centered header, max-w-xl
.section-kicker Uppercase section label above h2
.section-subtitle mt-3 text-body text-muted below h2
.section-content mt-12 — space after header before grid/content
.section-grid grid gap-5 — card and tile grids
.section-split Two-column split: gap-10, lg:gap-14
.btn-primary Standard primary CTA button
Standard section header block
Used on Vs, Platform, Use Cases, FAQ, etc.
<header class="section-header">
<p class="section-kicker">…</p>
<h2 class="mt-3 type-h2">…</h2>
<p class="section-subtitle">…</p>
</header>
<div class="section-content section-grid">…</div>
Example kicker
Section title
Subtitle uses mt-3 and text-body.
Common gap & margin values
| Class | Px | When to use |
|---|---|---|
| gap-2 | 8px | Tab pills, tight inline groups |
| gap-3 | 12px | CTA button rows, bullet lists |
| gap-5 | 20px | Card grids (standard) |
| gap-10 | 40px | Split layout columns (mobile) |
| lg:gap-14 | 56px | Split layout columns (desktop) |
| mt-3 | 12px | Kicker → h2, h2 → subtitle |
| mt-10 | 40px | Content → CTA button |
| mt-12 | 48px | Header → main content |
07
Letter spacing
tracking-tight
All h1, h2, h3 headings
tracking-[0.2em]
Hero taglines
tracking-widest
Section kickers
tracking-wide
Footer labels
08
Breakpoints
Tailwind defaults. Mobile-first — unprefixed classes apply from 0px up; prefix overrides at min-width.
| Prefix | Min width | Device |
|---|---|---|
| (none) | 0px | Mobile (default) |
| sm: | 640px | Large phones |
| md: | 768px | Tablets |
| lg: | 1024px | Laptops+ |
| xl: | 1280px | Desktops |
| 2xl: | 1536px | Large screens |
Responsive type breakpoints used by heading classes
- Mobile — default (0–767px)
- Tablet —
md:(768px+) - Desktop —
lg:(1024px+)
09
Usage
Always use design tokens and semantic heading classes — never hardcode pixel sizes or hex colors.
Do
<h1 class="type-h1 text-foreground">
Page title
</h1>
<button class="bg-primary text-white
hover:bg-primary-dark">
CTA
</button>
<p class="text-body-lg text-muted">
Intro paragraph
</p>
<section class="home2-section home2-band-blue">
<div class="section-container">
<header class="section-header">
<p class="section-kicker">…</p>
<h2 class="mt-3 type-h2">…</h2>
<p class="section-subtitle">…</p>
</header>
<div class="section-content section-grid">
…
</div>
</div>
</section>Don't
<h1 class="text-4xl sm:text-5xl">
<div class="bg-[#2563eb]">
<p class="text-[#64748b]">
<div class="text-[18px]">
Source files:
src/styles/global.css (tokens + type classes),
src/styles/home.css and
src/styles/home-adsmom.css (section padding).