Color | Creative Yadley Design System

Core brand colors

Name	Value	Role
Obsidian	`#08090B`	Primary brand dark canvas
Deep Surface	`#111317`	Dark elevated surface (Surface 1)
Dark Rail	`#0D0F14`	Dark navigation rail background (256px rail)
Structural Surface	`#16191F`	Dark secondary surface, inputs and cards (Surface 2)
Hover Surface	`#1E222A`	Dark interactive hover and active background (Surface 3)
Warm Canvas	`#F4F5F2`	Light architectural canvas and light fields
White	`#FFFFFF`	Light surface 1, rail and pure light surface
Neutral Light Surface	`#ECEEE9`	Light secondary surface (Surface 2)
Signature Lime	`#AFE139`	Brand accent, active navigation pill and primary action
Lime Glow	`rgba(175, 225, 57, 0.45)`	High-priority interactive glow and active pill aura
Hairline Border	`rgba(255, 255, 255, 0.11)`	Dark 11% white hairline divider and card border
Lime Hairline	`rgba(175, 225, 57, 0.24)`	Subtle lime-tinted structural edge

Semantic status colors

Semantic State	Colour Name	HEX	Light Background	Dark Background	Text Light	Text Dark	Border Tint	Suggested Icon
Success	Green	`#16865B`	`#E8F5EE`	`#123B2B`	`#16865B`	`#4ADE80`	`rgba(22, 134, 91, 0.35)`	`check-circle`
Warning	Amber	`#D99A24`	`#FFF4D6`	`#422F12`	`#B47B10`	`#FBBF24`	`rgba(217, 154, 36, 0.35)`	`clock`
Danger / Error	Red	`#C43D4D`	`#FCEBED`	`#431C24`	`#C43D4D`	`#F87171`	`rgba(196, 61, 77, 0.35)`	`alert-circle`
Information	Blue	`#2563A6`	`#EAF2FC`	`#172D49`	`#2563A6`	`#60A5FA`	`rgba(37, 99, 166, 0.35)`	`calendar-check`
In Progress	Violet	`#7653B5`	`#F1ECFA`	`#2C2144`	`#7653B5`	`#A78BFA`	`rgba(118, 83, 181, 0.35)`	`loader-circle`
Neutral / Inactive	Grey	`#64706D`	`#EEF0EF`	`#2C3231`	`#64706D`	`#9CA3AF`	`rgba(100, 112, 109, 0.35)`	`ban`

CRITICAL ACCESSIBILITY & COMMUNICATION RULE (Rule 3): COLOUR ALONE MUST NEVER COMMUNICATE A STATUS. Every coloured status indicator MUST be accompanied by a clearly readable text label and a corresponding recognizable icon. Neither a coloured dot nor a bare icon is acceptable.

Color usage

Lime is a scarce accent, not a general UI paint color. Use it for the most important action, the active navigation pill with glow, a small selected-state cue or a deliberate brand moment.
Default buttons, navigation, links, dividers, icons and ordinary badges should remain neutral unless the action or state truly requires emphasis.
Aim for a predominantly obsidian/white/neutral interface. Lime should be visually exceptional and should not appear in every card, icon, chart, border or hover state.
Do not use lime for long paragraphs or large uninterrupted areas.
On lime surfaces, use dark #0B0D0E text and verify the final combination.
In light theme, use dark text on lime; never assume white text on lime is readable.
Keep status colors distinct from brand identity.
Gradients are optional expressive decoration, not a replacement for semantic color tokens.

Atmospheric lighting & glow

Neutral-first lighting: Atmospheric lighting and depth must remain subtle and neutral-first, relying on soft, diffused ambient dark drop shadows (0 4px 20px rgba(0, 0, 0, 0.45)), obsidian surface elevation, and delicate 1px hairline borders (rgba(255, 255, 255, 0.11)).
Lime glow & active navigation: Saturated lime glow (rgba(175, 225, 57, 0.42–0.45)) is visually electric and is reserved for high-priority interactive states: active navigation pills (background: #AFE139; box-shadow: 0 0 20px rgba(175, 225, 57, 0.45); color: #0B0D0E; font-weight: 700;), focused input outlines (outline: 3px solid var(--cy-focus)), and primary conversion buttons. Never cast ambient lime bloom across general cards or static elements.

Contrast requirements

Target WCAG 2.2 AA:

normal text: at least 4.5:1
large text: at least 3:1
meaningful UI boundaries and graphical objects: at least 3:1 against adjacent colors where required

Contrast must be checked for the actual foreground/background pair, including hover, disabled, selected and tinted states. Validate rendered components before release.