---
title: "POS design tokens reference"
source: https://support.storeconnect.com/articles/pos-design-tokens-reference
type: article
format: markdown
site: StoreConnect Support — product and developer documentation for StoreConnect
site_index: https://storeconnect.com/llms.txt
docs_index: https://support.storeconnect.com/llms.txt
note: Append .md to any page or article URL on this site to get its Markdown form.
---
# 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` |

---

## Follow StoreConnect

- [Email Newsletter](https://storeconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://storeconnect.com/partners)
- [Become a Partner](https://storeconnect.com/become-a-partner)
- [News](https://storeconnect.com/articles/news)
- [Events](https://storeconnect.com/articles/events)
- [Live Events](https://storeconnect.com/live-events)
- [Feature Comparison](https://storeconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://storeconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

## Machine-readable

- [Site index for agents](https://storeconnect.com/llms.txt): curated map of the StoreConnect site in llms.txt format
- [Documentation index for agents](https://support.storeconnect.com/llms.txt): full technical and product documentation map

Every page and article on this site has a Markdown rendering: append `.md` to its URL.

Continue in Markdown: [Help documentation](https://support.storeconnect.com/help-documentation.md) · [Developer reference](https://support.storeconnect.com/developer-reference.md) · [Videos & tutorials](https://support.storeconnect.com/videos-tutorials.md) · [Release notes](https://support.storeconnect.com/release-notes.md)

---

StoreConnect Support — https://support.storeconnect.com/articles/pos-design-tokens-reference