{"title":"POS design tokens reference","slug":"pos-design-tokens-reference","url":"https://support.storeconnect.com/articles/pos-design-tokens-reference","url_markdown":"https://support.storeconnect.com/articles/pos-design-tokens-reference.md","subtitle":null,"summary":"The POS design tokens, the semantic color and type values the app is built from, grouped by role, so custom CSS in a POS style block or POS view can match the app instead of hard-coding values.","type":"Developer_Documentation","video_url":"","keywords":"pos, design tokens, css custom properties, sc variables, pos styling, style block, pos css, colors, typography, surfaces, tokens","last_modified":"2026-10-07T05:47:34+0000","body_markdown":"## Overview\n\nThe POS app defines its colors and type as CSS custom properties on `:root`. Any CSS you\nload into the POS can read them, so a custom button can take the same blue as a built-in\none and stay correct when the palette changes.\n\nUse them from either place custom CSS reaches the POS:\n\n-   A **Style Block** with `pos` in **Channels**, which is injected into the POS `\u003chead\u003e`\n    after the app's own stylesheets.\n-   A `\u003cstyle\u003e` tag inside a **POS View**.\n\n```css\n\n.my-panel {\n  background: var(--sc-color-surface-raised);\n  color: var(--sc-color-on-surface);\n  border: 1px solid var(--sc-color-border-subtle);\n  font-size: var(--sc-type-body-medium-size);\n}\n```\n\nThese are the semantic tokens, and they are not every `--sc-` name in the POS. Individual\ncomponents define their own variables as well, such as `--sc-card-min-width` on the records\ngrid. Those are set per component rather than on `:root`, they are not part of the token\nsystem, and they can change without notice. The tokens below are the stable set to build\nagainst.\n\n:::warning\n\n**The POS and the web storefront both use the `--sc-` prefix, and their token sets are\nalmost entirely different.** A web theme name such as `--sc-spacing-medium`,\n`--sc-shade-dark`, `--sc-border-radius` or `--sc-input-height` is not defined in the POS\nat all. The declaration that uses it is dropped at computed-value time, so the property\nfalls back to its inherited or initial value with nothing in the console. Two names are\nworse than absent, because they exist in both places meaning different things:\n\n-   The `--sc-font-*` names are font families in the POS (`--sc-font-plain`,\n    `--sc-font-brand`) and sizes or weights on the storefront (`--sc-font-small`,\n    `--sc-font-bold`).\n-   The primary color is a single hex value in the POS, but the storefront decomposes it\n    into `-h`, `-s` and `-l` parts for use in `hsla()`.\n\nSo `hsla(var(--sc-color-primary-h), 71%, 92%, 1)`, which is correct on the storefront,\nproduces no color in the POS. Check any CSS you are moving across against the tables\nbelow rather than assuming it carries over.\n\n:::\n\n## Surfaces\n\nBackground layers, in order of elevation. Each one has a `-hover` and `-active` companion\nfor when the background under an interaction is known.\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-surface` | `#EAECF1` |\n| `--sc-color-surface-hover` | `#dee2ea` |\n| `--sc-color-surface-active` | `#d3deee` |\n| `--sc-color-surface-inset` | `#DEE2E8` |\n| `--sc-color-surface-inset-hover` | `#d3d9e1` |\n| `--sc-color-surface-inset-active` | `#c8d5e6` |\n| `--sc-color-surface-inverse` | `#333E4D` |\n| `--sc-color-surface-inverse-hover` | `#3d4856` |\n| `--sc-color-surface-inverse-active` | `#525b68` |\n| `--sc-color-surface-overlay` | `#FFFFFF` |\n| `--sc-color-surface-overlay-hover` | `#f2f4f7` |\n| `--sc-color-surface-overlay-active` | `#e6effb` |\n| `--sc-color-surface-raised` | `#F6F7F9` |\n| `--sc-color-surface-raised-hover` | `#eaedf2` |\n| `--sc-color-surface-raised-active` | `#dee8f6` |\n\n## Brand and soft fills\n\nAccent colors for emphasis. A `-soft` role is the tonal companion, for filled areas where\nthe full brand color would be too strong.\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-primary` | `#055CD6` |\n| `--sc-color-primary-hover` | `#1264d8` |\n| `--sc-color-primary-active` | `#2b74dc` |\n| `--sc-color-primary-soft` | `#B8D0F5` |\n| `--sc-color-primary-soft-hover` | `#afc8ee` |\n| `--sc-color-primary-soft-active` | `#9cb7e0` |\n| `--sc-color-primary-soft-variant` | `#DEEAFC` |\n| `--sc-color-secondary` | `#A8CDE6` |\n| `--sc-color-secondary-hover` | `#acd0e7` |\n| `--sc-color-secondary-active` | `#b5d5ea` |\n| `--sc-color-secondary-soft` | `#C6DDEC` |\n| `--sc-color-secondary-soft-hover` | `#bcd4e5` |\n| `--sc-color-secondary-soft-active` | `#a8c2d8` |\n\n## Error roles\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-error` | `#B3261E` |\n| `--sc-color-error-hover` | `#b73129` |\n| `--sc-color-error-active` | `#be4740` |\n| `--sc-color-error-soft` | `#EBC4C2` |\n| `--sc-color-error-soft-hover` | `#dfbcbd` |\n| `--sc-color-error-soft-active` | `#c8adb4` |\n| `--sc-color-error-soft-variant` | `#f8e2e2` |\n\n## Foreground pairings\n\nReadable text and icon colors designed to sit on a matching background. Pair\n`--sc-color-on-surface` with a surface, `--sc-color-on-primary` with\n`--sc-color-primary`, and so on.\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-on-error` | `#F9EDEC` |\n| `--sc-color-on-error-soft` | `#5E1B17` |\n| `--sc-color-on-error-soft-variant` | `#980000` |\n| `--sc-color-on-primary` | `#E8EEF7` |\n| `--sc-color-on-primary-soft` | `#0F428A` |\n| `--sc-color-on-secondary` | `#143352` |\n| `--sc-color-on-secondary-soft` | `#1F4D7A` |\n| `--sc-color-on-surface` | `#041225` |\n| `--sc-color-on-surface-inverse` | `#F8F8F9` |\n| `--sc-color-on-surface-muted` | `#67717E` |\n| `--sc-color-on-surface-variant` | `#414B58` |\n\n## Strokes and borders\n\nBorder and divider emphasis levels. The `border` names are aliases of the `stroke` names\nand resolve to the same values.\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-border-default` | `var(--sc-color-stroke-default)` |\n| `--sc-color-border-error-soft` | `var(--sc-color-stroke-error-soft)` |\n| `--sc-color-border-primary-soft` | `var(--sc-color-stroke-primary-soft)` |\n| `--sc-color-border-strong` | `var(--sc-color-stroke-strong)` |\n| `--sc-color-border-subtle` | `var(--sc-color-stroke-subtle)` |\n| `--sc-color-stroke-default` | `#CED3DA` |\n| `--sc-color-stroke-error-soft` | `#E59D99` |\n| `--sc-color-stroke-primary-soft` | `#99B7E5` |\n| `--sc-color-stroke-strong` | `#B6BEC9` |\n| `--sc-color-stroke-subtle` | `#E8EAEE` |\n\n## Layer colors\n\nOverlay colors, given as space-separated RGB channels rather than a color, so alpha is\nalways explicit. Use them where the background underneath varies.\n\n```css\n\n.tile:hover {\n  background: rgb(var(--sc-color-layer-dark) / 0.08);\n}\n```\n\n| Token | Value |\n| --- | --- |\n| `--sc-color-layer-dark` | `0 42 102` |\n| `--sc-color-layer-error` | `179 38 30` |\n| `--sc-color-layer-light` | `255 255 255` |\n| `--sc-color-layer-primary` | `5 92 214` |\n\n## Font families\n\nBoth stacks begin with `-system-ui`, which is not a valid font name, so browsers skip it\nand use the next font in the list. Reference the token rather than copying its value, so\nyour CSS picks up any change to the stack. The `--sc-type-*-font` tokens use the same stack.\n\n| Token | Value |\n| --- | --- |\n| `--sc-font-brand` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-font-plain` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n\n## Font weights\n\nAvailable on their own, for markup that sets a weight without taking a whole type scale.\n\n| Token | Value |\n| --- | --- |\n| `--sc-weight-bold` | `700` |\n| `--sc-weight-medium` | `500` |\n| `--sc-weight-regular` | `400` |\n| `--sc-weight-semibold` | `600` |\n\n## Typography scales\n\nFourteen scales, each exposed as a set of properties following the pattern\n`--sc-type-\u003cscale\u003e-\u003cproperty\u003e`. The properties are `size`, `line-height`, `font`,\n`weight`, `weight-em` for the emphasized weight, and `letter-spacing` on the scales that\ndefine one. Sizes are in `rem` and letter-spacing in `em`.\n\n```css\n\n.card-title {\n  font-family: var(--sc-type-title-medium-font);\n  font-size: var(--sc-type-title-medium-size);\n  line-height: var(--sc-type-title-medium-line-height);\n  font-weight: var(--sc-type-title-medium-weight-em);\n}\n```\n\n| Token | Value |\n| --- | --- |\n| `--sc-type-body-large-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-body-large-line-height` | `1.25rem` |\n| `--sc-type-body-large-size` | `1rem` |\n| `--sc-type-body-large-weight` | `400` |\n| `--sc-type-body-large-weight-em` | `500` |\n| `--sc-type-body-medium-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-body-medium-line-height` | `1.0625rem` |\n| `--sc-type-body-medium-size` | `0.875rem` |\n| `--sc-type-body-medium-weight` | `400` |\n| `--sc-type-body-medium-weight-em` | `500` |\n| `--sc-type-body-small-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-body-small-line-height` | `0.9375rem` |\n| `--sc-type-body-small-size` | `0.75rem` |\n| `--sc-type-body-small-weight` | `400` |\n| `--sc-type-body-small-weight-em` | `500` |\n| `--sc-type-display-large-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-display-large-line-height` | `4rem` |\n| `--sc-type-display-large-size` | `3.5625rem` |\n| `--sc-type-display-large-weight` | `500` |\n| `--sc-type-display-large-weight-em` | `600` |\n| `--sc-type-display-medium-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-display-medium-line-height` | `2.75rem` |\n| `--sc-type-display-medium-size` | `2.5rem` |\n| `--sc-type-display-medium-weight` | `500` |\n| `--sc-type-display-medium-weight-em` | `600` |\n| `--sc-type-display-small-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-display-small-line-height` | `2.75rem` |\n| `--sc-type-display-small-size` | `2.25rem` |\n| `--sc-type-display-small-weight` | `500` |\n| `--sc-type-display-small-weight-em` | `600` |\n| `--sc-type-headline-large-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-headline-large-letter-spacing` | `0.0156em` |\n| `--sc-type-headline-large-line-height` | `2.375rem` |\n| `--sc-type-headline-large-size` | `2rem` |\n| `--sc-type-headline-large-weight` | `400` |\n| `--sc-type-headline-large-weight-em` | `500` |\n| `--sc-type-headline-medium-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-headline-medium-letter-spacing` | `0.0107em` |\n| `--sc-type-headline-medium-line-height` | `2.25rem` |\n| `--sc-type-headline-medium-size` | `1.75rem` |\n| `--sc-type-headline-medium-weight` | `400` |\n| `--sc-type-headline-medium-weight-em` | `600` |\n| `--sc-type-headline-small-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-headline-small-letter-spacing` | `0.0125em` |\n| `--sc-type-headline-small-line-height` | `2rem` |\n| `--sc-type-headline-small-size` | `1.5rem` |\n| `--sc-type-headline-small-weight` | `400` |\n| `--sc-type-headline-small-weight-em` | `600` |\n| `--sc-type-label-large-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-label-large-line-height` | `1.125rem` |\n| `--sc-type-label-large-size` | `0.9375rem` |\n| `--sc-type-label-large-weight` | `500` |\n| `--sc-type-label-large-weight-em` | `600` |\n| `--sc-type-label-medium-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-label-medium-line-height` | `1rem` |\n| `--sc-type-label-medium-size` | `0.8125rem` |\n| `--sc-type-label-medium-weight` | `500` |\n| `--sc-type-label-medium-weight-em` | `600` |\n| `--sc-type-label-small-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-label-small-line-height` | `0.875rem` |\n| `--sc-type-label-small-size` | `0.6875rem` |\n| `--sc-type-label-small-weight` | `500` |\n| `--sc-type-label-small-weight-em` | `600` |\n| `--sc-type-title-large-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-title-large-line-height` | `1.625rem` |\n| `--sc-type-title-large-size` | `1.25rem` |\n| `--sc-type-title-large-weight` | `500` |\n| `--sc-type-title-large-weight-em` | `600` |\n| `--sc-type-title-medium-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-title-medium-line-height` | `1.5rem` |\n| `--sc-type-title-medium-size` | `1.125rem` |\n| `--sc-type-title-medium-weight` | `500` |\n| `--sc-type-title-medium-weight-em` | `600` |\n| `--sc-type-title-small-font` | `-system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |\n| `--sc-type-title-small-line-height` | `1.25rem` |\n| `--sc-type-title-small-size` | `1.0625rem` |\n| `--sc-type-title-small-weight` | `500` |\n| `--sc-type-title-small-weight-em` | `600` |"}