Theming

Park UI extends the default Panda Preset with a minimal, systematic design approach. It introduces key adjustments to component sizing and variants to ensure alignment and visual consistency across your UI.

Components

Park UI components are designed with consistent sizing and standardized variants to ensure visual harmony across your interface.

Sizing

Park UI organizes component sizing into two categories:

• Primary components — core interactive elements that drive user actions (e.g., Buttons, Inputs, Selects).
• Secondary components — supporting elements that complement primary interactions (e.g., Badges, Checkboxes, Switches).

This categorization establishes a clear hierarchy and guarantees alignment. Components within the same category share identical heights for a given size token. For example, both a md Button and a md Input are exactly 40px tall, ensuring perfect alignment when placed together.

Variants

Variants are standardized across components for a unified look and feel. Park UI defines five shared variants:

• solid
• subtle
• surface
• outline
• plain

This consistency allows you to combine components without worrying about mismatched styles. Using the same variant across elements guarantees visual harmony.

Solid

High-contrast background with inverted foreground. Use for primary CTAs, submit buttons, and main actions.

Subtle

Tinted background with matching foreground. Use for badges, tags, selected states, and secondary highlights.

Surface

Background with visible border and hover states. Use for cards, menu items, selectable lists, and elevated containers.

Outline

Border-only with transparent background. Use for secondary actions, cancel buttons, filters, and tertiary controls.

Plain

Minimal style with background on interaction. Use for text buttons, links, tabs, and ghost actions.

Colors

The biggest change Park UI introduces is its color system. Instead of the 50–950 scale used in Panda CSS, Park UI is built on Radix Colors. Each color comes with 12 shades per mode (light and dark), for a total of 24 shades. This provides finer control and greater flexibility than the traditional 11-shade scale.

Gray

Accent

Pairings

Park UI is built around the concept of one accent color and one gray color. When initializing your project, you'll choose which combination works best for you.

Neutral Pairings

If you want a neutral vibe, or you want to keep things simple, neutral will work well with any hue or palette.

Natural pairing

Alternatively, choose the gray scale which is saturated with the hue closest to your accent hue. The difference is subtle, but this will create a more colorful and harmonious vibe.

Tokens

Border Radius

Radii tokens define consistent corner rounding across components. This setup makes it easy to nest border radii as shown below.

• l1 – smallest radius, used inside other elements
• l2 – medium radius, used when wrapping l1
• l3 – largest radius, used when wrapping l2

Shadows

Shadows provide consistent elevation levels, from xs to 2xl. Unlike the default Panda shadows, they adapt seamlessly to both light and dark mode.

z-Index