Primary palette, neutral scale, backgrounds, and text colors.
Primary Blue
#2d6dc3
--color-primary
Primary Strong
#0066ff
--color-primary-strong
Primary Light
#8fb9ff
--color-primary-light
Accent Gold
#fad13b
--color-accent
50
#f7f9fc
100
#edf1f8
200
#dfe4ed
300
#c5cedb
400
#92a1b7
500
#677487
600
#4f5a6d
700
#3f4a5a
800
#2c3542
900
#19222f
950
#10161f
BG Primary
#fdfaf5
BG Secondary
#ffffff
BG Primary Light
#faf9f5
BG Primary Dark
#0b1220
BG Secondary Dark
#0f1b2d
Text Primary
#2d6dc3
--color-text-primary
Text Secondary
#3f4a5a
--color-text-secondary
Text Tertiary
#7a6550
--color-text-tertiary
Font families, type scale, and weight variants.
--font-brand (Instrument Serif)
Launch a polished SaaS
--font-sans (Inter)
Clean body text
Display — 48px / 400
Display headline
Heading 1 — 36px / 400
Main heading
Heading 2 — 28px / 400
Section heading
Heading 3 — 20px / 600
Subsection heading
Body — 16px / 400
The quick brown fox jumps over the lazy dog. A clean, fast, and reusable SaaS template built with Astro and Tailwind CSS.
Body Small — 14px / 400
Supporting text for descriptions and secondary content.
Caption — 12px / 400
Timestamps, metadata, and fine print.
Primary, secondary, outline, and disabled variants in multiple sizes.
Status labels and tags in multiple variants and sizes.
Basic, feature, and content card styles.
A simple card with border, background, and padding.
With icon, hover lift effect, and shadow.
With image placeholder, like blog cards.
Inputs, selects, textareas, and toggle switches.
Section headers, page headers, and separators.
site-container (max-width: 1200px)
Inner content (max-width: 672px)
Scroll animations, hover effects, and transition demos.
fade-up-sm
fade-left-sm
fade-up-xs
Collapsible content panels.
Lucide icon set used throughout the template.