BRAND IDENTITY SYSTEM
Discover Nebula Brand Assets, Design Tokens, and Style Guides
Components
Check the page before you change the ad.
01 - The Mark
Signal Node Grid
9 signal nodes in a 3×3 grid. 6 pass (teal), 3 neutral (gray). Represents the B grade - honest about being good, not perfect. The mark encodes no specific audit taxonomy; it is a semantic-neutral brand glyph.
Primary - dark background
Construction
Grid Spec
Clearspace
Node Ratio
02 - Wordmark & Lockups
Brand Lockups
The wordmark pairs with the signal-node mark in multiple configurations. Each lockup has defined spacing ratios and minimum legible sizes.
Nebula
Components
Nebula
Components
Nebula
03 - Color System
Diagnostic Palette
A restrained palette optimized for dark interfaces and maximum contrast ratios. Nebula Chartreuse is the sole chromatic accent - everything else is grayscale.
Primary brand accent, pass states, interactive elements
↳ 4.56:1 on Near Black - AA Large
Primary background, canvas
↳ 20.9:1 against Off White - AAA
Primary foreground, headings, body text
↳ 20.9:1 on Near Black - AAA
Secondary text, annotations, metadata
↳ 7.05:1 on Near Black - AAA
Reserved - failed conversion signal threshold only
↳ 3.2:1 on Near Black - use at 18px+ bold only
Semantic States
Pass states, positive outcomes
Validation errors, destructive actions
Informational notices, links
Failed threshold - audit-specific only
Contrast Ratios
04 - Typography
Type Scale
System sans-serif for interface and body. Monospace for evidence atoms, scores, diagnostics, and technical labels. No web fonts - zero FOUT, no external requests.
Sans-serif Stack
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif
UI, body copy, headings, navigation
Monospace Stack
JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace
Scores, metrics, code, labels, telemetry
Display
Audit. Optimize. Ship.
Heading 1
Performance Diagnostics
Heading 2
Signal Analysis
Heading 3
Conversion Metrics
Heading 4
Node States
Body
Evidence-backed conversion diagnostics that identify exactly where paid traffic leaks occur.
Caption
Last scanned 2 minutes ago
Label
CONVERSION SIGNALS
Score
87
Telemetry
SIG:PASS 6/9
Code / Data
font-family: system-ui, sans-serif;
05 - Iconography & Data Visualization
Visual Language
Geometric, minimal icons with consistent 1.5px stroke weight on a 24×24 grid. Square or circular technical geometry - no decorative flourishes.
Stroke
Geometry
Colors
Chart Styling
Line Charts & Score Rings
Heat Maps & Node Maps
06 - Usage Rules
Approved & Prohibited
The mark is a precision instrument. Treat it with the same care as diagnostic equipment - no decorative embellishment, no arbitrary modification.
Approved Usage
- Use the mark on dark backgrounds with adequate clearspace.
- Use Nebula Chartreuse (#c7ff2f) as the only chromatic accent in brand contexts.
- Refer to the product as 'Nebula' or 'Nebula Components'.
- Maintain minimum 1× mark-width clearspace around the mark.
- Use the monospace stack for scores, data, and technical labels.
Prohibited
- Modify the grid pattern or change individual node colors.
- Use the mark on backgrounds that reduce contrast below WCAG AA.
- Animate the mark in ways that change node states without reflecting real audit data.
- Refer to us as a 'CRO agency' or 'landing page optimization service'.
- Apply excessive glow, drop shadows, or 3D transforms to the mark.
- Use the mark at sizes below 12px without the small-size variant.
✓ Correct
Dark bg, clearspace
✗ Distorted
Stretched / skewed
✗ Low contrast
Insufficient ratio
✗ Recolored
Off-brand colors
✗ Excessive glow
Drop shadow / bloom
✗ Too small
Below 12px
07 - Motion
Animation System
Restrained technical motion that communicates system state. All animations respect prefers-reduced-motion. Nothing purely decorative - every movement carries information.
Scan Line
Vertical sweep across diagnostic panels
Node Pulse
Subtle opacity oscillation on active nodes
Ring Rotation
Slow rotation on diagnostic ring elements
Counter Up
Numeric value counts from 0 to target
Hover Activate
Border color and subtle scale shift
Section Reveal
Slide up with fade
Reduced Motion
When prefers-reduced-motion: reduce is active, all animations collapse to instant transitions (≤0.01ms). Scan lines, ring rotation, and counter animations are disabled entirely. Hover state changes remain but without duration.