Preview of colors, typography, and components used in this project.
Background / Cream
HSL: 40 33% 98%
Class: bg-background
Foreground / Charcoal
HSL: 0 0% 17%
Class: bg-foreground
Primary / Sage
HSL: 82 18% 72%
Class: bg-primary
Secondary / Blush
HSL: 30 26% 94%
Class: bg-secondary
Muted
HSL: 30 26% 94%
Class: bg-muted
Accent
HSL: 82 18% 65%
Class: bg-accent
Destructive
HSL: 0 84% 60%
Class: bg-destructive
Border
HSL: 30 20% 88%
Class: bg-border
Card
HSL: 40 33% 98%
Class: bg-card
Cream
HSL: 40 33% 98%
Sage
HSL: 82 18% 65%
Sage Dark
HSL: 82 22% 42%
Charcoal
HSL: 0 0% 17%
Blush
HSL: 30 26% 94%
font-serif (Playfair Display)
The quick brown fox jumps over the lazy dog
font-sans (Inter)
The quick brown fox jumps over the lazy dog
.heading-display
Display Heading
.heading-section
Section Heading
.heading-card
Card Heading
.text-body
This is regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.text-body-sm
This is smaller body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
text-foreground - Primary text color
text-muted-foreground - Secondary/muted text
text-primary - Primary accent color
text-destructive - Error/destructive text
bg-primary vs text-primary
為了提高文字對比度，bg-primary 和 text-primary 使用不同深淺的顏色：
bg-primary (HSL 82 18% 72%)
text-primary (HSL 82 22% 42%)
深色文字，對比度更好
.section-cream
Default cream background section
.section-sage
Sage green background with dark text
.section-blush
Blush/beige background section
bg-primary/10 + text-primary（自動使用深色）
bg-primary/10 + text-primary icon
bg-primary with different opacity levels
/5
/10
/20
/30
/50
100%
rounded-sm
rounded-md
rounded-lg
rounded-full
animate-fade-in
Fade in effect (0.6s)
animate-slide-up
Slide up with fade (0.6s)
animate-marquee
Infinite horizontal scroll (30s)
Max Width: 1280px (2xl)
Padding: 1.5rem
Centered: Yes