Production Spec

Builders Generation
Brand Guide

Rendered directly from the repo source guide so the site view matches the versioned document.

Builders Generation Brand Guide

Version 1.1 Last updated: April 8, 2026

This document is the production-ready brand specification for Builders Generation. It is intended to guide web design, proposals, print collateral, business cards, and future Figma work.

1. Brand Core

Brand Name

  • Primary name: Builders Generation
  • Approved short form: BuildersGen
  • Domain reference: buildersgen.com

Use Builders Generation in headlines, proposals, and formal company references. Use BuildersGen only where space is constrained, such as navigation, social handles, and compact lockups.

Positioning

Builders Generation is an advanced additive manufacturing partner for robotics, drones, industrial sensing, and engineering hardware teams that need parts to fit real environments, survive real loads, and get deployed fast.

Brand Promise

Engineering materials. Measured workflows. Hardware that fits.

Mission

Turn real-world geometry, engineering requirements, and advanced polymers into deployable hardware with less guesswork and better fit.

Audience

  • Robotics startups and integrators
  • Drone and autonomy teams
  • Industrial sensing and controls teams
  • Procurement and operations leads evaluating low-volume manufacturing partners
  • Engineers who need a credible rapid-manufacturing vendor, not a hobby-print shop

Brand Attributes

Builders Generation should feel:

  • Precise
  • Industrial
  • Premium
  • Technically credible
  • Calm under pressure
  • Deployment-focused

Builders Generation should not feel:

  • Playful
  • Trend-driven
  • Hype-heavy
  • Soft corporate
  • Generic startup

2. Messaging and Voice

Voice Principles

  • Write like an engineer who knows how to communicate clearly.
  • Lead with capability, not adjectives.
  • Prefer measured claims over broad promises.
  • Make material and process decisions sound deliberate.
  • Keep sentences crisp and specific.

Tone

  • Direct
  • Confident
  • Technical
  • Controlled
  • Helpful

Avoid

  • "Disruptive"
  • "Revolutionary"
  • "Game-changing"
  • "Cutting-edge" unless tied to a concrete capability
  • "Best-in-class" without proof
  • Casual slang on customer-facing materials

Preferred Language

  • "Engineering materials"
  • "Field-ready hardware"
  • "Production-minded prototyping"
  • "Measured before we printed"
  • "Designed for fit, heat, impact, and deployment"
  • "Advanced additive manufacturing"
  • "Material selection based on performance, not convenience"

Messaging Pillars

1. Fit Starts With Measurement

Builders Generation does not treat geometry as a guess. The process begins with measured environments, real interfaces, and actual constraints.

2. Materials Are an Engineering Decision

Every polymer should be chosen for heat, stiffness, chemical resistance, impact, wear, or weight. Material choice is part of the design outcome.

3. Fast Does Not Mean Casual

Rapid manufacturing should still look disciplined. The brand must communicate speed with rigor, not speed with looseness.

4. Built for Hardware Teams

The company is not selling decoration or novelty prints. It serves teams building drones, robotics, enclosures, fixtures, mounts, jigs, and deployment hardware.

Sample Headlines

  • Hardware. Deployed.
  • Engineering materials for real environments.
  • Measured workflows. Better fit.
  • Advanced additive manufacturing for hardware teams.
  • Designed for fit, heat, load, and field use.

3. Visual Direction

Visual Principle

The brand should feel like a mix of industrial editorial design and technical documentation:

  • warm, restrained surfaces with a bone-white paper tone
  • strong contrast between headings and supporting text
  • precise alignment
  • minimal ornament
  • one sharp accent color (Signal Orange) used with discipline
  • frosted glass cards and subtle radial glows for depth

Design References

The visual language should suggest:

  • aerospace documentation
  • premium industrial tooling catalogs
  • advanced robotics launch materials
  • material-science editorial layouts

It should not suggest:

  • consumer lifestyle branding
  • bright startup SaaS dashboards
  • cyberpunk neon
  • playful maker culture

4. Logo System

Primary Lockup

