• Shopcn Foundations
v2.0Design System
Cream paper, deep olive ink and square edges. One heading face, one text face and a mono for labels. This page is the reference for colour, type and components.
• 01 / Colour
Palette
Warm paper surfaces, olive ink and two green accents. Every token is an HSL CSS variable exposed as a Tailwind colour.
Background
Page paper
--background
hsl(33 45% 92%)
Card
Panels & cards
--card
hsl(35 50% 95%)
Primary
Ink, primary actions
--primary
hsl(82 38% 18%)
Olive
Eyebrows, hover state
--olive
hsl(83 32% 34%)
Sage
Accents on dark
--sage
hsl(80 31% 51%)
Charcoal
Dark sections
--charcoal
hsl(85 33% 10%)
Muted
Alternate sections, image wells
--muted
hsl(36 38% 88%)
Border
Hairlines
--border
hsl(36 26% 82%)
• 02 / Type
Typography
Anybody for headings at weight 300, Inter for reading, Space Mono for everything that labels, counts or prices.
Aa
Headings
Anybody
Weight 300, upright only. Emphasis inside a heading uses olive, never italics.
Aa
Body & UI
Inter
Body copy and interface text. Medium (500) for emphasis.
Aa
Labels & numbers
Space Mono
Eyebrows, buttons, prices, counters and breadcrumbs.
Page hero
Anybody 300 · 72px · leading 1.02 · −0.035em
Fewer things, made properly.
Section H2
Anybody 300 · 48px · leading 1.05
New This Month
Card H3
Anybody 300 · 24px
Halden Pendant
UI title
Inter 500 · 18px
Materials You Can Name
Body
Inter 400 · 16px · leading relaxed
Lamps, bowls, tables and linen from the people who make them. Real materials, small runs, and a guarantee measured in decades.
Price
Space Mono · 14–20px
$1,240
Eyebrow
Space Mono · 11px · uppercase · 0.2em
• Featured Collection
Meta label
Space Mono · 10px · uppercase · 0.2em
Made from
• 03 / Components
Components
Square edges, hairline borders and mono pill labels. Photography carries the colour; the interface stays quiet.
Buttons
Primary fills with olive ink and deepens to olive on hover. Secondary is a hairline outline that inverts.
Eyebrow
• Fresh From the Studios
New This Month
• On dark
In Their Homes
Every heading opens with an eyebrow: Space Mono, 11px, uppercase, 0.2em tracking, olive on light and 60% linen on dark.
Badges & filters
Pill chips for status and filters. Active is a primary fill; inactive stays muted until hover.
Card
Lighting
Halden Pendant
$1,240
Cards and panels: bg-card, a hairline border and 24–32px padding. No radius, no heavy shadow.
Inputs
shadcn inputs at 48px height, labelled with a 10px meta eyebrow.
Icon actions
Lucide icons at 16–18px with a 1.5 stroke. Counters are small square primary chips.
• The One Rule
When in doubt, remove. Restraint is the aesthetic.