Design tokens

Design tokens are tools used to convey key design and UX principles across multiple channels and technologies. Tokens are used to unify style elements across web, desktop, mobile, tools and applications. They are critical to use with Pega applications, as Pega applications blend native and web design elements.

There are 4 types of Design tokens.

Design token typeDescriptionExamples
ConstantRaw design elements.The exact shade of red to use, spacing scales (e.g. 8px multiples), text sizes, speed of animation
MeaningfulTie functional purpose to Constant tokens.A combined token, e.g. Heading 2 that uses multiple Constant tokens (e.g. font-size.l and font-weight.semi-bold
Component-sharedRepeated component parts that rely on Component tokens. These often use both Constant and Meaningful tokens.Input border-radius or button border-radius both inheriting from base border-radius
Component-specificMost components have a set of specific tokens that define every element of styling from spacing to layout. They may use a combination of Constant, Meaningful, and Component-shared tokens.Checkbox border-radius that may be mapped to an existing Component token or use a fixed value

Some design tokens are editable when customizing your applications in order to allow for custom branding. Examples may include Meaningful tokens such as base.palette.brand-primary or changing basic tokens, such as the default color family. We refer to those tokens as public tokens.

The Open Sans font is the foundation type family in all Pega applications. With a wide range of weights, and a large diverse character set, the uniform simplicity and legibility over other font families makes Open Sans a great complement to both local and international applications. The font family may be configured via the Theme by modifying the base.font-family token.

The Cosmos design system supports a range of font sizes with the base font size being represented by the sm token at a value of 14px. The available tokens are displayed below, and they can be modified through the Theme.

Meaningful text

Aa
Default
font-size
1rem
font-weight
400
Aa
Heading 1
font-size
1.953125rem
font-weight
600
Aa
Heading 2
font-size
1.5625rem
font-weight
600
Aa
Heading 3
font-size
1.25rem
font-weight
600
Aa
Heading 4
font-size
1rem
font-weight
600
Aa
Label
font-size
0.8rem
font-weight
400
Aa
Helper (Tooltip)
font-size
0.64rem
font-weight
400

Text primitives

Sizes

Aa
xxscalc(0.875rem + (-2 * 0.0625rem))
Aa
xscalc(0.875rem + (-1 * 0.0625rem))
Aa
scalc(0.875rem + (0 * 0.0625rem))
Aa
mcalc(0.875rem + (1 * 0.0625rem))
Aa
lcalc(0.875rem + (2 * 0.0625rem))
Aa
xlcalc(0.875rem + (3 * 0.0625rem))
Aa
xxlcalc(0.875rem + (4 * 0.0625rem))

Weights

Aa
font-weight.bold700
Aa
font-weight.semi-bold600
Aa
font-weight.normal400

Meaningful color

Color in Cosmos is tied to meaning. Below are the colors used to symbolize that meaning or status.

palette.app-background#e9eef3
palette.primary-background#ffffff
palette.secondary-background#f2f2f2
palette.foreground-color#000000
palette.brand-primary#0076d1
palette.urgent#d91c29
palette.warn#fd6000
palette.success#20aa50
palette.pending#ac75f0
palette.info#cfcfcf
palette.interactive#0076d1
palette.border-line#cfcfcf
palette.skeleton#f2f2f2
palette.light#ffffff
palette.dark#000000
palette.background-color#ffffff
palette.scrollbar-trackrgba(0, 0, 0, 0.1)
palette.scrollbar-thumbrgba(0, 0, 0, 0.6)
palette.scrollbar-thumb-hoverrgba(0, 0, 0, 0.7)

Primitive color

Below is a listing of all base colors currently within the Cosmos library.

Neutrals

colors.white#ffffff
colors.black#000000
colors.gray.extra-light#fafafa
colors.gray.light#f2f2f2
colors.gray.medium#cfcfcf
colors.gray.dark#939393
colors.gray.extra-dark#3f3f3f
colors.slate.extra-light#e9eef3
colors.slate.light#cbd4dc
colors.slate.medium#8397ab
colors.slate.dark#4c5a67
colors.slate.extra-dark#252c32

Reds

colors.red.extra-light#ffdbde
colors.red.light#f66f78
colors.red.medium#d91c29
colors.red.dark#a6020d
colors.red.extra-dark#570006

Oranges

colors.orange.extra-light#feede2
colors.orange.light#ffaa75
colors.orange.medium#fd6000
colors.orange.dark#b54703
colors.orange.extra-dark#5a2401

Greens

colors.green.extra-light#d4f7d5
colors.green.light#7ee791
colors.green.medium#20aa50
colors.green.dark#156f35
colors.green.extra-dark#0b381a

Blues

colors.blue.extra-light#e2f2ff
colors.blue.light#71c1ff
colors.blue.medium#0076d1
colors.blue.dark#005699
colors.blue.extra-dark#002b4d

Purples

colors.purple.extra-light#f1e9fb
colors.purple.light#d6bcf5
colors.purple.medium#ac75f0
colors.purple.dark#681fc3
colors.purple.extra-dark#341061

The Cosmos design system also supports a wide variety of primitive style element groups that control things such as transparency levels, depth of shadow, spacing, shape, and much more.

Spacing

Used for padding, margins, gutters, gaps, etc.

0.25 * spacing0.125rem
0.5 * spacing0.25rem
1 * spacing0.5rem
2 * spacing1rem
4 * spacing2rem

Shape

0.25 * border-radius0.125rem
0.5 * border-radius0.25rem
1 * border-radius0.5rem
2 * border-radius1rem
4 * border-radius2rem

Transparency

transparency.transparent-10.8
transparency.transparent-20.7
transparency.transparent-30.6
transparency.transparent-40.4
transparency.transparent-50.3

Shadow

shadow.high0 0.125rem 1.5rem rgba(0,0,0,.3)
shadow.low0 0.125rem 0.5rem rgba(0,0,0,.2)
shadow.focus0 0 0.25rem rgba(0, 120, 231, 0.95)
shadow.focus-inverted0 0 0.25rem rgba(255, 255, 255, 0.95)

Finally, the Cosmos design system supports baseline motion primitives.

Speed

0.25 * animation.speed
0.5 * animation.speed
1 * animation.speed
2 * animation.speed

Timing

animation.timing.ease
animation.timing.ease-out
animation.timing.ease-in