02 — Color System · EurekaGO Brand Playbook

A

Color Philosophy

Color is not decoration.
It is operational signal.

The EurekaGO palette is built around one central idea: restraint with precision. Black and white do the structural work. Azure — and only azure — marks what is alive, active, and operating.

Adding color where the system doesn't call for it dilutes the signal. Every use of azure should feel like a status light turning on — meaningful because it doesn't compete with anything else.

Ink is structural authority

Black defines the skeleton — logo, type, borders. It communicates that the system knows where it is.

White is active space

Dominant in web layouts. White is not emptiness — it is the arena where the content works.

Azure is the only color that moves

Interactive states, live data, the operational layer. Reserved at master brand level. Verticals can own their own signal colors.

Neutrals carry warmth

The gray scale is slightly warm — not cold or sterile. It references craft, paper, physical systems. The energy is human before it is digital.

B

Primary Palette

Two colors form the structural skeleton of EurekaGO. They appear in every touchpoint, at every scale. No substitutes.

Ink

#0A0A0A

Role

Logo, headlines, body text, structural borders. The default text color for all web and print surfaces. Not pure black — slightly warm to avoid harshness on screen.

Logo Headlines Body text UI borders

White

#FFFFFF

Role

Default web background. The dominant surface for EurekaGO digital products. Maximizes legibility and frames content with clarity. Also used for reversed logo on dark surfaces.

Web bg Cards Reversed logo Print paper

C

Azure — The Operative Signal

Azure is the only color that carries functional meaning at master brand level. It identifies the operative, live, data-driven layer of the system. The canonical value is used for interactive UI elements, data visualizations, and the halo mark. The scales are derived from the mark's concentric rings.

Canonical Azure

Azure

#00AEEF

The primary operative color. UI interactive states, live data indicators, CTA buttons, link hover. The only blue allowed in master brand.

Usage boundaries

Azure signals that something is operational — a live metric, an interactive element, an active state. It should never be used decoratively or as a general accent. If azure appears, it means: this part of the system is working right now.

Do not use azure for body text, backgrounds, or structural elements. Do not use it in combination with other saturated hues at master brand level.

Light Scale — Halo (Light Version)

L1 — Inner

#5FD1E1

Most saturated ring. Closest to the mark core.

L2 — Middle

#A5E4EB

Mid-ring. Transitional tone.

L3 — Outer

#D5F0F2

Lightest ring. Fades toward transparent.

Derived from the light halo animation (v19). Used on white/light surfaces and as tint backgrounds in editorial layouts.

Dark Scale — Halo (Dark Version)

D1 — Inner

#082329

Deep teal-black. Inner ring on dark surfaces.

D2 — Middle

#07454E

Mid teal. Structural depth.

D3 — Outer

#057688

Outer ring. Most visible on ink backgrounds.

Derived from Illustrator source files (DARK version). Used on ink/black surfaces only. Verified from actual Illustrator files — not to be lightened or mixed.

Source fidelity rule: The azure scale values are extracted directly from the Illustrator source files for the halo mark. They are not interpolated or approximated. Any variation from these values — even if visually similar — represents an unauthorized color in the system.

