TokensComponents

Component Tokens

Ready-to-use design tokens for UI components. These tokens reference semantic tokens which in turn reference primitives, creating a flexible and maintainable styling system.

3
Components
6
Variants
30
Total Tokens
4
Layer

Token Reference Chain

Component tokens sit at layer 4 of the token architecture. Values flow from primitives through semantic tokens to components, ensuring design consistency and easy theming.

#34d399
Emerald.400
Color.Brand.Default
Button.Background

Button

Interactive button component tokens for primary, secondary, and outline variants

Preview

Primary call-to-action button with brand colors

Backgroundcolor
#34d399
Emerald.400
Color.Brand.Default
Button.Background.Default
Background Hovercolor
#10b981
Emerald.500
Color.Brand.Hover
Button.Background.Hover
Textcolor
#ffffff
Base.White
Color.Text.OnBrand
Button.Text
Border Radiusnumber
0.5rem
Radius.lg
Radius.Button
Button.Radius
Padding Xnumber
1.25rem
Spacing.5
Button.PaddingX
Padding Ynumber
0.625rem
Spacing.2-5
Button.PaddingY

Button height tokens for different sizes

Height (Small)number
2.5rem
Size.10
Button.Height.sm
Height (Medium)number
3rem
Size.12
Button.Height.md
Height (Large)number
3.5rem
Size.14
Button.Height.lg

Secondary button variant for less prominent actions

Backgroundcolor
#4c1d95
Violet.900
Color.Secondary.Default
Button.Secondary.Background
Background Hovercolor
#2e1065
Violet.950
Color.Secondary.Hover
Button.Secondary.BackgroundHover
Textcolor
#ffffff
Base.White
Color.Text.OnSecondary
Button.Secondary.Text

Outline button variant for tertiary actions

Backgroundcolor
transparent
Base.Transparent
Button.Outline.Background
Bordercolor
#34d399
Emerald.400
Color.Brand.Default
Button.Outline.Border
Textcolor
#34d399
Emerald.400
Color.Brand.Default
Button.Outline.Text
Hover Backgroundcolor
#d1fae5
Emerald.100
Color.Brand.Light
Button.Outline.HoverBackground

Card

Container component tokens for elevated content sections

Preview

Card Title

This is a preview of the card component with its applied tokens.

Standard card component styling

Backgroundcolor
#ffffff
Base.White
Color.Card.Background
Card.Background
Bordercolor
#e5e7eb
Gray.200
Color.Card.Border
Card.Border
Textcolor
#111827
Gray.900
Color.Text.Foreground
Card.Text
Border Radiusnumber
0.75rem
Radius.xl
Radius.Card
Card.Radius
Paddingnumber
1.5rem
Spacing.6
Card.Padding

Input

Form input component tokens for text fields and user input

Preview

Standard input field styling

Backgroundcolor
#ffffff
Base.White
Color.Surface
Input.Background
Border Defaultcolor
#e5e7eb
Gray.200
Color.Border.Default
Input.Border.Default
Border Focuscolor
#34d399
Emerald.400
Color.Brand.Default
Input.Border.Focus
Border Radiusnumber
0.375rem
Radius.md
Radius.Input
Input.Radius
Textcolor
#111827
Gray.900
Color.Text.Foreground
Input.Text
Placeholdercolor
#6b7280
Gray.500
Color.Text.Muted
Input.Placeholder
Padding Xnumber
0.75rem
Spacing.3
Input.PaddingX
Padding Ynumber
0.5rem
Spacing.2
Input.PaddingY
Heightnumber
2.5rem
Size.10
Input.Height

Why Component Tokens?

Component tokens provide a concrete API for styling UI components. Instead of applying semantic tokens directly, components use their own tokens like. This allows for component-specific customization while maintaining the overall design system.

  • Override button colors without affecting cards or inputs
  • Maintain consistent token naming across components
  • Enable component-level theming and customization
  • Support variant-specific styling (primary, secondary, outline)