RGBA Opacity Scales

Hover chips to see the full rgba() value. Click to copy.

Gradients

Kraft Shimmer

Animated button shimmer, bg-size: 250%

Hero Overlay

Bottom-to-top scrim for text over media

Divider

Always 2px height, aqua to kraft

Scroll Drop

Vertical kraft fade, scroll indicators

Shadows

Media / Video

0 8px 40px rgba(0,0,0,0.45)

Lightbox

0 24px 80px rgba(0,0,0,0.8)

Deprecated — Never Use

Font Stack

Helvetica Neue LT Pro

font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
// Both lines required on every block.

Aa

400 Regular

Aa

600 Semi

Aa

700 Bold

Type Scale

Every text element at its exact spec. Tags show size, weight, line-height, and letter-spacing.

Section Padding

Context	Desktop	1024px	768px	480px
Hero content	0 40px	0 32px	0 24px	0 20px
Overview / Split	80px 40px	56px 24px	40px 16px	--
Quote / Testimonial	56px 40px	--	40px 16px	32px 14px
CTA	72px 40px	--	40px 16px	--
Next block	48px 40px	40px 24px	36px 16px	--

Max-Widths

Gap Scale

Grid Ratios

Layout	Columns	Notes
Split (copy + media)	1fr 1fr	Equal columns, align-items: center
Split flipped	1fr 1fr + direction: rtl	Player left, copy right. Reset children to direction: ltr
Single column (mobile)	1fr	All grids collapse at 768px

Easing Curves

Five curves, each for a specific purpose.

Primary

Word

Simple

Float

Bounce

        Primary: cubic-bezier(0.22, 1, 0.36, 1)

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

        Simple: ease

        Float: ease-in-out

        Bounce: cubic-bezier(0.34, 1.56, 0.64, 1)

Entrance Animation

translateY(20px) + opacity. 0.6s primary easing.

Element enters view

Stagger Timing

Base: 0.05s. Increment: 0.08s per item. Fire once via IntersectionObserver.

Word Reveal

500ms initial delay, 150ms per word. Uses word easing curve.

We build brands that move people.

Duration Reference

Standardized durations for every transition type.

Entrance Transforms

translateY values by element importance.

Backdrop Filter

Frosted glass effect used on overlays, modals, sound toggles, and calculator cards. Always include -webkit- prefix.

blur(6px) — sound toggles, icon containers

blur(10px) — play buttons, overlays

blur(24px) — modals, nav, lightbox

IntersectionObserver Thresholds

When elements trigger — all fire once and unobserve.

0.10

Top-of-page

0.15

Grids

0.20

Next blocks

0.25

Standard

0.35

Metrics

Explore Our Work

Kraft Button (Primary CTA)

2px kraft border, scaleX fill on hover, 0.45s primary easing. Text in <span> with z-index: 1.

10px / 700 / 0.14em / uppercase
padding: 16px 40px
transform-origin: left

Strategy Branding Digital

Pill / Tag (Light BG)

100px radius, 1px border at raisin 10%, raisin 45% text.

10px / 600 / 0.1em / uppercase
padding: 5px 14px

Strategy Branding Digital

Pill / Tag (Dark BG)

Same structure. Smoke-based border/text colors.

border: 1px solid rgba(245,243,243,0.1)
color: rgba(245,243,243,0.45)

Gradient Divider

2px height, aqua to kraft. Entrance: scaleX(0) to scaleX(1), origin left.

Image Hover

scale(1.04) + saturate(1.1) brightness(1.05). Some blocks use scale up to 1.12. Hover to preview.

transition: 0.5s primary easing
Optional dark scrim fade for overlaid text

“

They transformed our digital presence.

Jane Smith

VP Marketing, Acme Co

Quote Block

Forest BG, 3 aurora orbs, noise SVG filter, gradient divider, kraft attribution.

Quote mark: 64px, kraft, 0.2 opacity
Divider: 48px wide, gradient
Name: 14px/600/kraft | Role: 12px/400/40%

Aurora Orbs

3-4 per section. Each: border-radius 50%, filter blur(80px), radial-gradient.

Colors: Moss, Kraft low-opacity, Aqua low-opacity
Animation: br-float [10-16s] ease-in-out infinite

▶

Video Iframe Formulas

Two patterns: full-bleed background video and contained player with aspect-ratio.

Full-bleed: position: absolute; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%)

Contained: aspect-ratio: 16/9; overflow: hidden; iframe absolute fill

Old height: max(360px,...) is deprecated

Sound Toggle

Required on all contained video players. Bottom-right absolute positioned. Backdrop-filter blur(6px).

