12 SaaS brand identity examples, annotated (2026)

Most lists of SaaS branding examples judge the homepage. That is the surface a brand shows first and the one it has to hold least: a marketing page is redesigned every eighteen months, while the favicon, the sidebar and the error copy live for years. So this list scores twelve identities on the product side — the 16-pixel mark, dark mode, the handoff to engineering, the written voice — and says what a founder can take from each.

Two ground rules. Every fact here comes from the company’s own brand page, design system, changelog or blog, linked in each entry; where a company does not publish something (a typeface, a hex code, a reason for a rebrand) we say “unstated” rather than guess. And none of these identities were made in five weeks: they were built in-house, over years, by teams with a designer on staff. What a studio can do in five weeks is in brand identity for SaaS, the founder’s guide; the deliverables each example is mapped to are the twelve items of the SaaS brand kit.

How we scored them

Five tests, the same ones an identity has to pass before it leaves our studio:

1. 16 px. Does the mark survive as a favicon, an app icon and a sidebar chip without a simplified second version? If the brand page publishes a minimum size, we hold the favicon to it.
2. Dark and light. Does the product ship both, and was the palette chosen for both, or was dark mode retrofitted?
3. Tokens. Does the identity reach engineering as tokens or a public design system, or does it stop at a PDF?
4. Voice. Is there a recognisable way of writing in the surfaces that ship every week — changelog, docs, error messages?
5. Genre default. Does it escape white background, geometric sans, purple gradient? “Partly” means the ingredients are there but held by a decision.

We also note the wordmark-versus-symbol strategy, because that single decision predicts the 16 px result.

1. Vercel — a mark you can type

The identity. A solid black equilateral triangle — usable as the Unicode character ▲ — and a logotype in Geist, Vercel’s own typeface, published on npm and Google Fonts as Geist Sans, Mono and Pixel. Black and white throughout; the favicon is the white triangle on a black square. The whole system lives in public at vercel.com/geist: ten colour scales with P3 variants, --ds-gray-100…1000 variables, components, and the logos themselves as React imports so nobody re-traces the triangle. The identity dates from the 2020 rename from ZEIT, which the company tied to its new focus on previewing and shipping sites.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✓ · voice ✓ (a calm, bylined changelog; the design page states the register as “Never manufacture confidence through hype”) · genre default: no.

Steal this. A mark that is a keyboard character survives any size and any surface. Then ship the logo as code.

Kit item. 10 — product-UI token bridge. Vercel’s is the reference implementation.

2. Linear — the theme is three inputs

The identity. A logomark drawn from four ascending diagonal strokes that thicken towards the top right, forming a circle; the brand page says the wordmark has the stronger recognition, and supplies a third icon variant for chips. The colour is a subtle desaturated blue with published neutrals (Mercury White, Nordic Gray); the 2026 refresh moved the defaults from cool blue towards a warmer gray, explained here. Light, dark, system and user-built themes all come from one model: an internal theme generator that reduces 98 variables to three inputs — base colour, accent, contrast. Typeface unstated; no public tokens.

Scorecard. 16 px ✓ (white logomark on a black tile) · dark + light ✓ · tokens ~ (the three-input model is documented, not exported) · voice ✓ (terse, categorised changelog; essay titles as provocations) · genre default: no.

Steal this. Define your theme as three inputs and derive the rest. Two default modes and every user theme become the same system.

Kit item. 3 — colour tokens with usage ratios.

3. Supabase — one colour, one job

The identity. A green lightning bolt built from two offset angled halves, plus a wordmark; the brand assets ship the logo in light and dark versions. The dashboard is dark-first with Light, Classic dark, Deep dark and System themes. The rule that makes the palette work is one line in their design writing: use brand green only for the CTA. The design system is public — Radix-style scales as --colors-{name}1..12, Figma variables piped into CSS custom properties — and the design blog explains the thinking. Typeface unstated.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✓ · voice ✓ (blunt, categorised changelog: Breaking Change, Bug Fix) · genre default: no.

Steal this. Give the brand colour one job and split “brand as text” from “brand as fill” so it stays readable in light mode.

Kit item. 3 — colour tokens with usage ratios, done as a prohibition rather than a percentage.

4. Raycast — three hexes and a rule

