Style guide

Foundations

Tokens that everything else is built on. Change a value here and the whole site shifts.

Color tokens

Radii

Typography

Display sizes for heroes, headings for sections and cards, body scale for everything else. Quo-baselined: medium weight, tight line-height, negative letter-spacing.

Buttons

.bp-btn + modifier (--primary, --ghost, --secondary, --dark) + optional size (--lg).

Variants

States

Chips / pills

.bp-chip + modifier (--brand, --ghost, --soon). Used as category tags, feature labels, status indicators.

Cards

Base .bp-card for plain blocks. .bp-card--feature adds a mocked-product top area for marketing-page feature spotlights.

Basic — .bp-card

Feature variant with tone palette — .bp-card--feature + .bp-card-mock--{tone}

Eight tones for the mock area. Every demo shows realistic content so you can see how each tone reads under actual UI. Grid auto-wraps below 240px to protect the mock UI from getting squeezed.

Composed feature spotlights — fuller product mocks with body copy + footer chip

3-up grid gives the mocks more room — use this layout when each card needs a richer product moment.

Saturated showcase row — .bp-callout.bp-callout--showcase + .bp-card--showcase

Primary usage: a deep-saturated card with a floating UI screenshot, paired with copy in a 50/50 two-column layout. Use .bp-callout--reverse on alternating rows so the visual sits on opposite sides down the page. Reference: quo.com/phone-numbers porting / customizing / carrier-registration sections.

The pattern: .bp-callout.bp-callout--showcase (50/50, no outer frame) wraps a .bp-callout-copy on one side and a .bp-card.bp-card--showcase.bp-card--showcase-{tone} on the other. Add .bp-callout--reverse on alternating rows so the visual zigzags down the page. Available tones: orange, green, blue, purple, amber, rose, teal, slate.

Showcase cards in 3-up grid (alternative layout)

Same primitive can stack in a 3-up grid for a feature-cluster section.

The pattern: .bp-card.bp-card--showcase.bp-card--showcase-{tone} wraps a .bp-card-showcase-mock (product UI floats inside, shadow-elevated) and a .bp-card-showcase-caption (h3 + p sit at the bottom on top of the color). Available tones: orange, green, blue, purple, amber, rose, teal, slate.

Showcase: gradient mock frame + product card

Top-tier pattern from /platform/menu-routing/: a warm-gradient frame lifts a high-fidelity product card off the page. Use as the "killer demo" inside an asymmetric callout — pair with .bp-callout for 2-column copy + mockup layouts.

The pattern: warm-gradient frame (linear-gradient(135deg, #2a1f10 → #6b4220)) + 1px white card inside with subtle drop shadow. Frame radius --kb-radius-2xl, card radius --kb-radius-xl. Inside the card: header (name + meta) + 5 user rows with avatar + name + tag chip + status indicator.

Layout primitives

Container + section padding tokens. Visual demos show actual spacing.

.bp-page-inner — content container (max 1280px)

.bp-section — standard vertical padding

.bp-section--lg — hero / testimonial / final-CTA

.bp-section--bleed — full viewport breakout

Combine with .bp-section--dark for full-width dark bands. Place .bp-page-inner inside to constrain content. See live demo in Full-bleed bands ↓.

Callout cards

Asymmetric two-column spotlight. Use for the killer-demo moments on a marketing page. .bp-callout + slot classes .bp-callout-copy & .bp-callout-media. Modifier --reverse flips the order.

Full-bleed bands

Compose .bp-section--bleed + .bp-section--dark for full-width dark bands. Add .bp-page-inner inside to keep band content aligned to the rest of the page.

Dark testimonial band

Lighter band variant — bleed only, no --dark

Marketing primitives

Nine shared blocks used by every marketing page. Each renders via a helper in inc/marketing-partials.php so copy lives in one place per page.

.bp-faq — accordion (zero-JS, native <details>)

.bp-steps-3 — "Get started in 3 steps" block

.bp-cross-sell — "Part of your complete phone system"

.bp-compare-table — provider comparison (highlights "us" column)

.bp-logo-wall — marquee customer logo strip

.bp-price-anchor — inline plan/price reminder

.bp-rating-badge — Google rating inline badge (default + --lg)

.bp-stat-card — big metric tile

Default · --brand · SVG-star variant (compose with inline SVG). Use in 3-up grids on customer-stories & trust bands.

--bare variant — drops card chrome for inline use in copy-led sections.

.bp-story-card — customer-story card (3-up grid)

Avatars

Two patterns: initials (default — auto-generated from any name) and photo (hand-picked CC0 portraits stored locally in themes/bplus/images/avatars/). Same primitive renders both — pass 'src' => 'w-03' for a photo, omit for initials. Use photos in product-UI mocks where realism matters; use initials in testimonial cards and other places where the name is the focal point.

Sizes

xs 22 · sm 28 · md 36 · lg 48 · xl 64 — all in px.

Initials avatars — default brand gradient + 8 tone variants

Default is a brand-orange gradient. Tonal variants are flat tints with darker text — softer, used for stacks of multiple avatars (e.g. ring groups) so the row reads as variety, not a wall of brand orange.

.bp-avatar + size modifier + optional .bp-avatar--tone-{warm|rose|amber|green|teal|blue|purple|slate}.

Photo avatars — local library (16 CC0 portraits)

Hand-picked Random User photos stored in themes/bplus/images/avatars/. Reference by key (w-01…w-08, m-01…m-08).

w-01

w-02

w-03

w-04

w-05

w-06

w-07

w-08

m-01

m-02

m-03

m-04

m-05

m-06

m-07

m-08

Add more by dropping a square JPG into the folder named avatar-{key}.jpg.

Stack — overlapping group of avatars

Initials stack

AS FJ DK MC FP + 12 more

Photo stack

+ 12 more

Wrap multiple .bp-avatar elements in a .bp-avatar-stack for overlap with consistent ring spacing. Use photo stacks for higher-fidelity mocks (e.g. inside saturated showcase cards); initials stacks for compact rows where names are the focus.

In context — story-card variant

The same .bp-story-card primitive accepts an avatar_src option. Compare the two patterns:

Motoexpress

40% saved

EMAK transformed how we handle every inbound call. The quality is unparalleled.

Sebastian Castro

Owner @ Motoexpress

→

Trattoria Dimitrio

Zero missed

During the dinner rush Kori takes overflow calls automatically and books reservations.

Dimitrio Pavlou

Owner @ Trattoria Dimitrio

→

Dark CTA grid

Full-bleed dark band with three CTA cards — the page's penultimate "ready to get started?" moment. Each card has a top-half product-UI art (number picker, video player, pricing card) and a bottom body (heading + sub + arrow). Rendered via bplus_render_cta_grid(). Live demo breaks out of the grid below ↓

Final CTA

The page's closing statement. Confident heading + solid-brand primary + bare-text secondary. Arrow translates on hover (the unobtrusive micro-interaction); primary gets a soft brand halo. Rendered via bplus_render_finale(). Live demo breaks out of the grid below ↓

Forms

Hand-rolled form primitives. No plugin dependencies. Used by /request-a-callback/.