BFS Brand System 1.0

01README.md

What we are, in one breath.

Every asset in this guide serves one sentence. If a slide, banner or reply doesn't move that sentence forward, it's off-brand, however good it looks.

builtforsaas / brand / README.md

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

For: Funded B2B SaaS, Seed to Series B, 10–150 people
Sectors: AI, devtools, fintech, data infrastructure. US, UK, EU
We make: Websites (2D, 3D, isometric, voxel), product UI, brand identity
Promise: Live in 21 days, or the next partnership month is free
Speaks as: The Built for SaaS team. Senior, specific, a little dry

Architectural

Built on a grid you can measure.

Solid

Heavy shapes, no hairlines, nothing fragile.

Engineered

45° and 8 units. Every value has a reason.

Premium

Restraint over decoration. One accent, used rarely.

Ownable

Recognisable from three cuts at 16px.

Voice, linted

Three rules. Paste any draft into the linter to check it.

Specific beats impressive

Numbers, dates and names. If it can't be measured, cut it.

Live in 21 days.

Lightning-fast delivery.

Founder to founder

Talk like the person who has seen fifty launch sites, not like a pitch.

You raised. Your site still says beta.

We empower innovative brands.

Show the work

Point at the Figma file, the staging link, the date. Proof over adjectives.

Staging link is in your Slack.

Our passionate team crafts magic.

voice-lint · draft.md0 problems

Draft copy to lint

02bfs-symbol-r1.svg

Three pieces. One square.

The symbol is a square cut twice at 45°. The cuts leave three pieces and three equal gaps of 8√2. Read it as a letter, an arrow or a kit of parts. It's meant to be all three.

Construction

Click a piece to inspect it. Toggle the layers on the right.

BFS Identity / Symbol / R1 Exact160 × 160

Launch arrow

Layers

Artboard 160, mark 112, margin 24. Every vertex sits on the 8-unit grid except the arrow, which is set by the 8√2 gap.

Clearspace: the artboard

24 units on every side of a 112-unit mark, about a fifth of its width. Export the 160 artboard and nothing can creep in.

Minimum size

Symbol 16px on screen, 6mm in print. Horizontal lockup 72px wide. Below 16px, use the app icon tile.

Always one colour

The three pieces share one fill. Colour separates the mark from the background, never piece from piece.

03lockups/

Lockups and colourways.

Four arrangements, all outlined, all on the same grid. The gap between symbol and type is always 32 units, the width of four grid squares.

Horizontal Site headers, decks, emailSVG

Name lockup: symbol and Built for SaaS — **Full name** First contact: proposals, LinkedInSVG

Stacked Square formats, merch, coversSVG

App icon Favicon, avatars, workspace iconsSVG

Colourways

In order of preference. Signal backgrounds are for one moment per deck, not every slide.

Paper on InkPrimary

Ink on ConcreteLight

Ink on SignalMoment

Signal on InkLaunch only

04pull/12

Changes requested.

Every way we've seen the mark break, reviewed like code. Apply each suggestion to see the fix land.

Use the BFS mark in partner deck #12

Openbrand-review requested changes on 8 lines0 / 8 resolved

Resolve every suggestion to merge.

05tokens/color.json

Mostly material. One signal.

Ink, concrete and paper do the work. Signal orange is the spark you'd see where a blade meets stone. Use it for one thing per screen, never as a background for long copy.

Click any swatch to copy it.

Ratio on every surface

Approximate share of a typical page, deck or banner.

Ink 45

Concrete 35

Paper 12

6

bfs-tokens.jsonDownload

Contrast, computed

WCAG 2.2 ratios, calculated live from the tokens. Signal on Concrete fails for body text, so it's a shape colour on light surfaces. Use Signal Deep for orange text.

Pair	Text on	Ratio	Body	Large

06Archivo + Geist Mono

Quiet type, sharp shapes.

One grotesk, set with restraint: semibold headlines, regular text, tracking that tightens only as size grows. The mark and the patterns carry the personality, so the type doesn't have to shout. Geist Mono appears only where something is measured.