40px circle, rgba(0,0,0,0.45) bg
border: 1px solid rgba(245,243,243,0.15)
Vimeo Player API for mute/unmute

Logo

Logo Rail

Continuous scrolling carousel with pause-on-hover. Fade edge gradients via ::before/::after pseudo-elements.

Default: grayscale(100%) brightness(0.35) contrast(1.2)
Hover: grayscale(0%) brightness(1)
Gap: 40px, animation: linear infinite

Frosted glass overlay panel

Frosted Glass Panel

backdrop-filter: blur() with -webkit- prefix. Used for nav bars, overlays, modal backgrounds, sound toggles, calculator cards.

background: rgba(0,0,0,0.3)
backdrop-filter: blur(6-24px)
-webkit-backdrop-filter: blur(6-24px)
border: 1px solid rgba(245,243,243,0.08)

The Litmus Test

"If the reader scanned this section in 2 seconds, is this the one thing they should take away?"

If yes, kraft it. If no, leave it.

1

One kraft span per paragraph. Two max in a long block. Never three.

2

Kraft the insight, not the label. Kraft "47% increase" not "Results."

3

Never kraft a full sentence. It defeats the purpose.

4

Never kraft punctuation alone. Include punctuation only if the word itself is krafted.

5

Works on both backgrounds. No adjustments needed for light or dark.

6

In headlines, 1-3 words max — the emotional peak of the line.

Correct

We helped them achieve a 47% increase in qualified leads.

Kraft targets the key insight — the metric that matters.

Correct

The future satisfies no one.

Headlines: kraft the emotional peak, 1-3 words.

Too Much

We helped them achieve a 47% increase in qualified leads across every market.

Full sentence kraft — nothing stands out when everything does.

Wrong Target

We helped them achieve a 47% increase in Results:

Krafting the label instead of the insight.

Competing

Their revenue grew while costs dropped and retention soared.

Three competing kraft spans — the eye doesn't know where to land.

Practice: Choose the Kraft

Click the one word or phrase you'd kraft in this paragraph.

Click a word or phrase above to test your kraft instinct.

Breakpoint Map

≤ 480

≤ 768

≤ 1024

Desktop

Section H2: clamp handles this automatically

Grid gaps: 56px to 32px

Section padding horizontal: 40px to 24px

Overview padding: 80px 40px to 56px 24px

Next block padding: 48px 40px to 40px 24px

ALL entrance animations disabled — content visible by default

Section H2: 26px (explicit override)

Body: 16px to 14px

Grid: multi-column to single column

Section padding horizontal: 24px to 16px

Gaps: 24px to 20px

Overview padding: 56px 24px to 40px 16px

Quote padding: to 40px 16px

Hero padding: 0 20px

Quote padding: 32px 14px

Further gap reductions

Touch targets: minimum 44px height

Live Preview

Toggle breakpoints to see type and layout adapt in real time.

Section Title Here

Body text adapts across breakpoints with precise size adjustments.

Email Rules

✓Table-based layout only — no divs for structure

✓All styles inline — no external stylesheets

✓Max-width: 600px, centered with align="center"

✗No animations, transitions, transforms, or JavaScript

✓Always set both bgcolor attribute AND inline background-color

Email Font Stack

font-family: 'Helvetica Neue', Arial, sans-serif;

DM Serif Display via @import for newsletter titles only.
No "LT Pro" in emails — web font not reliably loaded.

Bulletproof Button

Table-based, no VML needed. Always this exact structure.


<table border="0" cellpadding="0" cellspacing="0" role="presentation">

  <tr><td align="center" bgcolor="#C49A6C"

    style="background-color: #C49A6C; border-radius: 0; padding: 14px 32px;">

    <a href="#" style="color: #221E1F; font-size: 10px;

      font-weight: 700; letter-spacing: 0.14em;

      text-transform: uppercase; text-decoration: none;">

      BUTTON TEXT

    </a></td></tr></table>

HubSpot Tokens

{{ unsubscribe_link }}

Required — unsubscribe link

{{ manage_preferences_url }}

Preference center link

Email Responsive

@media (max-width: 480px) with !important overrides in <head> <style> block.


@media (max-width: 480px) {

  .email-container { width: 100% !important; }

  .stack-column { display: block !important; width: 100% !important; }

}

CSS Namespace

Format: br-{client}-{block} — BEM-style with block__element pattern.


/* Case studies: br-{2-3 letter client code}-{block} */

.br-ab-hero { }     /* Arapahoe Basin hero */

.br-au-grd { }      /* Audi grid */

.br-ba-qt { }       /* Ball quote */


/* Microsites: br-sec-{2-letter sector}-{block} */

