Brand Identity
Take the dense thing. Hand back the clear one.
This is the identity system behind this site: the idea, the mark, the type, and the color that make every page read as one voice. Where the Design System documents the code, this page documents the thinking.
01 · The Idea
Every piece of content on this site starts as something too complicated for the person reading it: a legal clause, a clinical process, a compliance requirement nobody asked for in plain words.
The job is translation, not simplification for its own sake. Keep what's true, cut what's just there to sound careful, and hand back a sentence someone can act on without a second read. The mark, the type, the color: all of it is built around that one move.
02 · The Mark
One bar, one line. Complexity, resolved into a path.
The mark is two strokes: a vertical bar and a horizontal line meeting it, like a flag catching a signal. Read one way, it's a compressed version of the before/after on this site's own homepage: dense text on the left, a single clear line exiting on the right. Two gestures, so it survives at 16 pixels and still holds up at billboard scale.
03 · The Wordmark
Space Grotesk · 600 · Wide Tracking
Tyler Quackenbush
Set in Space Grotesk at a confident weight with the tracking opened up, the same treatment used for every heading on this site. Geometric enough to read as "systems," not "casual blog," without tipping into the cold, over-engineered feel a lot of tech wordmarks land on. No custom ligatures, no shrinking the counters for style: a UX writer's logo should be exactly as legible as the writing underneath it.
04 · Lockups
Three sanctioned configurations. Choose by space, not by mood: the horizontal lockup leads everywhere there's room for it.
Horizontal · Nav / Header
Tyler
Quackenbush
Stacked · Square Contexts
Mark Only · Favicon / Small UI
05 · Clear Space & Minimum Size
Clear space equal to the mark's stroke weight, on all sides, non-negotiable. The mark's whole argument is that less is more legible, and crowding it undercuts its own point.
Digital Minimum
16px · Favicon
App Icon
32px – 512px
Print Minimum
10mm
06 · Color
Deep Navy · #16324A
Primary. Text, nav, footer, primary actions.
True White · #FFFFFF
Ground. No paper or cream tones anywhere.
Amber · #8C5A1E / #B5762A
The plain-language moment. Reserved for the one line that just got clearer.
An earlier direction tested a green-teal palette, closer to a clinical or regulatory register, before landing on navy, which read as more editorial and less corporate-medical. The accent moved from a cooler green to a warmer amber for the same reason a highlighter is amber and not green: it behaves like a mark drawing the eye to the exact sentence that changed, which is the one visual metaphor this whole brand is built on.
07 · Typography
Aa Gg Hh 0123
Space Grotesk
Headings, wordmark. The order voice.
Aa Gg Hh 0123
Public Sans
Body copy. Also the U.S. federal plain-language/accessibility standard typeface (USWDS), a quiet nod given how much of this work has been federal and accessibility-driven.
Aa Gg Hh 0123
JetBrains Mono
Eyebrows, labels, stats. The spec voice.
08 · In The World
Tyler Quackenbush
UX Content Designer
tyler.qbush@gmail.com
tquack.com
Business Card
Senior UX Content Writer / Content Strategist
Resume Header
UX CONTENT DESIGNER
Jargon in. Clarity out.
Social Share Card
09 · Rationale & Positioning
Tyler is the person a team hands the sentence nobody else wants to touch. Not flashy, not clever for its own sake. Just reliably clearer than what came before it.
Two strokes read "simple" faster than an illustrated icon could, and that's the point: a brand about plain language can't have a complicated logo. Navy over green because editorial reads more honest than clinical. One accent color, rationed, because amber only means one thing everywhere it appears: this is the part that got clearer. Ration it and the metaphor stays honest instead of decorative.