/* ============================================================ BETTERBRAND 2026 REBRAND — SHARED TOKEN LAYER ============================================================ Provenance: "Betterbrand Brand Guidelines v0.1 (Work in Progress).pdf", 13pp, owner Tate Bollweg. Google Drive > Shared with me > Rebrand Content Assets > Brand Guide. Read directly 2026-08-07 (Tate's last edit: same day, 9:58 AM). STATUS: hexes below are READ OFF THE GUIDE'S OWN SWATCH PAGE (p10 "A warm, clinical palette"), not sampled from comps. The previous version of this file was built by eyedropping David's comps and every core hex was wrong — Fern was #1A3A1A (near-black forest) when the guide says #639332 (mid olive). Do not reintroduce sampled values. NOT in Figma. Checked every file in both Figma teams; the rebrand exists only as this PDF. Don't go looking there. THE FOUR CHANGES THAT MATTER vs. the 2022 legacy palette: 1. Canvas sage/green tints -> Floral White #FAF5EE 2. Buttons gold #F2CB49 -> Fern family (never gold) 3. Headline forest green -> Onyx #0F0F0E 4. Gold was the CTA fill -> attention flag only AND the thing that is more the look than the palette is (guide p12, "Signature system"): 1.5px Onyx keylines, solid 4px offset Onyx shadow NEVER soft blur, bordered stamps. Squared and hard-shadowed. Not rounded and soft. The old version of this file had 8/12/16px radii and soft shadows, which read as generic SaaS, not as this brand. Tokens live on a WRAPPER class, never :root — Shopify sections resolve :root custom props unreliably and collapse var() fonts to monospace. See cro skill gotcha 33b. ============================================================ */ .bb26 { /* ---- Core surfaces ---------------------------------------- Guide: "Floral White is the ground almost everywhere... everything else is a quiet supporting tint." Alternate floral with ONE tint. Two colored sections never touch. */ --bb-canvas: #FAF5EE; /* Floral White. The ground. */ --bb-surface: #FFFFFF; /* cards that must lift off canvas */ /* The five supporting tints, exact names + hexes from p10. Pick ONE per page as the alternating band. Do not stack. */ --bb-sage: #EAEFDF; --bb-field: #DCE6CE; --bb-sky: #DFE9F3; --bb-soft-yellow: #FBEFC2; --bb-clay-tint: #F3E7DB; /* ---- Brand ---- */ --bb-fern: #639332; /* PRIMARY. The one true brand colour. */ --bb-fern-deep: #4D7628; /* deep variant. See --bb-btn note. */ /* ---- Accent. Guide: "Gold flags attention." Never a button. */ --bb-gold: #FFD447; /* ---- Supporting saturates. Sparing, one per block. ---- */ --bb-terracotta: #CE6C3D; --bb-editorial-blue:#3E78B2; /* ---- Text ---- */ --bb-onyx: #0F0F0E; /* headlines + primary. 17.7:1 on canvas. */ --bb-body: #6E6A62; /* DERIVED, not a guide swatch. The guide lists no body grey. 4.96:1 on canvas, passes AA. Warm, never green. */ --bb-muted: #85817A; /* captions, disclaimers. Derived. */ --bb-on-dark: #FAF5EE; --bb-on-dark-soft: rgba(250,245,238,.72); /* ---- THE BUTTON FILL — documented deviation, read this ---- The guide says "Fern is the only button color." Taken literally that means Fern #639332, but white label text on #639332 is only 3.66:1, which fails AA for normal text and is borderline even as large text at our 18px/800 CTA. Fern Deep #4D7628 gives 5.33:1 and passes AA cleanly, and it matches what the guide's OWN button examples look like on p11 ("SHOP NOW") and p12 ("GET THE BOX"). So: button fill = Fern Deep, brand colour = Fern. Still the Fern family, still never gold. Flag to Tate; if he wants literal #639332, darken the label instead of the fill. */ --bb-btn: var(--bb-fern-deep); --bb-btn-hover: #3E5F20; /* derived, -6% lightness */ --bb-btn-label: var(--bb-on-dark); /* ---- Structural ---- */ --bb-rule: rgba(15,15,14,.10); --bb-rule-strong: rgba(15,15,14,.18); /* ---- Signature system (guide p12). This is the brand's fingerprint. Use these, not radii and blur. ---- */ --bb-keyline: 1.5px solid var(--bb-onyx); --bb-shadow-hard: 4px 4px 0 var(--bb-onyx); /* ---- Type (guide p11: "Three typefaces, one voice") ------- Tiempos LEADS headlines. Söhne names things (product names + labels). Mier A does the work (body + UI). Weight 800 is reserved for buttons and short labels only. Conner's sans-for-45+ QC rule is about copy read at LENGTH, which stays Mier A sans. Headlines are large and high contrast, so Tiempos there is not a legibility risk. If a specific lander tests better with a sans H1, override --bb-font-display on that page rather than editing this. Real brand fonts are a copyright risk on test builds, so every stack falls back to system faces that hold the same shape class. */ --bb-font-display: "Tiempos Headline", "Tiempos Text", Georgia, "Times New Roman", serif; --bb-font-label: "Sohne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-font-body: "Mier A", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ---- Scale (Conner floor: body >=17px @ 500-600) ---- */ --bb-t-body: 17px; --bb-t-body-lg: 18px; --bb-t-w-body: 500; --bb-t-cta: 18px; --bb-t-w-cta: 800; --bb-t-label: 12px; /* ---- Shape. Squared, per the signature system. ---- */ --bb-r-btn: 0; --bb-r-card: 0; --bb-r-media: 0; /* ---- Rhythm ---- Guide p12: "header to content about 32px, hero blocks about 24px. Balance the gap above and below every element." Section padding stays 64/48 per cro gotcha 30 (never 96 dead bands). */ --bb-gap-header: 32px; --bb-gap-hero: 24px; --bb-pad-y: 64px; --bb-pad-y-mob: 48px; --bb-maxw: 1200px; } /* Element resets scoped with :where() so they contribute ZERO specificity and never beat component classes. cro gotcha 33b. */ :where(.bb26) * { box-sizing: border-box; } :where(.bb26) img { max-width: 100%; display: block; } .bb26 { background: var(--bb-canvas); color: var(--bb-body); font-family: var(--bb-font-body); font-size: var(--bb-t-body); font-weight: var(--bb-t-w-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } .bb26 h1, .bb26 h2, .bb26 h3 { font-family: var(--bb-font-display); color: var(--bb-onyx); line-height: 1.08; letter-spacing: -0.01em; font-weight: 400; /* Tiempos carries at regular. 800 is buttons/labels only. */ } .bb26 h1 { font-size: clamp(38px, 5.2vw, 62px); } .bb26 h2 { font-size: clamp(28px, 3.4vw, 42px); } .bb26 h1 + *, .bb26 h2 + * { margin-top: var(--bb-gap-header); } /* THE button. Fern-family fill, Floral White label, hard onyx shadow, squared. There is no gold button in this system. */ .bb26 .bb-btn { display: inline-block; background: var(--bb-btn); color: var(--bb-btn-label); font-family: var(--bb-font-label); font-size: var(--bb-t-cta); font-weight: var(--bb-t-w-cta); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; padding: 16px 28px; border: var(--bb-keyline); border-radius: var(--bb-r-btn); box-shadow: var(--bb-shadow-hard); text-decoration: none; white-space: nowrap; /* taste-skill: CTA must not wrap */ cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; } .bb26 .bb-btn:hover { background: var(--bb-btn-hover); box-shadow: 2px 2px 0 var(--bb-onyx); transform: translate(2px, 2px); } .bb26 .bb-btn:active { box-shadow: 0 0 0 var(--bb-onyx); transform: translate(4px, 4px); } /* Keylined card / field / panel. Guide p12: 1.5px onyx keylines frame cards, stamps and fields. */ .bb26 .bb-card { background: var(--bb-surface); border: var(--bb-keyline); border-radius: var(--bb-r-card); padding: 24px; } .bb26 .bb-card--raised { box-shadow: var(--bb-shadow-hard); } /* Bordered stamp. Labels things like New or Studied (guide p12). Gold fill for a claim, plain for a qualifier. */ .bb26 .bb-stamp { display: inline-block; font-family: var(--bb-font-label); font-size: var(--bb-t-label); font-weight: var(--bb-t-w-cta); letter-spacing: .12em; text-transform: uppercase; color: var(--bb-onyx); background: transparent; border: var(--bb-keyline); padding: 5px 10px; } .bb26 .bb-stamp--gold { background: var(--bb-gold); } /* Small-caps label. Rationed: max 1 per 3 sections (taste-skill eyebrow restraint, and it is our most-violated rule). */ .bb26 .bb-eyebrow { font-family: var(--bb-font-label); font-size: var(--bb-t-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bb-fern-deep); } .bb26 .bb-stars { color: var(--bb-gold); letter-spacing: .06em; } /* Alternating band. Apply ONE tint class per page and alternate it with bare canvas. Guide: two colored sections never touch. */ .bb26 .bb-band--sage { background: var(--bb-sage); } .bb26 .bb-band--field { background: var(--bb-field); } .bb26 .bb-band--sky { background: var(--bb-sky); } .bb26 .bb-band--clay { background: var(--bb-clay-tint); } .bb26 section { padding: var(--bb-pad-y) 24px; } .bb26 .bb-wrap { max-width: var(--bb-maxw); margin: 0 auto; } @media (max-width: 900px) { .bb26 section { padding: var(--bb-pad-y-mob) 20px; } } @media (prefers-reduced-motion: reduce) { .bb26 .bb-btn { transition: none; } .bb26 .bb-btn:hover, .bb26 .bb-btn:active { transform: none; } }