Brand Color Scales
Five 11-step scales (50 - 950). Use 50-200 for surfaces, 500 for accents, 700-950 for text.
Prussian Blue
Primary ink, CTAs, dark sections
Space Indigo
Secondary blue, charts, highlights
Sand Dune
Canvas, surfaces, warm neutrals
Dusk Blue
Soft accents, borders, UI chrome
Amethyst Smoke
Plum accents, tags, editorial spots
Semantic Tokens
Role-based aliases. Use these in components over raw scale values.
Legacy Aliases
Typography
Baskervville - display / headings
--font-octarine - h1, h2 automatic via globals.css
The Art of Tattooing
Grow Your Studio
Portugal's Booking Platform
Cursor Gothic - body / UI
--font-cursor-gothic - default body, maps to --font-sans
Regular 400 - Build your tattoo business with confidence.
Bold 700 - €10/month. Everything you need.
Italic - Trusted by artists across Portugal.
Small muted - Supporting copy and UI labels.
Extra small - captions, timestamps, footnotes.
Junicode - artist profiles only
--font-junicode - NOT for marketing pages
almendrasol - fine line
geometric - blackwork - neo-trad
Logos
Wide logo - on light
Wide logo - on dark
Icon mark
Text logo - on pearl
Spacing Scale
2
8px
4
16px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
Border Radius
sm
md
lg
xl
2xl
3xl
full
Rules
- Body text is always black - never colored text.
- Muted text uses black/80 opacity minimum.
- Section padding: py-24. Card padding: p-8 or p-10.
- Max content width: max-w-[1440px] via InnerWrap.
- Dark sections: prussian-blue-900 bg, sand-dune-50 text.
- Baskervville for h1/h2 display only - not UI labels.
- Junicode for artist profile pages only.
- Section cards: rounded-3xl. UI cards: rounded-2xl. Buttons: rounded-pill.
- Never hardcode hex in components - use token names.
- Tailwind v4 via CSS @import - no tailwind.config.ts.