Colour

Reduced. Disciplined. One signal.

Rico’s colour system is deliberately reduced. We work in black and white because the restraint itself is the brand’s stance. Substance over decoration, form as a tool. What remains directs the eye to what matters: the person and the work.

To this we add a single accent colour, Klein Blue. It is a signal, not decoration. Because there is only this one colour, it means something every time it appears. It sets the focus and carries the calm authority Rico stands for. Used sparingly, never as a fill.

Colour System Hub – Rico Brunner

Clarity in one System

Colour Name	HEX	RGB (sRGB)	CMYK (Coated / Uncoated)	Pantone (Print)
Dark Slate	#141414	20 / 20 / 20	0 / 0 / 0 / 92	Black 6 C / Black 6 U
Off White	#FAFAFA	250 / 250 / 250	0 / 0 / 0 / 2	Transparent White
Klein Blue	#002FA7	0 / 47 / 167	100 / 72 / 0 / 35	286 C / 286 U

CMYK and Pantone values are stated for reference only and must not be used in production print.

The three Colours

Dark Slate

#141414

Primary text in light mode, primary surface in dark mode. Carries the structure.

Off White

#FAFAFA

Primary surface in light mode, primary text in dark mode. Carries the calm.

Klein Blue

#002FA7

The only accent. Signal, focus, call to action. Never decoration.

Derived Colour: Klein Blue Bright

Klein Blue Bright exists for exactly one reason: on dark surfaces, original Klein Blue is physically illegible as text or outline. The derived value keeps the identical hue and raises only the lightness until it passes the contrast standard. It is not a fourth brand colour but the same blue in a different state. It exists exclusively for digital dark mode and never appears in print or on light surfaces.

Klein Blue Bright on Dark Slate

#6B93FF · 6.4 : 1 · AA passed

Colour Name	HEX	RGB (sRGB)	CMYK (Reference)	Pantone (Print)
Klein Blue Bright	#6B93FF	107 / 147 / 255	58 / 42 / 0 / 0	Digital only, nearest 2718 C

Neutral Tones

Between Dark Slate and Off White, three neutral tones per mode are defined for interface hierarchy. They are the only permitted intermediate values. No other grey may be introduced. All neutrals are screen-only and never appear in print.

Role	Light Mode	Dark Mode	Contrast and Usage
Secondary text	#5C5C5C	#A8A8A8	6.4 : 1 light, 7.8 : 1 dark. Captions, metadata, supporting copy.
Muted text	#8C8C8C	#7A7A7A	3.2 : 1 light, 4.3 : 1 dark. Placeholders and disabled labels only, never body text.
Border	#D9D9D9	#333333	Decorative hairlines and dividers. For meaningful component boundaries use the muted tone.

Functional Colours

The system defines exactly two functional colours. Signal Coral is reserved for error states in forms and system feedback. Its warm hue forms a deliberate temperature contrast to Klein Blue, following the pairing logic of Yves Klein’s own palette of blue and rose and the cobalt and coral combinations of Mexican modernism. Because it is the only warm value in the system, an error state can never be confused with an accent, a link or a call to action.

Signal Jade is reserved for success confirmation in forms and system feedback. Its hue sits between blue and coral on the colour wheel and stays within the same reference world. Functional colours never appear in marketing content, imagery, decoration or any context outside form and system feedback. Screen-only, never in print.

Light mode values are darkened until they pass AA for text while keeping full colour purity. Dark mode values are the true tones of the same hue family. Feedback states always combine colour with an explicit text message. Colour alone never carries the information, in line with WCAG 1.4.1.

Colour Name	Light Mode	Dark Mode	Contrast
Signal Coral (Error)	#BF3B22	#FF8A73	5.2 : 1 on Off White, AA passed. 8.0 : 1 on Dark Slate, AAA passed.
Signal Jade (Success)	#007A5A	#3FD69A	5.1 : 1 on Off White, AA passed. 9.9 : 1 on Dark Slate, AAA passed.

Chroma rule

The system contains only clear colours and true neutral. Every chromatic value is fully or nearly fully saturated, every grey has zero chroma with identical RGB channels. Muted, tinted or desaturated in-between values are prohibited. This rule filters all future colour decisions.

Complete Palette

Dark Slate

#141414

Off White

#FAFAFA

Klein Blue

#002FA7

Klein Blue Bright

#6B93FF

Signal Coral L

#BF3B22

Signal Coral D

#FF8A73

Signal Jade L

#007A5A

Signal Jade D

#3FD69A

Secondary L

#5C5C5C

Secondary D

#A8A8A8

