Internal reference

Brand Guidelines

A living reference for the Better visual system as it currently exists.

Color system

Core palette

Porsche

#AF8E70 Accent primary

Crema

#E6DAC5 Accent secondary

Black

#000000 Text primary

Grey

#A1A1A1 Borders and muted text

White

#FFFFFF Surface and page background

Typography

Active token set

These are the live homepage type tokens currently embedded in the theme code and actively reused by the most standardized homepage sections.

Header text

H1

Page-level display heading

Size: clamp(3.2rem, 4.6vw, 4.9rem) Line height: 1.04 Letter spacing: -0.025em Weight: 600

H2

Hero headings and major section titles

Size: clamp(2.7rem, 3.9vw, 4.2rem) Line height: 1.06 Letter spacing: 0 Weight: 500

H3

Card names and compact editorial headings

Size: clamp(1.7rem, 1.5vw, 2.1rem) Line height: 1.1 Letter spacing: -0.01em Weight: 600

H4

Overlines and section labels

Size: 1.15rem Line height: 1.2 Letter spacing: 0.18em Weight: 600

H5

Micro metadata and small uppercase detail

Size: 1.1rem Line height: 1.2 Letter spacing: 0.1em Weight: 500

Paragraph text

P1

Long-form intro and richer supporting editorial copy

Size: 20px Line height: 30px Weight: 300

P2

Metadata, support text, quotes, and table copy

Size: 14px Line height: 1.3 Weight: 400

Buttons

B1 primary CTA

B1 is the primary homepage CTA system. It defines the geometry, letter spacing, radius, and hover-lift pattern reused across the more standardized homepage sections.

Hover behavior: upward lift, no heavy drop shadow, with a glossy crema sheen that sweeps horizontally across the button surface.
Base colors
Porsche fill with black text and arrow
Radius
13px
Weight + tracking
600 with 0.08em letter spacing
Desktop
280px x 70px, 16px, gap 20px, inline padding 3rem
Tablet
320px x 70px, 14px, gap 20px, inline padding 3rem
Mobile
100% width, 40px height, 14px, gap 11px, inline padding 8px

Layout system

Section padding and page width

Most of the standardized homepage modules now share one vertical rhythm and one container rule. Use this as the default before introducing section-specific exceptions.

Section padding

The standardized homepage sections use the same top and bottom spacing so the page reads with a calmer, more editorial cadence.

Breakpoint Padding Usage
Desktop 68px Default top and bottom rhythm for standardized homepage sections
989px and below 54px Compact tablet and mobile rhythm
Source --better-homepage-section-spacing Defined in assets/custom.css and reused by the homepage section overrides
Start with this rhythm for section shells. Only break it when a section needs a purposeful exception, not because the default feels unfinished.

Page width

Content should usually sit inside the shared .page-width container while backgrounds, gradients, and marquees can still bleed full width.

Rule Value Notes
Theme setting 1500px The live global page-width setting in the theme
CSS token 150.0rem Exposed as --page-width in layout/theme.liquid
Default wrapper .page-width Use for copy, cards, comparison tables, and most structured content
  • Let the section background stretch edge to edge, then align the meaningful content inside .page-width.
  • Use wider custom shells only when the design clearly needs a different framing system.
  • Keep repeated content blocks aligned to the shared page width so the site feels intentionally composed from section to section.

Component mapping

Homepage applications

These are the clearest live examples of the token system in use today, including where the implementation stays pure and where it intentionally breaks out.

Trust Ambassadors

This is one of the cleanest examples of the token system applied directly and consistently.

Element Token Notes
Overline H4 Porsche, uppercase
Heading H2 Primary section headline
Intro copy P1 Long-form editorial support
Card name H3 Crema on image overlay
Role + quote P2 White metadata and quote text
Strip detail H5 Small uppercase follower detail

Ingredients Spotlight

This section mostly follows the shared system but includes a few important exceptions worth preserving or deliberately refactoring.

Element Token Notes
Section title Visual H2 Markup uses h3, styling uses H2
Description Custom 1.7rem / 1.55, black
Primary CTA B1 Shared homepage geometry
Secondary CTA Custom Crema outline companion button
Ingredient name Visual H3 Markup uses h4, styling uses H3
Quantity + quote P2 White support text on dark overlay

Behavior

Interaction patterns

The visual system is tightly paired with behavior. These components are not just styled cards; they have motion, layout-switching, and accessibility expectations.

Ingredients rail

  • Creates a seamless infinite loop by duplicating slides with .is-clone.
  • Auto-scrolls when not hovered, focused, or dragged.
  • Supports pointer dragging with momentum.
  • Pauses for reduced-motion users.

Supplement facts modal

  • Opened through data-supplemental-facts-open triggers.
  • Moves focus to the close button after opening.
  • Closes on overlay click, close control, or Escape.
  • Locks body scroll while active.

Trust ambassador gallery

  • Switches into slick gallery mode on narrow or wrapping layouts.
  • Gallery autoplay pauses during hover and touch interaction.
  • Quote toggles only activate on compact layouts.
  • Expanded mobile states collapse when leaving compact mode.

Responsive standards

  • Ingredients CTA row collapses under 989px.
  • Ingredient cards shrink from 400 x 560 to 290 x 400.
  • The facts modal compresses again under 749px.
  • Most critical mobile overrides live in custom.css, not responsive.css.

Governance

Exceptions and source priority

This system is real, but it is not yet perfectly centralized. Use these notes when extending or cleaning it up.

Current exceptions

  • Some elements use H2 or H3 visually while keeping different semantic tags.
  • .ingredients-spotlight__desc uses a custom size instead of P1 or P2.
  • The "Supplement Facts" button is not a B1 button. It is a custom outline companion CTA.
  • Older global typography rules still exist earlier in assets/custom.css.

Recommended source priority

  1. Start with assets/custom.css for token definitions and homepage section styling.
  2. Use sections/trust-ambassadors.liquid as the cleanest token-led reference.
  3. Check sections/ingredients-sec.liquid for real-world exceptions and paired markup.
  4. Use assets/custom.js when a visual change touches rails, gallery mode, or modal behavior.
  5. Use assets/responsive.css as a supporting layer, not the first source of truth.