A restrained palette
Near black canvas and warm ink do most of the work. Signal teal is sparse — accents, caustics, and moments of focus. Brand quiet violet is optional haze, never neon. Pair color with ink or canvas; never stack two brand hues.
Canvas
Base void
- Hex
- #07080a
- RGB
- 7 / 8 / 10
Canvas elevated
Panels
- Hex
- #101218
- RGB
- 16 / 18 / 24
Ink
Primary type on dark
- Hex
- #f4f1ea
- RGB
- 244 / 241 / 234
Mute
Secondary type
- Hex
- #8b8f98
- RGB
- 139 / 143 / 152
Stroke
Borders
- Hex
- #1c1f27
- RGB
- 28 / 31 / 39
Signal
Primary accent
- Hex
- #5eead4
- RGB
- 94 / 234 / 212
Signal dim
Accent depth
- Hex
- #2dd4bf
- RGB
- 45 / 212 / 191
Brand quiet
Optional haze
- Hex
- #6b5cad
- RGB
- 107 / 92 / 173
A few patterns that keep color intentional — color as surface, paired with ink or canvas, kept to small functional moments.
Color carries the surface
Let one field own the background. Everything on it stays ink or canvas.
Pair with ink or canvas
Set type on a color in ink or canvas — whichever reads. Never another brand hue.
Color as accents
Keep signal in chips, icons, and caustics. Tiny doses stay clear.
Lean on imagery for interest
Instead of stacking hues, use photography and product frames for color life.
What to avoid
The fastest ways color stops feeling like Auviel: stacking brand hues, leaning on color for emphasis, and spreading signal too thin.
Don't stack brand colors
Separate hues with canvas or ink — never teal on violet panels.
Don't set color on color
Signal type on a signal field kills contrast. Keep type ink or canvas.
Don't use color for emphasis
Hierarchy comes from size and weight — not rainbow headlines.
Don't use too much color
Many accents at once reads as noise. One signal, used sparingly, says more.
Download the assets
Production-ready marks and tokens referenced in this chapter.