Muted L

#8C8C8C

Muted D

#7A7A7A

Border L

#D9D9D9

Border D

#333333

Colour Roles per Mode

Light and dark mode are not variants of the design, they are two states of the same system. Components reference roles, never HEX values. The role decides which value appears in which mode.

Governance rule

Original Klein Blue #002FA7 on Dark Slate as text or outline is strictly prohibited. Klein Blue Bright on Off White is strictly prohibited.

Role	Light Mode	Dark Mode
Background	#FAFAFA (Off White)	#141414 (Dark Slate)
Text and content	#141414 (Dark Slate)	#FAFAFA (Off White)
Accent as text or outline	#002FA7 (Klein Blue)	#6B93FF (Klein Blue Bright)
Accent as surface	#002FA7 (Klein Blue)	#002FA7 (Klein Blue)
Text on accent surface	#FAFAFA (Off White)	#FAFAFA (Off White)
Error	#BF3B22 (Signal Coral)	#FF8A73 (Signal Coral)
Success	#007A5A (Signal Jade)	#3FD69A (Signal Jade)
Secondary text	#5C5C5C	#A8A8A8
Muted text	#8C8C8C	#7A7A7A
Border	#D9D9D9	#333333
Overlay (scrim)	rgba(20, 20, 20, 0.55)	rgba(0, 0, 0, 0.65)
Shadow	Dark Slate with alpha	Pure black with alpha, plus border

Application Example, Form Feedback

The example shows the complete palette in application in both modes: error, success and neutral state in a form context, the accent as call to action and text link, and all values as swatches.

Light Mode

Email address

Neutral state, no feedback.

Phone number

Error: please enter a complete phone number.

Appointment date

Success: your appointment is confirmed.

Read the method

Accent as surface, identical in both modes

Dark Mode

Email address

Neutral state, no feedback.

Phone number

Error: please enter a complete phone number.

Appointment date

Success: your appointment is confirmed.

Read the method

Accent as surface, identical in both modes

Colour Distribution

The 60-30-10 rule governs the visual hierarchy. This ratio maintains the core while allowing the accent to function as a clear signal.

In dark mode the 10 percent accent share is composed of Klein Blue as surface plus Klein Blue Bright as text and outlines. Original Klein Blue never appears as text or outline on Dark Slate.

Dark Intensity

60% Dark Slate #141414
30% Off White #FAFAFA
10% Klein Blue #002FA7

Light Clarity

60% Off White #FAFAFA
30% Dark Slate #141414
10% Klein Blue #002FA7

Terms (WCAG 2.1)

All ratios are calculated according to the WCAG 2.1 relative luminance formula. Any value stated in this document is reproducible and binding for quality gates.

Term	Definition	Application in System
WCAG	Web Content Accessibility Guidelines	Global standard ensuring digital legibility and accessibility for all users.
Contrast Ratio	The mathematical difference in brightness	Measures how well text stands out against its background.
AA Standard	Required certification level, 4.5 to 1 for text	Minimum level for all text in this system.
AAA Standard	The highest certification level, 7 to 1 for text	Target level for primary text pairings.

Contrast Values and Legibility

Preview	Colour Combination	Measured Ratio	Technical Assessment
Aa	Dark Slate on Off White	17.7 : 1	AAA passed. Flawless legibility for all digital elements.
Aa	Klein Blue on Off White	10.2 : 1	AAA passed. Clear visibility for all functional elements.
Aa	Off White on Klein Blue	10.2 : 1	AAA passed. Validates Klein Blue as a surface in both modes.
Aa	Off White on Dark Slate	17.7 : 1	AAA passed. Primary text pairing in dark mode.
Aa	Klein Blue Bright on Dark Slate	6.4 : 1	AA passed for all text sizes, AAA for large text. Accent text and outlines in dark mode.
Aa	Signal Coral on Off White	5.2 : 1	AA passed. Error text and outlines in light mode.
Aa	Signal Coral on Dark Slate	8.0 : 1	AAA passed. Error text and outlines in dark mode.
Aa	Signal Jade on Off White	5.1 : 1	AA passed. Success text and outlines in light mode.
Aa	Signal Jade on Dark Slate	9.9 : 1	AAA passed. Success text and outlines in dark mode.
Aa	Klein Blue on Dark Slate	1.7 : 1	Failed. Strictly prohibited.
Aa	Klein Blue Bright on Off White	2.8 : 1	Failed. Strictly prohibited. Bright variant is dark mode only.

IT Specifications (Digital and UI)