The identity. Logo and wordmark supplied separately, each in dark and light versions, on a press page that publishes exactly three colours: Brand Red #FF6363, Background #151515, Background Alt #202123, with the note that dark backgrounds are preferred. The favicon is a coral rotated square with diagonal hatch strokes on a near-black tile; the app icon is a keycap. The 2022 redesign replaced the app icon because the round flat one felt dated after macOS Big Sur; the 2026 rewrite went further. Typeface unstated; no brand tokens, though the extension API is presented as a design system for third-party UI.

Scorecard. 16 px ✓ · dark + light ✓ (dark preferred, light shipped) · tokens ~ · voice ✓ (emoji-headed changelog, launch posts written like letters) · genre default: no.

Steal this. A brand kit can be three hexes plus one rule and still constrain everyone. Most kits are forty pages that constrain nobody.

Kit item. 12 — usage rules, one page of do and don’t.

5. Resend — the symbol is a letter

The identity. A single-stroke R whose leg curls into a sending motion, and a wordmark that replaces its own R with that symbol — so favicon and logo are literally one drawing. The brand page names the palette in materials (Eggshell, Iron, Stone, Zinc) rather than hex codes and states the typefaces: ABC Favorit for display, Inter in the product, Domaine Display for editorial. Dark-mode first; light mode arrived in January 2024. The July 2025 rebrand post is unusually candid: the first logo had been made in five minutes and no longer matched the company.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✗ (typefaces and colour names only) · voice ✓ (every API error ships with a suggested action; changelog titles are bare nouns) · genre default: no.

Steal this. Make the symbol a letter of the wordmark. You get one mark that works at 16 px and at billboard scale without a second logo.

Kit item. 1 — primary wordmark and lockups.

6. Attio — write down which mark goes where

The identity. The brand page is mostly rules: the wordmark (logo plus name) is the first choice wherever the layout has room; the logo alone is for avatars, app icons, favicons and logo grids; never the wordmark without the logo. The favicon is an angular black mark of two slanted strokes that reads as an A and stays crisp at 32 px. Colour is unstated — assets ship in black and white — and the product offers light, dark and system modes plus a user-chosen accent, with changelogs through 2026 still tuning dark mode. Partner app icons get their own spec: they must work at 14 px, light and dark.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✗ · voice ✓ (dry one-line changelog subtitles) · genre default: partly — white canvas and a grotesk, held by a flat accent and a serif for quotes.

Steal this. Attio’s whole brand page is one placement rule and one prohibition. That is more useful than most forty-page books.

Kit item. 2 — monochrome and inverse variants, with the placement rule attached.

7. Cal.com — grayscale on purpose

The identity. The brand page says the logo is simply “Cal.com” set in Cal Sans, a custom open-licensed typeface; the icon is the letters “Cal” on a black rounded square and doubles as the favicon (clean at 32 px, thin at 16). The brand is designed to be grayscale because customers white-label the booking page: black and white sit under any accent a customer brings. That decision is engineered, not just stated — design.cal.com and the repo’s tokens.css expose --cal-brand and per-theme --cal-bg-* variables, and app theme and booking-page theme are set separately with contrast warnings. The rename from Calendso is documented.

Scorecard. 16 px ~ · dark + light ✓ · tokens ✓ · voice ✓ (self-aware — the logo page’s own instruction is to make the logo smaller) · genre default: partly; zero colour is its own answer to the gradient.

Steal this. If customers re-skin your product, choose a neutral palette and expose it as CSS variables from day one.

Kit item. 10 — product-UI token bridge.

8. Notion — colour lives outside the app

The identity. A black-outlined three-dimensional block with a serif N on its face, plus a wordmark; the app icon is the same block, unchanged. The usage guidelines say the app refrains from bright colour; the 2024 campaign was the first to add bold yellows, blues and reds, and the post about it gives the reason: without colour it is hard to stand out in advertising. The product is light-first with light, dark, system and, since July 2026, a high-contrast mode. Typeface unstated; no public tokens.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✗ · voice ✓ (short, imperative release notes with a wink) · genre default: no — grayscale UI plus hand-drawn illustration.

Steal this. Keep the product monochrome so it stays the user’s canvas, and spend colour where it competes for attention: ads, out-of-home, social.

