Components

Generated from studio/lib/catalog.ts by pnpm build:docs. Do not edit by hand. See these rendered live (all variants, per brand) in Portal Design Studio → Lookbook.

The system is Radix Themes-first: each component below is a Radix Themes component themed by our token layer (Tier 1). Bespoke (Tier 2/3) components are added here as they are built.

Index

Component	Category	Tier	Radix	Key props
Button	Actions	1	Button	variant, size
Badge	Data display	1	Badge	variant, color
Card	Surfaces	1	Card	size, variant
Text field	Forms	1	TextField	size, variant
Checkbox	Forms	1	Checkbox	size, variant
Switch	Forms	1	Switch	size, variant
Select	Forms	1	Select	size, variant
Callout	Feedback	1	Callout	variant, color
Text	Typography	1	Text	tone, contrast

Colour breakdown

Which token paints each part of each component.

Button

Part	Token
Solid background	--accent-9
Solid text	--accent-contrast
Soft background	--accent-a3
Soft text	--accent-a11

Badge

Part	Token
Soft background	--accent-a3
Soft text	--accent-a11

Card

Part	Token
Background	--color-panel-solid
Border	--gray-6
Text	--gray-12

Text field

Part	Token
Background	--color-surface
Border	--gray-7
Text	--gray-12

Checkbox

Part	Token
Checked background	--accent-9
Indicator	--accent-contrast

Switch

Part	Token
Track (on)	--accent-indicator
Thumb	--gray-1

Select

Part	Token
Trigger background	--color-surface
Trigger border	--gray-7

Callout

Part	Token
Background	--accent-a3
Text	--accent-11

Text

Part	Token
Dark · high	--black-a12
Dark · low	--black-a11
Light · high	--white-a12
Light · low	--white-a11