Color

Promeo color tokens, grouped by category. Click the hex value to copy it; click </> next to a token name to copy the AppColors.<name> Dart identifier RD imports. Hover a swatch and click the ✎ to edit, or use + Add token to add a new one (PRD 06 — requires dart run bin/sync-server.dart running locally).

Token values and role descriptions are generated from tokens/Light.tokens.json (Tokens Studio export) by scripts/build-tokens.dart. Roles live in each token’s $extensions.promeo.role slot per W3C DTCG (PRD 06 §11). See PRD 05 §6 for the full pipeline contract.

Surface

• surface00 </> surface/00/$root

  #FFFFFF

  Default surface — cards, triggers, menu container, page bg.

• surface00Disable </> surface/00/disable

  #FFFFFF

  Default surface, disabled (stays white).

• surface00Hovered </> surface/00/hovered

  #F3F4F5

  Default surface, hovered.

• surface00Pressed </> surface/00/pressed

  #F3F4F5

  Default surface, pressed.

• surface01 </> surface/01/$root

  #F3F4F5

  Filled surface — input bg, hover-tier surfaces, selected rows.

• surface01Disable </> surface/01/disable

  #F3F4F5

  Filled surface, disabled.

• surface01Hovered </> surface/01/hovered

  #E7E8E9

  Filled surface, hovered.

• surface01Pressed </> surface/01/pressed

  #DBDCDC

  Filled surface, pressed.

• surface02 </> surface/02/$root

  #F7FCFC

  Teal-tinted surface — emphasized / branded surface contexts.

• surface02Disable </> surface/02/disable

  #FFFFFF

  Teal surface, disabled (falls back to white).

• surface02Hovered </> surface/02/hovered

  #DFEEF0

  Teal surface, hovered.

• surface02Pressed </> surface/02/pressed

  #DFEEF0

  Teal surface, pressed.

• surface03 </> surface/03/$root

  #DFEEF0

  Deeper teal surface — heavier brand emphasis tier.

• surface03Hovered </> surface/03/hovered

  #D6E4E6

  Teal surface tier 3, hovered.

• surface03Pressed </> surface/03/pressed

  #D6E4E6

  Teal surface tier 3, pressed.

• surfaceIndicator </> surface/indicator

  #0B9BB0

  Brand indicator surface — selection dot, active marker.

• surfaceInverse </> surface/inverse

  #161A1A

  Inverse / dark surface — tooltips, snackbars.

Border

• border01 </> border/01/$root

  #D8DEE1

  Default control border.

• border01Selected </> border/01/selected

  #0B9BB0

  Selected / focus border — brand teal.

• borderInverse </> border/inverse

  #0B9BB0

  Inverse border — same teal as brand emphasis.

Divider

• divider01 </> divider/01

  #809395

  Stronger divider — section breaks on dense panels.

• divider02 </> divider/02

  #E9EAEB

  Hairline divider between rows.

Text

• text01 </> text/01

  #121414

  Primary text on default surfaces.

• text02 </> text/02

  #343838

  Secondary text — body / label one tier softer.

• text03 </> text/03

  #4F5454

  Tertiary text — counter, metadata, helper copy.

• textDisable </> text/disable

  #C1C2C2

  Disabled text and chevron.

• textDisableOnBtn </> text/disable-on-btn

  #999F9F

  Disabled text on button surfaces — darker.

• textHighlight </> text/highlight

  #0B9BB0

  Accent text — brand emphasis.

• textLink </> text/link

  #0B9BB0

  Link text. Same hex as textHighlight, separate role.

• textOnColor </> text/on-color

  #FFFFFF

  Text on solid / colored surfaces.

• textPlaceholder </> text/placeholder

  #626566

  Input placeholder / hint on filled surfaces.

Icon

• icon01 </> icon/01

  #121414

  Primary icon. Same hex as text01, separate role.

• icon02 </> icon/02

  #343838

  Secondary icon — softer than primary.

• icon03 </> icon/03

  #6F7575

  Tertiary icon — meta / hint icons. Lighter than text03.

• iconDisable </> icon/disable

  #C1C2C2

  Disabled icon — same gray as textDisable.

• iconDisableOnColor </> icon/disable-on-color

  #999F9F

  Disabled icon on button surfaces — darker.

• iconEmphasize </> icon/emphasize

  #0B9BB0

  Emphasis icon — selected, active, brand accent.

• iconOnColor </> icon/on-color

  #FFFFFF

  Icon on solid / colored surfaces.

• iconWarning </> icon/warning

  #B93F3F

  Warning / error icon. Same hex as errorMessage.

Error

• errorInverse </> error/inverse

  #290404

  Error text on errorSurface — dark red on soft red.

• errorMessage </> error/message

  #B93F3F

  Error text / icon / accent — high-contrast red.

• errorSurface </> error/surface

  #FFE3E0

  Soft red surface for error banners / fields.

Input field

• inputField01 </> input_field/01

  #F3F4F5

  Filled-style input bg (alias of surface01).

• inputField02 </> input_field/02

  #FFFFFF

  Outlined-style input bg (alias of surface00).

Button

