BUILD YOUR BOX · 5-LB MINIMUM

Internal reference

Blackwing Style Guide

Canonical patterns for buttons, typography, spacing, and layout. Examples below use the same reusable tm-text-* classes as the live storefront.

Typography system

Esteban serif for display/editorial headlines · Source Sans 3 for body, nav, buttons, and UI. Minimum readable body = 16px. Do not shrink meaningful copy to fit layouts — adjust width, wrapping, or spacing first.

Role Class Desktop Mobile Line-height
Display / H1tm-text-display52–72px clamp40–52px1.02–1.08
Section H2tm-text-h240–48px30–36px1.08–1.18
H3 / Editorialtm-text-h324–30px22–26px1.15–1.25
Category titletm-text-category-title20–24px18–22px1.2–1.3
Body largetm-text-body-lg17–18px16–17px1.5–1.65
Body defaulttm-text-body16px min16px min1.5–1.6
Small supportingtm-text-small14–15px14–15px1.45–1.55
Eyebrowtm-text-eyebrow13–14px13–14pxtracked uppercase 600
Navtm-text-nav15–16px15px1.4–1.5
Product nametm-text-product-name16–18px16px1.2–1.3
Pricetm-text-price16–18px 70016px1.2–1.3
Health labelstm-text-health14–15px 60014px1.45
Button texttm-text-button + btn-*14–15px 60014px1.2

Live examples — production classes

Premium game & exotic meats

Shop by Protein Type

Clean land. Cleaner standards.

Bison (Buffalo)

Health-conscious proteins, wild flavor, and pantry favorites delivered direct to your door.

Every box arrives vacuum-sealed and still frozen solid — packed like a wholesale butcher that cares.

Supporting detail, card captions, and attribution lines.

Why Blackwing

View all Products

Ground Bison — 1 lb

$14.99

Grass Fed · No Antibiotics

Good

  • tm-text-body for paragraphs (16px min)
  • tm-text-eyebrow for section labels (13–14px)
  • tm-text-nav for header links (15–16px)
  • Widen column or allow wrap before reducing type size

Blackwing works with game and specialty proteins sourced from animals raised on large pastures.

Bad — do not use on meaningful content

  • text-xs (12px) on body, nav, or product copy
  • Arbitrary text-[0.6875rem] / 10–11px values
  • Tight leading-4 or wide tracking on paragraphs
  • Shrinking headlines to avoid layout changes

This 12px paragraph is too small for storefront body copy.

Readability rules

  1. Never use text-xs on meaningful storefront content.
  2. Body copy minimum 16px — use tm-text-body.
  3. Navigation 15–16px — use tm-text-nav.
  4. Eyebrows 13–14px uppercase — use tm-text-eyebrow.
  5. Health / sourcing labels 14–15px — use tm-text-health.
  6. Button labels 14–15px semibold — use btn btn-* (inherits tm-text-button scale).
  7. Display headlines use Esteban via --tm-font-heading; UI uses Source Sans via --tm-font-ui.
  8. Do not shrink text to fit — adjust spacing, wrapping, or width first.
  9. Line-height: 1.5+ for body; 1.08–1.18 for large display.
  10. Source of truth = reusable tm-text-* classes in templates, not one-off pixel utilities.

Button & CTA system

Semantic roles — one system. Pills are intentional Blackwing signature. Tokens: primary = oxblood commerce, secondary = gold commerce/decoration.

1. Transactional primary (oxblood)

btn-primary — Add to Cart, Proceed to Checkout, and other highest-intent conversion actions. TMBase assigns semantics; Blackwing supplies oxblood via --color-primary.

Proceed to Checkout →

2. Commerce secondary (gold fill)

btn-secondary — supporting gold actions (e.g. Create Account on login). Not transactional Add to Cart.

3. Homepage hero (gold exception)

btn-hero-primary / btn-hero-secondary — scoped gold CTAs on dark hero imagery only. Uses secondary tokens; do not use on product cards or PLP.

4. Editorial primary (black)

btn-editorial — login, newsletter, and strong non-transactional editorial actions on light surfaces. Not checkout or Add to Cart.

Sign In Become a Member

5. Editorial outline (gold stroke)

btn-outline — supporting editorial CTAs on light surfaces (cart drawer secondary, View All sections).

Learn Our Story →

6. Commerce / utility secondary

Outline, no gold fill. Select Options · Request Product.

Select Options Request Product

7. Tertiary / navigation link

Text + arrow. Category nav, View All, Shop by Protein.

Shop Bison View All Products

CTA usage rules

  • Oxblood (btn-primary) = Add to Cart, Proceed to Checkout, PLP/homepage card ATC, and other transactional conversion.
  • Gold fill (btn-secondary) = supporting gold actions — not transactional ATC or checkout.
  • Hero gold (btn-hero-primary, btn-hero-secondary) = homepage hero only on dark imagery.
  • Black (btn-editorial) = login, newsletter, and editorial primary on light surfaces — not checkout.
  • Gold outline (btn-outline, btn-utility) = cart drawer secondary, View All sections, product-card utility.
  • Text + arrow (link-cta) = navigation and category discovery.
  • Removed: btn-commerce (TMBase now uses btn-primary for transactional actions). accent tokens → secondary.

Spacing rhythm

8px base scale. Section padding typically py-10 md:py-14; card gaps gap-5 sm:gap-6 lg:gap-8.

Removed guidance: Do not use text-xs or text-sm for body copy on the storefront. Do not use gold-filled pills for category navigation. Do not mix inline one-off button styles — use btn-*, link-cta, and tm-text-* only. Old “Functional UI — 14–15px via text-sm” note replaced by tm-text-button.