.br-sec-tb-hero { } /* Tobacco sector hero */

.br-sec-au-hero { } /* Automotive sector hero */

.br-sec-ph-hero { } /* Pharma sector hero */


/* Main site: br-{short code} */

.br-vh { }           /* Homepage hero */

.br-aag { }          /* Stats block */

JS Naming

IDs use camelCase.


const el = document.getElementById('brAbHero');

const overview = document.getElementById('brAbOverview');

Required Block Header


/* ========================================

   BR [Client] -- [Block Name]

   Brand Revolution Design Standards

   ======================================== */

Required Reset + Font Stack

Every block includes both. No exceptions.


.br-client-block *, .br-client-block *::before, .br-client-block *::after {

  margin: 0; padding: 0; box-sizing: border-box;

}


.br-client-block {

  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

}

Visibility Class

Always .in-v — never .is-visible (deprecated, still in ~8 legacy blocks).


/* CORRECT */

.br-client-block__title.in-v { opacity: 1; transform: translateY(0); }


/* WRONG -- deprecated, migrate on contact */

.br-client-block__title.is-visible { ... }

IntersectionObserver

Fire once. Unobserve immediately. Standard threshold: 0.25.


const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      entry.target.classList.add('in-v');

      observer.unobserve(entry.target);

    }

  });

}, { threshold: 0.25 });

Video: Full-Bleed Background


.br-client-block__bg iframe {

  position: absolute; top: 50%; left: 50%;

  width: max(100%, 177.78vh);

  height: max(100%, 56.25vw);

  transform: translate(-50%, -50%);

  border: none; pointer-events: none;

}

Video: Contained Player

Always include sound toggle via Vimeo Player API.


.br-client-block__media {

  position: relative; aspect-ratio: 16/9;

  border-radius: 6px; overflow: hidden; background: #000000;

}

.br-client-block__media iframe {

  position: absolute; top: 0; left: 0;

  width: 100%; height: 100%; border: none;

}

Deprecated Practices

✗Entrance animations outside @media (min-width: 769px)

✗Using #FFFFFF or white anywhere — use Smoke #F5F3F3

✗Inline <style> overriding Squarespace globals without namespace

✗setTimeout chains for stagger — use transition-delay + IntersectionObserver

✗.br-*__stitch class/pattern — remove entirely

✗Old iframe formula padding-bottom: 56.25% — use aspect-ratio: 16/9

✗height: max(360px, min(56.25vw, 720px)) — use aspect-ratio: 16/9

✗@keyframes for entrance animations — use IntersectionObserver + .in-v class

✗.is-visible .in-v .in-v (8 legacy blocks still need migration)

Image Treatment

filter: brightness(.6) saturate(.8)

Thumbnails — dark enough for text overlay

opacity: .7 — .85

Feature images — let background breathe through

object-fit: cover; position: absolute; inset: 0;

All images — full bleed, never letterboxed

Logo Treatment

Client logos default to muted grayscale. Full color on hover.

filter: grayscale(100%) brightness(0.35) contrast(1.2)

Default state — muted, recedes into background

filter: grayscale(0%) brightness(1) contrast(1)

Hover — full color reveal, 0.5s ease transition

Aspect Ratios

16 : 9

Video players, hero backgrounds, showcases

16 : 10

Case study thumbnails, next-block cards

4 : 3

Display grids, gallery cells

Image Framing

4px -- Thumbnails, grid cells

6px -- Video players, feature images

50% -- Headshots (120x120, 3px kraft border)

Diagonal Overlays


/* Dark overlay (default) */

background: linear-gradient(135deg,
  rgba(34,30,31,.85) 0%,
  rgba(34,30,31,.6) 100%);


/* Light overlay */

background: linear-gradient(135deg,
  rgba(245,243,243,.9) 0%,
  rgba(245,243,243,.7) 100%);

Play Buttons

▶

52px circle
background: rgba(0,0,0,.45)
border: 2px solid rgba(245,243,243,.5)
Centered absolute positioning

Media Depth

box-shadow: 0 8px 40px rgba(0,0,0,.45)

Video players and feature media

transform: scale(1.04-1.12); filter: saturate(1.1) brightness(1.05-1.08)

Hover — subtle scale + warmth boost

border: 2px solid transparent to #C49A6C

Active thumbnail — kraft border highlight

Kraft Contrast Rules

Kraft on Dark

Allowed

Kraft on Light

Decorative Only

Kraft text on light backgrounds fails WCAG AA for body text. Only use for decorative/large display type on light backgrounds — never for readable body copy.

Text Contrast Pairs

Approved text/background combinations used across BR blocks.

Aa

Smoke 75% on Black — body text on dark

