Esc
  • Design SystemsFrom Figma Variables to Tailwind, Without the Copy-PasteDesign tokens only help if design and code read from the same source. Here's how I set up a pipeline where Figma variables become Tailwind theme values and React props, and what I learned about naming along the way.
  • Next.jsBuilding a Like Button, From Database to DelightThe heart at the bottom of every article on this site is a tiny full-stack feature. Here's how it works, from the SQLite table and API route to optimistic updates and batched requests.
  • AnimationA Friendly Introduction to Spring PhysicsSprings make interfaces feel alive. Instead of picking a duration and an easing curve, you describe how something should move, and physics does the rest. Let's build an intuition for stiffness and damping with a live playground.
  • UI DesignDesigning Dashboards People Can Actually ScanData-heavy screens fail when every number shouts at once. A practical guide to hierarchy, tables, filters and progressive disclosure for dashboards that engineers and analysts use all day.
  • CSSUnderstanding Flexbox Alignment, Visuallyjustify-content or align-items? Main axis or cross axis? If you still guess which property to use, this interactive guide will fix that for good.
  • BrandA Brand System Is More Than a LogoA logo is the smallest part of a brand. What makes a brand recognizable is the system around it, from type and color to iconography, voice and the way the product itself behaves. Here's how I approach building one that survives contact with real products.
Brand

A Brand System Is More Than a Logo

A logo is the smallest part of a brand. What makes a brand recognizable is the system around it, from type and color to iconography, voice and the way the product itself behaves. Here's how I approach building one that survives contact with real products.

2 min read…

When a client asks for a "new brand," they often picture a logo reveal. The logo matters, but on its own it does surprisingly little. Most people meet a brand through a product screen, an email or a landing page, and the logo is a few pixels in the corner.

What they actually recognize is the system: the consistent choices that make every touchpoint feel like it came from the same place.

The parts of a brand system

I think of a brand system in six layers:

  1. Logo and its rules: clear space, minimum sizes and what never to do with it.
  2. Typography: one or two families, a defined scale, and rules for headings, body and data.
  3. Color: a core palette plus semantic roles (action, success, warning, error) that work in product UI, not just in marketing.
  4. Iconography and illustration: a consistent stroke, corner radius and level of detail.
  5. Layout and motion: grids, spacing and how things move and respond.
  6. Voice: how the brand sounds, from headlines to error messages.

Design for the product, not just the pitch deck

The most common failure I see is a brand that looks great in a presentation and falls apart in the product. A few checks catch most of it early:

  • Test colors in UI states. Does the primary color still work as a disabled button, a focus ring or a chart series? Does it pass contrast on both light and dark backgrounds?
  • Set type in real interfaces. A beautiful display face may be unreadable in a dense data table. Choose the UI face as carefully as the headline face.
  • Write the error messages. Brand voice is easy in a tagline and hard in "Your payment didn't go through." That second one is where people form opinions.

Start with workshops

Before designing anything, I run stakeholder workshops to agree on what the brand needs to achieve, who it's for and how success will be measured. It's tempting to skip this and start sketching, but a shared definition of success is what keeps reviews focused on goals instead of personal taste.

Document it so others can use it

A brand system only works if other people can apply it without you in the room. Good standards documentation shows the rules, explains why each rule exists, and includes plenty of do and don't examples. A Figma library with ready-to-use components is even better, because the easiest path is then also the correct one.

Want to know when I publish something new?

I send a short email when there's a new article or project, usually a couple of times a month. No spam, and you can unsubscribe whenever you like.