Color

Color in Raft works in two ways. Surfaces get less color from the outside in: the yellow frame, then the cream sidebar, then white paper where content sits. On top of that, each brand color has one fixed meaning, so a color on screen always tells the person something: who they are, what waits for them, or what a status is. A color that means none of these is removed.

Principles

• Yellow goes on the frame only. The frame is on every screen but nobody reads it, so color there costs almost nothing. Everything people read (messages, lists, cards, the content of pushed pages) sits on paper. The frame is the desktop rail, the web top bar and the top bar of a phone's top-level pages; see Page structure.
• Each color has one meaning. Yellow is you, pink is to do, cyan is this item, orange interrupts, red is irreversible. Status colors are fixed too; see Meanings of color.
• A block of brand color is a sticker. It has a 1.5px ink edge and ink type on it, in both modes; see Stickers.
• Notices are neutral. Toasts and tooltips are dark gray, not a brand color.

Tokens

Surfaces

Surfaces step down in color from the frame inward. In light mode layer-canvas, layer-card and layer-popover are all white and are told apart by lines; in dark mode they are told apart by lightness, each one lighter than the one beneath it.

Fills are laid into or over a surface: the sunken fill and the pressed overlays (Pressed overlays).

Text and icons

Lines

There are three kinds of line, and each one means something. See Shape for their widths.

Lines, secondary text and overlays are made from translucent steps of ink. Use the role tokens above; the steps are listed for reference.

Color roles

Meanings of color

• Use orange when something goes wrong: red is only for consequences that cannot be undone.
• Use blue (foreground-link) only for links in running text.
• Lime, lavender and stone only mark a status. Don't use them for anything else.

Statuses

Tasks and presence each have five colors, and they never change meaning. Task statuses are spelled Todo, In Progress, In Review, Done and Closed.

• Put a status chip on its task-status-*-soft tint.
• presence-busy has its own value instead of pointing at brand, so that a change of brand color doesn't change what busy looks like.
• Presence lights never blink; see Motion.

Soft tints

A soft tint (*-soft) is a highlight, never a sticker: it has no border.

Pressed overlays

Hover and press lay a translucent overlay over a control instead of changing its fill; see States.

Stickers

A sticker is a block of brand color: avatars, the selected item, the location tile, the primary button, badges.

• Give every block of brand color a 1.5px line-strong edge: stickers and paper are only 1.4:1 to 2.8:1 apart, so without an edge a sticker doesn't hold its shape.
• Put ink type on a sticker (sticker-ink), never white, in both modes.
• Don't invert stickers in dark mode. Sticker colors have the same value in both modes; dark mode adds the die-cut edge instead (see Dark mode).
• Don't put a shadow on a control. The hard sticker shadow is only for brand illustration; see Elevation.

Contrast

• foreground, foreground-muted and foreground-hint are at least 4.5:1 on every surface, every soft tint and every popup, in both modes. There are no exceptions to remember.
• Ink on a sticker is at least 6.8:1.
• line-seam is 3.0:1 on white and 2.8:1 on yellow.

Palette

The role tokens point at a small palette. Use the palette directly only where no role fits, such as lavender for people without a photo. The palette tokens are palette-<color>-<step>, with the bare utilities bg-palette-<color>.

Related

• Dark mode: what changes and what stays in dark mode.
• States: the colors of hover, selection, unread and error.
• Brand: how much brand color each kind of page may use.
• Button: which button color to use for which action.