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 → kraft

Scroll Drop

Vertical kraft fade, scroll indicators

Shadows

Media

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

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

Four curves, each for a specific purpose.

Primary

Word

Simple

Float

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

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

        Simple: ease

        Float: ease-in-out

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.

IntersectionObserver Thresholds

When elements trigger — all fire once and unobserve.

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 → kraft. Entrance: scaleX(0) → scaleX(1), origin left.

Image Hover

scale(1.04) + saturate(1.1) brightness(1.05). 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: Dark Forest, 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

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 → 32px

Section padding horizontal: 40px → 24px

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

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

ALL entrance animations disabled — content visible by default

Section H2: 26px (explicit override)

Body: 16px → 14px

Grid: multi-column → single column

Section padding horizontal: 24px → 16px

Gaps: 24px → 20px

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

Quote padding: → 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.


/* e.g., br-acme-hero, br-acme-overview */

.br-acme-hero { }

.br-acme-hero__title { }

.br-acme-hero__subtitle { }

.br-acme-hero__cta { }

JS Naming

IDs use camelCase.


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

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

Required Block Header


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

   BR [Client] — [Block Name]

   Brand Revolution Design Standards

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

Required Reset + Font Stack

Every block includes both. No exceptions.


.br-client-block * {

  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).


/* CORRECT */

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


/* WRONG — deprecated */

.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

Heroes and CTAs. Covers viewport, centered with transform.


.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

Splits and showcases. Uses aspect-ratio with absolute iframe. 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 with absolute iframe

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

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

Image Treatment

Images are darkened and slightly desaturated — never fully B&W. This maintains warmth while keeping text readable.

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

Aspect Ratios

Three ratios. Use the right one for the context.

16 : 9

Video players, hero backgrounds, showcases

16 : 10

Case study thumbnails, next-block cards

4 : 3

Display grids, gallery cells

Image Framing

Consistent border-radius by context. Never sharp corners on images.

4px — Thumbnails, grid cells

6px — Video players, feature images

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

Diagonal Overlays

135-degree gradient overlays for text over imagery. Not the old top-to-bottom pattern.


/* 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

Consistent video play button across all players.

▶

        52px circle

        background: rgba(0,0,0,.45)

        border: 2px solid rgba(245,243,243,.5)

        Centered absolute positioning

Media Depth

Shadow and hover for image containers.

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

Video players and feature media

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

Hover — subtle scale + warmth boost

border: 2px solid transparent → #C49A6C

Active thumbnail — kraft border highlight

Kraft Contrast Rules

Kraft (#C49A6C) has limited contrast. Where it can and can't be used for text.

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

Focus States

Every interactive element needs a visible focus ring for keyboard navigation.


/* Standard focus ring */

border-color: var(--kraft);

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

← Active focus state

Semantic Markup

Required patterns for accessible HTML.

✓ 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

Alignment

Body and hero text left-aligned. Quotes, metrics, and CTAs centered.

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)

Weight & Tracking

Headlines go tight, body goes light. This contrast creates hierarchy without size alone.

Tight headlines

weight: 700 | tracking: -0.03em

Light body text with generous leading creates comfortable reading rhythm across longer passages.

weight: 300 | tracking: 0 | line-height: 1.75

Fluid Type

All display text uses clamp() — no manual breakpoint overrides needed.


/* Headlines scale automatically */

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


/* Subtitles */

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


/* Quotes */

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


/* Stats numbers */

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

Copy Patterns

How BR headlines, CTAs, and positioning copy are structured.

Headlines — Outcome-Focused

Precision fit. Dialed in mindset.

CTAs — Emotional Hook Questions

Ready to make your brand unforgettable?

Positioning — Premium Scarcity

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

Editorial Rules

Formatting rules that apply to all BR copy.

✓ 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)

✗ Never use justified text alignment

Tone Spectrum

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

◆

Bold & Unafraid

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

◆

Confident & Witty

Blend humor with authority. 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. If a sentence doesn't move the reader forward, cut it.

◆

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, not jargon.

◆

Friendly & Professional

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

Headline Formulas

Three patterns that drive BR headlines. Each serves a different moment.

Formula 1 — Outcome Statement

Precision fit. Dialed in mindset.

Short. Punchy. Outcome-focused. Usually two fragments. Kraft the emotional peak. Works for hero sections and case study headers.

Formula 2 — Emotional Hook Question

Ready to make your brand unforgettable?

Question that assumes ambition. Kraft the payoff word. Always a question the reader already wants to answer "yes" to. Works for CTA sections.

Formula 3 — Tension Statement

The future satisfies no one

Sets up a tension or contradiction. Kraft lands on the unexpected word. Makes the reader pause. Works for thought leadership and brand manifesto moments.

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

Language that sounds like BR — and language that doesn't.

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 with real before/after examples, 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 Coming Soon

More voice guidelines in progress