28 · Glitch / Dystopian
A complete Glitch / Dystopian brand kit, composed by Brandwright for the fictional brand Havoc — every asset below comes from one brief. Read-only; start your own to refine any part.
brand kit · essential set
Havoc /
The generative core: brief, logo family, palette, typography. Click any filled asset to see all versions.
⚠️ AI-generated — review and refine before shipping. The marks are extracted to SVG/PNG by an AI pipeline, so small imperfections (a stray tone, a slightly-off path, an occasional mis-cropped detail) are possible. Anything off is editable, or just ask the agent to re-generate it.
Strategy
Havoc is a competitive gaming and esports platform with a loud, electric, cyberpunk identity — built for players who want to win.
- Industry
- competitive gaming & esports platform
Art direction
geometric · abstract mark · warm/vivid/dark
Imagery & illustration: geometric style.
Ask Brandwright to set an audience and a mission to round out the strategy.
Cohesion4/4
Does the identity read as one system? A structural check across voice, art direction, and the mark set.
- met:
Unified personality
one personality drives both voice and visuals
- met:
Art direction set
medium + mark type fixed for the whole brand
- met:
Complete mark system
5/5 logo marks extracted from one brief
- met:
Type pairing set
heading + body chosen as a pair
00
the locked source every asset comes fromLocked brief
The single 16:9 composed source image. Every logo, color, and typeface below is extracted from it — change the brief and the whole kit follows.
1536×1024
.png
versions
brief.png01
5 marks · SVG master + PNG rasterLogo family
bg
mark
1024²
.svg + .png
versions
logos/primary
1024²
.svg + .png
versions
logos/secondary
1024²
.svg + .png
versions
logos/letter-mark
1024²
composed.png
options
logos/app-icon
2048×512
.svg
versions
logos/wordmark◧
every size a browser or OS asks for — and what each is forFavicons & app icons
Browser tab
A purpose-built mark distilled from your logo marks to stay clear in a tiny browser tab.
Havoc×1024²
.png
versions
favicons/faviconApp & home screencomposed
The app-icon tile, sized for iOS, Android & PWA installs.
the maskable icon keeps a safe zone, so any mask (circle/squircle) can’t clip the mark
★
the identity applied — product UI + social cardBrand in use
theme
havoc.com
HavocProductPricingGet started
Welcome to Havoc
The identity applied to a product surface — mark, type, and palette working as one system.
Primary actionSecondary
1200 × 630
social/og-image.pngsocial/ as the brand lockup on the surface color.03
6 rolesColor palette
#FFD900Havoc Yellow
#FFA300Ember Gold
#F20F32Combat Red
#060D10Deep Charcoal
#DDE2E6Light Interface Text
#FF4A0ABlaze Orange
These colors are mostly easy to read — 1 to adjust.
“Contrast” is how clearly text stands out from the color behind it. When it’s too low, text gets hard to read — especially for people with weaker eyesight or on a bright screen. Here’s what to tweak:
- Text on neutralis a little hard to read.Try this shade instead:
#000000
Contrast audit1 text below WCAG 2.1 AA
- text on surfaceAAA15.00:1
- text on neutralfails AA3.29:1suggested fix
#000000(4.89:1) - black on primary✓ use this15.18:1
- white on primaryalternate1.38:1
| Pairing | Ratio | Result | Suggested fix |
|---|---|---|---|
| text on surface | 15.00:1 | AAA | — |
| text on neutral | 3.29:1 | fails AA | #000000(4.89:1) |
| black on primary | 15.18:1 | ✓ use this | — |
| white on primary | 1.38:1 | alternate | — |
This kit targets WCAG 2.1 AA: every key text/background pairing above is validated and any failure is flagged with a suggested fix. Floor 4.5:1 normal text, 3:1 large. Color is never the only signal.
linear-gradient(135deg, #FFD900 0%, #FFA300 35%, #FF4A0A 70%, #F20F32 100%)04
heading + bodyTypography
heading
PP Neue Machina
custom / self-hosted
body
Geist
Google Fonts
pairing in use
Havoc — a headline in the brand face
Body copy set in Geist. Tuned for legibility at length — the quick brown fox jumps over the lazy dog. 0123456789.
Heading carries the brand’s personality; body is chosen for legibility at small sizes and long form.
05
your palette applied — light & darkTheme
your palette as a light & dark UI theme
Aa — headline
Body copy on the light surface. Muted secondary text.
PrimaryAccentNeutral
Aa — headline
Body copy on the dark surface. Muted secondary text.
PrimaryAccentNeutral
The dark set is derived from your palette and ships ready to use in the kit. For developers: color.dark.* in tokens.json, and @media (prefers-color-scheme: dark) in globals.css.
07
Voice Guide · bundled into the kit zipVoice
Personality
Funny
Serious
Havoc can have swagger, but competitive stakes, rankings, prizes, and disputes require a mostly serious voice.
Formal
Casual
The brand should sound native to gaming culture: direct, sharp, and conversational—not institutional.
Respectful
Irreverent
Havoc benefits from rebellious cyberpunk edge, but it must stay fair and non-toxic to protect competitive trust.
Enthusiastic
Matter-of-fact
The identity is loud and electric, so the default tone should carry momentum, hype, and charged confidence.
High-voltage competitive
Write with speed, charge, and pressure. Sentences should feel like a match clock is ticking.
“Queue up. Lock in. The bracket goes live in 10.”
Cyberpunk sharp
Use vivid, neon-edged language that suggests systems, circuits, signal, rank, and controlled chaos.
“Your squad’s signal is live. Climb the ladder and light up the board.”
Victory-obsessed
Center the player’s ambition: rank, progress, prizes, mastery, and proof. Celebrate skill more than participation.
“Every match counts. Every win moves you closer to the top.”
Confident, never toxic
Sound bold, intense, and a little defiant without insulting players, punching down, or encouraging harassment.
“Bring pressure. Break metas. Respect the lobby.”
Command-line clear
Keep core instructions short, direct, and easy to act on. Style should never block comprehension.
“Check in by 7:45 PM or your team forfeits round one.”
Messaging
- Audience
- Competitive gamers, esports teams, tournament organizers, streamers, collegiate clubs, and ranked grinders who want structured competition, visible progress, and a sharper path to winning.
- Value
- Havoc turns competitive gaming into a charged arena where players can enter tournaments, climb rankings, prove skill, and win.
Pillars
Built to compete
Everything points toward serious play: brackets, ladders, check-ins, results, rankings, and clear stakes.
Fast from queue to clash
Players can find events, join matches, track status, and report results without fighting the interface.
Proof over talk
Havoc turns performance into visible progress through wins, standings, stats, and tournament outcomes.
Edge with rules
The platform embraces intensity and rivalry while keeping competition fair, moderated, and credible.
Words we use
lock inqueue upclimbrankbracketladdersquadteamdrop ingo livesignalcircuitneonchargeigniteclaimsecureadvanceeliminatefinal roundtop seedmetascrimtournamentseasondivisionprize poolcheck inmatch reportfair playrespect the lobby
Words we avoid
casual fun for everyoneparticipate at your own pacewholesome vibeseasy peasydear uservalued customersynergysolutioningutilizeseamless experienceworld-class platformcrush noobsdestroy these losersget rektskill issuetoxictrash playersinsults, slurs, ableist terms, or harassment-coded languageoverly cute gamer slangrandom leetspeak that hurts readabilityexcessive exclamation marks
Voice in action
- empty-stateWe say: Enter the arena. Climb the ranks. Make every match count.We don’t say: Join competitive gaming events and improve your ranking over time.
- primary-ctaWe say: Lock in your spotWe don’t say: Register now
- notificationWe say: Check in by 7:45 PM. Miss the window and round one is a forfeit.We don’t say: Please remember to check in before the tournament begins to avoid being removed.
- empty-stateWe say: Scanning for your next fight. Stay ready.We don’t say: We are currently looking for an available match for you.
- successWe say: Win secured. You’re moving up the bracket.We don’t say: Your match result has been submitted successfully.
- successWe say: Result locked. Your run ends here—next bracket is waiting.We don’t say: Your loss has been recorded. Thank you for participating.
- errorWe say: Payment didn’t clear. Try another method to keep your spot.We don’t say: Oops! Something went wrong while processing your payment.
- errorWe say: Warning issued: abusive chat breaks Havoc fair-play rules. Keep the rivalry clean or your account may be restricted.We don’t say: Please be nice to other users or moderation action may be taken.
- notificationWe say: Top signal this week: NovaRift holds rank #1 with 18 wins.We don’t say: NovaRift is currently the highest-ranked player this week.
- empty-stateWe say: No teams in the bracket yet. Share the invite and start building the field.We don’t say: There are no registered teams for this tournament at this time.
- empty-stateWe say: Final results are live. See who owned the bracket.We don’t say: Tournament results are now available to view.
- notificationWe say: New ladder system is live. Stack wins, climb divisions, prove the grind.We don’t say: We’re excited to announce that our new ladder feature is now available.
| Surface | ✓ We say | ✕ We don’t |
|---|---|---|
| empty-state | Enter the arena. Climb the ranks. Make every match count. | Join competitive gaming events and improve your ranking over time. |
| primary-cta | Lock in your spot | Register now |
| notification | Check in by 7:45 PM. Miss the window and round one is a forfeit. | Please remember to check in before the tournament begins to avoid being removed. |
| empty-state | Scanning for your next fight. Stay ready. | We are currently looking for an available match for you. |
| success | Win secured. You’re moving up the bracket. | Your match result has been submitted successfully. |
| success | Result locked. Your run ends here—next bracket is waiting. | Your loss has been recorded. Thank you for participating. |
| error | Payment didn’t clear. Try another method to keep your spot. | Oops! Something went wrong while processing your payment. |
| error | Warning issued: abusive chat breaks Havoc fair-play rules. Keep the rivalry clean or your account may be restricted. | Please be nice to other users or moderation action may be taken. |
| notification | Top signal this week: NovaRift holds rank #1 with 18 wins. | NovaRift is currently the highest-ranked player this week. |
| empty-state | No teams in the bracket yet. Share the invite and start building the field. | There are no registered teams for this tournament at this time. |
| empty-state | Final results are live. See who owned the bracket. | Tournament results are now available to view. |
| notification | New ladder system is live. Stack wins, climb divisions, prove the grind. | We’re excited to announce that our new ladder feature is now available. |
Start from this direction.
Aggressive cyberpunk energy — an angular glitch mark and bold condensed type in acid yellow on black, with HUD cut-corners and scanline artifacts. Electric and confrontational, for gaming, esports, and web3. Example: Havoc, a competitive gaming platform. Start here and refine the full system around your brief.