Total Wireless
Style Guide
Back to brand assets
Foundations

Semantic tokens

Semantic tokens make shadcn components follow the brand palette without hard-coding every primitive.

Token map

--primary
#000330
Primary actions, text, and navigation
--accent
#00C8B7
Savings and positive value surfaces
--destructive
#EE0000
CTA red and destructive/error moments
--background
#F2F2F2
Page background
--card
#FFFFFF
Component surfaces
--border
#DDDAD4
Borders and separators

Radius and shape

--tw-radius-control
8px
Badges, compact controls, small tiles
--tw-radius-form
10px
Text input fields observed in plan flows
--tw-radius-tile
12px
Plan cards and repeated content tiles
--tw-radius-hero
20px
Large hero wrappers on Total Wireless pages
--tw-radius-tile-hero
24px
Large promotional tiles
--tw-radius-modal
32px
Dialog and bottom-sheet surfaces
--tw-radius-pill
9999px
CTA buttons, icon buttons, line steppers

Interaction tokens

--tw-button-height
48px
Primary CTA height from live plan CTA sizing
--tw-button-hover-muted
rgba(170, 168, 163, 0.12)
Ghost/icon button hover surface

CSS source

:root {
  --primary: #000330;
  --accent: #00C8B7;
  --destructive: #EE0000;
  --background: #F2F2F2;
  --tw-radius-tile: 12px;
  --tw-radius-pill: 9999px;
}