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.
| Name | CSS Variable | Token Name |
|---|---|---|
| Canvas | var(--colors-bg-canvas) | bg.canvas |
| Default | var(--colors-bg-default) | bg.default |
| Subtle | var(--colors-bg-subtle) | bg.subtle |
| Muted | var(--colors-bg-muted) | bg.muted |
| Emphasized | var(--colors-bg-emphasized) | bg.emphasized |
| Disabled | var(--colors-bg-disabled) | bg.disabled |
In the example below, the bg.muted token is used to create a muted background color for the Box component.
Hello from Park UI
<Box bg="bg.muted" p="2">
<Text size="sm">Hello from Park UI</Text>
</Box>Foreground
Foreground colors are meant for elements that stand out against the background, such as text, icons, buttons, and other interactive components.
| Name | CSS Variable | Token Name |
|---|---|---|
| Default | var(--colors-fg-default) | fg.default |
| Muted | var(--colors-fg-muted) | fg.muted |
| Subtle | var(--colors-fg-subtle) | fg.subtle |
| Disabled | var(--colors-fg-disabled) | fg.disabled |
| Error | var(--colors-fg-error) | fg.error |
In the example below, the fg.muted token is used to create a muted text color for the Text component.
Hello from Park UI
<Text color="fg.muted" size="sm">
Hello from Park UI
</Text>Accent
Accent colors are pivotal in directing the user's attention to specific actions, content, or interactive elements.
| Name | CSS Variable | Token Name |
|---|---|---|
| Default | var(--colors-accent-default) | accent.default |
| Emphasized | var(--colors-accent-emphasized) | accent.emphasized |
| Foreground | var(--colors-accent-fg) | accent.fg |
| Text | var(--colors-accent-text) | accent.text |
Hello from Park UI
<Box bg="accent.default" p="2">
<Text color="accent.fg" size="sm">
Hello from Park UI
</Text>
</Box>Border
Border tokens contribute depth to UI elements. They establish hierarchy and delineate between components.
| TypeName | CSS Variable | Token Name |
|---|---|---|
| Default | var(--colors-border-default) | border.default |
| Muted | var(--colors-border-muted) | border.muted |
| Subtle | var(--colors-border-subtle) | border.subtle |
| Disabled | var(--colors-border-disabled) | border.disabled |
| Outline | var(--colors-border-outline) | border.outline |
| Error | var(--colors-border-error) | border.error |
In the example below, the border.accent token is used to create an accent border color for the Box component.
Hello from Park UI
<Box borderColor="border.accent" borderWidth="1px" p="2">
<Text size="sm">Hello from Park UI</Text>
</Box>Shadows
Shadows provide depth to UI components, emphasizing a layered appearance and hierarchical structure.
xs
sm
md
lg
xl
2xl
Radii
l1, l2, and l3 are tokens to create rounded corners. l1 is for basic rounding, l2 is for wrapping l1 items,
and l3 wraps l2 items
none
xs
sm
md
lg
xl
2xl
In the example below, the l3 token is used to create a rounded corner for the Box component.
Hello from Park UI
<Box borderRadius="l2" borderWidth="1px" p="2">
<Text size="sm">Hello from Park UI</Text>
</Box>