Semantic Tokens
Bring the Park UI semantic to your entire application
Colors
Park UI’s theme primarily revolves around one gray and one accent color. These foundational colors are later utilized to
define the bg (background), fg (foreground), and accent tokens.
Gray
1
2
3
4
5
6
7
8
9
10
11
12
Accent
1
2
3
4
5
6
7
8
9
10
11
12
Background
Background colors are designated for the backdrop elements of a user interface. They can be used for components like containers, sections, or the entire screen’s layout.
canvas
default
subtle
muted
emphasized
disabled
| Name | CSS Variable | Token Name |
|---|---|---|
| Canvas | var(--bg-canvas) | bg-canvas |
| Default | var(--bg-default) | bg-default |
| Subtle | var(--bg-subtle) | bg-subtle |
| Muted | var(--bg-muted) | bg-muted |
| Emphasized | var(--bg-emphasized) | bg-emphasized |
| Disabled | var(--bg-disabled) | bg-disabled |
To use the the bg-canvas token in your application as background color, you have to prefix it with bg- and add it as a
class like:
<div className="bg-bg-canvas">Hello from Park</div>Foreground
Foreground colors are meant for elements that stand out against the background, such as text, icons, buttons, and other interactive components.
default
muted
subtle
disabled
| Name | CSS Variable | Token Name |
|---|---|---|
| Default | var(--fg-default) | fg-default |
| Muted | var(--fg-muted) | fg-muted |
| Subtle | var(--fg-subtle) | fg-subtle |
| Disabled | var(--fg-disabled) | fg-disabled |
To use the muted color token in your application as text color, you have to prefix it with text- and add it as a class
like:
<p className="text-fg-muted">Hello from Park</p>Border
Border tokens contribute depth to UI elements. They establish hierarchy and delineate between components.
default
muted
subtle
disabled
outline
| TypeName | CSS Variable | Token Name |
|---|---|---|
| Default | var(--border-default) | border-default |
| Muted | var(--border-muted) | border-muted |
| Subtle | var(--border-subtle) | border-subtle |
| Disabled | var(--border-disabled) | border-disabled |
| Outline | var(--border-outline) | border-outline |
| Accent | var(--border-accent) | border-accent |
To use the muted border color token in your application, you have to prefix it with border- and add it as a class
like:
<div className="border border-border-muted">Hello from Park</div>Radii
| Name | CSS Variable | Token Name |
|---|---|---|
| Level 1 | var(--radii-l1) | rounded-l1 |
| Level 2 | var(--radii-l2) | rounded-l2 |
| Level 3 | var(--radii-l3) | rounded-l3 |
To use the border radius token in your application, you have to prefix it with rounded- and add it as a class like:
<div className="border border-border-accent rounded-l1">Hello from Park</div>