Retro Blue
Default palette
Switch between built-in color themes in the Header. This page uses semantic CSS variables, so controls and surfaces update without changing component structure.
Default palette
Monochrome palette
Botanical palette
Warm vellum palette
Creator economy palette
Technical neutral palette
Soft comic palette
Dark pastel palette
Pale product palette
Red action palette
Active theme palette, neutral scale, backgrounds, and text colors.
Primary
current value
--color-primary
Primary Strong
current value
--color-primary-strong
Primary Light
current value
--color-primary-light
Accent
current value
--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
--color-bg-primary
BG Secondary
--color-bg-secondary
BG Primary Light
--color-bg-primary-light
BG Primary Dark
--color-bg-primary-dark
BG Secondary Dark
--color-bg-secondary-dark
Text Primary
current value
--color-text-primary
Text Secondary
current value
--color-text-secondary
Text Tertiary
current value
--color-text-tertiary
Font families, type scale, and weight variants.
--font-brand (Instrument Serif)
Start with a polished theme
--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 Astro starter built with 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)
Hover effects and transition demos.
Collapsible content panels.
Lucide icon set used throughout the template.
A generic Astro 7 starter with Blog, DESIGN.md, Elements, Tailwind CSS v4, MDX, and a reusable theme system.
© 2026 · Released under the MIT License.