Going Flat: A Brand Graphic System for Any Brand
Thinking about taking your brand flat? Here is the system I use: one mark, one line, one accent, one typeface, and a small set of reusable templates. My own rebrand is the working example, rendered live in navy, white, and brand blue with Sora type.
By Michael Baker ยท
Flat design is not a trend, it is a discipline. The strongest brands online right now, like Stripe, Linear, Vercel, Framer, and Notion, all share the same restraint. No glow, no gradients, no neon, no glass, and no heavy drop shadows. One mark, one line, one accent, and a lot of intentional space. Any brand can get there, and the process is more repeatable than it looks.
I rebuilt my own brand this way, so this page doubles as the working example. The mark is the bold M. The line is "I build websites." with "websites." carried in brand blue. Everything else stays quiet on purpose. Swap in your mark, your line, and your accent, and the same system works for you.
What going flat actually means
Going flat means stripping the decoration until only the decisions remain. Your logo is used exactly as drawn, never redrawn, stretched, or hand recolored. Your palette shrinks to a base, a neutral, and one accent that matters. Your type collapses to a single family used at different weights. What is left is calm, confident, and instantly recognizable at any size.
Start with a tight palette
Mine is Navy #050815 for ink and dark backgrounds, White #FFFFFF for clean space, and Brand Blue #1877F2 for the one accent. A soft #E9EEF8 light blue and a #C8CFD8 divider round out the set. The typeface is Sora, used from regular through extra bold. Yours will be different colors, but the shape of the system is the same: dark, light, accent, and a couple of quiet supporting tones.
Build a small set of reusable templates
Every brand needs the same four pieces: a dark and a light horizontal hero for sites and slides, a square for social posts, and a vertical for stories and reels. The four below are rendered live on this page from real React components. Every piece of text is editable through props and the logo source is configurable, so the same components flex across an entire brand. Each template holds its exact proportions whether it runs as a wide hero, a square, or a vertical story.
Explore directions before you commit
Do not ship the first idea. I work through directions on one reference board, each paired with a business card mockup so the identity gets judged at real world size. For my own rebrand that meant three candidates:
The reference board: three directions, business cards, palette, and positioning, side by side.
- Direction A, Minimal and Flat: the bold M paired with "I build websites." on navy. Calm, confident, and the one I shipped.
- Direction B, Typography First: the name set large with the tagline underneath, for moments when the words lead.
- Direction C, Light and Fresh: the same system inverted onto a light blue surface for bright, airy layouts.
Notice that across all three the palette holds steady. That is the test of a flat system: the directions can change while the ingredients stay locked. The positioning line ties it together: Clean. Confident. Timeless. Built on experience. Focused on results.
Ready to take your brand flat?
This is the exact process I run for clients: audit what you have, lock the palette and type, rebuild the templates, then roll the system out across your website, email, and social. The brand style guide shows what the finished system looks like: every lockup, the type scale, color roles, and the construction rules behind the mark.
Let's talk about taking your brand flat
All blog posts