The preferred wordmark is Builders Generation or the compact lockup BuildersGen set in the display typeface with a strong, tight, engineered rhythm.

Symbol Direction

If a symbol is used, it should be based on measured geometry:

  • hexagonal or sectional forms
  • sensor-origin dots
  • line-of-sight or field-of-view geometry
  • structural outlines

Do not use:

  • mascot marks
  • 3D-printer nozzle icons
  • generic lightning bolts
  • gear icons
  • cheap tech swooshes

Clear Space

Minimum clear space around the logo equals the cap height of the B in Builders.

Minimum Sizes

  • Digital horizontal lockup: 140 px minimum width
  • Print horizontal lockup: 1.5 in minimum width
  • Symbol only: 24 px digital, 0.35 in print

Approved Colorways

  • Obsidian logo on Bone White
  • Bone White logo on Obsidian
  • Graphite logo on very light neutral stock

Unapproved Treatments

  • Gradients inside the logo
  • Drop shadows
  • Outlines added to the wordmark
  • Stretching or condensing
  • Mixed accent colors
  • Placing the logo over busy photos without a grounding panel

5. Color Palette

Primary Palette

NameHexRGBSuggested Use
Obsidian#0B0F1411, 15, 20Primary background, wordmark on light stock
Bone White#F5F1EA245, 241, 234Paper tone, light surfaces, reverse text context
Graphite#1A1F2726, 31, 39Secondary dark surfaces, panels, nav backgrounds
Alloy Gray#66707C102, 112, 124Body copy support, lines, secondary labels
Signal Orange#D45B2C212, 91, 44CTAs, callouts, separators, painted edge detail
Sensor Teal#1FA6A831, 166, 168Data accents, diagrams, technical tags only

Extended Support Neutrals

NameHexSuggested Use
Steel Mist#A9B2BCSecondary captions, subtle dividers on dark surfaces
Machine Gray#3A434DBorders, tables, section rules
Workshop Sand#E7E0D5Alternate light paper tone, interior document blocks

Usage Ratio (Web)

  • 60-65% Bone White and Workshop Sand (page backgrounds, cards, sections)
  • 15-20% Obsidian and Graphite (heading text, footer, dark overlays)
  • 8-10% Alloy Gray and Steel Mist (body text, labels, borders)
  • 5-8% Signal Orange (CTAs, accents, gradient text, hover states)
  • 0-2% Sensor Teal (technical tags, data accents)

Usage Ratio (Print)

  • 60-65% Obsidian and Graphite
  • 20-25% Bone White and Workshop Sand
  • 8-10% Alloy Gray and Steel Mist
  • 3-5% Signal Orange
  • 0-2% Sensor Teal

Color Rules

  • Signal Orange is the primary emphasis color.
  • Sensor Teal is not a co-brand color. Use it only for technical notation, diagrams, or selected data cues.
  • Do not combine Orange and Teal at equal visual weight.
  • Do not introduce bright blues, purples, or unrelated greens into branded collateral.

6. Typography System

Approved Typeface Stack

  • Display: Syne
  • Body: DM Sans
  • Technical/Mono: Space Mono

This stack fits the brand because it balances industrial personality, modern clarity, and technical precision.

Display Typeface: Syne

Use for:

  • headlines
  • section titles
  • proposal covers
  • business card names
  • major calls to action

Approved weights:

  • 600
  • 700
  • 800

Rules:

  • Tight tracking
  • High contrast with lots of surrounding space
  • Avoid small long paragraphs in Syne

Body Typeface: DM Sans

Use for:

  • body copy
  • UI labels
  • supporting paragraphs
  • document detail text

Approved weights:

  • 400
  • 500

Rules:

  • Default body size on web: 16 px
  • Default body leading: 1.55 to 1.7
  • Avoid overly light weights in production materials

Mono Typeface: Space Mono

Use for:

  • material callouts
  • dimensional labels
  • metadata
  • technical captions
  • proposal headers and reference codes

Approved weights:

  • 400
  • 700

Rules:

  • Uppercase for tags and labels
  • Letterspacing between 0.06em and 0.12em
  • Use sparingly