Pass

Aa

Kraft on Black — accent text

Pass

Aa

Kraft on Raisin — accent text

Pass

Aa

Raisin 65% on Smoke — body text on light

Pass

Aa

Kraft on Smoke — body text

Fail

Reduced Motion (Required)

All blocks should respect prefers-reduced-motion. Currently missing from the codebase — add to every new block going forward.


@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}

Focus States


/* Standard focus ring */

border-color: var(--kraft);

box-shadow: 0 0 0 2px rgba(196,154,108,.15);

Active focus state

Semantic Markup

✓alt="" on every image — descriptive, not decorative

✓role="presentation" on all layout tables (email)

✓title="" on icon-only buttons

✓overflow-wrap: break-word on all headline/title selectors

✓aria-label on interactive elements without visible text

Alignment

Left-Aligned

Hero content, body copy, subtitles, split sections, overview blocks

Centered

Quotes, testimonials, metrics/stats, CTA sections

Readability Widths

Max-width constraints that keep line length comfortable — roughly 8–12 words per line.

520px

Body / subtitle

700px

Hero content

760px

Quotes (centered)

Fluid Type


/* Headlines */ font-size: clamp(28px, 4.5vw, 60px);

/* Subtitles */ font-size: clamp(14px, 1.4vw, 17px);

/* Quotes */ font-size: clamp(15px, 1.8vw, 20px);

/* Stats */ font-size: clamp(32px, 4vw, 52px);

Copy Patterns

Headlines — Outcome-Focused

Precision fit. Dialed in mindset.

CTAs — Emotional Hook Questions

Ready to make your brand unforgettable?

Editorial Rules

✓Left-align body text — never justified

✓Sentence case for body, title case for headlines

✓Oxford comma in all lists

✓Em dashes for parentheticals, no spaces

✗Never underline unless it's a hyperlink

✗Never use all-caps for body text (eyebrows/labels only)

Tone Spectrum

Six principles that define how every piece of BR copy should feel.

Bold & Unafraid

Push boundaries and challenge the ordinary. Never play it safe when the moment calls for a move.

Confident & Witty

Sharp, not snarky. Clever, not trying-too-hard. The reader should feel like they're in on it.

Clear & Purposeful

Every word earns its place. No filler, no fluff, no corporate jargon.

Creative & Original

Favor the inspired idea over the predictable one. If it sounds like everyone else, start over.

Intelligent & Accessible

Sophisticated but never exclusionary. Treat the audience as thoughtful people who deserve respect.

Friendly & Professional

Warm without being casual. Approachable without being ingratiating. We're partners, not vendors.

Headline Formulas

Formula 1 — Outcome Statement

Precision fit. Dialed in mindset.

Short. Punchy. Outcome-focused. Usually two fragments. Kraft the emotional peak.

Formula 2 — Emotional Hook Question

Ready to make your brand unforgettable?

Question that assumes ambition. Kraft the payoff word. Works for CTA sections.

Formula 3 — Tension Statement

The future satisfies no one

Sets up a tension or contradiction. Makes the reader pause. Works for thought leadership.

Positioning Language

How BR talks about itself — premium, scarce, partnership-oriented.

Premium Scarcity

Position as selective, not available. We choose partners, not accept clients.

"We take on a limited number of new partners each quarter."

Partnership Framing

Never "vendor" or "agency." Always partner, collaborator, extension of their team.

✓"Your strategic partner"

✓"An extension of your team"

✗"Our agency services"

✗"We are a vendor of..."

Emotionally Resonant

Root everything in ROE (Return on Emotion). Decisions are emotional — speak to that.

✓"Crafting bold, emotionally resonant solutions"

✓"Connections that inspire action"

✗"Delivering marketing solutions"

✗"Increasing brand awareness"

Words We Use

BR Words

ignite
craft
elevate
bold
resonate
disrupt
transform
unforgettable

Never Use

leverage
synergy
utilize
optimize
stakeholder
deliverables
scalable
best-in-class

Localization

BR is global — language adapts to audience.

Spelling & Measurement

Global / Default

U.S. English spelling
Imperial + metric (imperial first)
Avoid local idioms or slang

Regional / Client-Facing

Local spelling conventions
Local measurement system
UK/Europe: metric (miles excepted)
US: imperial only

Expanding

More voice guidelines in progress

Do/Don't library, email subject line formulas, and case study narrative structures are being codified from live BR projects.

Web Standards

Brand Colors

Typography

Spacing

Animation

Components

The Kraft Rule

Responsive

Email Standards

Code Conventions

Photography & Media

Accessibility

Editorial

Brand Voice

More voice guidelines in progress