Prismio Brand Color Style Guide¶

This page documents the current Prismio color system as implemented in production CSS.

Source Of Truth¶

apps/api/prismio/static/css/project.css
apps/api/prismio/static/css/landing.css

Core Brand Tokens¶

These are the shared color tokens declared in :root and reused throughout authenticated UI surfaces.

Token	Value	Purpose
`--pq-ink`	`#0f1c2d`	Primary text and strong foreground
`--pq-muted`	`#5f7187`	Secondary and muted copy
`--pq-surface`	`#f4f8ff`	Soft background surfaces
`--pq-card`	`#ffffff`	Card and panel base
`--pq-brand`	`#0d67d9`	Primary brand/action color
`--pq-brand-strong`	`#0a4ca0`	Strong brand emphasis
`--pq-border`	`rgba(18, 42, 68, 0.14)`	Standard border treatment
`--pq-shadow`	`0 24px 45px -28px rgba(18, 42, 68, 0.45)`	Elevated card shadow

Brand Blue Ramp¶

Name	Hex	Typical Usage
Brand Primary	`#0d67d9`	Main CTA and interactive emphasis
Brand Primary Light	`#1e86ff`	Gradient start and hover energy
Brand Strong	`#0a4ca0`	Dense brand accents
Info Tint	`#7ab8ff`	Icons, pills, and positive emphasis on dark surfaces

Surface And Foreground Pairings¶

Use these pairings to stay visually consistent across shells.

Context	Background	Foreground
App light shell	`#f7fafe`	`--pq-ink` (`#0f1c2d`)
Card/panel light	`#ffffff`	`--pq-ink` / `--pq-muted`
Sidebar dark shell	`linear-gradient(180deg, #0d2139, #102947, #143760)`	`#e7f2ff`
Landing dark shell	`linear-gradient(175deg, #060f1c, #0a1e35, #0d2444, #0f2d50)`	`#e4f1ff`

Semantic Alert Colors¶

Alert states are implemented as semantic tokens in project.css.

State	Accent	Surface	Icon Surface
Info	`#0d67d9`	`#f7fbff`	`#e8f4fd`
Success	`#1b8a6b`	`#f4fbf8`	`#e8f6f1`
Warning	`#c56a1e`	`#fff8f1`	`#fff1e1`
Danger	`#c63d4f`	`#fff7f8`	`#feecef`

Product Accent Palette¶

Landing product sections use a wider accent set.

Product	Accent
Flow	`#7ab8ff`
Refine	`#5ee8f8`
Graph	`#c4b5fd`
Sync	`#6ee7b7`
Atlas	`#fcd34d`
Cortex	`#f9a8d4`

Canonical Gradient Recipes¶

Use these exact gradients where possible to avoid drift.

Primary CTA Gradient¶

background: linear-gradient(120deg, #1e86ff 0%, #0d67d9 100%);

background:
  radial-gradient(circle at 15% 12%, rgba(86, 172, 255, 0.24), transparent 34%),
  linear-gradient(180deg, #0d2139 0%, #102947 58%, #143760 100%);

Landing Shell Gradient¶

background:
  radial-gradient(ellipse at 14% 0%, rgba(13, 103, 217, 0.22) 0%, transparent 40%),
  radial-gradient(ellipse at 88% 8%, rgba(0, 196, 224, 0.13) 0%, transparent 34%),
  radial-gradient(ellipse at 50% 60%, rgba(124, 58, 237, 0.07) 0%, transparent 45%),
  linear-gradient(175deg, #060f1c 0%, #0a1e35 35%, #0d2444 65%, #0f2d50 100%);

Usage Rules¶

Prefer token values from project.css (--pq-*) before introducing new hex values.
Keep authenticated app surfaces in the blue/navy family unless there is a semantic state reason.
Restrict pink, yellow, mint, and violet accents to landing/product storytelling contexts.
Use semantic alert tokens for status messaging instead of one-off status colors.
Keep white text (#fff or #e4f1ff) only on dark or high-contrast surfaces.

Maintenance Checklist¶

When colors change:

Update token definitions in apps/api/prismio/static/css/project.css first.
Update this style guide in the same pull request.
Run make -C apps/api css-audit to ensure style usage remains clean.