Kit item. 6 — graphic device or illustration language.

9. Figma — the typeface is the system

The identity. Five rounded shapes in a two-by-three grid — red, orange, purple, blue, green — and a wordmark; the favicon is the symbol alone. The September 2024 rebrand is explained in the company’s own words: move past a visual language rooted in vector vernacular (static cursors, heavy black outlines) as the audience grew beyond designers. It came with Figma Sans, a custom variable typeface with optical sizes plus Condensed, Mono and Hand cuts, replacing Whyte after five years. The product ships light, dark, system and an enhanced-contrast mode. No public tokens, though the site was rebuilt on variables.

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✗ (public) · voice ~ (release notes are flat and instructional) · genre default: no — primary-colour primitives, not lavender.

Steal this. Cut the wordmark from your own typeface, delivered as a variable font, so sub-brands derive from the same file instead of a new logo.

Kit item. 4 — typography pairing and scale.

10. PostHog — the brand is a package

The identity. A geometric hedgehog logomark and a wordmark, with a published floor: the full logo never below 80 px, the logomark alone for favicons and app icons. Colours are published in the handbook — red #F54E00, blue #1D4AFF, a tan background #EEEFE9 — with light mode primary and light, dark and system in the app. The whole kit ships as code: @posthog/brand on npm exposes colours as CSS custom properties, the logo is a parametric React component, and Figma syncs to GitHub by an action. The tone page keeps a table of banned words. Their own summary of the visual identity is three words: “Handcrafted beats generated.”

Scorecard. 16 px ✓ · dark + light ✓ · tokens ✓ · voice ✓ · genre default: no — the handbook calls gradients a cliché of generic SaaS design and uses a mascot and hard shadows instead.

Steal this. Publish the logo as code with a mono / gradient / print prop, so nobody ever exports the wrong PNG.

Kit item. 7 — voice and vocabulary one-pager, plus 10.

11. Stripe — wordmark only, and the favicon is a fragment

The identity. A wordmark and no symbol. The brand assets page names the colours as slate and blurple on light backgrounds and white on dark, without hex codes; typeface unstated. The favicon is the interesting part: a white slanted parallelogram — a cropped letter block — on a violet-blue tile, so the “symbol” exists only where a symbol is required. Stripe’s own brand tokens are not public, but the customer-facing Appearance API exposes colorPrimary, colorBackground and a documented dark-mode recipe. Marketing is light-first; the docs carry dark-mode markers.

Scorecard. 16 px ~ (the fragment works, the wordmark cannot) · dark + light ~ · tokens ~ (customer-facing only) · voice ✓ (plain, second-person error copy) · genre default: partly — this is the origin of blurple-and-gradient, held by slate and by having no symbol to gradient.

Steal this. If you go wordmark-only, design the favicon as a cropped fragment of the wordmark, not a second logo.

Kit item. 11 — OG and meta images; the favicon is the smallest of them.

12. Lattice — a published minimum, and a favicon below it

The identity. “The Nest” — three interlocking chevrons in teal, yellow and coral — with a logotype in Matter. The brand site publishes what most do not: the primary Forest 400 #16B8A2, a secondary wheel that includes purple, and explicit sizing rules — under 88 px use the Nest alone, and the Nest itself has a 30 px minimum. Light-first; the 2023 site refresh for the HRIS launch moved from a soft, limited palette to a saturated one. Brand guidelines are a public PDF; there are no code tokens.

Scorecard. 16 px ✗ — the rules are honest, and a 16 px favicon sits below the brand’s own floor · dark + light ~ (a dark product sidebar; user dark mode unverified) · tokens ✗ · voice ✓ (conversational, optimistic, by their own principles) · genre default: partly.

Steal this. Publish minimum sizes and a swap rule, then check every real surface against them. The rule is only useful if the favicon passes it.

Kit item. 12 — usage rules; Lattice shows why they need a test case.

Patterns across the twelve

