Foreman.
Built for builders.

What Baxie is.

A position before a palette. Everything downstream comes from this.

One sentence

Baxie is AI-native construction management software for residential general contractors in California.

Who it's for

Small to mid-size residential GCs. $2M–$20M revenue. 1–5 office staff. They build from architect plans and run jobs out of trucks and laptops, not corner offices.

What it does

Reads plans. Builds bids. Generates schedules. Tracks projects. The AI handles takeoffs, estimating, and scheduling so a GC can run more jobs without hiring more office staff.

The wedge

Competitors bolted AI onto legacy software. Baxie was built AI-native from day one. The production library, phase taxonomy, and project history compound with every job. Thin harness, fat skills.

The vibe

Builder-first, not boardroom. Confident, modern, a little blue-collar. Closer to Milwaukee, DeWalt, or Patagonia than Procore or Salesforce.

One mark. Built like a tool.

Solid orange block. Diagonal notch cut top-right. Two horizontal ink bars inside reading as a negative-space B and as structural cuts.

Anatomy

Construction grid

The mark is built on a 100×100 grid. All measurements are in viewBox units. Bars are always parallel to the bottom edge. Notch is always top-right.

Clearspace

Minimum size

Four lockups.

Pick one per surface. Don't mix in a single composition.

Usage

• Horizontal. Default. Use everywhere unless space forces otherwise. Marketing site nav, app top nav, email signatures, business cards.
• Stacked. Square or near-square spaces. Social profile, app loading screens, posters.
• Mark only. Favicons, app icons, social avatars, watermarks, anywhere < 80px wide.
• Wordmark only. Embedded in long-form text, footers, fine-print.
• Mono ink. When orange isn't available or fights the surface. Single-color print, sponsorship lockups, B/W documents.

Three colors do the work.

Ink, Safety, Paper. Everything else supports.

Core palette

Color discipline

• Orange is the single most important color. Use it for one primary CTA per screen and the mark itself. Never as a background for body text.
• Ink is the workhorse. 90% of type, 100% of borders.
• Paper is the default canvas. Avoid pure white. Pure white reads cold and SaaS.

Paper variations

Warm gray scale

Semantic colors

Tuned warm to match the palette. Use sparingly. Never as decoration.

Accessibility

Orange + Paper is for large display type only. For body text on orange, always use Ink.

Three faces. No exceptions.

Display, body, mono. Pick the right one for the job.

The system

• Archivo Black. Wordmark and display headlines. All caps for headlines. Lowercase only for the wordmark itself.
• Archivo (regular family, 400/500/600/700). UI, body, labels, buttons.
• JetBrains Mono (400/500/700). Numbers, metadata, timestamps, code, eyebrow labels.

Type scale

Rules

• Archivo Black is for the wordmark, H1, and H2 only. Don't use it for body.
• Tracking is tight on display sizes (-0.02 to -0.03em). Body type sits at default tracking.
• Mono is for anything quantitative or systemic. Never decorative. If it's a number, it's mono. Always.
• Line length: 60–75 characters for body. Wider feels academic, narrower feels cramped.

Gray scale usage rules

The warm gray scale is part of the palette, but not all grays are text colors.

• Text on Paper backgrounds: use Ink or Gray 600 only. Never lighter.
• Text on dark/Ink backgrounds: use Paper, Paper Deep, or Gray 300/400 for de-emphasized text.
• Gray 100–500: backgrounds, dividers, inactive states, chips. Not text on light surfaces.
• If you're squinting, it's wrong. Default to higher contrast.

Talk like a builder.

Short sentences. Direct openers. Binary contrasts. No corporate gloss.

Rules

• No em dashes. Use commas, colons, or sentence breaks.
• No semicolons in marketing copy.
• No tricolons (rule of three).
• Short sentences. Three to twelve words.
• Direct openers. Verbs first. Imperatives over suggestions.
• Binary contrasts. "Not this, this." "Old way, our way."
• First-person plural for the brand. "We built Baxie."
• Concrete outcomes, not abstractions. "Cut a takeoff to 8 minutes" beats "Boost productivity."

Yes

"Reads plans. Builds bids. Generates schedules. Built AI-native from day one."

No

"Leverage our cutting-edge AI-powered platform to revolutionize your construction management workflow and unlock unprecedented efficiency gains."

Bold. Geometric. Square-cap.

Icons should look stamped, not handwritten.

Library

• Primary: Phosphor Icons. "Bold" weight. 2.5px stroke at 24px size.
• Fallback: Lucide. At 2.5px stroke. Avoid the default 2px (too thin).

Rules

• Square line endings (no rounded caps).
• Geometric, not organic. No hand-drawn feel.
• Filled variants for active/selected states. Outlined for default.
• Color: Ink at full weight. Orange for accent or active. Never gradient.
• Size: 16, 20, 24, 32. Pick from the spacing scale.

Banned

• Thin-line icons (stroke under 1.5px).
• Rounded "cute" icons (Heroicons soft, Feather rounded).
• 3D / isometric icon sets.
• Emoji as UI. Never.

4px base. 9 stops.

A single scale across marketing and app.

/* Spacing tokens. Tailwind compatible */
--s-1: 4px;   // hairline gap
--s-2: 8px;   // tight
--s-3: 12px;  // compact
--s-4: 16px;  // default
--s-5: 24px;  // section internal
--s-6: 32px;  // section break
--s-7: 48px;  // major break
--s-8: 64px;  // hero padding
--s-9: 96px;  // hero padding (wide)

