- font-size
- 1rem
- font-weight
- 400
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 type | Description | Examples |
---|---|---|
Primitive | Raw design elements. | The exact shade of red to use, spacing scales (e.g. 8px multiples), text sizes, speed of animation |
Meaningful | Tie functional purpose to Primitive tokens. | A combined token, e.g. Heading 2 that uses multiple Primitive tokens (e.g. font-size.l and font-weight.semi-bold |
Component-shared | Repeated component parts that rely on Component tokens. These often use both Primitive and Meaningful tokens. | Input border-radius or button border-radius both inheriting from base border-radius |
Component-specific | Most components have a set of specific tokens that define every element of styling from spacing to layout. They may use a combination of Primitive, 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.
Typography
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
- font-size
- 1.953125rem
- font-weight
- 600
- font-size
- 1.5625rem
- font-weight
- 600
- font-size
- 1.25rem
- font-weight
- 600
- font-size
- 1rem
- font-weight
- 600
- font-size
- 0.8rem
- font-weight
- 400
- font-size
- 0.64rem
- font-weight
- 400
Text primitives
Sizes
Weights
Colors
Meaningful color
Color in Cosmos is tied to meaning. Below are the colors used to symbolize that meaning or status.
Primitive color
Below is a listing of all base colors currently within the Cosmos library.
Neutrals
Reds
Oranges
Greens
Blues
Purples
Style elements
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.
Shape
Transparency
Shadow
Motion
Finally, the Cosmos design system supports baseline motion primitives.