POS design tokens reference

Overview

The POS app defines its colors and type as CSS custom properties on :root. Any CSS you load into the POS can read them, so a custom button can take the same blue as a built-in one and stay correct when the palette changes.

Use them from either place custom CSS reaches the POS:

• A Style Block with pos in Channels, which is injected into the POS <head> after the app’s own stylesheets.
• A <style> tag inside a POS View.

```css

.my-panel { background: var(–sc-color-surface-raised); color: var(–sc-color-on-surface); border: 1px solid var(–sc-color-border-subtle); font-size: var(–sc-type-body-medium-size); } ```

These are the semantic tokens, and they are not every --sc- name in the POS. Individual components define their own variables as well, such as --sc-card-min-width on the records grid. Those are set per component rather than on :root, they are not part of the token system, and they can change without notice. The tokens below are the stable set to build against.

:::warning

The POS and the web storefront both use the --sc- prefix, and their token sets are almost entirely different. A web theme name such as --sc-spacing-medium, --sc-shade-dark, --sc-border-radius or --sc-input-height is not defined in the POS at all. The declaration that uses it is dropped at computed-value time, so the property falls back to its inherited or initial value with nothing in the console. Two names are worse than absent, because they exist in both places meaning different things:

• The --sc-font-* names are font families in the POS (--sc-font-plain, --sc-font-brand) and sizes or weights on the storefront (--sc-font-small, --sc-font-bold).
• The primary color is a single hex value in the POS, but the storefront decomposes it into -h, -s and -l parts for use in hsla().

So hsla(var(--sc-color-primary-h), 71%, 92%, 1), which is correct on the storefront, produces no color in the POS. Check any CSS you are moving across against the tables below rather than assuming it carries over.

:::

Surfaces

Background layers, in order of elevation. Each one has a -hover and -active companion for when the background under an interaction is known.

Token	Value
--sc-color-surface	#EAECF1
--sc-color-surface-hover	#dee2ea
--sc-color-surface-active	#d3deee
--sc-color-surface-inset	#DEE2E8
--sc-color-surface-inset-hover	#d3d9e1
--sc-color-surface-inset-active	#c8d5e6
--sc-color-surface-inverse	#333E4D
--sc-color-surface-inverse-hover	#3d4856
--sc-color-surface-inverse-active	#525b68
--sc-color-surface-overlay	#FFFFFF
--sc-color-surface-overlay-hover	#f2f4f7
--sc-color-surface-overlay-active	#e6effb
--sc-color-surface-raised	#F6F7F9
--sc-color-surface-raised-hover	#eaedf2
--sc-color-surface-raised-active	#dee8f6

Brand and soft fills

Accent colors for emphasis. A -soft role is the tonal companion, for filled areas where the full brand color would be too strong.

Token	Value
--sc-color-primary	#055CD6
--sc-color-primary-hover	#1264d8
--sc-color-primary-active	#2b74dc
--sc-color-primary-soft	#B8D0F5
--sc-color-primary-soft-hover	#afc8ee
--sc-color-primary-soft-active	#9cb7e0
--sc-color-primary-soft-variant	#DEEAFC
--sc-color-secondary	#A8CDE6
--sc-color-secondary-hover	#acd0e7
--sc-color-secondary-active	#b5d5ea
--sc-color-secondary-soft	#C6DDEC
--sc-color-secondary-soft-hover	#bcd4e5
--sc-color-secondary-soft-active	#a8c2d8

Error roles

Token	Value
--sc-color-error	#B3261E
--sc-color-error-hover	#b73129
--sc-color-error-active	#be4740
--sc-color-error-soft	#EBC4C2
--sc-color-error-soft-hover	#dfbcbd
--sc-color-error-soft-active	#c8adb4
--sc-color-error-soft-variant	#f8e2e2

Foreground pairings

Readable text and icon colors designed to sit on a matching background. Pair --sc-color-on-surface with a surface, --sc-color-on-primary with --sc-color-primary, and so on.

Token	Value
--sc-color-on-error	#F9EDEC
--sc-color-on-error-soft	#5E1B17
--sc-color-on-error-soft-variant	#980000
--sc-color-on-primary	#E8EEF7
--sc-color-on-primary-soft	#0F428A
--sc-color-on-secondary	#143352
--sc-color-on-secondary-soft	#1F4D7A
--sc-color-on-surface	#041225
--sc-color-on-surface-inverse	#F8F8F9
--sc-color-on-surface-muted	#67717E
--sc-color-on-surface-variant	#414B58

Strokes and borders

Border and divider emphasis levels. The border names are aliases of the stroke names and resolve to the same values.