Azure as system gene: Azure (#00AEEF) threads through every product in the portfolio as the shared operative signal — live states, AI activity, interactive elements. It is not a brand color owned by any single vertical. For eureka!BIKE, azure is both the brand primary and the system gene simultaneously — an intentional overlap reflecting BIKE's position as the dominant vertical. For eureka!LEDGER (monochromatic identity), azure appears only at the UI layer, never in brand communications.

D

Neutral Scale

Thirteen steps from Ink to White. The entire scale carries a warm, slightly yellow-beige bias — this prevents the cold, clinical feel of pure neutral grays and aligns with the tactile, craft-informed quality of the brand. The midpoint anchors at Cream (#F5F3EC), the warm off-white used for editorial and secondary surfaces.

G01

#0A0A0A

Ink

G02

#1A1917

Pitch

G03

#2C2A26

Obsidian

G04

#3E3C37

Graphite

G05

#524F49

Slate

G06

#6B6860

Flint

G07

#8A8780

Fog

G08

#A8A59E

Pebble

G09

#C2BFB8

Linen

G10

#D6D3CC

Chalk

G11

#E4E2DB

Mist

G12 ★

#F5F3EC

Cream

G13

#FFFFFF

White

Dark range (G01–G05)

Backgrounds for inverted sections. Provides depth without going fully black. Use for section dividers in hero zones.

Mid range (G06–G09)

Supporting text, captions, UI labels, divider lines. Never use for primary text — contrast is insufficient at small sizes.

Light range (G10–G12)

Borders, subtle backgrounds, rule lines, card surfaces. G12 Cream is the warm secondary surface — preferred over cold gray.

E

Background Usage

Six approved surface types. Each has a defined context and text treatment. Do not use surfaces outside this matrix.

Primary Surface

Body copy and data live here. Maximum legibility.

Active

White — #FFFFFF

Default web & app background. Ink text. The primary arena.

Secondary Surface

Sidebar panels, quote blocks, feature sections.

Editorial

Cream — #F5F3EC

Warm secondary panels. Use to create soft visual separation without borders.

Signal Surface

Data highlights, feature callouts, live status.

Live

Azure Tint L3 — #D5F0F2

Operative highlights only. Not for general section backgrounds. Use sparingly to signal system activity.

Ink Surface

Hero sections, full-bleed closers, mark display.

Impact

Ink — #0A0A0A

High-impact sections. Reversed logo (white). Azure as only accent. No warm grays on ink.

Deep Surface

Sidebar on dark layouts, code blocks, data panels.

Data

Obsidian G03 — #2C2A26

Slightly elevated from Ink. Use for layered dark interfaces or to create depth within ink sections.

Azure Surface

Buttons, badges, live indicators. Not section backgrounds.

Operative

Azure — #00AEEF

UI components only — CTAs, active states, badges. Never as a full section background.

What sits on a filled signal

On a filled signal, text and icons are white. Always. That means Azure at #00AEEF, and the Full level of every semantic family — Success, Warning, Error. The matrix above has always rendered it this way: the Azure Surface cell is white on azure. What the document never did was say so, and that silence was not harmless. Two products read this page and reached opposite conclusions from it, one putting white on an azure button and the other putting Ink, each believing it was following the playbook. Neither was disobeying a rule; there was no rule. There is now.

On azure this is a declared deviation, and the number is 2.53:1. White on #00AEEF does not reach WCAG AA (4.5:1), and does not reach AA Large (3:1) either. Ink on the same fill measures 7.83:1 and would pass everything. The deviation is taken knowingly, because an azure fill carrying Ink text stops reading as the operative signal and starts reading as a neutral chip — the signal is the point of the colour. It is listed in the table in section F, with its real ratio, marked as failing. A deviation that is written down and measured is a decision; one that is left implicit is a defect.

The deviation does not extend to small body copy. What sits on a filled signal is a button label, a chip, a state word, an icon — short, bold, and rarely below 14pt. A paragraph never sits on a fill. Where a longer text needs an azure ground, use the Signal surface (Azure Tint L3, #D5F0F2) with Ink on it, which measures 16.57:1 and is already in the matrix for exactly this purpose.

The semantic fills are the same rule with worse numbers, and it still holds. White measures 2.48:1 on Success (#5cb85c), 1.95:1 on Warning (#f0ad4e), 3.96:1 on Error (#d9534f). All three are exempt for the reason given in section F: a filled signal is read as a signal, not as prose, and it never carries meaning without a label or an icon beside it. Do not switch any of them to Ink to buy contrast — the value of the rule is that every filled signal in the suite behaves identically, so a user learns it once. Where a number matters, it is the Ink on the wash, and those clear AA.

F

Contrast & Accessibility

WCAG 2.1 contrast ratios for the most common color pairings in the system. AA (4.5:1) is the minimum for normal text. AA Large (3:1) applies to text 18pt+ or 14pt bold. AAA (7:1) is the enhanced target for critical copy.

Filled signals are exempt from these thresholds, and the exemption is deliberate. Azure and the Full level of each semantic family exist to be seen, and every alternative that satisfies the ratio destroys what the colour is for: Ink on azure passes at 7.83:1 and reads as a neutral chip; darkening amber until white clears 3:1 stops it being amber. So the rule for a filled signal is fixed by hand rather than derived from a ratio — white text, white icons, always — and the real numbers are published below rather than hidden: azure 2.53:1, Success 2.48:1, Warning 1.95:1, Error 3.96:1. Four rows in the table say Fail, and they are meant to.

What keeps this honest is that nothing load-bearing is ever carried by a fill alone. A filled signal holds a button label, a chip, a state word or an icon — short, bold, and paired with a label or a position, per the first semantic usage rule. Body copy never sits on a fill: it sits on a wash, with the family's Ink on it, and every one of those pairings clears AA — 4.59:1, 5.39:1, 4.71:1. The exemption buys visibility for the signal and costs nothing in readability, because the reading happens on the wash.

Sample	Pairing	Ratio	WCAG	Approved use

G

Usage Rules

Do

Use Ink (#0A0A0A) as the default text color on all light surfaces.
Use White (#FFFFFF) as the primary web background.
Reserve Azure (#00AEEF) for interactive and operative elements only.
Use Cream (#F5F3EC) as the warm secondary surface for editorial panels and callouts.
On Ink backgrounds, use White for body text and Azure as the only accent.
Use the dark azure scale (D1–D3) exclusively on Ink surfaces.
Keep azure scale colors (light or dark) within mark-related contexts — don't scatter them in UI.
Test all text against WCAG 2.1 AA as a minimum. Target AAA for body copy.

Don't

Don't use Azure as a section background or page fill.
Don't introduce warm grays outside the defined 13-step scale.
Don't use cold/blue-shifted grays — the warmth bias is intentional and non-negotiable.
Don't combine Azure with other saturated hues at master brand level.
Don't place mid-range neutrals (G06–G09) as primary text — they fail WCAG AA.
Don't use light azure tints (L1–L3) on cream or warm backgrounds — the contrast is insufficient.
Don't simulate the dark halo scale from the light version — they are separate, independently sourced systems.
Don't add new colors to the master brand palette without a system-level decision.

Color hierarchy on any surface

1st

Structure

Ink / White

2nd

Surface

Cream / Obsidian

3rd

Signal

Azure only

4th

Support

G06–G10 neutrals

H

Vertical Color System

Each brand in the portfolio follows the same pattern: Primary · Cream · Ink · White — + Azure as shared system gene. Azure is the genetic thread — the operative signal that runs through every product in the portfolio. It always appears last, separated from the palette proper, because it belongs to the system, not the vertical. The primary color is what differentiates each brand.

The endorser logo always appears in Ink or White regardless of vertical color. EurekaGO Studio inherits the master brand identity directly — no separate color.

GO

Master brand. White is the dominant surface — clean, authoritative, clear. Fuchsia is the signal: CTAs, accents, the single disruptive note. Cream for editorial sections. Ink reserved for text and footer only. Azure as operative gene.

Fuchsia

#E0007A

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

Also applies to STUDIO — development arm, inherits EurekaGO palette, no independent color

BIKE

Cycling industry data infrastructure. PIM/DAM, B2B marketplace, B2C marketplace, ecommerce, WMS, CMS — one normalized dataset propagating across all commercial layers. 190k+ products. ~980 connected retailers. Azure is the primary brand color — intentional overlap with the system gene. Dominant vertical.

Azure (primary)

#00AEEF

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

OUTDOORS

Outdoor industry data infrastructure — normalized product catalog, B2B/B2C marketplace, ecommerce, inventory network for the outdoor supply chain. Vertical taxonomy built for climbing, trail running, skiing, camping. White dominant surface. Forest is the signal: CTAs, eyebrow labels, data accents. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Forest

#278244

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

LEDGER

Accounting document classification and automation — scan, classify, file. Monochromatic identity: Ink dominant, Fog for secondary text and eyebrow labels, Cream for editorial sections. No saturated primary color. Azure strictly at operative UI layer: confidence score bars, live status indicators, pipeline badges. Never in brand communications or identity.

Fog G07

#8A8780

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

SKI

Snow sports data infrastructure — ski, snowboard, skialp, clothing, equipment. Vertical taxonomy for the snow sector. White dominant surface. Arctic is the signal: CTAs, eyebrow labels, data accents — cold, precise, altitude. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Arctic

#0072A8

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

GYM

Fitness industry data infrastructure — gyms, equipment, supplements, clothing, wellness. Lemon is the signal: pure yellow, energy, metabolic intensity. White dominant surface. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Lemon

#F5CC00

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

MOTO

Motorcycle industry data infrastructure — parts, aftermarket, clothing, protection, accessories. Race red is the signal: saturated, adrenaline, MotoGP energy. White dominant surface. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Race

#E01010

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

AUTO

Automotive industry data infrastructure — parts, aftermarket, tuning, clothing, accessories. Cobalt is the signal: engineering precision, deep and authoritative. Distinct from Arctic SKI (colder, brighter) and Azure gene (lighter cyan). White dominant surface. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Cobalt

#1A4A96

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

FASHION

Fashion industry data infrastructure — clothing, accessories, brand apparel. The only vertical where color communicates aspiration before operations. Velvet is the signal: editorial luxury, premium positioning, investor-facing. White dominant surface. Cream for editorial sections. Ink for text and footer. Azure at UI layer only.

Velvet

#8B2FA0

Cream

#F5F3EC

Ink

#0A0A0A

White

#FFFFFF

Azure ∞

#00AEEF

The Azure gene rule: Azure (#00AEEF) is the shared genetic marker of the EurekaGO system — present in every product as the operative, live, data layer. It is not part of the vertical palette; it sits outside it, at the end, always separated. For eureka!BIKE it doubles as the primary brand color by design: BIKE is the dominant vertical and the overlap is intentional. For eureka!LEDGER, azure exists only at the UI layer — it never appears in brand communications or identity. Cream (#F5F3EC) is the warm secondary surface shared across all verticals as the editorial background. The endorser lockup always renders in Ink or White, never in any vertical color. Full portfolio primary colors: GO Fuchsia #E0007A · BIKE Azure #00AEEF · OUTDOORS Forest #278244 · LEDGER Fog #8A8780 · SKI Arctic #0072A8 · GYM Lemon #F5CC00 · MOTO Race #E01010 · AUTO Cobalt #1A4A96 · FASHION Velvet #8B2FA0.

I

Semantic Colors

Three families that report the state of a thing, not the identity of a brand: Success, Warning, Error. Like Azure, they belong to the system and not to the vertical — the same green means the same thing in every product in the portfolio, and no product may choose its own.

They are derived, not picked. Each wash is its full colour mixed into Cream at 10% rather than into white, so the warmth bias of the neutral scale is inherited by construction instead of being applied afterwards. Each ink is darkened until it clears 4.5:1 on both its own wash and white. Each full is lowered until it clears 3:1 on white, the WCAG minimum for non-text elements.

Success

Hue 120° — a true green, and the closest call in the system: 19° from Forest. See the note under the separation table

Full

Full

#5cb85c

Rules, icons, accents · 2.48:1 on white

Wash

Wash

#e9f6ea

Chip and panel backgrounds

Ink

Ink

#2f7d32

Text on the wash · 4.59:1 5.12:1 on white

Warning

Hue 35° — amber, the family that sits most naturally in a warm palette

Full

Full

#f0ad4e

Rules, icons, accents · 1.95:1 on white

Wash

Wash

#fdf3e2

Chip and panel backgrounds

Ink

Ink

#8a5a00

Text on the wash · 5.39:1 5.93:1 on white

Error

Hue 2° — a warm red, 35° from Fuchsia

Full

Full

#d9534f

Rules, icons, accents · 3.96:1 on white

Wash

Wash

#fbebea

Chip and panel backgrounds

Ink

Ink

#c0392b

Text on the wash · 4.71:1 5.44:1 on white

There is no fourth family. Info is Azure.

An Info colour would be blue by convention, and blue is spoken for three times over: Azure #00AEEF reserved for interactive and operative elements, Azure again as the primary of the BIKE vertical, and Arctic #0072A8 as the primary of SKI. A fourth blue would not add a meaning, it would dilute three. Azure already does this job — section C describes it as a light that comes on — so it is named Info here rather than imitated.

Separation from what is already assigned

Family	Nearest assigned colour	Hue distance
Success 120°	Forest — OUTDOORS 139°	19°
Warning 35°	Fuchsia — master 327°	68°
Error 2°	Fuchsia — master 327°	35°

Between themselves: Success to Warning 85°, Success to Error 118°, Warning to Error 33°. Amber and red are the tightest pair among the semantics, and that is unavoidable rather than an oversight — they are close in any palette that stays warm. It is the reason the first usage rule below exists.

The closest call in the system is Success against Forest: 19°. It is worth naming rather than burying, because this table exists to catch exactly that. The semantic green is a true green at 120° and OUTDOORS Forest sits at 139°, so a success chip and the OUTDOORS signal colour are neighbours. It is accepted for one reason: the two never share a surface. Forest identifies a vertical in brand contexts; the semantic green reports state inside an interface, always with a label or an icon beside it (first usage rule below), and never as a section background. If a future layout does put them together, that layout is the thing to change, not the palette.

Rules

Colour never carries the meaning alone. Every semantic state also has a label, an icon, or a position. A reader who cannot separate red from green must still be able to read the state. This is not a recommendation; Warning and Error are 30° apart.

Three levels, always the same three. Full for rules, icons and accents. Wash for the background of a chip or panel. Ink for text on that wash. Do not invent a fourth level, and do not set full-colour text on a wash.

What sits on the Full level is white. Text and icons alike, on Success, Warning and Error, exactly as on an azure fill. Section E carries the rule and the measured ratios; it is repeated here because this is the page a developer opens when they are building a green chip and are one keystroke from putting Ink on it.

System, not vertical. A product does not get its own semantics, the same way it does not get its own Azure. A green that means success in one product means success in all of them.

Not for brand expression. These report state. They are not accent colours, not section dividers, not a way to add colour to a layout that feels flat. Outside of a state, they do not appear.

Semantics may share a view with Azure. The rule against combining Azure with other saturated hues governs brand expression, not interface state: a green chip beside an azure button is a working screen, not a brand violation.

Why the washes lean warm. A semantic wash built by adding white to the full colour comes out cold, and cold greys are the one thing the neutral scale in section D rules out without exception. Amber #fdf3e2 and Error #fbebea both carry that warmth bias and belong to the same palette as a cream panel rather than merely appearing near one. Success #e9f6ea is the exception and is knowingly neutral — its blue channel sits a point above its red — because a green warmed into Cream reads olive at chip size, which is worse than reading slightly cool. Do not "fix" it by warming it; it was tried.