F1Shipped

Colors

Brand ramp, surface palette, status tones, and how to use each. All colors are CSS custom properties mapped to Tailwind utilities via tokens.css.

Brand Ramp

Amber is the sole primary brand color. The ramp covers stops 50–900.

amber-50

#fffbeb

amber-100

#fef3c7

amber-200

#fde68a

amber-300

#fcd34d

amber-400

#fbbf24

amber-500

#f59e0b

--primary

amber-600

#d97706

amber-700

#b45309

amber-800

#92400e

amber-900

#78350f

Semantic Tokens

Use semantic tokens in all component code — never raw hex or amber stop utilities.

Surface

Background

--background

Base page canvas

Card

--card

Card surfaces

Muted

--muted

Subdued backgrounds, secondary areas

Secondary

--secondary

Secondary action surfaces

Popover

--popover

Floating surfaces (tooltips, dropdowns)

Brand

Primary

--primary

Brand CTA, active states, highlights

Primary Foreground

--primary-foreground

Text on primary background

Accent

--accent

Accent tints (same as primary)

Text

Foreground

--foreground

Primary body text

Muted Foreground

--muted-foreground

Supporting / secondary copy

Card Foreground

--card-foreground

Text on card surfaces

Border & Control

Border

--border

All dividers and control outlines

Input

--input

Form field borders

Ring

--ring

Focus rings (amber-500)

Status

Destructive

--destructive

Danger / error states

Info Light

--state-information-light

Informational (blue)

Warning

--state-warning-light

Cautionary (amber variant)

Dark Mode Model

Charply does not use Tailwind's dark: prefix. A parent class switches the theme:

<html class="charply-theme-dark">
  <!-- all children inherit dark tokens automatically -->
</html>

/* Extension content scripts */
<div class="webreply-theme-dark">
  <!-- scoped, never bleeds into host page -->
</div>

Toggle the theme using the button in the header to preview this page in dark mode.

Usage Rules

✓Use semantic tokens: bg-primary, text-muted-foreground
✓Reference --charply-* hex tokens in extension CSS
✓Keep amber as the single primary brand color

Don't

✗Hardcode #f59e0b — use bg-primary
✗Use bg-amber-500 in component code
✗Define :root vars in content scripts