PIAF Colour System
4 identity colours with full scales, plus a neutral foundation from Cream to Ink. Each colour serves a distinct purpose in the brand.
Brand Identity
光Amber
Hero / Energy / The Sun
The primary hero colour. Bright, optimistic, and attention-grabbing. Used for primary CTAs, brand moments, and energy themes.
林Forest
Nature / Balance / Growth
Earthy and grounded. Represents wellness, outdoor activities, and organic elements. Natural and calming.
木Umber
Earth / Grounding / Stability
Warm coffee tones. Provides stability and warmth. Used for text, grounding elements, and earthy themes.
夜Nightshade
Calm / Mystery / Rest
Dark and royal. Used for meditation, premium experiences, night mode, and depth. Mysterious and luxurious.
Neutral Foundation
霧Cream
Light / Space / Breath
The light foundation. Used for page backgrounds, cards, and creating breathing room in the design.
石Ink
Dark / Anchor / Text
The dark foundation. Used for primary text, dark mode backgrounds, and strong anchoring elements.
Architecture Overview
This colour system is built on a foundation of four expressive identity colours, each with a complete 50-900 functional scale, plus a warm neutral scale that spans from Cream to Ink.
Identity Stop Placement
Each identity colour anchors at a specific stop based on its natural lightness. Brighter colours anchor at 400, while darker colours anchor at 600.
| Colour | Lightness | Identity Stop | Character |
|---|---|---|---|
| Amber | 55% | 400 | Bright hero |
| Forest | 34% | 400 | Mid-dark earthy |
| Nightshade | 25% | 600 | Dark, royal |
| Umber | 28% | 600 | Warm coffee |
Colour Relationships
- Amber (55%) stands alone as the bright hero colour
- Forest (34%), Nightshade (25%), and Umber (28%) form a cohesive dark trio
- All colours lean warm, creating a unified, earthy aesthetic
- Neutral scale carries subtle warmth (hue 10-25°) to harmonise with the brand palette
Branding Strategy
Web Application
Light Mode
- Page background:
neutral-50(Cream) - Cards and panels:
neutral-100 - Primary text:
neutral-900(Ink) - Primary CTA:
amber-400withamber-500hover - Borders and dividers:
neutral-200
Dark Mode
- Page background:
neutral-900(Ink) ornightshade-800 - Cards and panels:
neutral-800 - Primary text:
neutral-50(Cream) - Primary CTA:
amber-400(remains vibrant on dark)
Social Media
| Context | Background | Text / Accent |
|---|---|---|
| Primary Brand | Amber-400/500 | Ink or Cream |
| Nature / Wellness | Forest-400/500 | Cream |
| Premium / Night | Nightshade-600/800 | Cream + Amber |
| Editorial / Neutral | Cream/Neutral-100 | Ink |
Quick Reference
Identity Colours
| Colour | Hex | HSL | Stop | Swatch |
|---|---|---|---|---|
| Amber | #E48B32 | hsl(30, 77%, 55%) | 400 | |
| Forest | #516349 | hsl(102, 15%, 34%) | 400 | |
| Nightshade | #492559 | hsl(282, 41%, 25%) | 600 | |
| Umber | #5A4136 | hsl(18, 25%, 28%) | 600 |
Foundation Endpoints
| Name | Hex | HSL | Token | Swatch |
|---|---|---|---|---|
| Cream | #F8F7F6 | hsl(25, 12%, 97%) | neutral-50 | |
| Ink | #161211 | hsl(10, 12%, 8%) | neutral-900 |