---
title: "SAPGOODENERGY design system"
variant: extended
source: https://sapgoodenergy.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/sapgoodenergy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SAPGOODENERGY · Design System

> Natural fuel, bold type, and runner-led energy.

**Theme:** light · **Industry:** food-beverage · **Source:** https://sapgoodenergy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SAPGOODENERGY presents natural maple-and-salt endurance fuel through a spacious, image-led storefront. Oversized compressed headlines and sharp orange accents balance clean product cards with candid running photography.

## North star

Use oversized athletic typography and spacious white framing to make real runner and product imagery—not decoration—the page’s energy.

## Overview

The page uses a white canvas as a quiet frame for full-bleed runner videos, pale product cards, and large typographic statements. The measured palette’s orange, #ff4c00, is the clearest brand signal: it marks benefit headings, review details, promotional imagery, and the newsletter panel rather than colouring every control. Headlines use Helvetica Neue LT Std in heavy-looking uppercase forms, tight tracking, and compressed line spacing; GT Pressura LC Standard carries navigation, buttons, and compact supporting copy. Content alternates between broad, airy sections and three-column product or editorial cards, with generous separation that lets imagery register. Product photography emphasizes reflective single-serve packs, while lifestyle imagery feels candid and kinetic. Pale greys distinguish cards and headings from the canvas; a deep burgundy band creates a rare, deliberate contrast. Keep interaction surfaces simple, rely on clear labels, and avoid decorative depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and white navigation, button, and text surfaces. |
| Track Blue | `#2491c4` | `--color-track-blue` | accent | Measured blue primary shop CTA fill and border; use as a sparse action accent. |
| Pale Graphite | `#c5c5c5` | `--color-pale-graphite` | neutral | Common card and interface hairlines, with occasional subdued text. |
| Cool Card Grey | `#e7e7e7` | `--color-cool-card-grey` | surface | Grey feature-card background and occasional content surface. |
| Mist Grey | `#adadad` | `--color-mist-grey` | neutral | Muted copy and subdued heading text. |
| Maple Cream | `#f6f6f1` | `--color-maple-cream` | surface | Warm, light product and review card surfaces. |
| Sap Orange | `#ff4c00` | `--color-sap-orange` | brand | Signature headings, promotional section, links, and review accents. |
| Deep Reddish Brown | `#2a0a0a` | `--color-deep-reddish-brown` | surface | Dark full-width Maple feature band, providing the page’s strongest non-image contrast. |
| Ash Text | `#9b9b9b` | `--color-ash-text` | neutral | Measured muted text and button text; use for secondary information. |
| Runner Ink | `#000000` | `--color-runner-ink` | semantic | Navigation, body copy, and text on light buttons or orange links. |
| Stone Grey | `#848484` | `--color-stone-grey` | neutral | Occasional subdued text and headings, not a dominant brand surface. |
| Slate Grey | `#7a7a7a` | `--color-slate-grey` | neutral | Sparse low-emphasis heading and text details. |
| Soft Silver | `#c0c0c0` | `--color-soft-silver` | neutral | Occasional heading and text variation in the grey display palette. |
| Edge Grey | `#eeeeee` | `--color-edge-grey` | neutral | Minor border detail; not a defining page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e7e7e7` (Cool Card Grey) · `--color-surface-2` → `#f6f6f1` (Maple Cream) · `--color-surface-3` → `#2a0a0a` (Deep Reddish Brown) · `--color-text` → `#9b9b9b` (Ash Text) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (Runner Ink) · `--color-border` → `#c5c5c5` (Pale Graphite) · `--color-accent` → `#ff4c00` (Sap Orange) · `--color-accent-2` → `#2491c4` (Track Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#9b9b9b` | `#ffffff` | 2.78:1 | fail |
| `#9b9b9b` | `#e7e7e7` | 2.25:1 | fail |
| `#9b9b9b` | `#f6f6f1` | 2.56:1 | fail |
| `#9b9b9b` | `#2a0a0a` | 6.59:1 | AA |
| `#ffffff` | `#e7e7e7` | 1.24:1 | fail |
| `#ffffff` | `#f6f6f1` | 1.08:1 | fail |
| `#ffffff` | `#2a0a0a` | 18.32:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e7e7e7` | 16.98:1 | AAA |
| `#000000` | `#f6f6f1` | 19.37:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Pressura LC Standard | `--font-body` | webfont | 500, 700 | Navigation, body copy, buttons, and links | Roboto Condensed |
| Helvetica Neue LT Std | `--font-display` | webfont | 500, 800, 700 | Display and section headings, plus card titles | Arial |

- **GT Pressura LC Standard:** Compact sans; measured 500 weight. Body and navigation commonly uppercase; buttons and links use mixed case or uppercase labels.
- **Helvetica Neue LT Std:** Uppercase display style with tight negative tracking and compact line-height; measured 500 weight in headline roles.