Web Type Scale

RoleTypefaceWeightSizeLine Height
Display XLSyne80072 px0.95
Display LSyne80056 px0.98
H1Syne70044 px1.0
H2Syne70036 px1.05
H3Syne70028 px1.1
H4Syne60022 px1.15
Body LDM Sans40018 px1.65
Body MDM Sans40016 px1.6
Body SDM Sans50014 px1.55
MetaSpace Mono40012 px1.4
LabelSpace Mono70011 px1.3

Print Type Scale

RoleTypefaceWeightSize
Proposal Cover TitleSyne80030-40 pt
Section HeaderSyne70018-24 pt
SubheadSyne60012-16 pt
Body CopyDM Sans4009.5-11 pt
Small DetailDM Sans5008-9 pt
Technical MetaSpace Mono4007.5-8.5 pt

7. Layout and Composition

Grid

  • Web: 12-column grid
  • Proposal/document layouts: 6-column or 12-column grid
  • Default desktop content width: 1200-1320 px
  • Default printed document margin: 0.65-0.85 in

Spacing Rhythm

Use an 8 px base system on screen:

  • 8
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96

Use a precise, measured rhythm. Avoid random in-between spacing.

Corners and Lines

  • Corners: mostly square or lightly rounded
  • Button radius: 4 px
  • Card radius: 8 px maximum
  • Rule lines: thin, precise, often 1 px

Avoid overly soft rounded shapes.

8. Image Direction

Photography

Preferred subjects:

  • advanced printed parts
  • carbon-fiber textures
  • machine details
  • workholding and tooling
  • robotic assemblies
  • enclosures and structural hardware
  • material close-ups

Preferred treatment:

  • high contrast
  • controlled crops
  • quiet backgrounds
  • detail-led compositions

Avoid:

  • smiling office culture imagery
  • generic white-collar stock photos
  • exaggerated neon VFX
  • overly saturated consumer product shots

Graphic Elements

Approved motifs:

  • grids
  • measurement ticks
  • sectional outlines
  • coordinate marks
  • alignment rules
  • subtle technical annotation

Do not over-layer decorative graphics. One or two systems are enough.

9. Digital Brand Tokens

The following CSS custom properties are defined in app/globals.css and used throughout the site:

