Sterling — token reference

Page and app background, behind panels.

Background of panels, cards, grid rows, and input fields.

Background of surfaces that sit above the page: menus and dialogs.

Background of a hovered row, cell, menu option, or ghost control.

Background of disabled controls and fields.

Background of a pressed secondary or ghost control.

Dividers and the borders of panels, cards, and grid rows.

Borders people need to see to use a control: input fields, checkboxes, chips, and the grid header rule.

Main text: values, labels, and headings.

Supporting text: field labels, captions, placeholders, and inactive column headers.

Text and icons in disabled controls. Exempt from contrast minimums.

Text and icons on every solid fill (accent, danger, buy, sell). Foreground for every solid fill (accent, danger, buy, sell). Fills are chosen so this passes 4.5:1 in both modes.

Primary actions, links, progress bars, and selected controls such as a checked checkbox or the selected tab.

Hover state of accent fills and links.

Pressed state of accent fills.

Tinted background for accent areas: the bulk action bar, the selected menu option, and the selected tab's count.

The 2px keyboard focus outline on every interactive control.

Background of a selected grid row.

Background of a selected grid row while hovered. Hover on a selected row. blue/75 and blue/850 sit between the ramp steps so every text color on rows still passes 4.5:1.

Loading placeholder bars. Decorative, so pair them with a loading label. Loading placeholder bars. Decorative: pair with a loading label or aria-busy, never color alone.

Translucent layer that dims the page behind a modal dialog. The only translucent color. alpha/* primitives are 8-digit hex (#RRGGBBAA): neutral/900 at 50% in Light, black at 60% in Dark, where the page is already neutral/900.

Positive status (success, ready): icons and borders.

Tinted background for positive status, as in status chips.

Text and icons for positive status on its subtle background.

Warning status (needs attention): icons, and the border of flagged cells and fields.

Tinted background for warning status: chips and flagged cells.

Text and icons for warning status on its subtle background, and the over-target progress bar.

Critical status (error, destructive): error icons and borders, and the fill of danger buttons. Shares the crimson red ramp with finance/loss. Destructive (danger) buttons use status/critical, never finance/sell.

Hover state of danger buttons.

Pressed state of danger buttons.

Tinted background for critical status: chips and error cells.

Text and icons for critical status on its subtle background.

Informational status: icons and borders.

Tinted background for informational status, as in status chips.

Text and icons for informational status on its subtle background.

Neutral status (draft, inactive): icons and borders.

Tinted background for neutral status, as in status chips and tab counts.

Text and icons for neutral status on its subtle background.

Buy side of an order or trade, which is an action. Never use it for gain. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Tinted background for the Buy side chip. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Text on the Buy side chip. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Sell side of an order or trade, which is an action. Never use it for loss or for destructive buttons. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Tinted background for the Sell side chip. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Text on the Sell side chip. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

A gain in a value, which is data: the up glyph and signed number in gain cells. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Tinted background for highlighting a gain. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Gain text and glyph on tinted backgrounds, such as flagged cells. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

A loss in a value, which is data: the down glyph and signed number in loss cells. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Tinted background for highlighting a loss. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Loss text and glyph on tinted backgrounds, such as flagged cells. Buy (blue) / Sell (coral) are actions. Gain (green) / Loss (crimson red) are data. Never rely on color alone: pair with B/S labels, +/− signs, and ▲/▼ glyphs.

Inter Semi Bold · 24/32 · -0.5px

Inter Semi Bold · 20/28 · -0.25px

Inter Semi Bold · 16/22 · 0px

Inter Regular · 13/18 · 0px

Inter Semi Bold · 13/18 · 0px

Inter Regular · 13/18 · 0px · underlined

Inter Medium · 12/16 · 0px

Inter Medium · 12/16 · 0px · underlined

Inter Regular · 11/14 · 0.1px

Inter Regular · 13/18 · 0px · tabular figures

Roboto Mono Regular · 12/16 · 0px