Built for SaaS Identity v1.0
00Cover
Download kit
Document
Identity guidelines
Version
1.0.0, stable
Released
15 October 2026
Owner
Built for SaaS design

Cut from one block.

Built for SaaS designs and ships websites, product UI and brands for SaaS companies that just raised. Our mark is a solid square with two 45° cuts. This guide is the rest of the system, built the same way.

Start reading Download the kit
A solid 112 × 112 block, marked for cutting.Scroll to make the cuts

01

Story & voice

We sell to people who use Linear, Vercel and Stripe before lunch. They notice kerning, they distrust adjectives, and they've raised money on a deadline. The brand talks to them like a senior colleague would.

We design and build 3D and isometric websites for SaaS companies that just raised. Live in 21 days, built to convert.

Architectural

We draw the grid before we draw anything else. Angles are 45° or 90°. Measures are multiples of 8.

Monolithic

Solid shapes, no hairlines. If a detail disappears at 16px, it was never structural.

Engineered

Shipped like software: versioned, measured, on a sprint clock. Our guarantee is a date, not an adjective.

Who we're talking to

Founders, heads of marketing and design leads at Seed to Series B SaaS companies: AI, devtools, fintech, data infrastructure. Ten to 150 people, in the US, UK and EU, usually a few weeks after a round closes.

What they want from us is short: a site that looks like the company they're becoming, shipped before the launch post goes out.

How we sound

  • Say the number. 21 days, $9.5k, 8px. Specifics are the proof.
  • Name the thing. Homepage, pricing page, pitch deck. Never "solutions".
  • One idea per sentence. Short beats clever.
  • Confident, not loud. No exclamation marks, no emoji, no rockets.
brand/voice.md +4 −4
@@ Hero line @@

−We're a passionate team of creative experts crafting stunning digital experiences.

+We design and build SaaS websites. Live in 21 days.

@@ Hook @@

−Unleash your brand's full potential 🚀

+Your Series A site shouldn't look like your seed deck.

@@ Process @@

−Our cutting-edge, AI-powered process delivers amazing results.

+A senior designer leads. An AI production pipeline handles the repetitive parts. You get both speeds.

@@ Call to action @@

−Don't hesitate to reach out!

+Book a 20-minute sprint call.

Approved by brand review. Merge when the copy reads like a person wrote it.

03

Carbon, concrete, signal

Two neutrals do the work. Signal is the 2%: one action, one highlight or one moving piece per view. Click any value to copy it.

Neutral A 45%Neutral B 45%Steel 8%2%

Contrast, measured

Ratios are computed live from the token values (WCAG 2.2). AA body text needs 4.5:1; the mark and large text need 3:1.

Rule that falls out of the numbers: text on signal is always white, never carbon. White on signal is ; carbon on signal is . On carbon, signal text steps up to Signal 400 .

04

Typography

The geometry is the loud part, so the type stays quiet. One grown-up sans for everything people read, and a mono that only appears where something is measured.

Instrument Sans

Headlines, interface, body. Variable: weight 400–700, width 75–100. Open source (OFL).

Geist Mono

Measurements, token names, code, version numbers. Never paragraphs, never headings. Open source (OFL).

Type tester

Your Series A site, live in 21 days.

display

Built to convert

64 / 1.04 / −0.035em / 600
h1

Live in 21 days

48 / 1.08 / −0.03em / 600
h2

Sprint scope and pricing

32 / 1.15 / −0.02em / 600
h3

What you get in week one

22 / 1.3 / −0.01em / 600
body-l

A senior designer leads every sprint. You see work on day three.

19 / 1.55 / 0 / 400
body

We plan the page on an 8-unit grid, then cut away everything that does not help someone decide.

16 / 1.6 / 0 / 400
caption

Figure 4. Homepage hero at 1440 and 390.

13 / 1.45 / 0.005em / 500
mono

v1.0.0 · 160 × 160 · 8√2

12 / 1.5 / 0 / 400
  • Sentence case, always. Headlines, buttons, navigation. Capitals are for names.
  • Two weights in a view. 400 for reading, 600 for structure. 700 is reserved for numbers in decks.
  • Tight on top, open below. Tracking tightens as size grows; body copy stays at 0.
  • Measure 60–72 characters. Longer lines get a second column, not a smaller size.

05

Cut patterns

The square the mark is cut from splits into six parts: the three pieces we keep and the three offcuts we remove. Every pattern is laid from those six parts on the same grid, with the same 8√2 gap. Move across the field; the pieces separate along their cuts.

System
Colourway
Top blockkept
Base blockkept
Launch arrowkept
Diagonal cutoffcut
Level cutoffcut
Wedgeoffcut

Quarry

Kept pieces, rotated in 90° steps, like cut stone on a yard. Our default texture for covers and banners.

Cutline

Every tile keeps everything except the diagonal cut, so the cuts run unbroken across the field. Quiet enough to sit behind a headline in tonal.

Launch

A sparse field of arrows, all pointing the same way. For launches, release notes and anything that ships.

Weave

Top and base blocks turned against each other on a checkerboard. Dense and architectural; best as a border or a crop.

Do

  • Use patterns on big, quiet surfaces: deck covers, banners, Figma covers, section breaks.
  • Crop on a grid line. The field should feel like it continues past the frame.
  • Use the tonal colourway behind any text, at 3:1 or less against the background.
  • Keep signal to one, two or three pieces per view.

