---
version: alpha
name: Desserts Gapsy
description: Edible-art confectionery brand — a warm, playful pâtisserie identity built on a cream canvas with deep cocoa ink, a candy-pink accent, and a gold leaf highlight. Rounded, tactile shapes and a soft serif display voice make dessert feel like luxury.

colors:
  # Canvas + ink
  background: "#fdf6ee"
  surface: "#ffffff"
  surface-soft: "#f7ecdf"
  surface-dark: "#1c1410"
  ink: "#2a1d15"
  ink-secondary: "#6b5547"
  ink-muted: "#9a8474"

  # Brand accents
  primary: "#e86a92"      # candy pink
  primary-deep: "#c84a72"
  gold: "#caa64a"         # gold leaf
  gold-soft: "#e6cf94"
  cream: "#fdf6ee"
  cocoa: "#3d2a1e"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fdf6ee"
  on-gold: "#2a1d15"

  # Neutral scale
  warm-100: "#f3e7d9"
  warm-200: "#e6d4c2"
  warm-300: "#d4bca6"
  warm-500: "#9a8474"
  warm-700: "#5a4538"

  # Lines + tints
  border: "#e6d4c2"
  divider: "#ead9c7"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  caption:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.4px
  eyebrow:
    fontFamily: "Poppins, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.gold-soft}"
    textColor: "{colors.on-gold}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  card-product:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 20px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 20px 32px
    borderColor: "{colors.divider}"

  eyebrow-label:
    textColor: "{colors.gold}"
    typography: "{typography.eyebrow}"

  price-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.card-title}"
---

# Desserts Gapsy Design System

## Overview

Desserts Gapsy treats pastry as luxury — its visual system reads like the inside of a boutique pâtisserie box. The canvas is a warm cream (`{colors.background}`), never stark white, so every section feels softly lit and edible. Deep cocoa ink (`{colors.ink}`) carries the text with the richness of dark chocolate rather than flat black, keeping the whole page warm-toned from edge to edge.

The personality lives in two accents. A candy pink (`{colors.primary}`) handles the playful, sweet moves — CTAs, price highlights, and decorative flourishes — while a muted gold leaf (`{colors.gold}`) does the luxury work, appearing in tiny eyebrow labels and arrow icons that suggest gilding. The contrast of playful pink against artisan gold is the brand's signature tension: sweet but crafted.

Shapes are rounded and tactile. Pill-shaped buttons, generously rounded cards (`{rounded.lg}`–`{rounded.xl}`), and pedestal-style product frames make the interface feel hand-finished and soft to the touch. Dark surfaces (`{colors.surface-dark}`) appear selectively for product showcases — desserts photographed on white pedestals against near-black backgrounds — giving the "edible art gallery" effect.

Typography pairs a soft serif display voice (Fraunces) with a friendly geometric sans (Poppins). The serif headlines feel editorial and confectionery; the sans body keeps ordering and pricing legible and modern.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) — never stark white
- Cocoa ink (`{colors.ink}`) instead of black — chocolate warmth throughout
- Dual accent system: candy pink (`{colors.primary}`) for playful, gold (`{colors.gold}`) for luxury
- Fraunces serif display + Poppins sans body pairing
- Pill buttons and heavily rounded, tactile cards
- Selective dark surfaces for "edible art" product showcases
- Gold uppercase eyebrow labels above section headings

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): Page background — warm, softly lit.
- **White** (`{colors.surface}`): Card surfaces lifted off the cream.
- **Soft Cream** (`{colors.surface-soft}`): Product tiles, alternating bands.
- **Dark Cocoa** (`{colors.surface-dark}`): Product showcase backgrounds, "gallery" sections.
- **Cocoa Ink** (`{colors.ink}`): Primary text and headings.
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting copy.

### Brand Accents
- **Candy Pink** (`{colors.primary}`): Primary CTAs, sweet highlights.
- **Deep Pink** (`{colors.primary-deep}`): Hover states, price emphasis.
- **Gold Leaf** (`{colors.gold}`): Eyebrow labels, arrow icons, luxury accents.
- **Soft Gold** (`{colors.gold-soft}`): Badge backgrounds.

### Neutral Scale
- **Warm 100–700** (`{colors.warm-100}`–`{colors.warm-700}`): Borders, dividers, muted text in warm tones.
- **Border** (`{colors.border}`): Card outlines, input strokes.

