Boss PDX844-BOSS-PDX

The Brand

Visual system

Color

#ffffff

--paper

#f3efe6

Default page background. Warm off-white — NOT editorial cream.

#e8e2d4

--paper-2

#e8e2d4

Slightly-darker paper for cards on paper.

--ink

#0d0c0a

Foreground on paper. Warmer than pure black, reads like carbon on cardstock.

--ink-2

#1a1815

Elevated ink surface.

--concrete

#8a8880

Muted foreground on ink (secondary text).

--concrete-2

#4d4b46

Muted foreground on paper (secondary text).

#c85a2a

--rebar

#d84a1a

The signature accent. Used ONCE per view — italic emphasis, focus rings, hover states. Never for gradients.

#0f2a44

--blueprint

#0f2a44

Deep navy. Reserved for state (link, warning).

--line

rgba(13, 12, 10, 0.14)

Hairline on paper.

--line-strong

rgba(13, 12, 10, 0.28)

Emphasized rule.

--line-on-ink

rgba(243, 239, 230, 0.14)

Hairline on ink.

Typography

Type Families

"Chivo", ui-sans-serif, system-ui, sans-serif

UI Face: Bricolage Grotesque

The same family handles both display and UI work. Tighter cohesion than mixing two families. Headings, buttons, nav links all come from the same source.

Weights 300–800 · Google Fonts

Mono Face: IBM Plex Mono

reserved for labels, numerics, captions, phone numbers, and project metadata. never used for prose. keep it precise.

Weights 400, 500 · Google Fonts

Typography

Type Scale

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

Interaction

Motion

--dur-fast (180ms)

Micro interactions: arrow shift, border color change. Sharp decel curve.

--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

Sharp decel. Enters and exits.

--ease-in-out

cubic-bezier(0.65, 0, 0.35, 1)

Symmetrical hover states.

Identity · logo & favicon confirmed 2026-07-21

Logo & marks.

✓ Logo + favicon confirmed by Lucas

These are the exact, unmodified files pulled from the live bosspdx.com site — the actual PNG bytes, not a recreation, not a trace. Confirmed correct.

  • ☐Open question: there is no dark-background version of the logo. The only file is dark text on transparent — built for light backgrounds. On the footer (dark surface, below) it will be low/no contrast. This needs either a light-mode export from the client, or a decision that the footer shouldn't carry the logo at all.
Boss PDX header logo
Header logo — real file, confirmedlogo-header-dark.png362×32px · the actual PNG from bosspdx.com, untouched
Boss PDX favicon
Favicon — real file, confirmedcropped-Boss-PDX-Favicon-0832 / 180 / 192 / 270px exports · the actual PNGs from bosspdx.com
Boss PDX header logo on dark — low contrast
Same file, dark surfaceSame PNG. No dark-mode version exists — this is what it actually looks like there.

Wordmark — the real logo, every size

Boss PDX
Boss PDX
Boss PDX

Same file, ink surface — no dark variant exists

Boss PDX

Communications

Email Signature

Table-based HTML signature for email client compatibility (Gmail, Outlook, Apple Mail). Copy the HTML and paste into your email client's signature settings.

 
Boss PDX
Boss PDX Team
Portland's Licensed General Contractor
844-BOSS-PDX
[email protected]
bosspdx.com
OR CCB #232383

Building blocks

Components

Button

Navigation

Project Card

Stat

12yrs
Building in Portland
41
Projects delivered
100%
Licensed · bonded · insured
4.9/5
Google reviews

Service Row

Process Step

1

Discovery Call

We learn about the project, your goals, and your timeline. No sales pitch.

2

Scope & Estimate

You get a detailed scope of work and a fixed price, in writing.

3

Permitting & Planning

We pull permits, schedule trades, and get everything ready.

4

Build

We execute on time and on budget. You see progress weekly.

Tone

Voice

In Voice

  • On time, on budget. No excuses, no surprises.
  • Twelve years, forty-plus projects. The receipts are there.
  • Licensed, bonded, insured. The legal stuff matters.
  • You're hiring competence. Not a spa vibe. Not a lifestyle brand.
  • Direct English. If it can be a sentence, it's a sentence.

Out of Voice

  • ✗ "Leverage synergies" · "circle back" · corporate buzzwords
  • ✗ Stock hero video · floating CTAs · SaaS energy
  • ✗ Soft lifestyle copy · aspirational vagueness
  • ✗ "Leverage your backyard potential" · fake enthusiasm
  • ✗ Tiny text disclaimers that hide the real story