Rationale
A colour language with weight
The system is anchored in a high-energy violet (Grape, #4E00EB): a colour that reads as technical authority in the European SaaS context, is categorically distinct from the dominant palettes in the European private markets sector, and carries enough saturation to own every surface it occupies.
"The neutral spine is built from cool blue-greys (Midnight through Air), calibrated for information-dense interfaces where colour competes with data."V1 — Colour System Rationale
Product palette — Socarrat
Primary & secondary colours
The primary colours define every brand-owned surface. Grape is the signature colour. Click any hex code to copy it.
Primary
Neutrals
Semantic colours
Destructive — Error
Constructive — Success
Support — Info / Link
Accent — Warning
Usage ratio — product UI
A directive, not a formula. Individual components will deviate, but the aggregate must hold.
Marketing palette — Albufera extension
Warm neutrals, amber accents, deep purple
Marketing materials operate in a different register; they must convey sophistication, editorial quality, and European premium positioning before a single word is read. The marketing extension introduces three additions to the base system.
Warm neutrals — The foundation
Organic base that reads as high-quality paper rather than screen grey. Replaces Cloud and Silver as the primary background layer in all marketing contexts.
Amber accents — The contrast
Critical constraint
Amber (#C88A3E) achieves only 2.69:1 on Parchment and 2.5:1 on Bone. Both fail WCAG for normal and large text. Amber is never used as a text colour on any light background. On Deep Royal: 5.64:1 — AA pass. Use Obsidian or Copper as the text colour on light backgrounds. Reserve Amber for dark background contexts only.
Deep purple — Refined Grape
Usage ratio — marketing (60-30-10)
Density rule
The warm palette and the marketing tríada are calibrated for low information density. A marketing page with 40 data points on a Parchment background does not look like a premium product. If a section needs data density, shift the background to Deep Royal (#250066) or use an inset with Air (#FFFFFF). The visual contrast between a Parchment section and a Deep Royal section is itself a typographic event.
Gradient system
Two brand gradients
Synthesis Gradient
Primary brand gradient. Hero and campaign surfaces. 135deg · #4E00EB → #250066
Signal Gradient
Secondary brand gradient. Ambient dark gradient. 135deg · #9661FF → #4E00EB → #250066
Deep Horizon
Marketing — ambient dark gradient. Deep Royal to Obsidian. 135deg · #250066 → #1A181E
Warm Surface
Marketing background. Parchment to Bone. Subtle transition for page sections. 135deg · #F7F5F0 → #EFEDE7
Gradient constraint
Use gradients as backgrounds only when text is 24px or larger, bold, and positioned over the darker portion of the gradient. For body text, use flat Grape or flat Midnight as the background. Gradient behind 14px regular-weight copy is a forbidden treatment.
Misuse guide
Six forbidden treatments
Each treatment below describes the wrong output, not an abstract rule. The example is the thing that actually happens, not a hypothetical.
Lemon text on any light background
Do not
A warning label in Lemon (#FFD505) on an Air (#FFFFFF) card surface. The text is bright yellow, technically present, and completely unreadable; it fails WCAG at 1.2:1. Lemon does not have enough luminance difference from white to function as text under any circumstances.
Correct use
Use Gold (#DBB700) for warning-state text on light backgrounds. Reserve Lemon for fills, icons, and badge backgrounds only.
Violet as body-copy colour on Air
Do not
A paragraph of 14px Violet (#9661FF) text on an Air (#FFFFFF) background. At 3.0:1 it fails AA for normal-weight body text. Violet is reserved for UI accents, tags, and AI-context elements at non-text scale.
Correct use
Use Midnight (#111318) or Lead (#465063) for all body-weight copy on light surfaces.
Grape background on extended content surfaces
Do not
A full-page Grape (#4E00EB) background behind a long-form content section. Within 30 seconds, the sustained violet saturation creates visual fatigue. Grape is a high-energy colour; it commands attention but cannot hold it at this scale.
Correct use
Limit Grape backgrounds to hero panels, CTAs, and feature highlights of less than 40% page height. Use the Synthesis Gradient or transition to Midnight for extended dark surfaces.
Steel text on Cloud in data-dense tables
Do not
A table with Steel (#687692) body copy on Cloud (#F0F2F4) row backgrounds. The ratio is 4.07:1 — AA pass for large text only. In a product displaying 50-row tables of financial data, this fails WCAG AA for normal text and becomes actively unreadable at 14px.
Correct use
Use Midnight for primary data in tables on Cloud rows. Steel is only acceptable for metadata and tertiary labels that serve a subordinate function.
Semantic colours used for brand decoration
Do not
A marketing section using Neon (#16CA7F) as a decorative accent strip because it is energetic and contrasts with Grape. Neon is now ambiguous: in product context it means "success state," in marketing it means "design accent." Users who move between product and marketing learn to distrust the system.
Correct use
Semantic colours (Candy, Neon, Skyline, Lemon) are reserved for status communication only. For decorative accents in marketing, use Violet or the Signal Gradient.
Gradient behind 14px regular-weight copy
Do not
The Synthesis Gradient used as a background behind a paragraph of Air (#FFFFFF) body text at 14px regular weight. If the gradient is applied at 135deg across a wide surface, text positioned over the lighter Violet end of a Signal Gradient fails at 3.85:1 — AA pass for large text only.
Correct use
Use gradients as backgrounds only when text is 24px or larger, bold, and positioned over the darker portion of the gradient. For body text, use flat Grape or flat Midnight as the background.
Design tokens
W3C token format
Complete colour token JSON. Primitive layer: one entry per named swatch. Semantic layer: references primitives using CSS variable syntax. Kebab-case throughout.
{
"color": {
"primitive": {
"grape": { "$value": "#4e00eb", "$type": "color" },
"indigo": { "$value": "#330099", "$type": "color" },
"violet": { "$value": "#9661ff", "$type": "color" },
"lavender": { "$value": "#d6c2ff", "$type": "color" },
"mauve": { "$value": "#eee5ff", "$type": "color" },
"midnight": { "$value": "#111318", "$type": "color" },
"lead": { "$value": "#465063", "$type": "color" },
"steel": { "$value": "#687692", "$type": "color" },
"silver": { "$value": "#cfd4dd", "$type": "color" },
"cloud": { "$value": "#f0f2f4", "$type": "color" },
"air": { "$value": "#ffffff", "$type": "color" },
"mkt-obsidian": { "$value": "#1a181e", "$type": "color" },
"mkt-parchment": { "$value": "#f7f5f0", "$type": "color" },
"mkt-bone": { "$value": "#efede7", "$type": "color" },
"mkt-amber": { "$value": "#c88a3e", "$type": "color" },
"mkt-copper": { "$value": "#915f3d", "$type": "color" },
"mkt-deep-royal":{ "$value": "#250066", "$type": "color" },
"mkt-amethyst": { "$value": "#824dff", "$type": "color" }
},
"semantic": {
"interactive": {
"default": { "$value": "{color.primitive.grape}" },
"hovered": { "$value": "{color.primitive.indigo}" },
"pressed": { "$value": "{color.primitive.indigo}" },
"disabled": { "$value": "{color.primitive.lavender}" }
},
"text": {
"primary": { "$value": "{color.primitive.midnight}" },
"secondary": { "$value": "{color.primitive.lead}" },
"tertiary": { "$value": "{color.primitive.steel}" },
"inverse": { "$value": "{color.primitive.air}" }
},
"mkt": {
"bg-base": { "$value": "{color.primitive.mkt-parchment}" },
"bg-surface": { "$value": "{color.primitive.mkt-bone}" },
"bg-deep": { "$value": "{color.primitive.mkt-deep-royal}" },
"text-primary": { "$value": "{color.primitive.mkt-obsidian}" },
"cta": { "$value": "{color.primitive.grape}" }
}
}
}
}