## Typography

### Font Family
- **Display**: `Fraunces`, soft serif, fallbacks `Georgia, serif`
- **Body/UI**: `Poppins`, geometric sans, fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline |
| `display` | Large section openers |
| `section-heading` | Standard section titles |
| `card-title` | Product and card headings |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Navigation, emphasized labels |
| `button-ui` | Buttons and CTAs |
| `caption` | Metadata, tags |
| `eyebrow` | Gold uppercase kickers above headings |

### Principles
- **Serif for emotion, sans for function**: Fraunces carries headlines and brand voice; Poppins handles everything operational.
- **Gold eyebrows**: Uppercase, letter-spaced kickers in `{colors.gold}` sit above serif headings.
- **Warm contrast**: Cocoa ink on cream maintains readable, warm-toned contrast everywhere.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with generous `{spacing.2xl}`–`{spacing.4xl}` gaps between showcase sections.

### Grid & Container
- Max content width ~1240px
- Hero: serif headline left or centered over cream
- Product grids: 2–3 columns of rounded product tiles
- Dark showcase bands break the cream rhythm for emphasis

### Whitespace Philosophy
- Generous breathing room around products — each dessert presented like a gallery piece
- Alternating cream and soft-cream bands; dark bands for drama
- Rounded shapes everywhere soften the grid

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inputs inline |
| `md` | 16px | Standard containers |
| `lg` | 24px | Cards |
| `xl` | 40px | Product tiles, large panels |
| `pill` | 9999px | Buttons, badges, search inputs |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Candy pink pill with white text, the default sweet CTA.
- **`button-secondary`** — White pill with warm border.
- **`button-dark`** — Cocoa pill for dark-section CTAs.

### Cards
- **`card`** — White, rounded, warm border.
- **`card-dark`** — Cocoa surface for product gallery moments.
- **`card-product`** — Soft-cream tile with extra rounding for pedestal product shots.

### Badges & Labels
- **`badge`** — Soft gold pill with cocoa text.
- **`eyebrow-label`** — Gold uppercase kicker.

### Inputs
- **`input`** — Pill-shaped, white, warm border; focus turns the stroke candy pink.

### Navigation
- **`nav-bar`** — Cream header, Poppins medium links, gold arrow icons.

## Do's and Don'ts

### Do
- Use cream (`{colors.background}`), never stark white, as the canvas
- Use cocoa ink (`{colors.ink}`) instead of pure black
- Reserve gold (`{colors.gold}`) for luxury accents and eyebrow labels
- Use candy pink (`{colors.primary}`) for playful CTAs and highlights
- Keep everything rounded and pill-shaped
- Use dark showcase bands sparingly for "edible art" drama

### Don't
- Don't put candy pink as a page background
- Don't use sharp 0px corners on cards or buttons
- Don't replace Fraunces serif headlines with a sans
- Don't overuse gold — it loses its luxury signal
- Don't use cold grays; keep neutrals warm

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked products |
| Tablet | 600–1024px | 2-column product grids |
| Desktop | >1024px | Full 3-column showcase, max 1240px |

### Collapsing Strategy
- Hero serif scales 64px → ~40px on mobile
- Product grids 3 → 2 → 1 column
- Nav collapses to hamburger
- Dark showcase bands maintain full-bleed treatment

## Agent Prompt Guide

### Quick Color Reference
- Background: Cream `{colors.background}`
- Heading text: Cocoa `{colors.ink}`
- Primary CTA: Candy Pink `{colors.primary}`
- Luxury accent: Gold `{colors.gold}`
- Card surface: White `{colors.surface}`

### Example Component Prompts
- "Hero on cream `{colors.background}`. Gold uppercase eyebrow `{colors.gold}` 12px Poppins 600 letter-spacing 1.5px. Headline 64px Fraunces 600 `{colors.ink}`. Candy-pink pill CTA `{colors.primary}`, white text, 9999px radius, 14px 28px padding."
- "Product tile: soft-cream `{colors.surface-soft}`, 40px radius, dessert photo, Fraunces 24px title, deep-pink `{colors.primary-deep}` price."
- "Dark showcase band: `{colors.surface-dark}` background, white pedestal product, cream text `{colors.on-ink}`."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Desserts Gapsy. Brand names and trademarks belong to their respective owners.