---
name: Baggu
description: "Worth including as an excellent example of a 'gallery-style' e-commerce layout where the UI intentionally recedes to elevate the product imagery."
version: alpha

colors:
  background: "#F6F4EE"
  primary: "#000000"
  secondary: "#212121"
  bg-soft: "#F6F4EE"
  bg-quiet: "#F6F4EE"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.4px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.45px"
  label:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "-0.4px"

rounded:
  sm: 2px
  md: 6px
  lg: 0px
  pill: 100px

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

---

## Overview

A modern e-commerce platform for functional and playfully designed everyday bags and accessories.

*A brightly lit, organized retail store with colorful, high-quality products on display.*

## Colors

Warm neutral backgrounds serve as a clean, gallery-like canvas that lets the colorful product photography dominate the visual hierarchy.

- **Background (`#F6F4EE`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#212121`)** — uses `ink-soft` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use all-uppercase for navigation links, category labels, and primary call-to-action buttons.
- Maintain tight negative letter-spacing for a compact, modern feel.
- Prioritize high-weight (700) for section headers to ensure strong visual hierarchy.

## Layout

Full-width image-based hero sections followed by structured, grid-based product catalogs.

*Rhythm:* Standard 8px base grid with generous whitespace between major sections to let products breathe.

## Elevation & Depth

- 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
- Borders: 1px solid #000000 for structural elements; buttons use pill-radius styling with solid backgrounds.

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 0px
- `pill`: 100px

## Components

- **button:** Solid black background (#000000) with white (#FFFFFF) uppercase text, highly rounded (pill-radius), minimal padding.
- **card:** Clean, borderless layout that relies on high-quality product photography against neutral backgrounds.
- **chip:** Uppercase, bold text links for category navigation, heavily spaced, no visible background or border.
- **input:** Minimal bottom-border only input field with black underline, floating placeholder text.
- **hero:** Full-bleed, high-chroma lifestyle photography spanning the entire width of the viewport.

## Do's and Don'ts

**Don't:**
- Don't use colorful or busy backgrounds for layout sections — screenshot shows a consistent neutral off-white (#F6F4EE) canvas.
- Don't use serif or script fonts for headlines — screenshot shows a bold grotesque-sans style.
- Don't use small, delicate buttons — screenshot shows high-contrast, pill-shaped black buttons.
- Don't clutter the layout with dense text blocks — screenshot shows generous whitespace and large imagery.
- Don't use dark mode or heavy charcoal backgrounds — screenshot shows predominantly light, warm-neutral backgrounds.
- Don't hide products behind minimal photography — screenshot shows vibrant, high-chroma product shots as the main focal point.

---

## System Prompt (paste into AI agent)

```
Baggu is a modern e-commerce site for functional everyday bags and accessories. The design uses a warm neutral (#F6F4EE) background as a clean canvas to let vibrant, high-chroma product photography dominate the visual hierarchy. The typography relies on a bold grotesque-sans font, primarily used in uppercase for navigation, category labels, and strong call-to-action buttons. Buttons are solid black (#000000) with white text and a distinct pill shape. Key critical don'ts include: avoid using dark mode or heavy backgrounds, don't use delicate or small button styles, and never use serif fonts for headlines. The layout is spacious and image-forward, prioritizing clear, direct communication and a premium, curated feel.
```