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 procurement process, a compliance requirement nobody wrote in plain words.
The job is deciding what's true, then cutting everything that's only there to sound careful. Hand back something someone can act on without a second read. The mark, the type, and the color are all built around that one move.
02 · The Mark
A spine and one bar. A sideways T, for Tyler.
Two rectangles of equal thickness, fused where they meet, white on a Navy square. The mark carries its own background, so it reads the same on a light page or a dark band, at 16 pixels or at billboard scale. No illustrated icon, no gradient, no third color.
03 · The Wordmark
Poppins · Light and Bold
First name in Poppins Light, uppercase, tracked wide. Last name in Poppins Bold, set large, with a Navy rule underneath. The same family carries every heading, label, and paragraph on this site, so the wordmark reads as part of the page. No custom ligatures and no tightened counters: a designer's name should be as legible as the work under it.
04 · Lockups
Three configurations, chosen by the space available. The horizontal lockup leads wherever it fits.
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. The mark depends on space to stay legible; crowding it defeats that.
Digital Minimum
16px · Favicon
App Icon
32px – 512px
Print Minimum
10mm
06 · Color
Ink · #000000
Primary text and dark surfaces.
Cloud · #F5F6F5
Page background. Cards sit a step above it in white.
Navy · #25476B
The one accent: links, labels, the thing that changed.
Skylight · #A8C0DA
Navy’s job on a dark band, where Navy would disappear.
An earlier direction paired a deeper navy with an amber highlight. The current system keeps one accent and spends it on one thing: the link, the label, the line that got clearer. Skylight exists only so that job still gets done on a dark band.
07 · Typography
Aa Gg Hh 0123
Poppins Bold
Headings and the wordmark.
Aa Gg Hh 0123
Poppins Light
Eyebrows, labels, and quiet text.
Aa Gg Hh 0123
Poppins Regular
Body copy.
Aa Gg Hh 0123
Lora Italic
Pull quotes and the tagline: the lines worth quoting.
One family in three weights does nearly all the work. The single serif italic is reserved for lines worth repeating, so it stands out every time it appears.
08 · In The World
Business Card
Senior UX Designer and Project Manager
Resume Header
SENIOR UX DESIGNER
Make the problem simple, then solve the simple problem.
Social Share Card
09 · Rationale & Positioning
Tyler is the person a team hands the sentence nobody else wants to touch, and it comes back clearer.
Two strokes read "simple" faster than an illustrated icon could. A brand about plain language can't have a complicated logo. One accent color, rationed: Navy means the same thing everywhere it appears, the part that got clearer. Spend it anywhere else and it stops meaning anything.