Colors

Single source of truth for Nodo color tokens. Root brand tokens, current interface implementation, contextual division accents, experimental and suspended tokens are clearly distinguished.

Boson Cream

Core

Main light background, cards, panels

AAA · 16.83:1

Approved

Obsidian Grid

Core

Dark backgrounds, grid lines, structure

AAA · 14.35:1

Approved

Void Black

Core

Body text, headings, borders, ink

AAA · 21.00:1

Approved

Sofon White

Core

Highlights, micro-details only — not a general background

AAA · 21.00:1

Approved

App Background

Interfaces

App canvas background

AAA · 18.76:1

Contextual

Boson Cream Deep

Interfaces

Borders, dividers, secondary surfaces

AAA · 15.76:1

Contextual

Surface Card

Interfaces

Card surfaces, panels

AAA · 18.08:1

Contextual

Copilot Accent

Interfaces

Primary accent, links, interactive highlights

AA · 6.44:1

Contextual

Nav Item

Interfaces

Navigation item text, muted labels

AA · 6.86:1

Contextual

Secondary Cyan

Interfaces

Secondary accent, chart fills

AAA · 11.74:1

Contextual

Blueprint Mode

Interfaces

Blueprint accent, technical surfaces

AA Large · 4.31:1

Contextual

Agency Mode

Interfaces

Agency-mode accent

AAA · 7.58:1

Contextual

Accent Sand

Interfaces

Sand accent fills, editorial highlights

AAA · 16.18:1

Contextual

Chip 1 Fill

Interfaces

Chip / tag fills

AAA · 14.46:1

Contextual

User Bubble

Interfaces

User message bubbles

AAA · 16.17:1

Contextual

Holo Primary

Interfaces

Hologram accent — experimental

AAA · 13.16:1

Experimental

Holo Primary Light

Interfaces

Hologram link / secondary accent

AA · 4.52:1

Experimental

Sand Light

Interfaces

Warm editorial text / accent on light sand

AA · 5.00:1

Contextual

Agency Gold

Divisions

Agency accent — do not mix divisions

AAA · 8.76:1

Approved

Division: Agency

Agency Gold Light

Divisions

Agency accent light variant

AAA · 12.20:1

Approved

Division: Agency

Labs Green

Divisions

Labs accent — restricted to Labs contexts

AA · 6.87:1

Contextual

Division: Labs

Academy Purple

Divisions

Academy accent — restricted to Academy contexts

AAA · 7.88:1

Contextual

Division: Academy

Trendy Crimson

Divisions

Trendy accent — restricted to Trendy contexts

AAA · 7.39:1

Contextual

Division: Trendy

Porcelain Cream

Divisions

Trendy light surface

AAA · 19.43:1

Contextual

Division: Trendy

Regional Amber

Regional

Regional amber marker

AAA · 8.76:1

Contextual

Regional Rose

Regional

Regional rose marker

AA · 4.95:1

Contextual

Regional Slate

Regional

Regional slate marker

AA · 5.99:1

Contextual

Regional Olive

Regional

Regional olive marker

AA · 4.69:1

Contextual

Metal Bronze

Metals

Bronze finish accent

AA · 4.67:1

Contextual

Metal Silver

Metals

Silver finish accent

AAA · 12.48:1

Contextual

Metal Platinum

Metals

Platinum finish accent

AAA · 15.57:1

Contextual

Archived Mist

Archived

Deprecated surface — suspended

AAA · 13.02:1

Suspended

Archived Fog

Archived

Deprecated surface — suspended

AAA · 16.52:1

Suspended

Color Mixing Lab

Combine role-based colors with live preview and contrast checks. Combinations are never auto-approved.

Mini hero

Live color-mix preview — updates as you change roles.

Card

Surface with primary and secondary text.

Tag

Callout / modal surface

Link example →State OK

Roles

Background

Surface

Primary text

Secondary text

Border

Accent

Highlight

Link

State

Contrast

AAA · 16.83:1AA · 5.50:1AA · 5.16:1

Export

Dashboard Widget Themes

Editable theme variables — title text, background, metric, chart and link color — with live widget previews and side-by-side comparison.

Performance

Meta ad clicks

1,260

Visualizaciones Totales

9,460

Contactos

142

Trend — 7 daysView →

Area

Bars

Oportunidad de negocio: ActivoValue: $48.2kState: On track

Empty state — no data yet

Theme variables

Title text

Background

Metric

Chart

Link

Border

Gridline

Muted text

Positive

Warning

Negative

Tooltip bg

Tooltip text

Export

--widget-title: #000000;
--widget-bg: #EFEEE9;
--widget-metric: #2A2A2A;
--widget-chart: #006689;
--widget-link: #006689;
--widget-border: #E1DFD9;
--widget-gridline: #E1DFD9;
--widget-muted: #665755;
--widget-positive: #1FA86A;
--widget-warning: #DF9A00;
--widget-negative: #AD0335;
--widget-tooltip-bg: #2A2A2A;
--widget-tooltip-text: #FFFFFF;

Gradient System

Linear or radial gradients with multiple stops, angle, opacity and CSS/JSON export.

Agency Gold

Agency context only

ModeAngle (90°)

100%

Gallery

CSS output

background-image: linear-gradient(90deg, #DF9A00 0%, #EDBF5A 100%);