Call to action colour states are defined per mode and per input type. Hover states exist only on devices with a pointing device. On touch devices the button moves directly from default to active, therefore the active state colours are fully legible on their own. Font weight remains regular in all states.

Call to Action, Light Mode

State	Visual Styling	Notes
Default	Outline #002FA7, text #002FA7, background transparent	Regular weight
Hover	Background #002FA7, text #FAFAFA	Pointer devices only
Active	Background #141414, text #FAFAFA	All devices
Focus visible	Outline 2px #002FA7, offset 3px	Keyboard navigation only
Disabled	Outline #D9D9D9, text #8C8C8C, background transparent	No hover, no active

Call to Action, Dark Mode

State	Visual Styling	Notes
Default	Outline #6B93FF, text #6B93FF, background transparent	Regular weight
Hover	Background #002FA7, text #FAFAFA	Pointer devices only
Active	Background #FAFAFA, text #141414	All devices
Focus visible	Outline 2px #6B93FF, offset 3px	Keyboard navigation only
Disabled	Outline #333333, text #7A7A7A, background transparent	No hover, no active

Text Links

Links are always underlined so that colour is never the only distinguishing feature. Visited links keep the default colour for a consistent brand appearance.

State	Light Mode	Dark Mode
Default	#002FA7, underlined	#6B93FF, underlined
Hover	#141414, underlined	#FAFAFA, underlined
Visited	Same as default	Same as default
Focus visible	Outline 2px #002FA7, offset 2px	Outline 2px #6B93FF, offset 2px

Shadows and Depth

Shadows are always built from darkness, never from light. In light mode they consist of Dark Slate with defined alpha values. In dark mode they consist of pure black with higher alpha, combined with the border neutral for edge definition, because shadow alone barely reads on Dark Slate. Light shadows or glows from Off White are prohibited in every mode. Two elevation levels exist, more are not permitted.

Level 1, Light

Cards, dropdowns

Level 2, Light

Modals, popovers

Level 1, Dark

Cards, dropdowns

Level 2, Dark

Modals, popovers

Elevation	Light Mode	Dark Mode
Level 1: cards, dropdowns	0 1px 3px rgba(20,20,20,0.10), 0 1px 2px rgba(20,20,20,0.06)	0 1px 3px rgba(0,0,0,0.45), plus 1px border #333333
Level 2: modals, popovers	0 8px 24px rgba(20,20,20,0.16)	0 8px 24px rgba(0,0,0,0.60), plus 1px border #333333
Overlay behind modals	rgba(20, 20, 20, 0.55)	rgba(0, 0, 0, 0.65)

Form Fields and Selection Controls

Focus follows the same accent logic as buttons and links, on every focusable element. Checked selection controls use the accent-as-surface role, which is identical in both modes.

Element and State	Light Mode	Dark Mode
Input default border	#8C8C8C	#7A7A7A
Input focus	Border #002FA7, outline 2px #002FA7, offset 2px	Border #6B93FF, outline 2px #6B93FF, offset 2px
Input error	Border #BF3B22, message in #BF3B22	Border #FF8A73, message in #FF8A73
Checkbox and radio, unchecked	Border #8C8C8C, background transparent	Border #7A7A7A, background transparent
Checkbox and radio, checked	Background #002FA7, mark #FAFAFA	Background #002FA7, mark #FAFAFA
Checkbox and radio, focus	Outline 2px #002FA7, offset 2px	Outline 2px #6B93FF, offset 2px

Data Visualisation Colours

Charts and graphs are monochrome by design. They use a tonal ramp of Klein Blue plus one neutral, no additional hues. Signal Coral and Signal Jade are strictly reserved for system feedback and never appear in data visualisation. A chart that needs more than three series has a structural problem, not a colour problem, and must be split or restructured.

All series values pass the 3 : 1 minimum for graphical objects against their background. Lines and bars are additionally distinguished by lightness so that colour is never the only differentiator.

Light Mode

Series 1 · Series 2 · Neutral

Dark Mode

Series 1 · Series 2 · Neutral

Role	Light Mode	Dark Mode	Notes
Series 1 (primary)	#002FA7	#6B93FF	Main data series.
Series 2	#4D7CFF	#3A5FD9	Second series, separated by lightness.
Series 3 (neutral)	#5C5C5C	#A8A8A8	Comparison or reference series.
Area fill	Series colour at 24% alpha	Series colour at 24% alpha	Fills never introduce new tones.
Gridlines and axes	#D9D9D9	#333333	Uses the border neutrals.

Reference Implementation, Colour Tokens (CSS)

