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

# Gigantic · Design System

> Monochrome attitude, candy with a little thrill.

**Theme:** light · **Industry:** food-beverage · **Source:** https://giganticcandy.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._

Gigantic pairs stark monochrome product imagery with confident typography and a restrained white canvas. A vivid coral footer and colorful candy packaging add focused bursts of flavor and playfulness.

## North star

Keep the interface nearly monochrome and let oversized candy imagery, assertive type, and one deliberate coral footer moment provide the drama.

## Overview

The page keeps its main canvas white and lets oversized product visuals and strong typography carry the identity. Deep charcoal (#231f20) anchors the announcement strip, navigation, text, and compact dark buttons, while white type reverses out against dark surfaces. The bright coral (#ff634b) is concentrated in the footer rather than scattered through the page; its warmer border counterpart appears as a fine accent. Electric blue link text is a measured exception, not a broad palette foundation. Neue Haas Grotesk Display supplies a consistent voice: uppercase, tightly composed headings contrast with smaller navigation and explanatory copy. The hero uses full-bleed monochrome video, followed by centered editorial copy, a dramatic variety-pack composition, and a four-item product lineup. Generous white intervals separate these dense visual moments. Packaging artwork carries many additional colors, but those belong to product imagery rather than the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and reversed text on dark announcement and button surfaces. |
| Cocoa Ink | `#231f20` | `--color-cocoa-ink` | brand | Primary text, navigation, announcement strip, and dark shop buttons. |
| Candy Coral | `#ff634b` | `--color-candy-coral` | accent | Large footer background; a concentrated brand accent rather than a general section fill. |
| Electric Link | `#0000ee` | `--color-electric-link` | semantic | Occasional inline product link text; keep usage limited. |
| Coral Hairline | `#ee5d48` | `--color-coral-hairline` | accent | Thin footer border accent; do not treat as a broad surface color. |
| Warm Paper | `#f0ede7` | `--color-warm-paper` | neutral | Muted text tone in limited instances, distinct from the dominant white canvas. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Minor text detail only; not the primary interface ink. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#231f20` (Cocoa Ink) · `--color-text` → `#231f20` (Cocoa Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f0ede7` (Warm Paper) · `--color-border` → `#ee5d48` (Coral Hairline) · `--color-accent` → `#ff634b` (Candy Coral) · `--color-accent-2` → `#0000ee` (Electric Link)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#231f20` | `#ffffff` | 16.3:1 | AAA |
| `#ffffff` | `#231f20` | 16.3:1 | AAA |
| `#f0ede7` | `#ffffff` | 1.17:1 | fail |
| `#f0ede7` | `#231f20` | 13.95:1 | AAA |
| `#ff634b` | `#ffffff` | 2.94:1 | fail |
| `#ff634b` | `#231f20` | 5.54:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grotesk-display | `--font-body` | webfont | 700, 400, 500, 450 | Site-wide headings, body copy, navigation, links, and buttons. | Inter |
| Arial | `--font-arial` | system | 400 | Rare system-font fallback. | Arial |

- **neue-haas-grotesk-display:** Use bold uppercase display headings and lighter uppercase subheads; body and navigation retain generous tracking.
- **Arial:** Appears only in a small measured share; keep as a fallback rather than a visible secondary voice.

### Type scale — Minor Third (ratio ≈ 1.211, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 700 | 1 | 0.016em | uppercase | neue-haas-grotesk-display | Prominent uppercase headline or campaign statement. |
| h2 | 25px | 400 | 1 | 0.05em | uppercase | neue-haas-grotesk-display | Light uppercase editorial section headings. |
| h3 | 24px | 700 | 1.3 | 0.025em | uppercase | neue-haas-grotesk-display | Bold uppercase product and supporting headings. |
| body | 18px | 700 | normal | 0.044em | — | neue-haas-grotesk-display | Emphatic short copy and button labels. |
| caption | 16px | 400 | 1.8 | 0.031em | — | neue-haas-grotesk-display | Explanatory copy and small supporting notes. |
| button | 18px | 700 | normal | 0.044em | — | neue-haas-grotesk-display | Bold, tracked shop and action labels. |
| nav | 14px | 400 | 1.8 | 0.036em | — | neue-haas-grotesk-display | Compact header and footer navigation links. |
| eyebrow | 18px | 400 | 1 | 0.05em | uppercase | neue-haas-grotesk-display | Small uppercase introductory labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 7, 8, 10, 15, 16, 17, 19, 20, 28, 30, 32, 35, 40 px.
- Section rhythm 55px · element gap 10px · card padding — · max content width 1117px.

A centered header sits beneath a narrow dark announcement strip, with the logo visually centered between navigation and utility icons. The opening hero is full-bleed media. Below it, centered editorial copy and a large variety-pack feature lead into a four-column product grid. The measured content max width is 1117px, while the hero media spans the viewport. White space creates a comfortable section rhythm; the footer changes to a two-column composition.

## Shape & elevation

- Shadow `hairline` (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`
- Motion: standard transition `0.1s ease` on interactive elements.

The interface is largely flat, with no measured shadow system and square-edged controls. Dark buttons and the announcement strip rely on contrast rather than elevation. Product images and overlapping campaign artwork create the main sense of depth; a thin coral-toned footer border provides a restrained edge.

## Imagery

The first screen is a full-bleed monochrome product video with graphic candy branding and a bottom-centered scroll cue. Further down, oversized product-pack imagery overlaps bold typographic artwork, followed by isolated pack shots in a four-item lineup. Packaging introduces vivid colors and textures; treat those as product photography, not interface colors.

## Components

### Announcement strip

Narrow charcoal band above the header, carrying centered white shipping copy.

### Main navigation

White header with shop and FAQ links on the left, centered logo, and account/cart icons on the right.

### Video hero

Viewport-wide monochrome product video with a compact white scroll prompt near the bottom.

### Variety pack feature

Centered campaign block combines uppercase copy, oversized typographic artwork, product packaging, and a dark shop link.

### Product grid

Four evenly presented candy packs with uppercase flavor names and compact dark shop buttons.

### Coral footer

Two-column footer pairs small shop and social links with a large white brand mark on coral, then a dark legal strip.

### Measured component styles

- **Primary button** (“Skip to content”): background #231f20 · text #ffffff · radius 0px · padding 0px 30px · 700 18px neue-haas-grotesk-display
- **Link** (“Shop variety pack”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px neue-haas-grotesk-display
- **Navigation item** (“SALTED PEANUT”): transparent background · text #231f20 · radius 0px · padding 0px · 400 18px neue-haas-grotesk-display · uppercase

## Do

- Use white as the dominant canvas.
- Set primary interface copy in Cocoa Ink (#231f20).
- Reserve coral for a deliberate footer or similarly focused moment.
- Use bold uppercase display typography with visible tracking.
- Let full-bleed product media define the hero.
- Keep product imagery prominent and sharply framed.

## Don't

- Do not make packaging colors the site-wide palette.
- Do not add gradients or decorative shadow layers.
- Do not fill every section with colored backgrounds.
- Do not use rounded, pill-shaped buttons.
- Do not replace the centered logo-header arrangement with a generic left-aligned bar.
- Do not overcrowd the white intervals between campaign sections.

## Agent prompt

Build a new Gigantic-style food ecommerce page with a white Gallery White (#ffffff) canvas, Cocoa Ink (#231f20) text, and restrained Candy Coral (#ff634b) reserved for one focused brand moment such as the footer. Use Neue Haas Grotesk Display or a close sans-serif substitute, with bold tracked uppercase display headings, compact navigation, and clear hierarchy. Place a narrow dark announcement strip above a white header with centered logo, left-side links, and right-side utility icons. Give the hero full-bleed product media, then use centered editorial copy, oversized campaign artwork, and an orderly product grid with square dark shop buttons. Keep the interface flat and spacious; allow product packaging to provide the vivid color. Avoid gradients, pill controls, and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video beneath a centered-logo header, with a bottom-centered scroll prompt. | autoplay product storytelling, scroll cue, video playback control | monochrome media, white uppercase prompt, centered logo |
| 2 | feature-split | Centered editorial copy above a large product-and-type campaign composition. | brand introduction, variety pack shop link | uppercase centered copy, oversized graphic typography, product image |
| 3 | product-grid | Four product columns on a white background, with centered names and shop actions. | browse by flavor, direct product shop links | isolated package shots, uppercase product names, dark rectangular buttons |
| 4 | footer | Two-column coral footer with navigation beside a large brand mark, followed by a dark legal bar. | shop navigation, social links, legal links | coral field, oversized white logo, dark bottom strip |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 35,31,32;
--color-background-contrast: 191,191,191;
--color-shadow: 0,0,0;
--color-button: 35,31,32;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 35,31,32;
--color-link: 35,31,32;
--color-badge-foreground: 35,31,32;
--color-badge-background: 255,255,255;
--color-badge-border: 35,31,32;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: "neue-haas-grotesk-display", sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: "neue-haas-grotesk-display", sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.0;
--media-border-width: 0px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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