POS design tokens reference

Overview

Design tokens are the named values the POS app and the components in it are styled from, such as --sc-color-primary. Their names are designed to stay stable between releases, and redefining their values is what they are for. They are the most stable way to customize how the POS looks.

Use them in two ways:

• Redefine a token in a Style Block with POS in Channels, and every part of the app that uses it follows. See Style the POS for the steps.
• Read a token with var() in the CSS of your own POS View, so your markup matches the rest of the app.

```css

:root { –sc-color-primary: #1F3A93; –sc-color-on-primary: #FFFFFF; }

.my-panel { background: var(–sc-color-surface-raised); color: var(–sc-color-on-surface); } ```

As a rule of thumb, change the tokens first, and write custom CSS only for what the tokens cannot do. Styling the app’s own class names instead, such as sc:button, is fragile, because those classes are internal and can change at an upgrade.

When you redefine a color, change the on- color paired with it as well. See Foreground pairings.

:::note

POS tokens and your web theme’s CSS variables are separate sets, even where both start with --sc-. The web theme’s own stylesheets don’t load in the POS, but a style block does if Channels includes POS or is left blank. A variable redefined in that block applies in both, so where the two share a name, it changes both. Set a style block to one channel to keep them apart.

:::

The POS has more tokens than this page lists, such as the grid card sizes covered in POS layouts.

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