Design System Guide
Crafted Tools uses a consistent, intentional design system across all pages. This guide documents the rules and standards.
Typography
H1 – Page Titles
Design System Guide
Font: Spectral (serif)
Size: text-4xl (md: text-5xl)
Weight: fontWeight 400 (normal)
Usage: Page titles and large display headings only
H2 – Section Headings
Typography
Font: Instrument Sans (sans-serif)
Size: text-2xl
Weight: font-medium
Tracking: tracking-[0.01em]
Usage: Main section headings on pages
H3 – Item/Card Headings
Item Heading
Font: Instrument Sans (sans-serif), never Spectral
Size: text-2xl
Weight: font-medium
Tracking: tracking-[0.01em]
Usage: Toolkit names, kit titles, card headers
Body Text
Regular body copy uses Instrument Sans at 16px with relaxed line-height and consistent tracking.
Font: Instrument Sans
Size: text-[16px]
Color: text-[#4A4947]
Line Height: leading-relaxed
Tracking: tracking-[0.01em]
Colors
Page Background
bg-[#F5F4F2]
Cards & Containers
bg-white
Text Primary
#1E1E1E
Text Secondary
#4A4947
Component Patterns
Visual Systems Kit
Keep your creative direction organized and consistent across all projects and campaigns.
What improves: Reduces visual fragmentation across projects.
$2,500–$4,500
✓ H3 header in sans-serif (NOT serif/OGG)
✓ White background wraps entire card
✓ Consistent spacing and typography
Design Rules (MUST FOLLOW)
✓ DO:
- • Use Instrument Sans for all h2, h3, h4 headers
- • Use text-2xl + font-medium for h2/h3/h4 headers
- • Use Spectral serif ONLY for h1 page titles
- • Add white background cards (bg-white px-4 py-3 rounded-lg) to h3/h4 in content areas
- • Wrap entire toolkit/kit cards with white background container
- • Use consistent color palette (#1E1E1E, #4A4947, #F5F4F2)
✗ DON'T:
- • Use Spectral/OGG for h2, h3, h4 headers
- • Mix serif and sans-serif on small headers
- • Use text-xl for h3 (should be text-2xl)
- • Use font-semibold on headers (use font-medium)
- • Forget white background on toolkit/card headers
- • Leave h3 headers unstyled or without cards