### Type scale — Perfect Fourth (ratio ≈ 1.349, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62.5px | 500 | 0.91 | -0.05em | uppercase | Helvetica Neue LT Std | Oversized page masthead and prominent campaign statements. |
| h1 | 50px | 500 | 0.9 | -0.06em | uppercase | Helvetica Neue LT Std | Large uppercase hero and newsletter headlines. |
| h2 | 42px | 500 | 0.88 | -0.05em | uppercase | Helvetica Neue LT Std | Major section titles such as WHY SAP. |
| h3 | 40px | 500 | 1 | -0.05em | uppercase | Helvetica Neue LT Std | Feature and benefit headings. |
| h4 | 30px | 500 | 1.03 | -0.05em | uppercase | Helvetica Neue LT Std | Product-card and smaller section headings. |
| body | 14px | 500 | 1.14 | 0 | uppercase | GT Pressura LC Standard | Compact uppercase product, benefit, and supporting copy. |
| button | 14px | 500 | 1.14 | 0 | — | GT Pressura LC Standard | Shop, story, and bundle action labels. |
| nav | 16px | 500 | 1 | 0 | uppercase | GT Pressura LC Standard | Uppercase header navigation labels. |
| link | 14px | 500 | 1.6 | 0 | — | GT Pressura LC Standard | Editorial, product, and supporting text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 7, 8, 10, 12, 16, 18, 20, 23, 24, 27, 29, 32, 35, 36, 40 px.
- Section rhythm 96px · element gap 4px · card padding 27px · max content width 1432px.

A spacious, long-form storefront sits on a white canvas, with measured maximum content width of 1432px and section separation around 96px. Full-bleed hero media and a dark feature band interrupt otherwise contained sections. Product, feature, review, and editorial content commonly uses three columns; the benefit section splits copy from imagery. Alignment shifts between centered display headings and left-aligned card content. The overall density is low, with wide white gaps around cards and large campaign areas.

## Shape & elevation

