Design Tokens

All design decisions in prokodo UI are expressed as CSS custom properties under the --pk-* namespace. The system has three layers:

1. Primitive palette (--pk-palette-*) — Raw hex values; do not reference these directly in consumer code
2. Semantic tokens (--pk-color-*, --pk-space-*, --pk-radius-*, …) — Role-based aliases
3. Component tokens (--pk-input-*, --pk-select-*, …) — Per-component override points

Import global token definitions once in your app root:

import "@prokodo/ui/theme-tokens.css"

tip

theme-tokens.css contains only shared --pk-* custom properties (palette + semantic layers) — no component styles. This keeps your critical CSS path small. Component styles are loaded per component via their own CSS files (e.g. @prokodo/ui/button.css), and those files provide each component's --pk-<component>-* tokens. See Installation for details.

---

Colour

Brand

Token	Default	Usage
--pk-color-primary	#6366f1	Primary actions, focus rings
--pk-color-primary-100	#e0e7ff	Light primary tint
--pk-color-primary-500	#6366f1	Base primary
--pk-color-primary-900	#312e81	Dark primary shade
--pk-color-secondary	#ec4899	Secondary actions

Semantic

Token	Default	Usage
--pk-color-success	#22c55e	Success states
--pk-color-warning	#f59e0b	Warning states
--pk-color-error	#ef4444	Error states
--pk-color-info	#3b82f6	Informational states

Surface

Token	Default	Usage
--pk-color-background	#ffffff	Page background
--pk-color-surface	#f9fafb	Card / panel background
--pk-color-border	#e5e7eb	Dividers, input borders
--pk-color-text	#111827	Body text
--pk-color-text-muted	#4d4d4d	Secondary text

---

Typography

Token	Default	Usage
--pk-font-family-base	system-ui, sans-serif	Body text
--pk-font-family-heading	inherit	Heading elements
--pk-font-family-mono	ui-monospace, monospace	Code blocks
--pk-font-size-base	1rem	Body font size
--pk-font-size-sm	0.875rem	Small text
--pk-font-size-lg	1.125rem	Large text
--pk-font-weight-normal	400	Regular weight
--pk-font-weight-medium	500	Medium weight
--pk-font-weight-bold	700	Bold weight
--pk-line-height-base	1.5	Body line height
--pk-line-height-tight	1.25	Heading line height

---

Spacing

Prokodo UI uses a 4 px base grid:

Token	Value
--pk-spacing-1	4px
--pk-spacing-2	8px
--pk-spacing-3	12px
--pk-spacing-4	16px
--pk-spacing-6	24px
--pk-spacing-8	32px
--pk-spacing-12	48px
--pk-spacing-16	64px

---

Border radius

Token	Default	Usage
--pk-radius-sm	4px	Chips, tags
--pk-radius-md	8px	Inputs, cards
--pk-radius-lg	16px	Dialogs, popovers
--pk-radius-full	9999px	Pills, toggle switches

---

Shadows

Token	Default
--pk-shadow-sm	0 1px 2px rgba(0,0,0,.06)
--pk-shadow-md	0 4px 12px rgba(0,0,0,.10)
--pk-shadow-lg	0 12px 40px rgba(0,0,0,.15)

---

Motion

Token	Default	Usage
--pk-duration-fast	150ms	Hover, focus transitions
--pk-duration-base	250ms	Component state changes
--pk-duration-slow	400ms	Entrance animations
--pk-easing-base	cubic-bezier(.4,0,.2,1)	Standard easing
--pk-easing-enter	cubic-bezier(0,0,.2,1)	Decelerate on enter
--pk-easing-exit	cubic-bezier(.4,0,1,1)	Accelerate on exit

---

Z-Index

Token	Default	Usage
--pk-z-header	2	Sticky page header
--pk-z-nav	999	Main navigation overlay
--pk-z-dropdown	998	Dropdowns / menus
--pk-z-modal-backdrop	1300	Modal backdrop layer
--pk-z-modal	1301	Modal dialog
--pk-z-popover	1400	Popovers above modals (DatePicker, Select, Tooltip)

---

Overriding tokens

app/globals.css

@import "@prokodo/ui/theme-tokens.css";

:root {
  --pk-color-primary: #0ea5e9;
  --pk-radius-md: 4px; /* sharper corners */
  --pk-font-family-base: "DM Sans", sans-serif;
}

See Theming for patterns including dark mode and scoped overrides.