Colors

The two-layer color system powering Naos — Core colors and Product styles.

Color in Naos creates visual consistency across Brevo's product, communicates meaning through status, hierarchy, and interaction, and reinforces the brand. All color is applied through semantic tokens — never raw hex values — so the system stays maintainable and changes can roll out at scale.

Color architecture

Naos color is organized into two layers.

Layer 1 - Core colors

The raw named color values, organized into families such as iris-purple, forest-green, and charcoal-grey. Each family has a numeric scale from 100 (lightest) to 900 (darkest). Primitives are the source of truth and must never be used directly in components or code — they exist only to be referenced by semantic tokens.

Layer 2 - Product styles

Role-based tokens that reference a primitive (for example, information/default maps to iris-purple/500). These are the only colors you should apply in product work. Token names encode intent, not visual description: use positive/background rather than "the light green."

This separation enables future theming, makes design language changes easy to roll out at scale, and prevents arbitrary color use in product.

:::info Tokens are consumed by components, not applied directly In most cases, you should not reach for a color token and apply it yourself. Use the Naos component that fits your context and let the component apply the token. Directly applying semantic tokens outside a component bypasses the structure that makes them meaningful.

The exception is surface/* and content/* tokens, which are designed for layout-level use: page backgrounds, panel fills, and text on custom surfaces. :::

Interaction states

Naos encodes interactive color behavior directly into the token naming convention. Each semantic group includes tokens for the three main interactive states.

Default - The resting, enabled state. Uses the /default or base token.

Hover - On mouse-over. Uses the /hover token, which maps to a darker step in the primitive scale than the default.

Press / Active - On click or tap. Uses the /press token, which is a darker step than hover.

Disabled - Not yet formalized as tokens. As a placeholder, use desaturated grey surfaces with reduced-emphasis text. This will be addressed in a future token definition.

Focus - Keyboard focus states should use a visible 2px ring in iris-purple/500 which ensures sufficient contrast ratio (minimum 3:1 per WCAG 2.1).