Typography

Display: Playfair Display. Body: Source Sans 3 (loaded from Google Fonts).

Font classes

.font-display — Playfair Display

.font-body — Source Sans 3

Headings (use Playfair via base styles)

Heading 1

Heading 2

Heading 3

Heading 4

Body text: Source Sans 3 at 300, 400, 500, 600, 700. Playfair Display for headings at 400–900, including italic.

Utility

.text-gradient-warm (primary → secondary → accent)

Colors

Semantic and custom palette (HSL via CSS variables).

Semantic

Background, text, borders, states

background, foreground, primary, secondary, muted, accent, destructive, card

Brand & custom

Warm, western palette

warm-dark, warm-cream, terracotta, saddle, golden, prairie, dust

Text colors

Common usage

text-foreground

text-muted-foreground

text-primary

text-golden

Spacing

Tailwind spacing scale (1 = 0.25rem). Section pattern: py-24, container + px-4.

Scale (padding example)

p-2 (0.5rem), p-4 (1rem), p-6 (1.5rem), p-8 (2rem), p-12 (3rem), p-24 (6rem)

p-2

p-4

p-6

p-8

p-12

Container

container mx-auto px-4 — centered, max-width by breakpoint, horizontal padding 1rem. Custom 2xl: 1400px. Default padding: 2rem (from Tailwind theme).

Border radius

--radius: 0.375rem. rounded-sm, rounded-md, rounded-lg from theme.

Buttons

Variants: default, destructive, outline, secondary, ghost, link. Sizes: default, sm, lg, icon.

Variants

Sizes

Cards

Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Card title

Optional description for the card.

CardContent holds the main body. Default padding p-6; header has space-y-1.5, footer aligns items.

Styled card

Custom border or text via className.

Use className to align with brand (e.g. border-golden, text-golden).

Form inputs

Input: h-10, rounded-md, border-input, focus ring.

Badges

Variants: default, secondary, destructive, outline.

Default

Secondary

Destructive

Outline

Alerts

Alert, AlertTitle, AlertDescription. Variants: default, destructive.

Default alert

Use for general information or success messages.

Destructive

Use for errors or critical warnings.

Separator

Horizontal or vertical; decorative by default. bg-border.

Horizontal

Vertical

Item

Animations

Keyframes: fade-in-up, fade-in. Utilities: animate-fade-in-up, animate-fade-in. Plus accordion-down/up.

animate-fade-in-up

animate-fade-in

UI components (shadcn)

Available in @/components/ui:

accordion

alert

alert-dialog

aspect-ratio

avatar

badge

breadcrumb

button

calendar

card

carousel

chart

checkbox

collapsible

command

context-menu

dialog

drawer

dropdown-menu

form

hover-card

input

input-otp

label

menubar

navigation-menu

pagination

popover

progress

radio-group

resizable

scroll-area

select

separator

sheet

sidebar

skeleton

slider

sonner

switch

table

tabs

textarea

toast

toaster

toggle

toggle-group

tooltip