Type tester · Archivo Variable620 · 88px · −0.034em

Live in 21 days.

Width 100

Weight 620

Size 88

Tracking -0.034

Scale

Fluid from 390 to 1440. Line height tightens as size grows.

Display
620 · −3.4%
44–92 / 1.0

Built to convert.

H1
600 · −3%
32–56 / 1.05

Your site still says beta.

H2
600 · −1.8%
22–28 / 1.12

Three weeks from kickoff to live.

Lede
400 · −0.8%
18–21 / 1.5

We design and build 3D and isometric websites for SaaS companies that just raised.

Body
400 · 0
16 / 1.6

Every page ships with a Figma file, a staging link and a date. You'll see progress in Slack before you think to ask for it.

Mono
Geist Mono 400
13 / 1.6

signal: #FF5B1F · gap: 8√2 · v1.0.0

Primary · Google Fonts, OFL

Aa

Archivo Variable

Weight 100–900, set at normal width. Semibold for headlines, regular for reading. Plain enough to disappear, firm enough to stand beside a solid mark.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789 →

Technical · Google Fonts, OFL

{}

Geist Mono

Dimensions, tokens, version numbers and code. Used small and sparingly, like a dimension on a drawing. Never for headlines or paragraphs.

0123456789 #FF5B1F 11.31px
const gap = 8 * Math.SQRT2

07patterns/generate

Patterns cut from the mark.

Four systems, all built from the same parts: the 45° cut, the 8√2 kerf and the 8-unit grid. Pick a format, set the module, then export. Every output is on-brand by construction.

pattern · kerf-field · 1584 × 396Press S to shuffle

LinkedIn banner · 1584 × 396

Pattern

Format

Module 96

Signal 6%

Colourway

The four systems

Click one to load it in the generator.

Use patterns to

Fill large, empty surfaces: banners, covers, slide backgrounds, packaging.
Keep the module at 48 or more so each tile still reads as the mark.
Keep Signal under 10% of the tiles. It marks one direction, not the whole field.
Crop freely. The pattern has no centre and no edge.

Don't

Run copy over Kerf field at full contrast. Use Strata or Monolith behind type.
Rotate tiles by anything other than 90°. The cuts only work at 45°.
Mix two patterns on one surface, or place the logo lockup on top of one.
Recolour individual pieces of a tile. Colour changes whole tiles only.

08icons/24

Solid, square, 45° only.

Icons follow the mark: filled shapes, no outlines, diagonals at 45° and a 2-unit kerf wherever two shapes meet. Drawn on a 24 grid with 3 units of padding.

icon / brand24 × 24

Graphic devices

Three small parts for diagrams, slides and UI.

Measure line

For numbers that matter: timelines, sizes, savings. Signal, 1.5px, with end ticks.

Kerf rule

A section divider that ends in a 45° cut. Replaces hairlines between major sections.

Step arrow

Progress drawn as 45° steps up and to the right, ending in the launch triangle.

09render/isometric

Built objects, not stock.

Our imagery is the work itself: isometric, extruded, lit from the top left. When we illustrate, we build from blocks with real thickness and real cuts. Drag the mark to turn it.

viewport · bfs-r1 · isometric 30°0°

Drag to rotate · release to settle

Object

Explode 0

Depth 32

Material

Light from top left, three tones per material, no gradients, no gloss. Shadows are flat shapes on the 30° floor.

Three directions

Same renderer, same rules.

Kit of parts

Pieces apart, showing how a thing is built. Case studies, process.

Monolith

One heavy object, low and close. Hero images, covers.

Launch

Something lifting off the grid. Announcements, launches.

Isometric 30°, top-left light, flat tones.
Real product UI on extruded panels when showing work.
Concrete and ink materials. Signal on one object.

Stock photos of people pointing at laptops.
Glossy 3D, glass blobs, neon or purple gradients.
Perspective cameras. Everything stays parallel.

10motion.spring