• Monochrome plus one accent is the default of the good ones. Vercel, Notion, Cal.com, Attio and Resend are black-and-white at the core; Supabase and Raycast add exactly one colour with a stated job. The multicolour identities (Figma, PostHog, Lattice) earn it with a system: primitives, a mascot, a published wheel.
• The 16 px problem has four solutions. A mark that is a character (Vercel), a symbol that is a letter of the wordmark (Resend), a cropped fragment of the wordmark (Stripe), or a mascot with a published floor (PostHog). The ones without a decision — a wordmark alone, or a primary mark with a 30 px minimum — pay in the browser tab.
• Dark-first is normal for developer tools. Supabase, Raycast and Resend chose their palettes for dark surfaces and shipped light later or alongside. Notion, light-first, added a high-contrast mode years after dark mode.
• The brands that reach the product are the ones that published tokens. Vercel, Supabase, Cal.com and PostHog treat the identity as a package engineers install. Everyone else has a PDF and a Figma file, which is where the second, unofficial brand inside the app usually starts.
• Voice lives in the changelog. Nobody here has a “tone of voice” page that matters more than their release notes: Linear’s categories, Resend’s suggested actions, Raycast’s emoji headers, PostHog’s banned words.

The genre default, and how these escaped it

The genre default is a white page, a geometric sans, a lavender-to-blue gradient behind a product screenshot. It is not ugly; it is what you get when nobody decides. Stripe is where the look came from, and even Stripe holds it with slate and a wordmark-only mark. PostHog’s handbook names gradients as a cliché. The escapes on this list were never a wilder gradient: they were one colour with one job (Supabase), no colour at all (Cal.com, Notion), a character as a mark (Vercel), or a mascot (PostHog). If your identity would still look like itself with the gradient removed, it has passed.

Three questions for your own identity

1. Open your product in a browser tab next to five competitors. Can you find yours by the favicon alone? If you need to read the title, the 16 px test failed.
2. Switch the product to dark mode. Does the brand colour still read as text and as a fill, or did it turn into a different, unofficial palette? If the second, the palette was chosen for the marketing page.
3. Ask an engineer where the brand colour is defined. If the answer is a Figma file or a PDF rather than a variable, the identity has not reached the product yet.

Two wrong answers out of three is the profile we see in most audits, and the fix is the system, not the logo. The 20-item brand audit checklist walks the longer version of the same tests without an email gate.

FAQ

How were these twelve SaaS brand identities scored? On the surfaces a product actually ships, not the marketing site: whether the mark survives at 16–24 px as a favicon and app icon without a simplified second version; whether the product works in dark and light mode; whether the identity reaches engineering as tokens or a public design system; whether there is a recognisable written voice in docs, changelogs and error copy; and whether it escapes the genre default of white background, geometric sans and a purple gradient.

What makes a good SaaS brand identity? It renders at 24 px next to a notification badge and at hero scale without redrawing; it works in dark and light mode by default; it hands colour, type, spacing, radius and motion to engineering as tokens; it has a voice with do / do-not examples for product copy; it leaves room for new product lines and co-branding; it is distinguishable from the genre default in a tab strip of competitors; and it survives a handoff twelve months later without the original designer.

Wordmark or symbol — what does a SaaS startup actually need? A wordmark is enough for the marketing site and the sales deck. The moment the product ships you need something that reads at 16 px in a browser tab, a dock, a notification and a sidebar collapse state — which is a symbol or a monogram. Most of the identities on this list solve it with a geometric symbol plus a wordmark, and the ones that skip the symbol pay for it in the favicon.

Does a B2B SaaS brand need dark mode? If the product has a dark mode, the brand does. Developer tools and data products spend most of their life in dark UI, so a palette chosen only for a white marketing page will produce a second, unofficial brand inside the app. Choose the palette for both from day one; retrofitting dark mode is where most identities lose their colour.

How much does a SaaS brand identity like these cost? The identities above were built by in-house teams over years. A focused identity from a studio — wordmark, palette, type, one application surface — runs $6k–$18k at Funky Rabbit; the full five-week system with UI tokens, marketing kit and brand book sits at the top of that range, and a rebrand of a live SaaS is $25k–$50k. The same numbers are on the pricing page for every visitor.

---

For rebrand events rather than current identities, six SaaS rebrands that worked is the companion post. If you want the same five tests run on your identity, send a URL for a free 15-minute audit — we will tell you which test fails first and whether it is a logo problem or a system problem. When it is the system, the SaaS branding agency engagement is the five-week version: logo, palette, type, voice and UI tokens, handed to engineering as code.