BEA's colour system is built around a single authoritative teal. It reads as modern, professional, and trustworthy without being clinical. Black provides structural contrast for commercial contexts. The light teal family creates hierarchy and warmth in secondary sections without adding a competing colour. All hex values are the production standard used across Klaviyo, Shopify, and all printed or digital materials. Colour choice is constrained by accessibility: read Section 02 before pairing any foreground with any background.
Brand Teal (#3c9a9a) is the identity colour of the BEA system. It must appear in every email and on every page, and its value is never substituted or altered. What changed in July 2026 is where it may appear. At 3.343:1 against white it does not carry legible text, it does not carry a white button label, and it does not sit behind text below 24px.
Where Brand Teal may appear, stated once and completely: borders, icons, dividers, chips, and other non-text elements, which need only 3:1. As a button fill under a Roast Black (#000000) label, which measures 6.281:1. Behind display type of 24px and above. That is the whole list. It is not a text colour on white, and it is not a text colour on any surface where it would fall below 4.5:1.
Two tonal siblings do the work Brand Teal cannot. Button Teal (#327f7f) is the button fill under a white label (4.690:1). Espresso Teal (#2a6d6d) is the text and link colour on every light surface (5.988:1 on white), the hover fill for Button Teal, and the background of every teal surface that carries text, including the email hero. All three sit on the identical 180° hue at lightness 42.0%, 34.7% and 29.6%: one clean tonal ramp, not three colours. Espresso Teal is no longer a "deep surfaces only, use sparingly" colour, and any older document that says so is superseded by this one.
Cafe Teal (#52b5b5) is lighter than Brand Teal and therefore fails harder. It is never a hover state: a white label on Cafe Teal measures 2.433:1. Hover always moves darker, never lighter.
Light Teal extends Brand Teal into large background areas without dominating. Use Milk Foam Teal for full email sections and panel blocks. Never use it for text or buttons: it lacks sufficient contrast. It pairs warmly with black body copy and white cards. On both light teal surfaces, the approved text colours are Ground Dark (#333333), Espresso Teal (#2a6d6d) and Slate Grey (#666666). Brand Teal is not a text colour here either: it measures 2.964:1 on Milk Foam Teal.
Black and dark tones create the structural frame. Roast Black (#000000) is used for footer backgrounds and dark email sections only: it is a structural tool, not a brand colour. Ground Dark (#333333) is the standard body copy colour across all digital and email contexts.
Slate Grey (#666666) replaces Steam Grey (#8a8a8a) as the muted text colour, effective July 2026. Steam Grey measures 3.452:1 on white and 3.251:1 on Parchment, so it never cleared AA anywhere in this palette. Slate Grey clears AA on every light surface BEA uses: white 5.742:1, Parchment 5.407:1, Cream Teal 5.403:1, Milk Foam Teal 5.089:1, Filter Paper 5.038:1, Press Trim 4.949:1.
Why #666666 and not a lighter grey. An intermediate #707070 looks like it works: it measures 4.663:1 on Parchment. It fails on Filter Paper (#f0f0f0) at 4.345:1, and Filter Paper is this guide's own declared page and email background. #707070 needs a background lighter than L = 0.9041 to pass, which most of the palette is not. A label colour has to survive every surface the brand might put behind it, not just the one surface the designer had in mind when they picked it. Do not use #707070. Steam Grey stays in the palette for genuinely decorative, non-text use only.
Neutrals provide breathing room and legibility. Filter Paper (#f0f0f0) is the outermost background in every email — never use pure white as the outer wrapper. Parchment (#f8f8f8) is for sign-off sections and subtle row differentiation.
Every BEA colour pairing must clear WCAG 2.2 Level AA. This section is the authority: if a pairing is not in the table below, it has not been measured and must not ship. Ratios are computed from the sRGB relative-luminance formula. Nobody needs to recompute them, and nobody should guess. A colour that looks fine on a designer's monitor is not evidence.
| Foreground | Background | Ratio | Approved for |
|---|---|---|---|
| Roast Black #000000 | White #ffffff | 21.000:1 | All text |
| Ground Dark #333333 | White #ffffff | 12.634:1 | All text |
| Ground Dark #333333 | Milk Foam Teal #e6f4f4 | 11.196:1 | All text |
| Roast Black #000000 | Brand Teal #3c9a9a | 6.281:1 | All text, incl. button labels |
| Espresso Teal #2a6d6d | White #ffffff | 5.988:1 | All text, links |
| White #ffffff | Espresso Teal #2a6d6d | 5.988:1 | All text, button labels, hover fill |
| Slate Grey #666666 | White #ffffff | 5.742:1 | All text |
| Slate Grey #666666 | Parchment #f8f8f8 | 5.407:1 | All text |
| Slate Grey #666666 | Cream Teal #f0fafa | 5.403:1 | All text |
| Espresso Teal #2a6d6d | Milk Foam Teal #e6f4f4 | 5.307:1 | All text, links |
| Slate Grey #666666 | Milk Foam Teal #e6f4f4 | 5.089:1 | All text |
| Slate Grey #666666 | Filter Paper #f0f0f0 | 5.038:1 | All text |
| Slate Grey #666666 | Press Trim #eeeeee | 4.949:1 | All text |
| White #ffffff | Button Teal #327f7f | 4.690:1 | Button labels, all text |
| White #ffffff | Brand Teal #3c9a9a | 3.343:1 | Display type 24px+ only. Never buttons, never body copy, never a hero. |
| Brand Teal #3c9a9a | White #ffffff | 3.343:1 | Non-text only: borders, icons, dividers, chips |
| Steam Grey #8a8a8a | White #ffffff | 3.452:1 | Non-text only. Retired as a text colour. |
| Brand Teal #3c9a9a | Milk Foam Teal #e6f4f4 | 2.964:1 | Nothing. Fails text and non-text. |
| White #ffffff | Cafe Teal #52b5b5 | 2.433:1 | Nothing. Never a hover fill. |
| #707070 (do not use) | Filter Paper #f0f0f0 | 4.345:1 | Nothing. See the trap note below. |
Decision recorded, July 2026: #327f7f is an approved extension to the BEA palette, signed off by Phil Moore on 2026-07-08. The reason it exists: Brand Teal cannot carry a white button label at AA, and BEA's buttons use a white label. #327f7f sits on the identical 180° hue as Brand Teal (L 34.7% against 42.0%), so it is a tonal step, not a new colour. It is a button fill only. It is never reused as a text, link, or icon colour.
Decision recorded, July 2026: the teal hero moves from Brand Teal #3c9a9a to Espresso Teal #2a6d6d, system-wide, with white text throughout. Signed off by Phil Moore on 2026-07-08. The reason: on Brand Teal only the H1 cleared AA, and only by the large-text exemption, while the eyebrow and subtext sat at 3.343:1. The alternative was a two-colour hero with black small text. Espresso Teal takes white at 5.988:1 across every text size, so one background serves the whole hero and nothing depends on the exemption.
Known and accepted: the red used for the "Don't" markers in this document (#d94f4f) measures 4.052:1 on white and does not meet the 4.5:1 normal-text threshold. Phil Moore accepted this on 2026-07-08 on the grounds that it is decorative chrome inside an internal brand document, not client-facing UI. It must not migrate into any client-facing surface, where 4.5:1 applies and it would fail. Should it ever move into UI, the recorded replacement is #b83c3c, which measures 5.600:1 on white and holds the same hue family.
BEA pairs two typefaces. Barlow Semi Condensed handles all structural and display text: headlines, navigation, labels, buttons, and eyebrow text. Figtree handles all body copy and paragraph text. The condensed display face carries the commercial weight, while the open, humanist body face keeps longer copy easy to read, a pairing that scales from small email captions to full-width hero headlines.
Email hero exception: In Klaviyo email hero sections only, Barlow Semi Condensed at weight 800 is used for the H1 headline (typically 48px, letter-spacing -0.5px). This is a production-specific choice in the email template for maximum visual impact and should not be applied to web, brand documents, or printed materials.
BEA has two primary logo variants: a colour version on white and a reversed white version on dark or teal backgrounds. Both come in stacked and horizontal formats. The stacked format is the primary logo for web and brand use. The horizontal format is used in space-constrained contexts such as email headers and footers.
BEA uses pill-shaped buttons (100px border-radius) across all digital touchpoints. The primary CTA is a teal pill with a white label, and that pairing fixes the fill: #327f7f Button Teal, or darker. Secondary actions use an outline treatment. Button text is always Barlow Semi Condensed at weight 600, uppercase, with 0.8px letter-spacing. Never place two primary buttons side by side in the same section.
border-radius on the <a> tag, not the <td>. Button labels cap at weight 600, so they are always "normal text" for contrast purposes and always need 4.5:1. The 3:1 large-text exemption never applies to a BEA button.#327f7f or darker. White on #327f7f is 4.690:1. White on Brand Teal #3c9a9a is 3.343:1 and fails.#3c9a9a is correct. Black on Brand Teal is 6.281:1.#2a6d6d (5.988:1 with white). Hovering to Cafe Teal #52b5b5 drops a white label to 2.433:1 and is forbidden.#2a6d6d label and border. A Brand Teal label on white is 3.343:1 and fails, even though a Brand Teal border passes as a non-text element.#2a6d6d is the default ring colour on light surfaces; white on dark.| Element | Radius | Token | Notes |
|---|---|---|---|
| Buttons | 100px | --r-pill | Always full pill. In Klaviyo HTML, apply to the <a> tag. |
| Cards / Panels | 20px | --r-lg | Email container (600px), large content panels and cards |
| Callout Blocks | 10px | --r-card | Inline callouts, info blocks, small panels |
| Badges / Labels | 100px | --r-pill | Section labels, category chips, eyebrow tags |
| Dividers / Table Headers | 0px | --r-flat | All horizontal rules and structural dividers |
BEA's Klaviyo emails and digital touchpoints follow a consistent section colour system. The table below maps each section type to its background, text colour, and typical use. These are applied across all email templates, landing page sections, and campaign graphics. Use them consistently to maintain brand recognition across every touchpoint. Every foreground choice below is constrained by Section 02: links are Espresso Teal and underlined, muted text is Slate Grey, and button fills are Button Teal.
BEA's voice is expert, direct, and commercially grounded. The audience are professionals making considered, high-value equipment decisions. Every piece of BEA copy should establish trust before it asks for business. Write like the most knowledgeable person in the room, not like a retailer running a clearance sale. If a sentence doesn't earn its place, cut it.
These rules apply to every email, web page, social post, and campaign BEA puts out. From the welcome flow to a product spotlight EDM, the same standards apply throughout.
BEA uses two distinct sender identities. Using the correct one in the right context is critical. A branded HTML template from Brett's personal address breaks the trust the personal sender format was designed to build.