- Radius: button `7px` · card `18px` · link `18px` · xs `5px` · sm `7px` · md `14px` · lg `15px` · xl `18px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 7px 0px`
- Shadow `inset` (link): `rgb(0, 0, 0) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: white canvas, pale card fills, and fine grey borders do most of the separation. Cards have softly rounded corners, with product and review tiles feeling restrained rather than elevated. A small measured button shadow exists, but avoid relying on shadows or layered effects as a defining visual device.

## Imagery

Use runner-focused video and candid lifestyle photography as the main emotional content, with full-bleed framing in the opening hero. Product imagery shows reflective sachets and mix packaging against pale, unobtrusive backgrounds. Review tiles use runner portraits; editorial cards pair fuel and running scenes. The measured screenshot’s green-blue tones belong chiefly to photography, not the core UI palette.

## Components

### Hero media

Large rounded, full-width runner video with small overlaid uppercase navigation, a lower-left campaign line, and a light SHOP ALL button.

### Product cards

Three-column product presentation with pale cream or grey surfaces, package imagery, concise product facts, and compact shop links.

### Benefit split

Large WHY SAP heading followed by explanatory benefit text beside lifestyle photography; orange marks the featured benefit.

### Dark campaign band

Full-width #2a0a0a Maple feature area with a centered, light-colored exploration CTA.

### Review cards

Light, rounded testimonial tiles with orange rating details, compact copy, and verification cues.

### Bundle promotion

Orange promotional visual featuring a product bundle, short offer headline, and a contrasting shop button.

### Newsletter panel

Prominent orange signup area with oversized club headline, supporting copy, email inputs, and clear submission actions.

### Measured component styles

- **Primary button** (“SHOP SAP GOOD ENERGY”): background #2491c4 · text #ffffff · border 2px solid #2491c4 · radius 5px · padding 10px 15px · 500 16px GT Pressura LC Standard
- **Secondary button** (“OUR STORY”): background #ffffff · text #000000 · radius 7px · padding 0px 20px · 500 14px GT Pressura LC Standard · uppercase
- **Link** (“BUY 3 GET 1 FREE CREATE YOUR OWN SAP BUN”): background #ff4c00 · text #000000 · radius 18px · padding 0px · 500 14px GT Pressura LC Standard
- **Card** (“perfect fuel for a race "PERFECT FUEL FO”): background #f8f7f2 · text #000000 · radius 15.26px · padding 29px 27px 23px 27px · 500 14px GT Pressura LC Standard
- **Navigation item** (“( SAP ) SHOP WHY SAP MAGIC OF MAPLE 0”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px GT Pressura LC Standard

## Do

- Keep the page canvas white and let images carry much of the color.
- Set major headings in uppercase with tight, compressed spacing.
- Reserve #ff4c00 for brand moments, highlighted benefits, and promotions.
- Use GT Pressura LC Standard-style compact typography for navigation and controls.
- Give content sections generous breathing room.
- Use pale, rounded cards for products and reviews.

## Don't

- Do not make every section a colored panel.
- Do not use gradients as a substitute for the flat measured palette.
- Do not add heavy shadows or elaborate layered UI.
- Do not treat photographic green and blue tones as core brand colors.
- Do not set supporting copy in oversized display typography.
- Do not crowd the product cards with extra decoration.

## Agent prompt

Build a new SAPGOODENERGY-style storefront page with a spacious white canvas and a clear athletic editorial character. Use Gallery White (#ffffff) as the frame, Runner Ink (#000000) for navigation and copy, and Sap Orange (#ff4c00) sparingly for key benefits and promotional emphasis. Use Track Blue (#2491c4) only for a measured primary shop action when appropriate. Pair oversized, tightly tracked uppercase display headings with compact sans-serif navigation and controls. Create wide image-led hero areas, pale product and review cards, and occasional full-width campaign bands in Deep Reddish Brown (#2a0a0a). Favor real runner photography and pack imagery over decorative illustration. Keep sections generously separated, cards simple and softly rounded, and interactions easy to scan. Avoid gradients, heavy shadows, and unnecessary visual clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width media hero beneath oversized brand masthead. | Shop all CTA, Carousel indicators | Runner video, Overlay navigation, Uppercase campaign title |
| 2 | feature-split | Three-column story area with product imagery and surrounding whitespace. | Shop SAP link | Large product image, Uppercase value statement, Open white canvas |
| 3 | product-grid | Three product cards aligned in a row. | Individual product links | Pale rounded cards, Pack photography, Compact facts |
| 4 | feature-split | Centered section heading above two-column benefits and photography. | Benefit-led reading | Oversized heading, Orange selected benefit, Lifestyle photograph |
| 5 | video | Full-width campaign band. | Explore CTA | Deep burgundy background, Centered button |
| 6 | team | Wide, centered story panel within a white section. | Our Story link | Rounded grey panel, Centered headline |
| 7 | testimonials | Horizontally arranged runner quote cards. | Browse testimonial carousel | Runner photography, Quote overlays, Compact attribution |
| 8 | reviews | Three-column review card grid. | Read all reviews | Pale cards, Orange rating details, Verified labels |
| 9 | recommendations | Centered promotional product block beside a large headline. | Shop bundle | Orange offer panel, Bundle pack image, Contrasting CTA |
| 10 | content-feed | Centered title over three editorial cards. | Open guide or post | Running photography, Image cards, Bottom overlay labels |
| 11 | newsletter | Centered oversized heading above a broad signup panel. | Email signup, Submit form | Orange panel, Large uppercase title, Compact supporting copy |
| 12 | footer | Compact footer with three link columns. | Browse site links, Account and region links | Small uppercase labels, Sparse columns, Copyright line |

## Source CSS custom properties (selected)

```css
--color-sap-white: #FFFFFB;
--color-sap-orange: #FF4C00;
--color-sap-cream: #F8F7F2;
--color-sap-grey: #9A9A9A;
--color-sap-heading-grey: #A1A1A1;
--color-sap-muted-grey: #ADADAD;
--color-sap-border-grey: #CFCFCF;
--hover-shadow-color: rgb(0 0 0 / 1.0);
--hover-transition-duration: .25s;
--surface-transition-duration: .3s;
--surface-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
--font-brand: 'GT Pressura LC Standard', sans-serif;
--font-sans: 'Helvetica Neue LT Std', Helvetica, sans-serif;
--color-background: rgb(255 255 255 / 1.0);
--color-background-rgb: 255 255 255;
--color-foreground: rgb(0 0 0 / 0.81);
--color-foreground-rgb: 0 0 0;
--color-foreground-heading: rgb(0 0 0 / 1.0);
--color-foreground-heading-rgb: 0 0 0;
--color-primary: rgb(0 0 0 / 0.81);
--color-primary-rgb: 0 0 0;
--color-primary-hover: rgb(0 0 0 / 1.0);
--color-primary-hover-rgb: 0 0 0;
--color-border: rgb(0 0 0 / 0.06);
--color-border-rgb: 0 0 0;
--color-shadow: rgb(0 0 0 / 1.0);
--color-shadow-rgb: 0 0 0;
--color-primary-button-text: rgb(255 255 255 / 1.0);
--color-primary-button-background: rgb(0 0 0 / 1.0);
--color-primary-button-border: rgb(0 0 0 / 1.0);
--color-primary-button-hover-text: rgb(255 255 255 / 1.0);
--color-primary-button-hover-background: rgb(51 51 51 / 1.0);
--color-primary-button-hover-border: rgb(0 0 0 / 1.0);
--color-secondary-button-text: rgb(0 0 0 / 1.0);
--color-secondary-button-background: rgb(0 0 0 / 0.0);
--color-secondary-button-border: rgb(0 0 0 / 1.0);
--color-secondary-button-hover-text: rgb(51 51 51 / 1.0);
--color-secondary-button-hover-background: rgb(250 250 250 / 1.0);
--color-secondary-button-hover-border: rgb(51 51 51 / 1.0);
--color-input-background: rgb(255 255 255 / 0.78);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/sapgoodenergy-com