Containers

• Marketing: max-width 1280px. Edge padding 24px mobile, 48px desktop.
• App: fluid full-width. Edge padding 16px mobile, 24px desktop.
• Reading column: max-width 760px (this document).

Corners

• Default: square. 0px radius. The brand reads as stamped.
• Allowed: 2px radius on inputs and buttons for slight softening, only if testing shows it improves usability.
• Banned: pill shapes, large radii, capsule buttons. We're not a fintech app.

Built to be used.

Dense. High-contrast. Mono for numbers. Tools, not toys.

Buttons

Inputs

Cards

Status badges

Tables

Top navigation

Same brand. Different surface.

Reusable patterns for the marketing site, social, and print.

Hero block

Business card

Social card template

• 1200 × 630 OG image. Ink background. Mark top-left, wordmark bottom-right.
• Headline in Archivo Black, 80–96px, Paper color, left-aligned, max 6 words.
• 4px orange bar across the bottom edge. Always.

Email signature

[Mark 24×24] baxie
Edwin Guzman · Founder
edwin@baxiehq.com · baxiehq.com
────────────────────
Built for builders.

Real builders. Real sites.

If it looks like a stock photo, it's wrong.

Yes

• Real California job sites. Mid-construction framing. Real crews working.
• Real plan sheets on tables, in trucks, on laptops.
• Documentary, natural light. Warm late-afternoon golden hour.
• Hands holding pencils, tape measures, phones. Not posed.
• Finished residential exteriors with personality. Craftsman, Spanish, mid-century. Not generic suburb.

No

• Stock photos of men in hard hats pointing at things.
• Blueprint imagery. Literal rolled blueprints, blueprint-grid backgrounds.
• Robot or AI brain visuals. Glowing circuits. Neural network diagrams.
• Sterile corporate office photography.
• Cold tech-blue overlays. Gradient washes.
• Hammers, hardhats, or wrenches as decorative icons.

Photo treatment

• Slight warm tint. Push amber, pull cyan.
• Strong contrast. Deep shadows are fine. Don't lift the blacks.
• Grain is allowed. Excessive smoothing is not.

The quick reference.

Drop-in code.

Copy this into the Baxie app and marketing repos.

CSS variables

/* baxie-tokens.css */
:root {
  /* Core */
  --ink: #161616;
  --orange: #FF5A1F;
  --paper: #F4EFE3;

  /* Paper */
  --paper-soft: #FBF7EC;
  --paper-deep: #E8DFC9;
  --rule: #C9BFA6;

  /* Gray */
  --gray-100: #F0E9D8;
  --gray-200: #D9D1BD;
  --gray-300: #B4AB95;
  --gray-400: #8A8270;
  --gray-500: #5C5547;
  --gray-600: #2E2A22;

  /* Semantic */
  --success: #2F7A3E;
  --warning: #E8B547;
  --error:   #C8341A;
  --info:    #2D5F8B;
}

Tailwind config extension

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ink: '#161616',
        orange: '#FF5A1F',
        paper: {
          DEFAULT: '#F4EFE3',
          soft: '#FBF7EC',
          deep: '#E8DFC9',
        },
        rule: '#C9BFA6',
      },
      fontFamily: {
        display: ['Archivo Black', 'sans-serif'],
        sans: ['Archivo', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        DEFAULT: '0',
        sm: '2px',
      },
    },
  },
};

SVG mark (drop-in)

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0 L 68 0 L 100 32 L 100 100 L 0 100 Z"
        fill="#FF5A1F"/>
  <rect x="22" y="30" width="44" height="9"
        fill="#161616"/>
  <rect x="22" y="62" width="56" height="9"
        fill="#161616"/>
</svg>

Google Fonts import

<link href="https://fonts.googleapis.com/css2?
family=Archivo+Black
&family=Archivo:wght@400;500;600;700
&family=JetBrains+Mono:wght@400;500;700
&display=swap" rel="stylesheet">

Files to ship.

The minimum set to roll out the brand everywhere.

Logo files

• baxie-mark.svg. Mark only, full color
• baxie-mark-mono.svg. Mark only, ink
• baxie-mark-reversed.svg. Mark only, reversed for dark
• baxie-horizontal.svg. Primary lockup
• baxie-stacked.svg. Square spaces
• baxie-wordmark.svg. Wordmark only
• PNG exports of each at 512px, 1024px, 2048px

App icons

• favicon.ico (32×32)
• icon-192.png (PWA)
• icon-512.png (PWA)
• apple-touch-icon.png (180×180)
• iOS app icon set (1024×1024 master)
• Android adaptive icon (foreground + background layers)

Social

• og-image.png (1200×630). Default share card
• og-image-blog.png template
• twitter-card.png (1200×675)
• LinkedIn company banner (1128×191)
• Social profile avatar (400×400, mark only on Ink)

Documents

• Business card template (3.5 × 2 in)
• Letterhead (Letter + A4)
• Email signature HTML block
• Slide deck template (16:9)
• Invoice template

Files to host

• brand.baxiehq.com. This document
• /brand-assets.zip. All logo files
• /baxie-tokens.css. Drop-in CSS variables