Design System
The visual language and components that create the lonely prairie aesthetic for Mathieu Schmidt's artist website.
Color Palette
Inspired by the muted, earthy tones of prairie landscapes and weathered materials.
Primary
Neutrals
Atmospheric
Earth
Base
Typography
Crimson Text (Serif)
Heading 1 - Display
Used for main titles and hero text
Heading 2 - Section
Section headings and important titles
Heading 3 - Subsection
Subsection headers and card titles
“Elegant serif for quotes and atmospheric text”
Inter (Sans-serif)
Body text - Large
Main paragraph text for readability
Body text - Regular
Secondary content and descriptions
Small text - Captions and metadata
For less important information
Medium weight for buttons and links
Interactive Elements
Buttons
Main call-to-action buttons
Secondary actions and navigation
Inline links and subtle actions
Navigation
Main navigation styling
Layout Components
Cards
Content Card
Standard content cards with subtle background and border. Used for sectioning content and creating visual hierarchy.
Highlighted Card
Subtle accent cards for featured content or important information. Uses the primary color with low opacity.
Dividers & Spacing
Accent divider line
Standard section divider
Usage Guidelines
Spacing
- • Generous white space for contemplative feel
- • 24px (1.5rem) base spacing unit
- • Section padding: 96px (6rem) vertical
- • Content max-width: 1024px (64rem)
Aesthetic Principles
- • Minimalist and contemplative design
- • Subtle transitions and hover effects
- • Muted, earthy color applications
- • Focus on readability and atmosphere
Color Usage in Context
Example Section
This demonstrates how the color palette works together in a real section. The sage green is used sparingly for accents and interactive elements.
Atmospheric Quote
“The prairie teaches patience - in its vastness, there's time for every thought to settle like dust after a storm.”