Guidelines

Logo

Two marks: the Builtwell wordmark, and the BW monogram for small and square spaces. Both are drawn, not typeset. Never retype them in a font.

The wordmark

packages/design-system/components/logo-builtwell.tsx, the default export Logo. It fills its container's width at a 1312:240 ratio and draws in currentColor, so it takes the text colour of wherever it sits.
Black on off-white
Off-white on black
Black on brand, orange
Off-white on brand, blue
import Logo from "@repo/design-system/components/logo-builtwell";

// Size it by width; the height follows. Colour comes from text-*.
<Link aria-label="Builtwell, home" className="block w-40 text-foreground" href="/">
  <Logo />
</Link>

The monogram

packages/design-system/components/logo-bw.tsx. For favicons, avatars, the collapsed header and anywhere the wordmark would drop below its minimum width. Same colour rules.
Black on off-white
Off-white on black
Black on brand, orange
import LogoBw from "@repo/design-system/components/logo-bw";

<span aria-label="Builtwell" className="block h-8 w-14" role="img">
  <LogoBw />
</span>

Clear space

Keep the height of the B clear on every side. Nothing, not a rule or an edge, crosses the dashed line.
xxxx

x is the height of the wordmark. On a page, the outer gutter already gives it more than that.

Minimum size

Below these widths the counters close up. Switch to the monogram instead.
MarkMinimumIn use
Wordmark, screen80px wide
Wordmark, header128 to 160px wide
Monogram16px tall

Don't

Not allowed
Stretch or squash it
BuiltwellNot allowed
Retype it in a font
Not allowed
Set it in a low-contrast colour
Not allowed
Rotate it
Not allowed
Put one brand colour on the other
Not allowed
Add effects: shadows, outlines, gradients

Rules

  • One colour at a time: black, off-white, or the surface's contrast colour. No gradients, outlines or shadows.
  • Builtwell is one word, in the mark and in copy. Never Built Well or BuiltWell.
  • Give the SVG a label where it stands alone (role img, aria-label Builtwell); inside a labelled link, the link carries the name.
  • Use the components. Don't export the SVG into a page as an image.