:root { --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'Space Mono', monospace; --color-bg: #f5f1ea; --color-card: #fffdf9; --color-surface:#e7e0d5; --color-obsidian: #0b0f14; --color-graphite: #1a1f27; --color-orange: #d45b2c; --color-orange-dark: #b04a22; --color-teal: #1fa6a8; --color-steel: #66707c; --color-line: #3a434d; --color-body: #0b0f14; }

Tailwind tokens in tailwind.config.ts:

TokenHexMaps to Brand Color
deep-slate#0B0F14Obsidian
mid-slate#1A1F27Graphite
tech-cyan#D45B2CSignal Orange (legacy name)
accent-teal#1FA6A8Sensor Teal
hot-amber#B04A22Signal Orange Dark
steel#66707CAlloy Gray

Button Guidance

  • Primary button (.btn-primary): Signal Orange background with white text, lift on hover
  • Secondary button (.btn-outline): translucent white with Obsidian text and subtle border, orange accent on hover
  • Never use soft gradients as the default button treatment

10. Stationery System

Letterhead

Format

  • US Letter: 8.5 x 11 in
  • A4 international variant: 210 x 297 mm
  • Bleed: none required for standard office print

Layout

  • Top margin: 0.75 in
  • Side margins: 0.7 in
  • Bottom margin: 0.65 in
  • Logo aligned top left
  • Contact block aligned top right or bottom left depending on document type

Typography

  • Company name: Syne 12-14 pt
  • Contact details: DM Sans 8.5-9 pt
  • Document metadata: Space Mono 7.5-8 pt uppercase
  • Body copy: DM Sans 10-11 pt

Visual Treatment

  • Bone White base
  • Obsidian logo and headings
  • One thin Signal Orange rule, max 1 per page header/footer system
  • Sensor Teal only in spec or reference diagrams, not in the main brand frame

Continuation Sheet

  • No oversized logo repeat
  • Small wordmark or symbol only
  • Page number in Space Mono
  • Reference/project ID in header or footer
  • More whitespace than the first page

Envelope Spec

Formats

  • US #10: 9.5 x 4.125 in
  • DL international variant: 220 x 110 mm

Layout

  • Return address in top left
  • Optional thin Signal Orange strip on flap interior or edge
  • Bone White stock recommended

Proposal Cover

Layout

  • Dark Obsidian or Graphite field
  • Large Syne title
  • One hero technical image or geometry panel
  • Minimal secondary copy
  • Contact details small and quiet

Content Hierarchy

  1. Proposal title
  2. Client/company name
  3. Date and reference code
  4. Prepared by Builders Generation

Quote / Capability Sheet

  • Bone White document body
  • Strong title at top
  • Fine rule separators
  • Tables in clean Graphite/Alloy Gray
  • Space Mono for part numbers, material names, and revision markers

Invoice / Document Header

  • Small compact wordmark
  • High legibility first
  • Minimal branding weight
  • Use structure and clarity over decoration

Paper and Finish Recommendations

  • Everyday stationery: 100-120 gsm premium uncoated warm white stock
  • Proposal covers: 270-350 gsm matte stock
  • Avoid glossy stock for core brand materials
  • Prefer tactile, quiet finishes over visual flash

11. Business Card Specification

Format

  • Standard US: 3.5 x 2 in
  • International variant: 85 x 55 mm
  • Bleed: 0.125 in on all sides
  • Safe area: 0.125 in inside trim

Recommended Stock

  • 28 pt to 32 pt premium matte
  • Soft-touch laminate optional
  • Painted edge optional in Signal Orange

Primary Front Layout

Hierarchy

  1. Logo or wordmark
  2. Person name
  3. Title
  4. Email
  5. Website
  6. Phone if needed

Styling

  • Background: Bone White or Obsidian
  • Name: Syne 10.5-12 pt
  • Title and contact: DM Sans 7.5-8.5 pt
  • Optional metadata or divider: Space Mono 6.5-7 pt

Back Layout Options

Choose one:

  • Symbol only
  • Technical grid with small wordmark
  • Short statement such as Engineering materials for field-ready hardware.

Do not repeat full contact details on the back unless there is a specific business reason.

Preferred Card Directions

Option A: Bone Front / Obsidian Back

  • Front: Bone White with Obsidian wordmark and details
  • Back: Obsidian with Bone White symbol or statement
  • Best all-around choice

Option B: Obsidian Front / Bone Back

  • Front: darker and more premium
  • Back: cleaner and easier to write notes on

Alignment Rules

  • Use left alignment
  • Keep generous negative space
  • Do not center every element
  • Do not use more than one accent line or one accent field

Copy Template

Full Name Title name@buildersgen.com buildersgen.com +1 000 000 0000

12. Brand Application Rules

Do

  • Use dark, grounded, high-contrast layouts
  • Keep typography bold and disciplined
  • Use Signal Orange intentionally
  • Use engineering and material imagery
  • Let whitespace do real work

Do Not

  • Use more than two accents in one composition
  • Turn the brand into a glossy consumer tech look
  • Over-round cards, buttons, or containers
  • Use loud gradients as a default visual tool
  • Mix casual language with highly technical claims

13. Immediate Implementation Priorities

If this brand guide is adopted, the next practical moves should be:

  1. Replace body font Inter with DM Sans on the site.
  2. Update shared color tokens to the palette defined above.
  3. Standardize CTA usage so Signal Orange appears only where action matters.
  4. Bring the /branding page into alignment with this guide.
  5. Use this document as the source for future Figma work, proposal templates, and print production.

14. Approval Summary

This guide establishes the production-ready baseline for:

  • brand positioning
  • copy tone
  • logo usage direction
  • color palette
  • typography system
  • digital tokens
  • stationery layout
  • business card layout

Any future Figma execution should follow this document first and treat it as the reference standard unless a later version explicitly replaces it.