PlayHero WebUX · Brand System · Locked

Brand Guidelines

These are the locked specifications for how PlayHero presents itself on the web. Everything here is final unless explicitly versioned. When in doubt, follow the spec — not instinct.

01

Logo Mark

64px

48px

32px

24px

20px

16px

Primary · dark background

PlayHero°

Light background variant

PlayHero°

Side by side · 02 vs 03 at nav scale (03 compensated)

PlayHero°Solid fill · 22px

03PlayHero°Stepped layers · 32px compensated (was 22)

Concept · Stepped layers

Three descending strokes at increasing opacity with a terminal dot. Reads as signal detection — something was found, logged, done. The decay from back to front mirrors how PlayHero surfaces the most critical signal to the top. Not a heartbeat. Not a document stack. A precision instrument.

02

Wordmark

Nav header simulation

PlayHero°

Sign InGet Started →

Nav / sidebar · 32/18 compensated

PlayHero°

32 / 18 — compensated from 22 / 15 · line marks need ~45% more size for equivalent visual mass

Hero / large lockup · 28–36px

PlayHero°

App sidebar · with subline

PlayHero°

WebUX

✓ Do

Always pair the mark with the wordmark in nav, hero, and footer contexts.

✗ Don't

Use the wordmark alone without the mark on the website. They travel together.

✓ Do

Set wordmark in Manrope 500 weight with letter-spacing: -0.03em.

✗ Don't

Use any other font, weight, or tracking for the wordmark.

03

Degree Symbol

PlayHero°

Locked specification

Character° (Unicode U+00B0 — not custom glyph)

Font size0.62em (relative to wordmark size)

Positionposition: relative

Top-0.55em ← sits at 1–2 o'clock of the 'o'

Margin left-0.05em ← tucks toward the 'o', feels anchored

Color#F4F7FB (signalActive — not signal, not gradient)

Font weight700

TypefaceManrope 500 (wordmark + UI) · system monospace for scores

.playhero-degree {
  font-size: 0.62em;
  position: relative;
  top: -0.55em;
  margin-left: -0.05em;
  color: #E8FF65;
  font-weight: 700;
}

✓ Do

Use the degree as a precision mark — anchored, not floating. It should feel part of the word.

✗ Don't

Use vertical-align: super, transform: translateY, font-size above 0.65em, or add glow/gradient to it.

✓ Do

Reserve the degree for the logo lockup. In copy, titles, labels, and product names — PlayHero, SuperScan, Testplan — the name is set plain.

✗ Don't

Append the degree to a product name in running text, a heading, a button, a nav label, or an email.

04

Color

Electric Ink — core palette

#07090D

Ink

Page background

#0D1117

Raised

Cards, surfaces

#E8FF65

Signal

CTA / active / °

#F4F7FB

Chalk

Primary text

#6F7B8C

Steel

Secondary on Ink

#8F9AA8

Steel raised

Secondary on cards

Primary CTA — flat lime, no gradient, no glow

/* Primary CTA — sourced from lib/webux/electric-ink.ts */
background: #E8FF65;
color: #07090D;
border-radius: 999px;
box-shadow: none; /* no glow */

/* Lime is scarce. Target: ≤3 lime elements per viewport. */

Background scale

#07090D

bg0

Page shell

#0D1117

bg1

Cards, panels

#111720

bg2

Inputs, code

#1A222D

bg3

Hover, stripes

Steel two-value split

#6F7B8C on Ink measures 4.73:1 (AA). The same Steel on Raised ink is 4.44:1 and fails WCAG AA. Use #8F9AA8 on any raised surface. Tertiary is #8F9AA8.

Semantic colors

#49D6A3

success

Resolved, live pulse

#FFB86B

warning

Warning, pending

#FF5C73

error

Critical, risk

#49D6A3

live

Agent active — not lime

#7AD7FF

info

Utility / data only

✓ Do

