---
name: Giganticcandy
description: "This site is worth including for its strong, consistent voice achieved through bold typography and a disciplined, high-contrast color system."
version: alpha

colors:
  background: "#F0EDE7"
  primary: "#231F20"
  tertiary: "#FF634B"
  neutral: "#231F20"
  bg-soft: "#FFFFFF"
  line: "rgba(35, 31, 32, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 96px
    lineHeight: 0.9
    fontWeight: 700
    letterSpacing: "0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 2px
  md: 10px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, urban-inspired e-commerce site for a candy brand, using oversized display typography and high-contrast layouts.

*A skate park sticker aesthetic meets premium candy branding.*

## Colors

High-contrast, primarily monochromatic with a single high-chroma accent (tomato red) and strategic use of pure white and black.

- **Background (`#F0EDE7`)** — uses `bg` token
- **Primary text (`#231F20`)** — uses `ink` token
- **Accent (`#FF634B`)** — uses `accent` token
- **Muted (`#231F20`)** — uses `muted` token
- **Borders (`rgba(35, 31, 32, 1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Display and headings use uppercase letter transformation.
- Body text is set with a generous line height of 1.8 for readability.
- Tight tracking is applied to large display text.

## Layout

A single-column centered layout for content, with full-bleed hero images.

*Rhythm:* Vertical rhythm is based on a 4px grid, with generous padding in larger sections.

## Elevation & Depth

- Borders: Solid 1px borders using the primary ink color.

## Shapes

- `sm`: 2px
- `md`: 10px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid black background with white uppercase text, or outlined with ink color.
- **card:** Product cards featuring product images on a clean white background.
- **hero:** Full-viewport section with a large, moody photographic background and bold, centered typography.

## Do's and Don'ts

**Don't:**
- Don't use small, delicate typography — screenshot shows large, bold display text instead.
- Don't use a muted, pastel color palette — screenshot shows a high-contrast black, white, and red-orange palette instead.
- Don't use complex multi-column layouts — screenshot shows a clean, single-column centered layout instead.
- Don't use rounded, bubbly shapes — screenshot shows sharp, mostly rectangular elements instead.
- Don't use subtle, hidden navigation — screenshot shows a clear, fixed header with obvious links instead.
- Don't use serif fonts for headlines — screenshot shows geometric and grotesque sans-serif fonts instead.

---

## System Prompt (paste into AI agent)

```
This is a bold, urban-inspired e-commerce site for a candy brand, characterized by oversized display typography and a high-contrast palette. The primary background is a warm off-white (#F0EDE7), with ink (#231F20) used for all text and borders. A single high-chroma accent color, a vibrant tomato red (#FF634B), is used sparingly for highlights and calls to action. The typography relies heavily on geometric and grotesque sans-serif families, always set in uppercase for headlines and body text to maintain a strong, uniform voice. Critical design constraints: avoid using delicate or thin typography, never use a muted or pastel color scheme, and maintain a strict single-column layout for core content sections.
```