Heavy things settle.

The mark is solid, so it moves like something with weight: critically damped springs, no bounce, no overshoot. Pieces travel along the cuts and every animation can be interrupted mid-flight.

timeline · assemble0 ms

━ damping 1.0 (ours)┅ damping 0.5 (not this)

Response 0.50s

damping: 1.0Settle, never bounce

Response 0.45–0.55s. Bounce reads as a toy; we sell solid things. The curve arrives fast and lands without overshoot.

path: 45°Move along the cuts

Pieces slide along their own edges: diagonally along the 45° cut, vertically through the horizontal kerf. Never across them.

interruptible: trueFollow the hand

Scroll-linked motion ramps over 40% of the viewport, so it tracks the reader's speed. Any animation can be grabbed mid-flight and keeps its velocity.

11grid.css

Everything lands on 8.

The mark is drawn on an 8-unit grid, so the layout is too: 12 columns, 16px gutters, 1120px content width, and spacing in steps of 8. Press G anywhere to check this page against it.

Mobile: 4 columns, 20px margins, 16px gutters. Tap targets at least 44px.

12applications/

On every surface a client sees.

Ten touchpoints, from the first LinkedIn view to the invoice. Keep scrolling; the row moves with you.Swipe the row to see them all.

bfsWorkProcessBook a call

3D websites for SaaS that just raised.

Live in 21 days, or your next partnership month is free.

Website headerHorizontal lockup, 24px mark

Slack, X

Launch week

Social avatarsMark at 62% of the tile

Built for SaaS3D websites for funded SaaS · live in 21 days

LinkedIn bannerLive from the pattern generator

BFS × Partner03 / 14

From kickoff to live in 21 days.

21dto launch3review rounds1Slack channel

Pitch deck slideInk, one Signal number

INV-0042
15 Oct 2026

Invoice

Website, 3D heroSprint 1

Product UI pagesSprint 2

Launch + handoffSprint 3

DueNet 14

Proposal and invoicePaper, mono figures

Acme / Website v2

Built for SaaS · Sprint 2 of 3

In review

Figma coverStrata pattern, status chip

Loom watermarkPaper, 72% opacity, bottom right

Built for SaaS

BFS-118Hero isometric renderSprint 1

BFS-121Pricing page statesSprint 2

BFS-124Launch checklistSprint 3

Linear workspaceSignal tile, ink mark

Built for SaaS

builtforsaas.com
@builtforsaas
3D websites for funded SaaS

Business cards85 × 55mm, pattern back

Staging link is in your Slack. We go live Thursday.

The Built for SaaS team3D websites for funded SaaS · builtforsaas.com

Email signature40px tile, one link

01 / 10

Scroll

13npx bfs-brand

Take the kit.

Every file is outlined SVG on the 160 artboard, clearspace built in. Click a line to download it. Use the tokens file in Figma Tokens, Style Dictionary or your own CSS.

~/brand — zsh

❯ npx bfs-brand pull --all

Fetching BFS Brand System 1.0.0 (13 files)

14CHANGELOG.md

How we got here.

The system is versioned like software. Propose changes the same way: open an issue, show the before and after, and ship it as a release.

1.0.0Latest15 Oct 2026

The system ships.

Palette evolved: Concrete replaces Cream; Signal #FF5B1F replaces #E4572E for more energy on Ink.
Archivo becomes the brand face, set quietly at normal width and semibold; Geist Mono stays for measurements only.
Added the four pattern systems, the 24-grid icon set, motion spec and this guide.

0.3.0Logo round

R1 Exact chosen.

R1 Exact over R3 Soft corners and R4 Blunt tips: sharp points survive at 16px and match the "engineered" trait.
Gap fixed at 8√2 so both cuts read as one width.

0.2.0Exploration

3-Piece Arrow over Tag B.

The arrow version holds B, F and S without spelling them out, and points up and right.

0.1.0Positioning

One sentence first.

3D and isometric websites for SaaS companies that just raised. Live in 3 weeks, built to convert.