Token	Value
--sc-color-border-default	var(--sc-color-stroke-default)
--sc-color-border-error-soft	var(--sc-color-stroke-error-soft)
--sc-color-border-primary-soft	var(--sc-color-stroke-primary-soft)
--sc-color-border-strong	var(--sc-color-stroke-strong)
--sc-color-border-subtle	var(--sc-color-stroke-subtle)
--sc-color-stroke-default	#CED3DA
--sc-color-stroke-error-soft	#E59D99
--sc-color-stroke-primary-soft	#99B7E5
--sc-color-stroke-strong	#B6BEC9
--sc-color-stroke-subtle	#E8EAEE

Layer colors

Overlay colors, given as space-separated RGB channels rather than a color, so alpha is always explicit. Use them where the background underneath varies.

```css

.tile:hover { background: rgb(var(–sc-color-layer-dark) / 0.08); } ```

Token	Value
--sc-color-layer-dark	0 42 102
--sc-color-layer-error	179 38 30
--sc-color-layer-light	255 255 255
--sc-color-layer-primary	5 92 214

Font families

Both stacks begin with -system-ui, which is not a valid font name, so browsers skip it and use the next font in the list. Reference the token rather than copying its value, so your CSS picks up any change to the stack. The --sc-type-*-font tokens use the same stack.

Token	Value
--sc-font-brand	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-font-plain	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif

Font weights

Available on their own, for markup that sets a weight without taking a whole type scale.

Token	Value
--sc-weight-bold	700
--sc-weight-medium	500
--sc-weight-regular	400
--sc-weight-semibold	600

Typography scales

Fourteen scales, each exposed as a set of properties following the pattern --sc-type-<scale>-<property>. The properties are size, line-height, font, weight, weight-em for the emphasized weight, and letter-spacing on the scales that define one. Sizes are in rem and letter-spacing in em.

```css

.card-title { font-family: var(–sc-type-title-medium-font); font-size: var(–sc-type-title-medium-size); line-height: var(–sc-type-title-medium-line-height); font-weight: var(–sc-type-title-medium-weight-em); } ```

Token	Value
--sc-type-body-large-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-body-large-line-height	1.25rem
--sc-type-body-large-size	1rem
--sc-type-body-large-weight	400
--sc-type-body-large-weight-em	500
--sc-type-body-medium-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-body-medium-line-height	1.0625rem
--sc-type-body-medium-size	0.875rem
--sc-type-body-medium-weight	400
--sc-type-body-medium-weight-em	500
--sc-type-body-small-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-body-small-line-height	0.9375rem
--sc-type-body-small-size	0.75rem
--sc-type-body-small-weight	400
--sc-type-body-small-weight-em	500
--sc-type-display-large-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-display-large-line-height	4rem
--sc-type-display-large-size	3.5625rem
--sc-type-display-large-weight	500
--sc-type-display-large-weight-em	600
--sc-type-display-medium-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-display-medium-line-height	2.75rem
--sc-type-display-medium-size	2.5rem
--sc-type-display-medium-weight	500
--sc-type-display-medium-weight-em	600
--sc-type-display-small-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-display-small-line-height	2.75rem
--sc-type-display-small-size	2.25rem
--sc-type-display-small-weight	500
--sc-type-display-small-weight-em	600
--sc-type-headline-large-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-headline-large-letter-spacing	0.0156em
--sc-type-headline-large-line-height	2.375rem
--sc-type-headline-large-size	2rem
--sc-type-headline-large-weight	400
--sc-type-headline-large-weight-em	500
--sc-type-headline-medium-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-headline-medium-letter-spacing	0.0107em
--sc-type-headline-medium-line-height	2.25rem
--sc-type-headline-medium-size	1.75rem
--sc-type-headline-medium-weight	400
--sc-type-headline-medium-weight-em	600
--sc-type-headline-small-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-headline-small-letter-spacing	0.0125em
--sc-type-headline-small-line-height	2rem
--sc-type-headline-small-size	1.5rem
--sc-type-headline-small-weight	400
--sc-type-headline-small-weight-em	600
--sc-type-label-large-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-label-large-line-height	1.125rem
--sc-type-label-large-size	0.9375rem
--sc-type-label-large-weight	500
--sc-type-label-large-weight-em	600
--sc-type-label-medium-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-label-medium-line-height	1rem
--sc-type-label-medium-size	0.8125rem
--sc-type-label-medium-weight	500
--sc-type-label-medium-weight-em	600
--sc-type-label-small-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-label-small-line-height	0.875rem
--sc-type-label-small-size	0.6875rem
--sc-type-label-small-weight	500
--sc-type-label-small-weight-em	600
--sc-type-title-large-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-title-large-line-height	1.625rem
--sc-type-title-large-size	1.25rem
--sc-type-title-large-weight	500
--sc-type-title-large-weight-em	600
--sc-type-title-medium-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-title-medium-line-height	1.5rem
--sc-type-title-medium-size	1.125rem
--sc-type-title-medium-weight	500
--sc-type-title-medium-weight-em	600
--sc-type-title-small-font	-system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--sc-type-title-small-line-height	1.25rem
--sc-type-title-small-size	1.0625rem
--sc-type-title-small-weight	500
--sc-type-title-small-weight-em	600