Don't

  • Tile the full mark as a wallpaper. Patterns use parts, not the logo.
  • Run a full-contrast pattern behind body copy.
  • Mix two systems in one frame, or change the gap.
  • Rotate a pattern off the 45° and 90° axes.

06

Icons & elements

Icons are drawn on a 24 grid as solid shapes with a 2-unit gap, the mark's cut at icon size. No strokes, no rounded joins. Select one to see it on its grid.

website

Graphic elements

Book a sprint call
The chamferOne 45° corner, cut at 8px, on primary buttons and hero frames. One per component.
Measure calloutsSignal dimension lines in Geist Mono. Used where we show how something is built.
The seamAn 8√2 diagonal gap between two solid planes. Section breaks and image crops.
Live in 21 daysv1.0.0
Status tagsSquare-cornered, 24px tall. A signal square marks something live or shipping.

07

Imagery: solid, isometric, lit from one side

We make 3D and isometric websites, so our own imagery is built the same way: real geometry, extruded and lit, never stock. This is the mark itself, the exact three pieces, extruded on a true isometric grid.

Top face#F7F7F5
Lit side#BFC1C1
Shade side#5E6369
Signal face#2863FB
Signal shade#113EBC

Do

  • True isometric: 30° projection, 45° cuts in plan, light from the upper left.
  • Three face tones from the neutral ramp. Flat fills, no gradients.
  • One signal object per image. It is the thing that ships.
  • Show real product UI on slab faces, set on the 8-unit grid.

Don't

  • Stock photos of people pointing at laptops. Rockets, lightbulbs, AI sparkles.
  • Wireframe meshes, glass, holograms, rainbow gradients.
  • Perspective camera tricks that break the 45° geometry.
  • Generated faces presented as clients or staff.

08

Motion that can be interrupted

Things move like heavy, well-made objects: they start from wherever they are, carry their speed, and settle without a bounce. Press a button twice and the piece turns around mid-flight.

spring(0.5, 1.0)
Position over timeOurs: damping 1.0 Not ours: 0.5
spring.defaultresponse 0.5s, damping 1.0

Anything that moves position: pieces, panels, the progress bar.

spring.quickresponse 0.35s, damping 1.0

Small, frequent things: selection, toggles.

scroll.ramp40% of viewport height

Scroll-linked moves finish over 40vh, so they follow the reader's speed.

fade.reduced160ms ease-out, opacity only

With reduced motion on, nothing travels. States cross-fade.

09

An 8-unit world

The mark sits on an 8-unit grid, and so does everything around it. Press G anywhere on this page to see the grid it's laid out on.

Desktop 144012 col · 24 gutter · 48 margin · 1360 max

Tablet 7688 col · 24 gutter · 32 margin

Phone 3904 col · 16 gutter · 20 margin

Spacing scale

Every value is a multiple of 8, with 4 allowed inside components. Sections breathe at 128 on desktop and 80 on phones.

10

Where the mark lives

Clients meet us in small places: a browser tab, an avatar in a DM, the corner of a Loom. Every frame below is the real spec for that surface. Client names are fictional samples.

Website header1440 × 720
builtforsaas.com
Built for SaaSWorkSprintsPricingJournalBook a sprint call

Taking 2 sprints for November

Websites for SaaS companies that just raised.

3D and isometric sites, live in 21 days, built to convert.

Social avatars400 × 400

X@builtforsaas

LinkedInCompany page

Dribbble, ContraRounded square

Mark at 56% of the avatar, centred on the square, so circle crops never touch it.

LinkedIn banner1584 × 396

3D and isometric websites for SaaS.

Live in 21 days, or your next month is free.
Pitch deck slide1920 × 1080
The problem07

Your Series A site still looks like your seed deck.

21days from kickoff to live
1senior designer on every sprint
3surfaces: site, product, brand
Proposal & invoiceA4
Built for SaaSInvoiceBFS-2026-041
Billed toNorthwind Labs, Inc.
Issued15 Oct 2026
Due29 Oct 2026
ItemAmount
Website Sprint, 21 daysHomepage, pricing, 3 feature pages$14,000
Isometric illustration set6 scenes, source files$2,400
Total$16,400

Live in 21 days or the next partnership month is free.

Figma cover1920 × 960
Ready for dev

Halcyon AI

Website Sprint, handoff v3

Built for SaaS
Loom watermarkbottom right, 40px
2:14 / 6:40
Linear workspaceicon 64 × 64
Built for SaaS

Inbox

My issues

Halcyon sprint

Northwind sprint

BFS-128

Ship Halcyon homepage

Day 19 of 21
BFS-127

Isometric hero, final render

Done
BFS-126

Pricing page copy review

Done
Business card85 × 55 mm, tap to flip
Email signatureplain HTML, 600 wide

Hi Priya, the staging link is up. Pricing and the isometric hero are in; we'll walk through both on Thursday's call.

The Built for SaaS teamWebsites for SaaS companies that just raisedbuiltforsaas.com · @builtforsaas

11

Take the kit

Every file is generated from the same three paths you inspected in chapter 02. SVG for everything; tokens for code.

Changelog

  1. 1.0.015 Oct 2026

    First stable release. R1 3-Piece Arrow locked. Signal moves from orange to Electric Cobalt #2863FB, a sharper, cooler take on the classic SaaS blue that carries white CTA text. Type moves from Geist to Instrument Sans so we stop borrowing a client's typeface. Cut patterns, motion tokens and the application specs added.

  2. 0.3.0Oct 2026

    R1 chosen from the logo exploration. Gaps cleaned to exactly 8√2; the arrow tip lands on the baseline.