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.

Tyler Quackenbush

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

Tyler Quackenbush

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.

See the system applied everywhere on this site.