Ready

_Theme

The Phase2_ theme as CSS variables. Copy them into your globals.css and every shadcn component is branded.

_FullTheme

:root {
  --abyss: #00233A;
  --indigo: #1A3B6F;
  --cyan: #16A3D6;
  --ice: #9AE4FF;
  --coral: #F5543A;
  --pine: #1F4E52;

  --radius: 0.625rem;
  --background: #FAFBFC;
  --foreground: #00233A;
  --card: #FFFFFF;
  --card-foreground: #00233A;
  --popover: #FFFFFF;
  --popover-foreground: #00233A;
  --primary: #00233A;
  --primary-foreground: #FFFFFF;
  --secondary: #F0F4F8;
  --secondary-foreground: #00233A;
  --muted: #F0F4F8;
  --muted-foreground: #5A6B7B;
  --accent: #16A3D6;
  --accent-foreground: #FFFFFF;
  --destructive: #F5543A;
  --border: #E2E8F0;
  --input: #E2E8F0;
  --ring: #16A3D6;
  --chart-1: #16A3D6;
  --chart-2: #1A3B6F;
  --chart-3: #1F4E52;
  --chart-4: #F5543A;
  --chart-5: #9AE4FF;
}

.dark {
  --background: #001220;
  --foreground: #E8F4FA;
  --card: #00233A;
  --card-foreground: #E8F4FA;
  --popover: #00233A;
  --popover-foreground: #E8F4FA;
  --primary: #9AE4FF;
  --primary-foreground: #00233A;
  --secondary: #0A2E47;
  --secondary-foreground: #E8F4FA;
  --muted: #0A2E47;
  --muted-foreground: #7BA3BE;
  --accent: #16A3D6;
  --accent-foreground: #FFFFFF;
  --destructive: #F5543A;
  --border: #143350;
  --input: #143350;
  --ring: #16A3D6;
  --chart-1: #16A3D6;
  --chart-2: #9AE4FF;
  --chart-3: #1F4E52;
  --chart-4: #F5543A;
  --chart-5: #1A3B6F;
}

_BrandColors

Abyss

--abyss: #00233A

Indigo

--indigo: #1A3B6F

Cyan

--cyan: #16A3D6

Ice

--ice: #9AE4FF

Coral

--coral: #F5543A

Pine

--pine: #1F4E52

_SemanticTokens

These map brand colors to component roles. Light and dark values shown side by side.

TokenLightDark

--background

#FAFBFC

#001220

--foreground

#00233A

#E8F4FA

--card

#FFFFFF

#00233A

--card-foreground

#00233A

#E8F4FA

--primary

#00233A

#9AE4FF

--primary-foreground

#FFFFFF

#00233A

--secondary

#F0F4F8

#0A2E47

--secondary-foreground

#00233A

#E8F4FA

--muted

#F0F4F8

#0A2E47

--muted-foreground

#5A6B7B

#7BA3BE

--accent

#16A3D6

--accent-foreground

#FFFFFF

--destructive

#F5543A

--border

#E2E8F0

#143350

--input

#E2E8F0

#143350

--ring

#16A3D6

_RadiusScale

Base radius: 0.625rem (10px). All other sizes derived from it.

6px

8px

10px

14px

2xl

18px

_Typography

Manrope

--font-heading / font-heading

Headings, display text, labels. Geometric, confident. Weights 400–800.

Sora

--font-sans / font-sans

Body copy, UI text, descriptions. Legible, warm. Weights 300–700.