Design System
Artbase uses a consistent design system across all applications. This guide covers colors, typography, components, and patterns.
Color Palette
Brand Colors
| Name | Hex | Usage |
|---|---|---|
| Soft Sand | #F5F0E8 | Backgrounds |
| Ink Charcoal | #2D2D2D | Text, headings |
| Studio Coral | #FF6F5E | Primary actions, CTAs |
| Muted Teal | #4A9B8C | Secondary actions, success |
| Warm Terracotta | #C67B5C | Accents, highlights |
Semantic Colors
--color-success: #4A9B8C;
--color-warning: #F5A623;
--color-error: #E74C3C;
--color-info: #3498DB;
Usage in Tailwind
<button className="bg-studio-coral text-white hover:bg-studio-coral/90">
Add to Cart
</button>
<div className="bg-soft-sand text-ink-charcoal">
Content area
</div>
Typography
Font Stack
--font-sans: 'Inter', system-ui, sans-serif;
--font-display: 'Playfair Display', serif;
--font-mono: 'JetBrains Mono', monospace;
Heading Scale
| Level | Size | Weight | Usage |
|---|---|---|---|
| H1 | 2.5rem | 700 | Page titles |
| H2 | 2rem | 600 | Section headers |
| H3 | 1.5rem | 600 | Subsections |
| H4 | 1.25rem | 500 | Card titles |
Body Text
- Regular: 1rem (16px), 400 weight
- Small: 0.875rem (14px), 400 weight
- Caption: 0.75rem (12px), 400 weight
Spacing
Use Tailwind's spacing scale consistently:
| Token | Value | Usage |
|---|---|---|
space-1 | 0.25rem | Tight spacing |
space-2 | 0.5rem | Inline elements |
space-4 | 1rem | Component padding |
space-6 | 1.5rem | Section margins |
space-8 | 2rem | Large gaps |
Components
Buttons
// Primary
<Button variant="primary">Add to Cart</Button>
// Secondary
<Button variant="secondary">View Details</Button>
// Ghost
<Button variant="ghost">Cancel</Button>
// Destructive
<Button variant="destructive">Delete</Button>
Inputs
<Input
label="Email"
type="email"
placeholder="artist@example.com"
error={errors.email}
/>
Cards
<Card>
<CardHeader>
<CardTitle>Product Title</CardTitle>
</CardHeader>
<CardContent>
Card content here
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
Icons
Using Lucide React icons:
import { ShoppingCart, Heart, Share2 } from 'lucide-react';
<ShoppingCart className="w-5 h-5" />
<Heart className="w-5 h-5 text-studio-coral" />
Icon Sizes
| Context | Size | Class |
|---|---|---|
| Inline | 16px | w-4 h-4 |
| Button | 20px | w-5 h-5 |
| Navigation | 24px | w-6 h-6 |
| Feature | 32px | w-8 h-8 |
Layout Patterns
Page Layout
<div className="min-h-screen bg-soft-sand">
<Header />
<main className="container mx-auto px-4 py-8">
{children}
</main>
<Footer />
</div>
Grid System
// Product grid
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
Container Widths
| Size | Max Width | Usage |
|---|---|---|
| sm | 640px | Modals, forms |
| md | 768px | Content pages |
| lg | 1024px | Dashboard |
| xl | 1280px | Full layouts |
Animations
Transitions
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
Common Animations
// Fade in
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
>
// Slide up
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
>
Dark Mode
Artbase supports dark mode via Tailwind:
<div className="bg-soft-sand dark:bg-ink-charcoal">
<p className="text-ink-charcoal dark:text-soft-sand">
Content adapts to theme
</p>
</div>
Accessibility
Color Contrast
All color combinations meet WCAG AA standards:
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
Focus States
.focus-ring {
@apply focus:outline-none focus:ring-2 focus:ring-studio-coral focus:ring-offset-2;
}
Screen Reader Support
<button aria-label="Add to cart">
<ShoppingCart className="w-5 h-5" />
</button>
<span className="sr-only">Loading...</span>