Charts and components
Remarkable Pro
Styling
Core tokens

CSS Tokens – Core

Core tokens are the lowest-level design primitives in Remarkable.

They represent the raw building blocks of the system and remain constant across all modes, themes, and brands e.g. your spacing and typography scales.

For example

'--em-core-line-height--sm': '14px',
'--em-core-line-height--md': '16px',
'--em-core-line-height--l': '19px',
'--em-core-line-height--xl': '38px',

You can override core tokens if you’re building your own design system or want full control over the fundamentals. But, most teams leave the base layer alone and customise the higher semantic and component layers instead.

Pattern for Core tokens

'--em-core-{category}-{property}'  
'--em-core-{category}-{property}--{modifier}'

Pattern breakdown

em - the Embeddable design system namespace.

core - indicates a core-level token:

  • fundamental design primitives
  • identical across all themes, modes, and environments

These behave like the “source of truth” for your design foundation.

{category} - defines the type of primitive.

For example

  • color scales
  • spacing scales
  • border-radius scales

{property} - specifies the item within that category.

For example

  • e.g. gray(colour families)
  • e.g. md, sm, xl (typography steps)

{modifier} (optional) - a scale step used to refine the primitive. Importantly:

  • modifiers are pure scales, not semantics
  • always use -- before the modifier

For example

  • 0
  • 50
  • 100
  • md
  • xxl

Core tokens give you the foundation. Higher layers (Semantic and Component tokens) build on top of these to theme and brand the system.

Reference

Here you'll find the full list of core tokens.

Borders

  • --em-core-border-radius--000: 0px
  • --em-core-border-radius--050: 2px
  • --em-core-border-radius--100: 4px
  • --em-core-border-radius--150: 6px
  • --em-core-border-radius--200: 8px
  • --em-core-border-radius--300: 12px
  • --em-core-border-radius--400: 32px
  • --em-core-border-radius--500: 9999px
  • --em-core-border-width--000: 0px
  • --em-core-border-width--025: 1px
  • --em-core-border-width--050: 2px
  • --em-core-border-width--100: 4px

Gray scales

  • --em-core-color-gray--0000: rgb(255 255 255)
  • --em-core-color-gray--0050: rgb(247 247 248)
  • --em-core-color-gray--0100: rgb(237 237 241)
  • --em-core-color-gray--0200: rgb(228 228 234)
  • --em-core-color-gray--0300: rgb(210 210 213)
  • --em-core-color-gray--0400: rgb(184 184 189)
  • --em-core-color-gray--0500: rgb(144 144 152)
  • --em-core-color-gray--0600: rgb(114 114 121)
  • --em-core-color-gray--0700: rgb(92 92 102)
  • --em-core-color-gray--0800: rgb(49 49 61)
  • --em-core-color-gray--0900: rgb(33 33 41)
  • --em-core-color-gray--1000: rgb(0 0 0)

Fonts

  • --em-core-font-family--base: inter
  • --em-core-font-size--md: 16px
  • --em-core-font-size--sm: 14px
  • --em-core-font-size--xl: 20px
  • --em-core-font-size--xs: 12px
  • --em-core-font-size--xxl: 32px
  • --em-core-font-weight--bold: 700px
  • --em-core-font-weight--medium: 500px
  • --em-core-font-weight--regular: 400px
  • --em-core-line-height--l: 19px
  • --em-core-line-height--md: 16px
  • --em-core-line-height--sm: 14px
  • --em-core-line-height--xl: 38px

Shadows

  • --em-core-shadow-blur: 40px
  • --em-core-shadow-color: rgb(33 33 41 / 25%)
  • --em-core-shadow-position-x: 0px
  • --em-core-shadow-position-y: 1px
  • --em-core-shadow-spread: 0px

Size scales

  • --em-core-size--0000: 0px
  • --em-core-size--0050: 2px
  • --em-core-size--0100: 4px
  • --em-core-size--0150: 6px
  • --em-core-size--0200: 8px
  • --em-core-size--0300: 12px
  • --em-core-size--0400: 16px
  • --em-core-size--0500: 20px
  • --em-core-size--0600: 24px
  • --em-core-size--0700: 28px
  • --em-core-size--0800: 32px
  • --em-core-size--0900: 36px
  • --em-core-size--1000: 40px
  • --em-core-size--1200: 48px
  • --em-core-size--1600: 64px
  • --em-core-size--2000: 80px

Spacing scales

  • --em-core-spacing--0000: 0px
  • --em-core-spacing--0050: 2px
  • --em-core-spacing--0100: 4px
  • --em-core-spacing--0150: 6px
  • --em-core-spacing--0200: 8px
  • --em-core-spacing--0300: 12px
  • --em-core-spacing--0400: 16px
  • --em-core-spacing--0500: 20px
  • --em-core-spacing--0600: 24px
  • --em-core-spacing--0700: 28px
  • --em-core-spacing--0800: 32px
  • --em-core-spacing--0900: 36px
  • --em-core-spacing--1000: 40px
  • --em-core-spacing--1200: 48px
  • --em-core-spacing--1600: 64px
  • --em-core-spacing--2000: 80px
Quick-start guideSemantic tokens