Spectrum

Overview

Spectrum is a professional tool UI. Controls are compact, type is Adobe Clean, and the piece that makes a screen feel like a tool is the action bar.

This file is the light theme at medium density, using desktop type sizes. A dark theme and a large scale exist in the public tokens and are not tokenized here. Medium is the default density.

Colors

Light values from the published tokens. Primary is accent 900.

• Primary (#3B63FB): Accent buttons and selected controls. Hover is accent 1000 (#274DEA). Down is accent 1100 (#1D3ECF).
• On primary (#FFFFFF): Labels on primary and tooltip text.
• Text (#292929): Gray 800, the default content color.
• Surface (#FFFFFF): Pages and fields.
• Layer (#F8F8F8): Gray 50, for the action bar and other raised tool chrome.
• Track (#E1E1E1): Gray 200, for tracks and quiet fills.
• Inverse (#131313): Gray 900, for tooltips.
• Error (#D73220): Negative 900, for error text.

Typography

Adobe Clean Spectrum VF. Desktop sizes. Heading weight is extra-bold (800). Titles are bold (700). Body is regular (400). Detail is medium (500).

• Heading L and S: 28px and 20px.
• Title M: 16px bold.
• Body M and S: 16px and 14px. Body S is the control label.
• Detail S: 12px, for helper text and tooltips.

Layout

Medium density uses an 8px base, with 4px and 12px steps beside it. Tool chrome can be denser than a reading layout. Do not scale every control up to the large (touch) sizes unless the screen is actually large-scale.

Elevation & Depth

Tool chrome is mostly flat. The action bar is a layer, not a shadow. Floating pieces may use a light drop shadow. Do not put a marketing-style card shadow on every panel.

Shapes

Medium corners are 8px on buttons and fields. Smaller pieces, including checkboxes, tracks, and tooltips, use 4px.

Components

• Buttons: Accent height is 32px at medium, with 12px of side padding, an 8px corner, and body-s type. Hover and down use the next accent steps.
• Action bar: 56px tall on layer, with 16px of page padding and body-s labels. This is the bar for actions on the current tool or selection.
• Input fields: 32px on surface, 8px corner. Errors use the error color for the message.
• Tracks: 4px tall on the track color.
• Checkboxes and radio buttons: Selected fill is primary. The checkbox is 16px with a 4px corner.
• Lists: Rows on surface in body-s.
• Tooltips: Inverse fill, on-primary text, 4px corner.

Do’s and Don’ts

• Do keep medium density unless the person asked for the large scale.
• Do put bulk actions in the action bar.
• Don’t stretch controls to marketing sizes.
• Don’t use primary as a page wash. It is the accent button.
• Do meet WCAG AA. White on accent 900 does.