AaaS Brand Reference — LIVE Implementation

1 · Token Summary — Live Sites

Canonical token values as deployed on agents-as-a-service.com and aaas.blog. Both sites share identical CSS. RGB channel format for Tailwind opacity support.

Token	Value
Variable naming	--basalt-deep, --basalt-surface, --circuit-glow, --accent-red
Color format	RGB channels (e.g. `8 8 9`) for Tailwind opacity modifiers
Dark background	#080809 — basalt-deep
Dark surface	#1A1A1C — basalt-surface
Dark circuit	#00F3FF — circuit-glow
Dark accent-red	#F43F6C — accent-red
Light background	#E4E4E0 — warm gray (NOT white)
Light surface	#DADAD5
Light circuit	#007891 — darker teal
Light accent-red	#BE2A52 — deeper burgundy
Semantic states	Derived from circuit + red via transparency (no pastels)
Border radius	0.75rem
Effects	Grain overlay + aura blend (screen/multiply)

2 · Color Palette — As Deployed

Dark Theme (default)

--basalt-deep 8 8 9 → #080809

--basalt-surface 26 26 28 → #1A1A1C

--basalt-bright 42 42 46 → #2A2A2E

--text 224 224 224 → #E0E0E0

--circuit-glow 0 243 255 → #00F3FF

--accent-red 244 63 108 → #F43F6C

--success = circuit-glow (positive)

--warning = accent-red @ 60% (caution)

--danger = accent-red @ 100% (critical)

Light Theme

--basalt-deep 228 228 224 → #E4E4E0

--basalt-surface 218 218 213 → #DADAD5

--basalt-bright 205 205 198 → #CDCDC6

--text 17 17 19 → #111113

--circuit-glow 0 120 145 → #007891

--accent-red 190 42 82 → #BE2A52

--success = circuit-glow (positive)

--warning = accent-red @ 60% (caution)

--danger = accent-red @ 100% (critical)

DARK

#F43F6C

Vibrant / warm pink-red

LIGHT

#BE2A52

Deeper / muted burgundy

3 · Semantic States — Brand-Derived

All semantic states derive from the two brand colors — circuit cyan and accent red — using transparency and saturation only. No pastels, no third-party palette. Clean, consistent, brand-locked.

/* Derivation rule */ Success / Active / Online = circuit-glow @ 100% Warning / Caution / Pending = accent-red @ 60% opacity Danger / Error / Critical = accent-red @ 100% /* Dim backgrounds */ --success-dim = circuit-glow @ 12% opacity --warning-dim = accent-red @ 10% opacity --danger-dim = accent-red @ 15% opacity

Success · Circuit @ 100%

100% → 60% → 30% → 12% (dim)

Online Active

Warning · Red @ 60%

60% → 40% → 20% → 10% (dim)

Pending

Danger · Red @ 100%

100% → 70% → 40% → 15% (dim)

Critical Error

4 · Typography — As Deployed

Primary — Inter (--sans / --font-inter)

Context is King

Body text — autonomous agent workforce, schema-first intelligence.

Weights: 300 — 900
Loaded via: next/font/google
Var: --font-inter (Next.js generated)

Monospace — JetBrains Mono (--mono / --font-jetbrains)

SYSTEM://AAAS

const agent = await dispatch('research-llm');

Weights: 300 — 700
Used for: nav, labels, code, status
Var: --font-jetbrains (Next.js generated)

5 · Uppercase & Bold — When to Use

The live sites follow a strict hierarchy of text-transform and font-weight. Uppercase is never decorative — it signals structural importance. Bold without uppercase signals content importance.

Element	Transform	Weight	Font	Tracking	Example
H1 — Hero	UPPERCASE	900 (black)	Sans (Inter)	tracking-tight (-0.025em)	AGENTS AS A SERVICE
H2 — Section	UPPERCASE	900 (black)	Sans (Inter)	tracking-tight (-0.025em)	CONTEXT IS KING
H3 — Subsection	Title Case	600 (semibold)	Sans (Inter)	normal	Context-First Architecture
H4 — Card title	Title Case	600 (semibold)	Sans (Inter)	normal	The Lock-On Effect
Label / Overline	UPPERCASE	500 (medium)	Mono (JetBrains)	0.15rem — 0.3rem	AUTONOMOUS DIGITAL WORKFORCE
Nav items	UPPERCASE	500 (medium)	Mono (JetBrains)	tracking-wider (0.05em)	PLATFORM · PRICING · VAULT
System / Status	UPPERCASE	400 (regular)	Mono (JetBrains)	normal	SYS_LOG: UPTIME 99.9%
Body text	Sentence case	400 (regular)	Sans (Inter)	normal	Deploy autonomous agents...
CTA / Hero tagline	UPPERCASE	700 — 900	Sans (Inter)	tight (-0.03em)	SUBMIT. COMPARE. SUBSCRIBE.

H1 · Hero — uppercase + black (900) + tight tracking

AGENTS AS A SERVICE

H2 · Section — uppercase + black (900) + monolith-title

CONTEXT IS KING

H3 · Subsection — title case + semibold (600)

Context-First Agent Architecture

Label / Overline — uppercase + mono + wide tracking

Autonomous Digital Workforce

CTA · Outline text — uppercase + bold/black + tight

SUBMIT. COMPARE. SUBSCRIBE.

