00Cover

Cut from one block.

The identity system for Built for SaaS. One square, three cuts at 45°, and the rules that keep them sharp, from a 16px favicon to a Series A pitch deck.

Get the logo kit Open the pattern generator
Document
BFS Brand System
Version
1.0.0
Released
15 Oct 2026
Maintainer
Built for SaaS design
Status
Stable
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
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 lockup: symbol and bfs wordmark
Horizontal Site headers, decks, emailSVG
Name lockup: symbol and Built for SaaS
Full name First contact: proposals, LinkedInSVG
Stacked lockup: symbol over bfs wordmark
Stacked Square formats, merch, coversSVG
App icon, inkApp icon, signal
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

White 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 is Klein Ultramarine: the classic SaaS blue pushed to pure pigment, deep enough to be ours. It marks the one thing to click on each screen, never a background for long copy.

Click any swatch to copy it.

Ratio on every surface

Approximate share of a typical page, deck or banner.

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 blue text, and white (never ink) on a Signal fill.

      
PairText onRatioBodyLarge

    

  







  

    
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.

      

        

        

        

        

        

          
          
          
          
        

      

    

  


  

    
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: #2623F9 · 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 #2623F9 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

          

            
            
            
            
          

        

        

          

          

        

        
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

          

          

        

        
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)

          

        

      

      

      

        
        
        
      

    

  

  

    
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

        
LinkedIn
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 moves from orange to Klein Ultramarine #2623F9, a pigment-deep take on the classic SaaS blue that carries white CTA text at 7.8:1.
  • 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.

  

  

    
Built for SaaS
builtforsaas.com · @builtforsaas
BFS Brand System 1.0.0. Questions go to the design channel.

    
  







Copied