Colors
Semantic values from src/app.css. The same token names re-point under data-skin="app".
Radii & shadows
Radii
- --radius-sm6px
- --radius-md8px
- --radius-lg10px
- --radius-card12px
- --radius-2xl16px
- --radius-header-pill40px
- --radius-button-pill80px
- --radius-pill9999px
Shadows
- --shadow-xs
- --shadow-btn
- --shadow-btn-hover
- --shadow-card
- --shadow-fortal-header
- --shadow-modal-card
Typography
Urbanist for display, Inter for body, Geist for the app skin. Sizes are tokens, not literals.
Display · Urbanist
80 — stat hero
56 / 1.15 — marketing H2
32 — catalog card title
Body · Inter
24 / 1.3 — section subheading
18 / 1.5 — promotional body
16 / 1.5 — base body copy
16 / 24 medium — nav / H6
Mono · Geist Mono
13 — code, tokens, tabular data
Marketing layout tokens
| Token | Role |
|---|---|
| --layout-max | Marketing content max width (1440px) |
| --section-gutter-x | Section horizontal gutter (desktop) |
| --section-pad-block-desktop | Section vertical padding (desktop) |
| --section-pad-block-mobile | Section vertical padding (mobile) |
| --header-stack-height | Fixed header height — full-bleed pages clear this |
| --header-clearance | Header + spacing offset for content |
| --logo-height | Header logo height (46.286px) |
| --text-stat-hero-size | Stat hero numerals (80px) |
| --text-h5-section-size | Section subheading / hero subcopy (24px) |
| --text-body-promo-size | Promotional body copy (18px) |
Trust chips
Inline pill labels with a pill-arrow well, used in headline rows.
secure workflows every tool any team Fortal
Section header
Centered heading + subcopy; the heading accepts an accent span.
One system, many surfaces
A shared building block used across marketing sections for a consistent heading rhythm.
Component library
Page-level sections composed from the primitives above. Each is a single component in $lib/marketing.
| Component | Role |
|---|---|
| PurpleHeroSection | Accent-purple hero — product pages, roles, use-cases |
| TeamsHeroSection | Lime hero with accent-purple headline |
| ClosingCtaSection | Lime CTA panel with swoosh + pill-arrow decorations |
| TestimonialsSection | Three-column vertical marquee of customer quotes |
| FaqSection | Single-open accordion — homepage + product pages |
| WorkflowGridSection | Five numbered workflow cards with hand-built illustrations |
| WorkspaceSection | Feature tabs over the scaled workspace dashboard |
| UseCasesCatalogSection | Sticky-nav scrollspy across 11 workflows |
| TeamsCatalogSection | Horizontal sticky-tab scrollspy across 6 teams |
| TrustStatsSection | Three tinted stat cards |
| ProductPageShell | Children + FAQ + closing CTA + testimonials |