/* Quick rules */ UPPERCASE = structural hierarchy (H1, H2, labels, nav, system text) Title Case = content hierarchy (H3, H4, card titles, descriptions) Sentence case = body text, paragraphs, captions font-weight: 900 = H1 hero + H2 sections (both use monolith-title gradient) font-weight: 700 = CTA buttons, strong emphasis font-weight: 600 = H3/H4 subheadings, card titles font-weight: 500 = labels, nav, overlines (always mono) font-weight: 400 = body text, system status Never: uppercase on body text or descriptions Never: bold (700+) on monospace labels — max 500 Always: tight negative tracking on uppercase headings Always: wide positive tracking on uppercase labels/overlines

6 · Geometry

Border Radius: 0.75rem (toolbox uses 0.5rem)

0.75rem

LIVE

0.5rem

Toolbox

Effects (live only)

--grain-opacity: 0.6 (dark) / 0.2 (light)
--aura-blend: screen (dark) / multiply (light)
--liquid-ease: cubic-bezier(0.23,1,0.32,1)
Grain: fractalNoise SVG (0.04 base opacity)

7 · Components — Live Token Rendering

Buttons (0.75rem radius)

Badges — All Live Colors

Circuit Red Success Warning Danger

Input

Glass Card

Live Glass

Glassmorphism

rgba(26,26,28,0.6) + blur(24px) + border hsla(0,0%,100%,0.05)

8 · Hero — Live Style Composition

Autonomous Agent Workforce

Context is King

Deploy autonomous agents that understand your business context. Schema-first intelligence, basalt-grade reliability.

Online Processing 12 Agents

9 · Complete Token Dump (copy-paste ready)

/* Dark Theme (default) */
:root {
  --basalt-deep:     8 8 9;
  --basalt-surface:  26 26 28;
  --basalt-bright:   42 42 46;
  --circuit-glow:    0 243 255;
  --circuit-dim:     rgba(0,243,255,0.15);
  --accent-red:      244 63 108;
  --accent-red-dim:  rgba(244,63,108,0.15);
  --accent-teal:     0 212 184;
  --accent-teal-dim: rgba(0,212,184,0.15);
  --text:            224 224 224;
  --text-muted:      hsla(0,0%,88%,0.5);
  --border:          hsla(0,0%,100%,0.05);
  /* Semantic — brand-derived, no pastels */
  --success:         = circuit-glow;          /* positive/active */
  --success-dim:     circuit-glow @ 12%;
  --warning:         = accent-red @ 60%;      /* caution/pending */
  --warning-dim:     accent-red @ 10%;
  --danger:          = accent-red @ 100%;     /* critical/error */
  --danger-dim:      accent-red @ 15%;
  --grain-opacity:   0.6;
  --aura-blend:      screen;
  --radius:          0.75rem;
}

/* Light Theme */
[data-theme="light"] {
  --basalt-deep:     228 228 224;  /* NOT #fff */
  --basalt-surface:  218 218 213;
  --basalt-bright:   205 205 198;
  --circuit-glow:    0 120 145;    /* NOT #0088A0 */
  --accent-red:      190 42 82;     /* NOT #C9335A */
  --text:            17 17 19;
  --text-muted:      rgba(17,17,19,0.6);
  --border:          rgba(0,0,0,0.12);
  --grain-opacity:   0.2;
  --aura-blend:      multiply;
}

10 · Background Animations — One Per Page

Four distinct background systems are available. Only one may be used per page — never combine. Each is theme-aware and uses CSS variables. The grain overlay (body::before) sits above all backgrounds at z-index 9999.

10a · Aura Background

Used on: Pricing, Collaborate

AURA BACKGROUND

4 drifting radial blobs · blur(80px) · aura-drift 18–25s · mix-blend: screen

Blob 1: accent-red/12, 60vw Blob 2: circuit/10, 50vw Blob 3: lavender/8, 35vw Blob 4: mint/6, 30vw

10b · Orbital Background

Used on: Projects, About, Delivery

ORBITAL

Stars + nebula + 5 rings + planet + lens flare · mouse-interactive

120 stars (twinkle 2–6s) · 6 nebula blobs · 5 orbital rings (14–50s) · Planet with halo · Lens flare (mouse-tracking) · Gravity threads

10c · Merge Background

Used on: Platform

MERGE

SVG gooey filter · 3 white metaballs · 2 accent blobs · radial base

feGaussianBlur(18) + feColorMatrix creates liquid merge effect · Cyan blob 450px · Red blob 350px · Durations 20–30s

10d · Circuit Background

Available (utility)

CIRCUIT

SVG animated paths · stroke-dashoffset flow · junction dot pulses

3 cyan paths (0.8px, opacity 0.4–0.6) · 2 red paths (0.5px, opacity 0.3–0.4) · 3 junction dots pulsing · Overall opacity: 10%

/* Background animation rules */ NEVER: combine two backgrounds on one page NEVER: use backgrounds without the grain overlay (body::before) ALWAYS: position backgrounds at z-index < 0 ALWAYS: use mix-blend-mode: var(--aura-blend) for theme support /* Page assignments (live) */ Homepage → Grain only (no animated background) About → OrbitalBackground Platform → MergeBackground Pricing → AuraBackground Projects → OrbitalBackground Vault → (assignable) Collaborate → AuraBackground Delivery → OrbitalBackground