• button01Default </> button/01/default

  #0B9BB0

  Primary button fill — brand teal.

• button01Hovered </> button/01/hovered

  #3CAFC0

  Primary button fill, hovered — lighter teal.

• button01Pressed </> button/01/pressed

  #0B9BB0

  Primary button fill, pressed.

• button02Default </> button/02/default

  #D3DADB

  Secondary button fill — neutral gray.

• button02Hovered </> button/02/hovered

  #DCE1E2

  Secondary button fill, hovered.

• button02Pressed </> button/02/pressed

  #D3DADB

  Secondary button fill, pressed.

• button03Default </> button/03/default

  #0B9BB0

  Tertiary button — brand teal solid.

• button03Hovered </> button/03/hovered

  #0B9BB0 α=10%

  Tertiary button, hovered — teal @ 10%.

• button03Pressed </> button/03/pressed

  #0B9BB0 α=20%

  Tertiary button, pressed — teal @ 20%.

• buttonDisable </> button/disable

  #D3DADB

  Disabled button fill — neutral gray.

• buttonGhotsDefault </> button/ghots/default

  #0B9BB0

  Ghost button (note: `ghots` is a typo in Figma — pending fix). Default state.

• buttonGhotsHovered </> button/ghots/hovered

  #3CAFC0

  Ghost button, hovered.

• buttonGhotsPressed </> button/ghots/pressed

  #0B9BB0

  Ghost button, pressed.

Btn (background)

• btnBg01Default </> btn/bg/01/default

  #FFFFFF

  Solid white button bg — sits on dark surfaces.

• btnBg01Disable </> btn/bg/01/disable

  #FFFFFF

  Solid white button bg, disabled.

• btnBg01Hovered </> btn/bg/01/hovered

  #F3F4F5

  Solid white button bg, hovered — light gray.

• btnBg01Pressed </> btn/bg/01/pressed

  #EBECED

  Solid white button bg, pressed.

• btnBg02Default </> btn/bg/02/default

  #FFFFFF α=75%

  Translucent white @ 75% — overlay button on imagery.

• btnBg02Disable </> btn/bg/02/disable

  #FFFFFF α=75%

  Translucent white, disabled.

• btnBg02Hovered </> btn/bg/02/hovered

  #FFFFFF

  Translucent white, hovered — opaque.

• btnBg02Pressed </> btn/bg/02/pressed

  #FFFFFF

  Translucent white, pressed.

• btnBg03Default </> btn/bg/03/default

  #E4F3F5

  Soft teal tint button bg.

• btnBg03Disable </> btn/bg/03/disable

  #FFFFFF

  Soft teal tint, disabled.

• btnBg03Hovered </> btn/bg/03/hovered

  #D2ECF0

  Soft teal tint, hovered.

• btnBg03Pressed </> btn/bg/03/pressed

  #D2ECF0

  Soft teal tint, pressed.

• btnBg04Default </> btn/bg/04/default

  #000000 α=60%

  Translucent black @ 60% — high-contrast overlay button.

• btnBg04Disable </> btn/bg/04/disable

  #000000 α=60%

  Translucent black, disabled @ 60%.

• btnBg04Hovered </> btn/bg/04/hovered

  #000000 α=80%

  Translucent black, hovered @ 80%.

• btnBg04Pressed </> btn/bg/04/pressed

  #000000 α=80%

  Translucent black, pressed @ 80%.

• btnBgWhiteBlur </> btn/bg/white_blur

  #FFFFFF α=80%

  White @ 80% — blurred overlay button background.

Link

• link01Default </> link/01/default

  #343838

  Neutral text link — body link style.

• link01Hovered </> link/01/hovered

  #121414

  Neutral text link, hovered.

• link01Pressed </> link/01/pressed

  #121414

  Neutral text link, pressed.

• link02Default </> link/02/default

  #0B9BB0

  Brand text link — teal.

• link02Hovered </> link/02/hovered

  #3CAFC0

  Brand text link, hovered — lighter teal.

• link02Pressed </> link/02/pressed

  #0B9BB0

  Brand text link, pressed.

• linkColor </> link/Color

  #FFFFFF

  Link surface — white over dark / brand surfaces.

Mask & scrim

• mask01 </> mask/01/$root

  #000000 α=70%

  Default modal scrim — black @ 70%.

• mask01_06 </> mask/01/6

  #000000 α=6%

  Subtle hover overlay — black @ 6%.

• mask01_10 </> mask/01/10

  #000000 α=10%

  Light overlay — black @ 10%.

• mask01_12 </> mask/01/12

  #000000 α=12%

  Soft overlay — black @ 12%.

• mask01_20 </> mask/01/20

  #000000 α=20%

  Medium overlay — black @ 20%.

• mask01_50 </> mask/01/50

  #000000 α=50%

  Half scrim — black @ 50%.

• mask02 </> mask/02

  #FFFFFF α=90%

  Light scrim — white @ 90%.

Accent

• accent01 </> accent/01

  #F34E4E

  Accent red — sale / emphasis dot (distinct from error red).

Grid

• grid </> grid

  #F5F6F7

  Canvas grid line — workspace background subdivision.