Sampo Market · Design System
BrandKit
Colours, type, folk elements, motion. The full system that makes Sampo look like itself.
Color System
OKLCH palette
All colors are defined in OKLCH, a perceptually uniform color space. Lightness is consistent across hues, so the system stays coherent across display types.
Green
--color-green-* · primary brand0.98 0.02 145
0.93 0.05 145
0.85 0.09 145
0.76 0.13 145
0.68 0.15 145
0.55 0.17 145
0.46 0.15 145
0.36 0.12 145
0.26 0.09 145
0.17 0.06 145
Stone
--color-stone-* · warm parchment neutral0.97 0.012 80
0.93 0.014 80
0.85 0.014 80
0.74 0.013 80
0.62 0.013 80
0.50 0.013 80
0.39 0.012 80
0.28 0.010 80
0.20 0.008 80
0.14 0.006 80
Gold
--color-gold-* · artisan achievement & trust0.95 0.05 82
0.89 0.09 80
0.82 0.14 78
0.72 0.19 74
0.62 0.22 72
0.45 0.18 65
0.30 0.11 62
Heather
--color-heather-* · general-purpose cool-register0.97 0.015 300
0.93 0.04 300
0.85 0.08 300
0.75 0.11 300
0.65 0.13 300
0.54 0.15 300
0.44 0.13 300
0.34 0.10 300
0.24 0.07 300
0.16 0.05 300
Red
--color-red-* · Dala folk red (decorative only)Blue
--color-blue-* · folk cobalt (decorative only)Note on red vs alarm
The Dala folk red (hue 22) is decorative. Folk-band dividers and editorial accents only. Destructive UI states use the alarm scale (hue 16, --color-alarm-500) which reads as alarm without carrying the folk palette's warmth.
Folk red
oklch(0.52 0.20 22)
Alarm red
oklch(0.52 0.22 16)
Design Tokens
Semantic tokens
Semantic tokens map color scale values to UI roles. Components consume them, not raw scale values. The system stays consistent and themeable.
--color-background
stone-50
--color-foreground
stone-800
--color-primary
green-500
--color-primary-foreground
green-50
--color-secondary
stone-100
--color-secondary-foreground
stone-600
--color-muted
stone-100
--color-muted-foreground
stone-500
--color-accent
gold-100
--color-accent-foreground
gold-700
--color-destructive
alarm-500
--color-border
stone-200
--color-ring
green-200
--color-link
green-600
--color-link-visited
gold-700
--color-overlay
stone-900/60%
--color-heather
heather-500
--color-heather-foreground
heather-50
--color-heather-subtle
heather-100
--color-heather-muted
heather-700
Typography
Type system
Display · Fraunces · variable (SOFT + WONK axes)
Aa
Goods from the people who make them.
"A marketplace where every item is made by hand and sold by the person who made it."
Aa
text-9xl
Artisan
text-5xl
Journeyman
text-3xl
Verified Maker
text-xl
Body · Inter · system-ui fallback
Every listing on Sampo is made by hand. When you buy here, you know who made it, where they work, and what they used.
The platform charges a transaction fee that starts at 5% and drops as you grow. There are no paid rankings. The first result earned it.
Caption and metadata text. Stone-500 on stone-50. Chosen specifically to pass WCAG AA contrast at normal text sizes.
The artist keeps 95–99%
Bold · 700
No paid rankings
Semibold · 600
Made by hand, sold direct
Medium · 500
A fee schedule that tracks your volume
Regular · 400
Fees go down as you grow
Light · 300
Folk Elements
The Northern thread
Sampo draws from the Northern European folk craft tradition. Three specific color references give the brand a visual gesture no competitor uses: cobalt blue, aged red, and the folk-band gradient.
.folk-band · cobalt → gold → Dala red
2px (default) · 4px · 6px
Folk cobalt
--color-blue-700
oklch(0.34 0.12 255)
Artisan gold
--color-gold-400
oklch(0.72 0.19 74)
Dala red
--color-red-500
oklch(0.52 0.20 22)
Usage rule
The folk colors appear in:
- The folk-band divider at nav bottom and footer top
- Editorial photography as prop surfaces
- Decorative section accents
The folk colors never appear in:
- Interactive UI states (buttons, links, alerts)
- Error or destructive feedback (use alarm red)
- Form validation or status indicators
State Tokens
Feedback states
Each state has a surface token and a foreground token. Both must be used together to maintain contrast. Warning uses amber distinct from gold. Gold is reserved for achievement signals, not caution.
Order confirmed
Your order has been placed and sent to the seller.
--color-success + --color-success-foreground
Label void deadline approaching
You have 6 hours to ship this order before the label expires.
--color-warning + --color-warning-foreground
Payment failed
Your card was declined. Please update your payment method.
--color-destructive (alarm-500 · hue 16, not folk red)
Your shop is under review
Verification evidence was submitted. You'll hear back within 2 business days.
--color-info + --color-info-foreground
Interactive state tokens
primary-hover → green-600 · primary-active → green-700 · disabled uses --color-disabled-foreground on secondary bg
Motion System
Motion & easing
Motion at Sampo says craft takes time. Nothing snaps. Transitions breathe. The register is a well-made drawer closing. Deceleration at the end. Satisfying, not bouncy.
--ease-standard
cubic-bezier(0.4, 0, 0.2, 1)
Most transitions
--ease-enter
cubic-bezier(0, 0, 0.2, 1)
Elements entering the screen
--ease-exit
cubic-bezier(0.4, 0, 1, 1)
Elements leaving the screen
--ease-deliberate
cubic-bezier(0.16, 1, 0.3, 1)
Significant moments (tier badge, Verified Maker seal)
| Interaction | Duration |
|---|---|
| Hover state | 120–150 ms |
| Button press | 80–100 ms |
| Tooltip open | 150 ms in · 100 ms out |
| Modal open | 250 ms |
| Modal close | 180 ms |
| Page transition | 300–350 ms |
| Skeleton pulse | 1800 ms cycle |
| Fee tier badge | 400 ms |
Three signature moments
Folk-band draw
Page load only. The gradient line reveals left to right over 800 ms via clip-path. Does not repeat on navigation.
Fee tier badge earn
When an artist crosses a GMV threshold, the tier badge scales and the gold fill sweeps left to right over 400 ms. Restrained. Not confetti.
Verified Maker seal
On first appearance after data loads: opacity 0→1, scale 0.85→1, gold fills from center outward over 300 ms. Like a seal being pressed.
Implementation note
Add easing curves to globals.css under @theme alongside the palette. All animations must respect prefers-reduced-motion: reduce. Reduce to a plain opacity fade or remove entirely.
Brand Voice
Voice & tone
All copy follows four rules. Marketing, UI, editorial, email. The full reference lives in docs/brand/voice.md.
Say what's true. Don't sell.
Describe the fact. Let the reader draw the conclusion.
✓ "The artist keeps 95–99% of every sale."
✗ "Artists earn more on Sampo than anywhere else."
Short sentences. No adverbs.
If you need an adverb, you're hiding a weak word. Replace it with something specific.
✓ "Rates update monthly. The more you sell, the less you pay."
✗ "Fees decrease progressively as you grow."
Describe the act. Don't label the person.
"The person who made it" says more than any category label and excludes nobody.
✓ "Every sale goes to the artist."
✗ "The artist's marketplace."
Never name the enemy.
The stance against dropshipping and algorithmic marketplaces lives in what Sampo says it is. Not in what it rejects.
✓ "Every item comes from the person who sells it."
✗ "Unlike other marketplaces…"
Word choices & anti-patterns
| Avoid | Use instead |
|---|---|
| maker / makers | "the person who made it" |
| creator | "the person who made it" |
| beautifully / carefully / uniquely | cut it |
| Em-dashes (—) | Two sentences. Or cut. |
| British spellings (colour, centre) | American spellings (color, center) |
| "Dropship-free guarantee" | "No dropships. No exceptions." |
| "Organic rankings only" | "Nobody buys their way to the top." |