TrueCaaS
Get Started
BRAND

TrueCaaS brand guidelines

Quick rules for consistent marketing pages: logo usage, colors, typography, and components.

Logo

Primary mark
Use the SVG for crisp scaling on all screens.
TrueCaaS logo
Usage rules
  • Prefer the SVG: public/truecaas-logo.png
  • Keep clear space around the logo (at least the height of the “T” stroke).
  • Do not stretch or skew; scale proportionally.
  • On dark backgrounds, keep the page in dark mode or place the logo on a light surface.

Assets

Logo path: /public/truecaas-logo.png
Primary color token: --primary
Accent color token: --accent

Primary (Logo Blue)

#0071BC
Used for primary buttons + emphasis
Defined in src/app/globals.css as --primary.

Accent (Logo Green)

#297E40
Used for hover + highlights
Defined in src/app/globals.css as --accent.

Typography & UI

  • Headlines: 3xl–5xl, semibold, tight tracking.
  • Body copy: muted foreground for long text.
  • Cards: rounded-3xl, subtle borders, light shadow.
  • Buttons: primary for main CTA, outline for secondary, secondary for tertiary actions.

Where to update brand tokens

Colors are set using CSS variables in src/app/globals.css.
Tailwind token mapping (so classes like border-border work) lives in tailwind.config.ts.