Use signal lime (#E8FF65) only for primary CTAs, active/selected state, progress, the °, and high-value evidence. Live pulse is #49D6A3, not lime.

✗ Don't

Decorate headings, icons, eyebrows, chips, or dividers with lime. Do not use blue as a primary action color.

05

Typography

Page heading · 44px · 500w

Your pipeline isn't.

Section heading · 26px · 500w

Continuous UX monitoring.

Card title · 16px · 500w

Hero CTA below fold on mobile

Body copy · 14px · 400w

PlayHero monitors your conversion health 24/7 — surfacing what's breaking your funnel.

Label / overline · 10px · 500w

UX MONITORING · 2,847 SITES WATCHED

Mono / code · 12px · 400w

−$18k–$34k / quarter

/* Manrope — loaded via next/font (--font-manrope). No 900. */
font-family: var(--font-manrope), system-ui, sans-serif;
font-weight: 500;   /* heading cap — hierarchy from size and space */
font-weight: 400;   /* body */

/* System mono — scores, labels, runtime, code */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-weight: 500;   /* labels / overlines / badges */

/* ° is the one 700 exception — mark glyph, not type */
letter-spacing: -0.03em;  /* headings */
letter-spacing:  0.08em;  /* uppercase overlines */

✓ Do

Cap heading weight at 500. Rebuild lost hierarchy with size or space, never weight.

✗ Don't

Specify fontWeight 700, 800, or 900 on type. The ° mark is the only 700 exception.

06

Spacing & Layout

Base unit · 4px

Nav height52–56px

Card padding20–24px

Section padding40–64px vertical

Card border-radius16px (RADIUS_PANEL)

Button border-radius999 (pill)

Input border-radius999 (pill)

Chip border-radius999 (pill)

Max content width1200px

Content gutter24px mobile / 64px desktop

07

Backgrounds

Hero ambient glow — removed

Standard card · bg1 + border

Active / selected card

Top-border accent variant

/* Ambient glow / background effects are removed. */
/* Active card / selected state */
background: rgba(232,255,101,0.06);
border: 1px solid rgba(232,255,101,0.24);

/* No button glow or shadow. */
box-shadow: none;

08

Buttons & CTAs

Run Free Scan →

UX MONITORING · 2,847 SITES WATCHED

Confidence: High

Critical

/* Primary CTA — flat lime, ink text, no glow */
background: #E8FF65;
color: #07090D;
box-shadow: none;
border-radius: 999px;
font-weight: 500;

/* Ghost / secondary */
background: transparent;
border: 1px solid #293441;
color: #8F9AA8;

/* Live pulse animation */
@keyframes phPulse {
  0%,100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(2.4); opacity: 0; }
}

09

Usage Rules

✓ Do

Dark backgrounds only on the website. Every surface uses bg0 through bg3.

✗ Don't

Use white or light-grey page backgrounds. PlayHero is dark-only.

✓ Do

Lime is scarce: one signal color, used for action, state, or evidence. Target ≤3 lime elements per viewport.

✗ Don't

Tint headings, icons, eyebrows, bullets, or hover borders lime because they used to be purple.

✓ Do

Use Manrope for UI text. System monospace for scores, dollar values, timestamps, code labels.

✗ Don't

Use DM Sans, DM Mono, Inter, or Roboto. Manrope has no weight 900.

✓ Do

Refer to PlayHero as a 'WebUX monitoring platform', 'conversion health monitor', or 'AI-powered WebUX agent'.

✗ Don't

Call PlayHero a 'copilot', 'assistant', 'dashboard tool', or 'AI writing assistant'.

✓ Do

Maintain the mark + wordmark lockup in nav and hero. Mark always left of wordmark.

✗ Don't

Use the wordmark without the mark, or stack them vertically on the website.

✓ Do

Use inline styles for all product/app components. No Tailwind in product screens.

✗ Don't

Add className strings to product components — they will silently fail.

✓ Do

