# Giganticcandy · Design system migration spec

> Source: https://giganticcandy.com  ·  Curated by OpenDesign  ·  en

> This site is worth including for its strong, consistent voice achieved through bold typography and a disciplined, high-contrast color system.

## 1. Identity DNA

Giganticcandy's identity is built on a single, compelling juxtaposition: the raw, layered energy of urban graffiti culture fused with the polished, high-contrast clarity of premium branding. It is a system where oversized, unapologetic display type sits within a disciplined monochrome framework, creating a visual language that is both rebellious and rigorously controlled.

**One-liner:** A bold, urban-inspired e-commerce site for a candy brand, using oversized display typography and high-contrast layouts.
**Keywords:** playful · graffiti · urban · deluxe · candy
**Analogy:** A skate park sticker aesthetic meets premium candy branding.

## 2. Color

The color system operates on a principle of stark contrast and deliberate sparsity. A warm off-white field, deep ink blacks, and a singular, vibrant tomato red accent create a palette that is both high-impact and functionally restrained.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0EDE7` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#231F20` | body text |
| `--muted` | `#231F20` | placeholder |
| `--accent` | `#FF634B` | single accent |
| `--line` | `rgba(35, 31, 32, 1.0)` | divider |

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

This disciplined approach ensures the accent color retains its power, acting as a strategic signal within a primarily monochromatic field.

## 3. Typography

Typography is the primary voice of the system, employing geometric and grotesque sans-serif families with relentless uppercase transformation. This choice creates a uniform, assertive tone, where tight tracking on large display text and a generous line height on body copy balance impact with readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 0.9 | 700 | 0.5px | Hero headlines and large display text |
| heading | 48px | 1.1 | 700 | 0.5px | Section headers and sub-headlines |
| body | 16px | 1.8 | 400 | 0.5px | Standard body copy and UI text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a strict vertical rhythm anchored to a 4px grid, creating consistent and predictable structural intervals throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is based on a 4px grid, with generous padding in larger sections.

## 5. Surfaces

Surfaces are defined by their absence of shadow and their sharp, graphic borders. Solid 1px lines in the primary ink color articulate divisions and components with literal precision, reinforcing the system's overall clarity.

- **Radius:** sm 2px · md 10px · lg 12px · pill 999px
- **Borders:** Solid 1px borders using the primary ink color.

## 6. Layout

The foundational layout is a single, centered column for core content, providing a clear and focused reading path. This disciplined structure is punctuated by full-bleed hero sections that break the column to command the full viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is used sparingly and with purpose, favoring smooth, understated transitions over decorative animation. Hover states receive a subtle opacity or color shift, while key hero elements may employ a slow fade-in to establish presence.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth transitions on hover states
  - Parallax or slow fade-in for hero elements

- **Hover:** Subtle opacity change or color inversion on buttons.
- **Click:** Minimal feedback, relying on standard cursor changes.
- **Transition:** All transitions set to 0.3s ease.
- **Keyboard:** Standard focus outlines using a 2px solid border.

## 8. Voice & Don'ts

The editorial voice is playful, bold, and slightly irreverent, matching the visual boldness with direct, action-oriented language. Headlines are short, impactful, and always set in uppercase, while calls to action are direct commands like 'Shop' or 'Scroll'.

- **Tone:** Playful, bold, and slightly irreverent.
- **Headline style:** Short, impactful, and always in uppercase.
- **CTA style:** Direct and action-oriented, often using 'Shop' or 'Scroll'.
- **Avoid:** Formal or corporate language / Subtle or understated claims / Small, subtle typography

### Don'ts
- ❌ 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.

What is deliberately avoided is as defining as what is included: no delicate typography, no muted palettes, no complex columns, and no soft, rounded forms.

## System Prompt (paste into AI tool)

```
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.
```