Brand

Icon .

Envelopa <bio-icon>; tones mapeiam para role tokens; chips circle 44% / square 50%.

Icon · light surface

Wraps <bio-icon> web component. Tones resolve through --icon-* role tokens. Chip ratios: circle 28/64 ≈ 44%; square 22/44 = 50%.

Inline icons · all safe tones · light surface

default accent muted success

Status tones · light surface

status: red · danger status: amber · warning status: blue · info

Icon sizing scale · light surface

sm · 16px md · 20px lg · 24px xl · 28px

Chip · circle 44% ratio (64px / 28px icon) · light surface

Chip · square 50% ratio (44px / 22px icon) · light surface

Icon · dark surface

data-surface="ink" → --icon-accent resolves to --text-accent = --green-400 automatically.

Inline icons · all safe tones · ink surface

default accent muted success

Status tones · ink surface

--icon-danger/warning/info lighten on carbon/ink for legibility.

status: red · danger status: amber · warning status: blue · info

Chips · ink surface