In the logo, use the degree symbol ° (Unicode U+00B0) with the locked CSS spec.

✗ Don't

Approximate the degree with superscript tags, transform, or custom glyphs.

10

CSS Snippet

Paste this at the top of any new session with Cursor, Claude, or ChatGPT to anchor brand context.

/* ── PlayHero Electric Ink · lib/webux/electric-ink.ts ── */

/* Fonts: Manrope via --font-manrope + system mono. No 900. */

:root {
  --ink: #07090D;
  --raised: #0D1117;
  --signal: #E8FF65;
  --chalk: #F4F7FB;
  --steel: #6F7B8C;
  --steel-raised: #8F9AA8;
  --bg0: #07090D;
  --bg1: #0D1117;
  --bg2: #111720;
  --bg3: #1A222D;
  --nav: #0D1117;
  --border: #293441;
  --border-mid: #293441;
  --border-brt: #293441;
  --fg: #F4F7FB;
  --fg-mid: #8F9AA8;
  --fg-low: #4A5462;
  --green: #49D6A3;
  --amber: #FFB86B;
  --red: #FF5C73;
  --live: #49D6A3; /* live pulse = success, not lime */
  --blue: #7AD7FF;
  --sans: var(--font-manrope), system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

.playhero-degree {
  font-size: 0.62em;
  position: relative;
  top: -0.55em;
  margin-left: -0.05em;
  color: var(--signal);
  font-weight: 700;
}

@keyframes phPulse {
  0%,100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(2.4); opacity: 0; }
}

PlayHero°

Electric Ink · Aug 30, 2026 · lib/webux/electric-ink.ts

11

Tagline

Locked tagline

Your site has a hero now.

PlayHero monitors your conversion health 24/7 — catching what's breaking your funnel before it breaks your quarter.

Declarative, confident, lands the product name without explaining it. "Silent hero" was considered but rejected — PlayHero actively alerts, so "silent" contradicts the core mechanic. New users immediately understand the name in context.

Footer

Live ✓

Footer tagline, margin-bottom 8px above copyright, match footer alignment.

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 11px;
color: #4A5462;
letter-spacing: 0.06em;

Scan results — post-scan reveal

Pending

"Your site has a hero now. Here's what it found." — Above score ring.

font-family: var(--font-manrope), system-ui, sans-serif;
font-size: 18px;
font-weight: 500;
color: #F4F7FB;

Homepage hero — primary headline

Pending

Two-beat pattern: Line 1 "Your uptime is fine. Your pipeline isn't." — 500w, #F4F7FB. Line 2 "Your site has a hero now." — 500w, #F4F7FB. Both 44–52px, letter-spacing -0.03em. Hierarchy from size, not weight.

/* Line 1 */
font-family: var(--font-manrope), system-ui, sans-serif;
font-size: 44px; /* or 52px */
font-weight: 500;
color: #F4F7FB;
letter-spacing: -0.03em;

/* Line 2 */
font-family: var(--font-manrope), system-ui, sans-serif;
font-size: 44px; /* or 52px */
font-weight: 500;
color: #F4F7FB;
letter-spacing: -0.03em;

Onboarding — post-signup confirmation

Pending

"Your site has a hero now. Let's introduce it to your URL."

font-family: var(--font-manrope), system-ui, sans-serif;
font-size: 22px;
font-weight: 500;
color: #F4F7FB;

Open Graph / social share image

Pending

OG title: PlayHero. OG description: Your site has a hero now. OG image: Mark 03 + wordmark on #07090D, 1200×630px.

og:title: PlayHero
og:description: Your site has a hero now.
og:image: Mark 03 + wordmark on #07090D, 1200×630px

✓ Do

Use "Your site has a hero now." with a period. Declarative, final, confident.

✗ Don't

Drop the period or use an exclamation mark. The period reads as fact, not hype.

✓ Do

Pair with the subline on primary surfaces.

✗ Don't

Use the tagline alone without the product description for new users.