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

Mark 03b

Lime tile · ink bars (primary)

Ink tile · lime bars (on lime)

Optical size — tiles up to 48px render the pixel grid

16px

28px

32px

48px

Vector tiles — 64px and up

64px

180px

PlayHero°

Spec · Mark 03b

Three square-ended bars, 20 / 15 / 10, stroke 3.2, fading .3 / .6 / 1. Tiles up to 48px use the full-ink 16-unit pixel grid. Wordmark: Manrope 500, ° 700, lime on ink and ink on lime.

✓ Do

Ship the mark on its tile. Lime tile with ink bars on ink surfaces; ink tile with lime bars on lime surfaces.

✗ Don't

Float the bare mark on a photo, gradient, or any colour other than ink or lime.

✓ Do

Keep the tile to two colours.

✗ Don't

Put the degree mark, the wordmark, a border, or a shadow on the tile.

✓ Do

Radius 0 — the tile is a square from Electric Ink's 999 / 16 / 0 set; the OS and social platforms mask app icons and avatars.

✗ Don't

Author a rounded or circular tile.

✓ Do

Brand tile: lime tile with ink bars (primary), or ink tile with lime bars on lime surfaces. Two colours, never chalk on the tile.

✗ Don't

Draw an ink tile with chalk lines and a lime tip. That was Mark 03; it is retired.

✓ Do

Let BrandTile pick the optical size. Up to 48px it renders the grid; from 64 the tapered vector.

✗ Don't

Scale the vector mark below 64px, or hand-place the grid above 48.

13

Lumen mark

Cyan disc on ink

Ink disc on lime

Chalk disc on raised

Optical size — 16 / 28 / 48 / 88

16px

28px

48px

88px

Lumen

Spec · Lumen mark

Disc r45, L cut through to both edges — stem x38, corner y66, stroke 17 (18 at ≤48px, 21 at ≤16px). Butt caps, miter joins.

✓ Do

The cut is the surface. Pick the disc fill from the surface — cyan on ink and white, ink on lime and blue, chalk where Lumen sits beside other agents.

✗ Don't

Colour the L, outline the disc, or put a shadow under it.

✓ Do

One large Lumen lockup per page, in the hero. Section markers use the bare disc at 28–32.

✗ Don't

Repeat the lockup down the page or add the ° — product names are set plain.

✓ Do

Use the chalk disc on any surface where cyan is not allowed.

✗ Don't

Put a cyan disc next to another agent's hue.

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, letter-spacing -0.03em. The ° is 700 — lime on ink, ink on lime.

✗ Don't

Use any other font, weight, or tracking for the wordmark. Do not put a lime ° on a lime surface.

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

Text on the lime footer surface

#07090D

On-lime text

17.6:1 on lime

#3F4718

On-lime body

7.9:1 on lime

#4A5320

On-lime label

7.4:1 on lime

✓ Do

Lime is a surface in exactly one place: the site footer. Ink text, olive muted text, nothing else on it.

✗ Don't

Flood a content band, card, or hero in lime. Inside the page, lime stays a ≤3-per-viewport accent.

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: var(--font-mono), 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. The site footer surface is not counted.

✗ 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 03b tile + wordmark on #07090D, 1200×630px.

og:title: PlayHero
og:description: Your site has a hero now.
og:image: Mark 03b tile + 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.

12

Social

og-image.png · 1200 × 630

linkedin-banner-1584x396.png · 1584 × 396

brand-avatar-lime-1024.png · 1024 × 1024

brand-avatar-ink-1024.png · 1024 × 1024

✓ Do

Every social asset is generated by `scripts/generate-brand-tile-assets.mjs`. Edit the script, not the PNG.

✗ Don't

Export a social image from a design tool by hand.