All foundations
THE FOUNDATION

Color

Meaningful color. Consistent expression.

Version 1

About color

Color expresses purpose before personality. Global palettes provide the raw material; semantic theme tokens connect each color to a role and resolve differently in Light and Dark modes.

Our color principles

HarmonyBuild a coherent palette from related hues. Reserve strong accent colors for meaningful emphasis.
ContrastDifferentiate content from its surface and make important information easy to identify.
AccessibilityCheck the actual foreground/background pairing. Pair status colors with labels and recognizable symbols.

Color ramps

A key color anchors each palette. The source describes applying white overlays to create tints and black overlays to create shades. Use the approved values from the token collection; do not resample these illustrations to create production values.

10#e8f0f8
20#9bc0e1
30#76a8d6
40#498bc9
50#1b6ebb
60#165896
70#104270
80#082138
90#051625
From key color to tints and shadesThe blue ramp below uses the captured global token values. Lower levels are lighter; higher levels are darker.

Color intents

Intent explains why a color is present. The blue product identity coexists with distinct semantic colors for information, success, warning, and error.

Your draft is saved locally.
InformationCommunicate useful, non-urgent information.
All changes saved.
PositiveConfirm a successful action or a healthy state.
Review before publishing.
WarningFlag a condition that needs attention before proceeding.
Could not save your changes.
NegativeExplain an error or distinguish a destructive action.
Create workspace
PrimaryEmphasize the most important action in a context.
View details
NeutralSupport ordinary actions without competing for attention.

Apply color contextually

The same intent needs different values for its background, foreground, and outline. These semantic roles support consistent theming across components.

light themeBuild something clear background.primary
dark themeBuild something clear background.primary
BackgroundFill the container or component surface. Light themes usually use lighter tints; dark themes use darker shades.
light themeBuild something clear foreground.primary
dark themeBuild something clear foreground.primary
ForegroundKeep text and icons readable above the surface. Use the matching on-primary role for a filled primary action.
light themeBuild something clear outline.primary
dark themeBuild something clear outline.primary
OutlineSeparate a control from adjacent surfaces. Essential boundaries need sufficient contrast.

Design for dark mode

Dark mode preserves hierarchy by choosing intentional surface and content colors. It is not a mathematical inversion. Review every role and state, including subdued text, disabled controls, selection, overlays, and focus.

Your projects

A shared place to create.

New project
Your projects

A shared place to create.

New project
One structure, two expressionsThe same composition keeps its hierarchy in light and navy themes.

Color and interaction states

A state layer sits between the background and foreground. Its opacity changes while text and icons remain fully opaque. Keyboard focus has an independent indicator; disabled content communicates unavailability.

Continue
DefaultThe resting appearance uses the base theme recipe.
Continue
HoverA 15% overlay acknowledges pointer hover.
Continue
PressedA 20% overlay acknowledges active press.
Continue
FocusedA visible ring identifies keyboard focus.
Continue
DisabledA muted treatment signals that the action is unavailable.