Design System
Internal reference for the Apex AI template. All colors, typography, components, and patterns documented in one place.
Logo
Asymmetric starburst — 16 tapered rays with varying lengths. Available as SVG with currentColor fill.
Dark on Light
64px 40px 24px 16px Light on Dark
64px 40px 24px 16px Files: /logo.svg (dark, currentColor), /logo-white.svg (white fill)
Favicon: /favicon.svg (SVG), /favicon-16x16.png, /favicon-32x32.png, /apple-touch-icon.png (180px), /android-chrome-192x192.png, /android-chrome-512x512.png
Colors
Warm off-white palette. No bright accent — black is the primary action color. Orange for highlights.
Backgrounds
Page Background
#F5F5F0
var(--color-background)
Card / Muted
#EAEAE5
var(--color-card)
Surface Dark
#1E1E1B
CTA, Modes section, badges
Foreground / Footer
#1A1A1A
var(--color-foreground)
White
#FFFFFF
Floating cards on images
Text
Primary Text
#1A1A1A
text-foreground
Secondary / Muted
#6B6B6B
text-muted-foreground
Text on Dark (muted)
text-background/50
On dark sections
Text on Dark (primary)
text-background
Headings on dark sections
Accent & Borders
Accent Orange
#E8630A
var(--color-accent-orange)
Badges, progress bars, numbers
Border
#D5D5D0
var(--color-border)
Border on Dark
border-white/[0.03]
Footer divider
Status Colors
Warm but clear status tones that stand out against the off-white palette. Each has a strong color, foreground, and a soft muted background variant.
Info
#2E72A0
var(--color-info)
Success
#358028
var(--color-success)
Warning
#FCAA2D
var(--color-warning)
Danger
#B83838
var(--color-danger)
Violet
#7050B4
var(--color-violet)
Muted Backgrounds
Info Muted
#F4F8FB
var(--color-info-muted)
Success Muted
#F2F9F0
var(--color-success-muted)
Warning Muted
#FEF3D6
var(--color-warning-muted)
Danger Muted
#FCF0F0
var(--color-danger-muted)
Violet Muted
#F4EFFC
var(--color-violet-muted)
Usage Examples
Your deployment is in progress.
Pipeline completed successfully.
API rate limit approaching threshold.
Build failed. Check logs for details.
New feature flag enabled for beta users.
Typography
Font: Geist (variable). Geist Mono for code/numbers. Font-weight 600 (semibold) for headings, 400 for body.
Display / H1
text-4xl md:text-6xl lg:text-7xl / font-semibold / leading-[1.1] / tracking-tight
Used in: Hero headline
Section Heading / H2
text-3xl md:text-4xl lg:text-5xl / font-semibold / leading-[1.1] / tracking-tight
Used in: All section headings
Card Title / H3
text-xl / font-semibold
Used in: Pricing cards, Mode cards, Testimonials
Small Card Title / H4
text-base / font-semibold
Used in: Pillar cards, Feature titles
Subtitle / Lead text below headings in sections
text-lg md:text-xl / text-muted-foreground / leading-relaxed
Body text used for descriptions in sections and longer content blocks.
text-base / text-muted-foreground / leading-relaxed
Small body text for card descriptions, testimonial quotes, feature descriptions.
text-sm / text-muted-foreground / leading-relaxed
Section Label / Overline
text-sm / font-medium / text-muted-foreground / uppercase / tracking-wider
Used above every H2 as category label ("The platform", "How it works", etc.)
2,400+
text-3xl md:text-4xl / font-semibold / tracking-tight
Used in: Metrics, Stats, large numbers
01 02 03
text-sm / font-mono / color: var(--color-accent-orange)
Used in: Step numbers (HowItWorks section)
Buttons
All buttons are pill-shaped (rounded-full). Two variants: primary (filled) and secondary (outline).
On Light Background
Primary: bg-foreground text-background rounded-full px-7 py-3.5 text-sm font-medium hover:bg-foreground/85
Secondary: bg-card rounded-full px-7 py-3.5 text-sm font-medium hover:bg-foreground hover:text-background
Ghost: text-sm font-medium text-foreground + arrow SVG
On Dark Background
Primary: bg-background text-foreground rounded-full px-7 py-3.5 hover:bg-background/90
Secondary: border border-background/20 text-background rounded-full px-7 py-3.5 hover:bg-background/10
Cards
All cards use rounded-2xl (16px). No borders by default — depth comes from background contrast.
Standard Card
Card Title
Used for pillars, BYOAI providers, and general content on light background.
Floating Card
All systems operational
Inverted Card
Highlighted Pricing
Used for the featured pricing tier. White text on dark.
Standard: rounded-2xl bg-card p-8
Floating: rounded-xl bg-white p-4 shadow-lg (overlaid on images)
Inverted: rounded-2xl bg-foreground p-8 text-background
Cards on Dark Background
Dark Card
Card Title
Used on dark sections (Modes). Semi-transparent black overlay.
Light Card on Dark
Card Title
Used for non-highlighted pricing tiers.
Dark Card: rounded-2xl p-8 style="background-color: rgba(0,0,0,0.3);" — on #1E1E1B bg
Light Card on Dark: rounded-2xl bg-background border border-border p-8
Pattern Card
A floating white card centered on a pattern background image. Used for feature showcases, tier cards, and UI previews. The pattern provides visual texture, the card draws focus to the content.
Text Content
Card Title
Content floats on a pattern background image. Great for showcasing features or UI elements.
Active pipelines
24
Outer: relative rounded-2xl overflow-hidden, background-image pattern, aspect-ratio: 3/4 (or 4/3)
Inner: absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] bg-background rounded-2xl shadow-float p-6
Patterns: /images/pattern30.jpg, pattern31.jpg, pattern32.jpg (or any pattern image)
Badges
Pill-shaped badges for labels and highlights.
Orange: text-xs font-medium text-white px-3 py-1 rounded-full / background-color: var(--color-accent-orange)
Default: text-xs font-medium text-muted-foreground px-3 py-1 rounded-full bg-card
Section Patterns
Sections alternate backgrounds for visual rhythm. Every section uses px-6 horizontal padding and mx-auto max-w-6xl for the inner container.
Light Section
Hero, Pillars, BYOAI, Testimonials
#F5F5F0 (default)
Muted Section
Problem, HowItWorks, Metrics, Pricing
#EAEAE5 (bg-card)
Dark Section
Modes, FinalCTA
#1E1E1B
Footer
Always last, no rounded corners
#1A1A1A (bg-foreground)
Section padding: py-20 md:py-28 px-6
Container: mx-auto max-w-6xl
Section heading structure: overline label (uppercase, small, muted) + H2 + subtitle
Gap between cards: gap-3
Shadows
Minimal shadow usage. Depth primarily from background color contrast.
Organic Drop Shadow
shadow-float
Hero bento tiles
Floating Card Shadow
shadow-lg
Status cards overlaid on images
Nav Pill Shadow
shadow-lg shadow-black/5
Sticky nav only (via CSS transition)
Extreme Shadow (255)
shadow-255 (see globals.css)
Hero images, pattern cards, high-impact elements
Border Radius
Generously rounded everywhere.
Pill / Full
rounded-full (9999px)
Buttons, nav pill, badges
Large
rounded-2xl (16px)
Cards, images, sections
Medium
rounded-xl (12px)
Floating cards, icon containers
Circle
rounded-full (on square)
Avatars, play button
Animations
Subtle scroll-triggered reveals. No heavy motion.
Scroll Reveal (default)
data-animate — fade in + translateY(20px) / 0.6s ease-out
Fade Only
data-animate="fade" — opacity only, no movement
Scale
data-animate="scale" — scale(0.95) to scale(1) / 0.6s ease-out
Stagger Delay
data-delay="1" through data-delay="5" — 100ms increments
Nav Pill Transition
.nav-bar / .nav-bar.is-sticky — 0.45s cubic-bezier(0.4, 0, 0.2, 1) on max-width, padding, border-radius, background, shadow
Logo Marquee
logo-scroll 45s linear infinite — pauses on hover, respects prefers-reduced-motion
Image Hover
group-hover:scale-[1.02] / transition-transform duration-500
Component Index
All section components used on the homepage, in order.
| # | Component | File | Background | Notes |
|---|---|---|---|---|
| 1 | Hero | sections/Hero.astro | #F5F5F0 | Props: title (HTML), subtitle, primaryCta, secondaryCta. Bento grid with 3 tiles. |
| 2 | LogoCloud | sections/LogoCloud.astro | #F5F5F0 | Infinite marquee scroll (45s), 8 fictional logos with SVG icons. Fade edges. |
| 3 | ProblemStatement | sections/ProblemStatement.astro | #EAEAE5 | 2-column: text left, SVG workflow diagram right. |
| 4 | Pillars | sections/Pillars.astro | #F5F5F0 | 5-column grid on desktop. PM, Design, Dev, QA, DevOps. Hover state on cards. |
| 5 | HowItWorks | sections/HowItWorks.astro | #EAEAE5 | 2-column: 3 numbered steps left (orange numbers), bento image grid right. |
| 6 | BYOAI | sections/BYOAI.astro | #F5F5F0 | 2-column: 6 provider cards left (2x3 grid), text right. Ghost link arrow CTA. |
| 7 | Modes | sections/Modes.astro | #1E1E1B | 3-column dark section. Cards: rgba(0,0,0,0.3). Orange progress bars (33/66/100%). |
| 8 | Metrics | sections/Metrics.astro | #EAEAE5 | 4-column centered stats. Large numbers + small labels. |
| 9 | Testimonials | sections/Testimonials.astro | #F5F5F0 | 3-column cards with quotes, avatar images, name + title. Border-top divider. |
| 10 | Pricing | sections/Pricing.astro | #EAEAE5 | 3 tiers. Middle card inverted (bg-foreground). Orange badge. Check icons for features. |
| 11 | FinalCTA | sections/FinalCTA.astro | #1E1E1B | Dark section, centered text, 2 buttons. Flows into footer seamlessly. |
| 12 | Footer | components/Footer.astro | #1A1A1A | 4-column links. No rounded corners. Divider: border-white/[0.03]. templatedeck.com credit. |
Navigation
Fixed header. Transforms from full-width to centered pill on scroll.
Default (top of page)
Full container width (max-w-6xl), transparent background, no border, no shadow
Sticky (scrolled > 20px)
max-width: 44rem, rounded-full, bg-card at 80% opacity, backdrop-blur(16px), shadow-lg, no border
Transition
0.45s cubic-bezier(0.4, 0, 0.2, 1) on all properties. Toggled via .is-sticky class in JS.
Items
Logo ("Apex AI", font-semibold) | Nav links (text-muted-foreground, hover:text-foreground) | Login (font-semibold, right-aligned)
SVG Patterns & Illustrations
Inline SVGs for diagrams, icons, and decorative patterns. No external icon library — all custom.
Workflow Diagram
ProblemStatement section. Nodes (pill shapes) connected by dashed lines. Black fills for active nodes, gray strokes for inactive.
Double Helix Pattern
Hero metrics card background. Two sinusoidal paths + connecting rungs. stroke-width: 0.5/0.3, opacity: 7%, rotated -45deg, scaled 1.5x.
Logo Icons
LogoCloud section. 8 geometric SVGs (24x24 viewBox): circles, bars, triangles, arcs, zigzags. Paired with company name text.
UI Icons
Outlined stroke icons, 1.5-2px stroke, 24x24 viewBox. Used in Pillars (5 icons), Modes (3 icons), arrows, checkmarks, play button.