BB Boise Business PortalLocal businesses · Boise, Idaho

Brand system

Branding.

Palette, type, logo usage, voice, and layout references for the Boise Business Portal — used for both the directory homepage and every /business/<slug>/ profile page.

Brand statement

The Boise Business Portal is a clean, professional directory of real Treasure Valley businesses. The visual language should read calm, trustworthy, and local — not startup-loud, not corporate-cold. Every listing is a real person's livelihood; the design frames it, doesn't upstage it.

When in doubt: quiet blue-on-cream, serif for headlines, sans-serif for body, generous whitespace. Never a splash page, never a hero video, never dark-mode drama.

Logo

BB Boise Business Portal

Usage

  • Header: BB monogram + full wordmark, left-aligned, with a small "Local businesses · Boise, Idaho" tagline below the wordmark.
  • Footer: same as header. Keep monogram + wordmark together, don't isolate the BB.
  • Favicon: monogram only.
  • Don't stretch, recolor outside the palette, add drop shadows, or slap the logo onto a target-brand background.

Color palette

All colors are exposed as CSS custom properties in /assets/portal.css. Prefer the variables over raw hex values.

Brand

Brand#0b4f8b · --brand
Brand dark#073765 · --brand-dark
Brand soft#e2ecf6 · --brand-soft

Accent

Accent#c98a4a · --accent
Accent soft#f7ead7 · --accent-soft

Neutrals

Background#ffffff · --bg
Background 2#f7f8fa · --bg-2
Background 3#eef1f5 · --bg-3
Ink#0d1b2a · --ink
Ink 2#2b3a4a · --ink-2
Muted#5f6b78 · --muted

Status

Green#2f7d5b · --green
Amber#c08a2f · --amber
Red#b03a3a · --red

Typography

Two families, both from Google Fonts. Never mix in a third.

  • Fraunces — display serif. Used for H1, H2, H3, and any "brand voice" line. Weights 400 – 600.
  • Inter — sans-serif body. Used for everything else. Weights 400 – 700.
Display · Fraunces 500
Local businesses, real websites.
Section · Fraunces 500
What they offer.
Eyebrow · Inter 700 · 0.16em tracking
About this business
Body large · Inter 400
Full-service residential landscaping in the Treasure Valley — front-yard transformations, mature-tree care, and ongoing maintenance contracts.
Body base · Inter 400
Get listed in the directory and we'll set up everything from the website to the hosting.
Small / meta · Inter 400
© Boise Business Portal · Boise, Idaho

Voice & tone

Direct, respectful of the business owner's time, no filler. First-person plural ("we") when speaking as the portal.

Do: "Full-service residential landscaping in the Treasure Valley."
Don't: "Revolutionizing Idaho's landscaping industry with cutting-edge, next-generation solutions."
Do: "Get listed in the directory and we'll set up everything from the website to the hosting."
Don't: "Unlock your business's true potential with our best-in-class marketing platform."

Layout — directory homepage

The homepage anatomy, top to bottom. Only the promoted strip and the directory grid change day-to-day; everything else is chrome.

HEADER · sticky · brand + nav (Directory · Get listed · Contact)
HERO · headline + intro + primary CTA (light bg, no image)
⭐ PROMOTED STRIP · promoted-only card row (2–3 max, wider cards)
DIRECTORY GRID · #directory · search input + industry filter + result count + card grid
card · logo/photo · industry chip · name (Fraunces) · tagline · tags · View · Website↗
GET-LISTED CTA · one-line pitch for portal website services
FOOTER · Site · About (branding, privacy, terms, api) · Contact

Layout — /business/<slug>/ profile page

Every business profile follows this exact structure. No per-brand color overrides. No custom fonts. The business's own branding lives on their own website; the portal is neutral chrome.

HEADER · same as home
BIZ HERO (white bg)
← Back to directory
2-col: [ business LOGO square, 220px ] | [ industry chip · H1 name · tagline ]
Actions row: [ Visit <name> website ↗ ]
BIZ BODY (bg-2)
H2 "About" + summary paragraph
H2 "Services" + services-list (ul with brand-color left rail on each li)
tags strip · muted chips
PORTAL CTA · full-brand-blue band · "Have a Boise business?" + See website services + Start the conversation
FOOTER · same as home

Rules:

  • Logo image lives in a square white plaque. Any aspect ratio works — object-fit is contain.
  • Description is one paragraph, 2–5 sentences. No headings inside it.
  • Services list is 3–8 short items. Each item = one benefit line; no nested bullets.
  • Portal CTA at the bottom is always the same block. It's the point of the page — every profile funnels back to portal website services.

Card / component tokens

  • Radius: --radius = 10px (cards), --radius-sm = 6px (chips, buttons).
  • Shadows: --shadow-sm for resting state, --shadow-md for hover.
  • Hairlines: --line for internal dividers, --line-2 for stronger separations.
  • Buttons: primary = brand fill · white text. Ghost = transparent · brand text · line border. Uppercase, 0.08em tracking, Inter 500.