Brand

FloBuildr brand guidelines

Carbon surfaces, one amber accent, and lockups that stay sharp at any size. Use these assets as-is — don’t redraw the mark or invent a second accent.

Name & voice

How we write it

Do

  • FloBuildr — capital F, capital B. Never “Flobuildr,” “Flo Buildr,” or “FB.”
  • Tagline: Every job. One platform. — two short sentences, periods included.
  • Talk about the Job Profile, the estimate that becomes the work plan, and live job cost.

Don’t

  • Don’t abbreviate the product name in customer-facing copy.
  • Don’t rewrite the tagline (“one place for every job,” “all-in-one,” etc.).
  • Don’t lean on purple gradients, cream+serif “AI defaults,” or invent a second brand accent for chrome/CTAs. (Product status chips are a separate categorical system — see below.)

Color

Carbon palette

Monochrome ramp with Hi-vis Amber as the only brand accent (CTAs, nav, logo arm). Status and source chips in the product use a separate colorful system — see Categorical chips below.

Ink #0C0D10 Page base — deep charcoal for contrast
Muted #111217 Subtle wells between page and card
Carbon #15161A Cards, alternating sections, logo ink on light
Elevated #1C1E26 Inputs, raised surfaces, hover
Border #2B2E34 Hairlines
Paper #F5F5F4 Headings, reverse lockups, light UI
Hi-vis Amber #F2A21C Accent only — CTAs and the logo arm
Neutral #83878E Muted body labels, tagline on dark, grid rules

Retired — do not reintroduce: Blueprint Navy #16212E, Drafting Paper #F3F0E9, Blueprint Steel #3C7C93.

Product UI

Categorical chips

Status, source, and type pills stay colorful so operators can scan calendar lists, pipeline, and boards. Do not collapse these to white/gray Bootstrap badges. Canonical map: app/src/utils/brandChips.js + BrandChip.

amber · on hold orange · in progress sky · sent / invoice violet · lead purple · job dates green · approved teal · order cyan · punch rose · dead red · overdue pink · time off slate · line items gray · draft

Do

  • Keep status/source chips colorful and distinct — operators scan by hue.
  • Use light tinted fill + darker text so chips read on Ink and Paper.
  • Match calendar event borders to the same source hue as the chip.

Don’t

  • Don’t monochrome chips to white/gray Bootstrap badges for “brand purity.”
  • Don’t use Hi-vis Amber as a chip wash — amber stays CTAs and the logo arm.
  • Don’t invent one-off chip hexes; change brandChips.js and update this page.

Logos

Horizontal lockups

Primary mark for headers, decks, and most partner placements. Prefer SVG. Each tile links to the source file.

FloBuildr horizontal fullcolor Fullcolor · on paper FloBuildr horizontal graphite Graphite · mono on light FloBuildr horizontal reverse Reverse · on carbon FloBuildr horizontal white White · mono reversed

Stacked

Use when width is tight or the mark needs to sit above other content.

FloBuildr stacked fullcolor Fullcolor FloBuildr stacked graphite Graphite FloBuildr stacked reverse Reverse FloBuildr stacked white White

Symbol

App icon, favicon-adjacent placements, and social avatars. Don’t use the symbol alone as the only brand cue on a first viewport.

FloBuildr symbol fullcolor Fullcolor FloBuildr symbol graphite Graphite FloBuildr symbol reverse Reverse FloBuildr symbol white White

Tagline lockups

Every job. One platform.

Wordmark plus tagline. Prefer these when the brand needs to introduce itself without a separate headline. Tagline grey is #6E7278 on light lockups and #83878E on reverse.

Horizontal + tagline

Horizontal tagline fullcolor Fullcolor Horizontal tagline graphite Graphite Horizontal tagline reverse Reverse Horizontal tagline white White

Stacked + tagline

Stacked tagline fullcolor Fullcolor Stacked tagline graphite Graphite Stacked tagline reverse Reverse Stacked tagline white White

Inline + tagline

Inline tagline fullcolor Fullcolor Inline tagline graphite Graphite Inline tagline reverse Reverse Inline tagline white White

Icons & field

App icon, favicon, and grid

Use the favicon for browser tabs — not the app icon. The blueprint grid is atmosphere for dark and light surfaces, not a logo substitute.

FloBuildr app icon App icon FloBuildr favicon Favicon Graphite blueprint grid Grid · graphite Paper blueprint grid Grid · paper

Typography

Type system

Display · Archivo 800

Every job. One platform.

Headings, hero statements, price figures. Self-hosted woff2.

Body · Inter 400 / 600

FloBuildr runs the whole job on one record — estimate, worksheet, schedule, budget, and payment.

UI and marketing body copy. Semibold for emphasis and labels.

Fallback · Arial

Transactional email and Office documents only — no custom properties or webfonts.

Keep Carbon hex literals in step with tokens.

Usage

Clear rules

Do

  • Put fullcolor / graphite on paper or light UI; reverse / white on carbon, photos, or dark UI.
  • Keep clear space roughly the height of the “F” around the mark.
  • Download SVG from this page; prefer vector over flattened PNG when possible.
  • Let amber carry emphasis — buttons, the logo arm, sparse highlights.

Don’t

  • Don’t stretch, outline, recolor, drop-shadow, or place the mark on busy photos without a veil.
  • Don’t put reverse lockups on white, or fullcolor lockups on black.
  • Don’t invent a second accent (no steel blue, no purple).
  • Don’t use the app icon as a favicon, or the favicon as a marketing hero.

Questions about partnership or press usage: contact us.