Design System
A living style guide showcasing the design tokens and components available in this project.
Color Palettes
Custom color scales defined in assets/css/tailwind.css.
Modify the @theme block to customize.
Primary
Main brand color. Classes: bg-primary-{50-950}, text-primary-{50-950}
50
100
200
300
400
500
600
700
800
900
950
Secondary
Supporting brand color. Classes: bg-secondary-{50-950}, text-secondary-{50-950}
50
100
200
300
400
500
600
700
800
900
950
Accent
Highlight and CTA color. Classes: bg-accent-{50-950}, text-accent-{50-950}
50
100
200
300
400
500
600
700
800
900
950
Neutral
Text and background grays. Classes: bg-neutral-{50-950}, text-neutral-{50-950}
50
100
200
300
400
500
600
700
800
900
950
Semantic
Status and feedback colors.
success-500
warning-500
error-500
info-500
Typography
Using the Public Sans font family with Tailwind's default type scale.
Headings
Heading 1
text-5xl font-bold tracking-tight
Heading 2
text-4xl font-bold tracking-tight
Heading 3
text-3xl font-semibold
Heading 4
text-2xl font-semibold
Heading 5
text-xl font-semibold
Heading 6
text-lg font-semibold
Body Text
Large body text for introductions and lead paragraphs.
text-xl
Default body text for general content. This is the standard size used throughout the site for readability and consistency.
text-base
Small text for captions, labels, and secondary information.
text-sm text-neutral-600
Extra small text for fine print and metadata.
text-xs text-neutral-500
Font Weights
Regular
font-normal (400)
Medium
font-medium (500)
Semibold
font-semibold (600)
Bold
font-bold (700)
Spacing Scale
Tailwind's default spacing scale used for margin, padding, and gap.
1
2
3
4
5
6
8
10
12
16
20
24
Shadows
Tailwind's default shadow scale for depth and elevation.
shadow-sm
Subtle shadow for cards
shadow
Default shadow
shadow-md
Medium shadow
shadow-lg
Large shadow for modals
shadow-xl
Extra large shadow
shadow-2xl
Maximum shadow depth
Border Radius
Available border radius values for rounded corners.
none
sm
default
md
lg
xl
2xl
3xl
full
Cards
Example card components combining the design tokens.
Simple Card
A basic card with border and padding. Great for grouping related content.
Shadow Card
Card with shadow for elevated appearance. Good for important content.
Primary Card
Card using the primary color palette for emphasis.
Alerts
Feedback messages using semantic colors.
Success! Your changes have been saved.
Info: A new version is available.
Warning: Your session will expire soon.
Error: Unable to process your request.
Form Elements
Basic form input styling.
Customizing Colors
To customize the color palette, edit the @theme block in assets/css/tailwind.css.
Color Format
Colors use the OKLCH format: oklch(lightness chroma hue)
- Lightness: 0 (black) to 1 (white)
- Chroma: 0 (gray) to ~0.4 (vivid)
- Hue: 0-360 degrees (red=0, green=145, blue=265)
Example: Change Primary to Blue
@theme {
--color-primary-500: oklch(0.58 0.22 240);
--color-primary-600: oklch(0.50 0.22 240);
/* ... adjust other shades */
}After Making Changes
Rebuild the CSS to apply your changes:
npm run build:css