Brand system · Sound & Fir · v1.0 · 2026

The Emerald City Repairs brand.

Marks, color, type, and the rules that hold them together. Everything on this page is the source of truth — download the files, copy the tokens, follow the rules.

01 · The marks

The Set Tile mark.

Four tiles set on the diagonal — three field, one accent. The fourth tile is Fir on light backgrounds and Green 200 on dark. Clear space around the mark equals one tile module (¼ of mark width). Minimum size: 16px digital, 0.25in print. The wordmark is typed, never drawn: Archivo 800, tracking −1% to −2%, Sound Green on light or white on dark.

Primary mark · light backgrounds

Download logo-mark.svg →

Reverse mark · dark backgrounds

Download logo-mark-reverse.svg →

Favicon · browser tab & profile avatars

Download favicon.svg →

02 · Color

Sound, Fir, Madrona, and the quiet neutrals.

The one rule: Madrona goes only on things a customer can click or call. Everywhere else stays green, fog, and ink. No gradients, no shadows, no second accent hue. Primary in print: C85 M45 Y60 K45.

Sound Green

#10403C · headers, footers, section fills

Deep Sound

#0C332F · hover of primary only

Fir

#2F5D50 · eyebrows, rules, icon strokes

Madrona

#B4552F · fills only, clickable things

Madrona Deep

#9C4526 · inline links, accent hover

Madrona Hover

#C9663E · button hover state

Basalt

#2A2C2B · all body copy

Fog

#F2F1ED · page background

Mist

#DCDCD6 · alternating bands

Line

#C9C8C0 · every 1px border

Green 100

#BFD3CA · text on Sound Green

Green 200

#8FB5A5 · muted text on Sound Green

03 · Typography

Three voices, three jobs.

Archivo · 600/700/800 · tracking −2% to −4.5% on display · Google Fonts

Priced before we knock.

Newsreader · 400/500 · body copy · Google Fonts

A photo and two sentences. We reply with a band and an honest read on whether a visit is worth your afternoon.

IBM Plex Mono · 400/500 · license numbers, dates, prices, eyebrows · uppercase, +10–14% tracking

LIC. #EMERACR760NB · EST. 2024 · $14,000 – $26,000

04 · The rules

Binding, not suggestions.

Madrona appears only on things a customer can click or call.

#B4552F as fills, #9C4526 as text — never Madrona-colored type below 24px on light backgrounds. Text on Madrona is always white.

No gradients (except photo scrims), no shadows, no second accent hue.

Borders are always 1px Line. Card grids separate with 2px Line-colored “grout” gaps, not shadows.

Radius 2px on buttons and inputs only — everything else is square. Spacing scale 8/16/24/32/48/72/96.

Photography: square crops, no warm filters, overcast Pacific Northwest light, before/after pairs shot from the same corner. Real ECR jobs only — never stock.

05 · Tokens

Drop-in CSS variables.

Copy this block into any stylesheet to work in the brand's colors. The same values live in the palette above.

/* Emerald City Repairs — Sound & Fir v1.0 */

:root {

--ecr-primary: #10403C; /* Sound Green */

--ecr-primary-dark: #0C332F; /* Deep Sound */

--ecr-secondary: #2F5D50; /* Fir */

--ecr-accent: #B4552F; /* Madrona — fills only */

--ecr-accent-text: #9C4526; /* Madrona Deep */

--ecr-ink: #2A2C2B; /* Basalt */

--ecr-bg: #F2F1ED; /* Fog */

--ecr-surface: #DCDCD6; /* Mist */

--ecr-line: #C9C8C0; /* Line */

--ecr-green-100: #BFD3CA; /* text on Sound Green */

--ecr-green-200: #8FB5A5; /* muted text on Sound Green */

}

Fonts: fonts.google.com/specimen/Archivo · /specimen/Newsreader · /specimen/IBM+Plex+Mono · Email fallback: Helvetica, Arial, sans-serif