Components reference roles, never HEX values. Switching data-mode on the root element switches the entire system. No component needs to know which mode it is in.

Light Mode Tokens

:root {
  --bg: #FAFAFA;
  --ink: #141414;
  --accent: #002FA7;
  --accent-contrast: #FAFAFA;
  --text-secondary: #5C5C5C;
  --text-muted: #8C8C8C;
  --border: #D9D9D9;
  --error: #BF3B22;
  --success: #007A5A;
  --overlay: rgba(20, 20, 20, 0.55);
  --shadow-1: 0 1px 3px rgba(20, 20, 20, 0.10),
              0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-2: 0 8px 24px rgba(20, 20, 20, 0.16);
  --elevation-border: none;
  --dv-1: #002FA7;
  --dv-2: #4D7CFF;
  --dv-3: #5C5C5C;
  --cta-border: #002FA7;
  --cta-text: #002FA7;
  --cta-hover-bg: #002FA7;
  --cta-hover-text: #FAFAFA;
  --cta-active-bg: #141414;
  --cta-active-text: #FAFAFA;
}

Dark Mode Tokens

[data-mode="dark"] {
  --bg: #141414;
  --ink: #FAFAFA;
  --accent: #6B93FF;
  --accent-contrast: #FAFAFA;
  --text-secondary: #A8A8A8;
  --text-muted: #7A7A7A;
  --border: #333333;
  --error: #FF8A73;
  --success: #3FD69A;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.60);
  --elevation-border: 1px solid #333333;
  --dv-1: #6B93FF;
  --dv-2: #3A5FD9;
  --dv-3: #A8A8A8;
  --cta-border: #6B93FF;
  --cta-text: #6B93FF;
  --cta-hover-bg: #002FA7;
  --cta-hover-text: #FAFAFA;
  --cta-active-bg: #FAFAFA;
  --cta-active-text: #141414;
}

Call to Action

.cta {
  background: transparent;
  border: 1px solid var(--cta-border);
  color: var(--cta-text);
  transition: background 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: var(--cta-hover-bg);
    border-color: var(--cta-hover-bg);
    color: var(--cta-hover-text);
  }
}

.cta:active {
  background: var(--cta-active-bg);
  border-color: var(--cta-active-bg);
  color: var(--cta-active-text);
}

.cta:focus-visible {
  outline: 2px solid var(--cta-border);
  outline-offset: 3px;
}

.cta:disabled {
  border-color: var(--border);
  color: var(--text-muted);
  background: transparent;
  pointer-events: none;
}

Links, Elevation, Forms

a {
  color: var(--accent);
  text-decoration: underline;
}
a:hover { color: var(--ink); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card {
  box-shadow: var(--shadow-1);
  border: var(--elevation-border);
}
.modal {
  box-shadow: var(--shadow-2);
  border: var(--elevation-border);
}
.modal-overlay { background: var(--overlay); }

input, textarea, select {
  border: 1px solid var(--text-muted);
  background: var(--bg);
  color: var(--ink);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[aria-invalid="true"] {
  border-color: var(--error);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: #002FA7;
}

Tailwind Configuration

For projects using Tailwind, the same roles are exposed as named utilities. Never write arbitrary hex values in markup.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        slate:  { DEFAULT: '#141414' },
        off:    { DEFAULT: '#FAFAFA' },
        kline:  { DEFAULT: '#002FA7', bright: '#6B93FF' },
        coral:  { DEFAULT: '#BF3B22', dark: '#FF8A73' },
        jade:   { DEFAULT: '#007A5A', dark: '#3FD69A' },
        neutral: {
          secondary: '#5C5C5C', 'secondary-dark': '#A8A8A8',
          muted: '#8C8C8C',     'muted-dark': '#7A7A7A',
          border: '#D9D9D9',    'border-dark': '#333333'
        }
      }
    }
  }
}

Colour

Clarity in one System

The three Colours

Dark Slate

Off White

Klein Blue

Derived Colour: Klein Blue Bright

Neutral Tones

Functional Colours

Complete Palette

Colour Roles per Mode

Application Example, Form Feedback

Colour Distribution

Dark Intensity

Light Clarity

Terms (WCAG 2.1)

Contrast Values and Legibility

IT Specifications (Digital and UI)

Call to Action, Light Mode

Call to Action, Dark Mode

Text Links

Shadows and Depth

Form Fields and Selection Controls

Data Visualisation Colours

Reference Implementation, Colour Tokens (CSS)

Light Mode Tokens

Dark Mode Tokens

Call to Action

Links, Elevation, Forms

Tailwind Configuration

Logo

Imagery