VATSSA · Web Theme & Code

Web Theme & Code

VATSSA Brand Guidelines

Website Theme · .env▾

Brand-aligned values that follow the active theme (surfaces flip light/dark, accents stay). Only one accent slot? Use Primary → Teal #0197B0.

VITE_THEME_PRIMARY

Primary accent · Teal

#0197B0was #1a475f

VITE_THEME_SECONDARY

Secondary accent · Green

#7BD758was #484b4c

VITE_THEME_TERTIARY

Surface · follows theme

#07262Cwas #011328

VITE_THEME_INFO

Info · Teal

#0197B0was #17a2b8

VITE_THEME_SUCCESS

Success · Green

#7BD758was #41826e

VITE_THEME_WARNING

Warning · functional

#ff9800keep

VITE_THEME_DANGER

Danger · functional

#b63f3fkeep

Code Reference · :root▾

:root {
  --primary-colour: #07262C;
  --primary-light-colour: #0197B0;
  --scrollbar-track-color: #07262C;
  --scrollbar-thumb-color: #0197B0;
  --scrollbar-size: 5px;
  /* Cloudflare Zero Trust access page bg */
  --access-page-background: #07262C;
}

Cloudflare Zero Trust access page background → #07262C (the standardized --primary-colour / brand dark). Accent = #0197B0.

Accessibility · Contrast▾

Approved pairings (WCAG). Teal is a mid-tone — use it for large text, icons & fills, not small body text. Never put white text on Green.

Aa Brand

Dark + Light13.5:1 ✓ AAA

Aa Brand

Light + Dark13.5:1 ✓ AAA

Aa Brand

Green + Dark8.3:1 ✓ AAA

Aa Brand

Green on Dark8.3:1 ✓ AAA

Aa Brand

Teal + Light3.5:1 ⚠ Large

Aa Brand

White on Green1.8:1 ✗ Avoid

VATSSA Brand Guidelines · Made by George (1768227)