Theme
Semantic tokens

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

NameCSS VariableToken Name
Canvasvar(--colors-bg-canvas)bg.canvas
Defaultvar(--colors-bg-default)bg.default
Subtlevar(--colors-bg-subtle)bg.subtle
Mutedvar(--colors-bg-muted)bg.muted
Emphasizedvar(--colors-bg-emphasized)bg.emphasized
Disabledvar(--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.

default

muted

subtle

disabled

NameCSS VariableToken Name
Defaultvar(--colors-fg-default)fg.default
Mutedvar(--colors-fg-muted)fg.muted
Subtlevar(--colors-fg-subtle)fg.subtle
Disabledvar(--colors-fg-disabled)fg.disabled

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.

default

emphasized

fg

text

NameCSS VariableToken Name
Defaultvar(--colors-accent-default)accent.default
Emphasizedvar(--colors-accent-emphasized)accent.emphasized
Foregroundvar(--colors-accent-fg)accent.fg
Textvar(--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.

default

muted

subtle

disabled

outline

TypeNameCSS VariableToken Name
Defaultvar(--colors-border-default)border.default
Mutedvar(--colors-border-muted)border.muted
Subtlevar(--colors-border-subtle)border.subtle
Disabledvar(--colors-border-disabled)border.disabled
Outlinevar(--colors-border-outline)border.outline

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>

Previous

Colors

On this page