Foundations

Color palette

The palette is optimized for plan comparison: navy carries core content, red signals purchase and active navigation, and teal marks savings or positive value.

Core tokens

Click-to-copy behavior can be added later; for now each swatch exposes the token, hex, and intended usage.

Signal Navy

#000330

tw-navy-900

Primary text, header surface, icons

Brand Blue

#26358B

tw-navy-500

Support accents and data visuals

Total Teal

#00C8B7

tw-teal-400

Promotions, savings, positive emphasis

Mint Surface

#E6FCF4

tw-teal-50

All-plans-include and promo surfaces

Action Red

#EE0000

tw-red-600

Purchase CTAs and active tab indicator

Action Red Active

#BD0000

tw-red-700

Pressed and active CTA state

Error Red

#880D1E

tw-red-900

Validation and unavailable states

Page Neutral

#F2F2F2

tw-gray-100

Backgrounds and separators

Secondary Text

#666666

tw-gray-500

Muted copy and metadata

Tailwind usage

<Button className="bg-tw-red-600 text-white">
  Add to Cart
</Button>

<div className="bg-tw-teal-50 text-tw-navy-900">
  All plans include
</div>