# Baggu · Design system migration spec

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

> Worth including as an excellent example of a 'gallery-style' e-commerce layout where the UI intentionally recedes to elevate the product imagery.

## 1. Identity DNA

The design system for Baggu is built like a brightly lit, organized retail store: a neutral, warm canvas where the products—colorful, functional, and playfully designed—are the undisputed focal point. Every decision, from the generous whitespace to the high-contrast UI, serves to frame the merchandise with the clarity of a gallery display.

**One-liner:** A modern e-commerce platform for functional and playfully designed everyday bags and accessories.
**Keywords:** functional · playful · everyday · designed · practical
**Analogy:** A brightly lit, organized retail store with colorful, high-quality products on display.

## 2. Color

The palette is deliberately restrained, pairing a warm neutral base with stark black for all interface elements. This creates a clean stage that allows the high-chroma product photography to dominate the visual hierarchy without competition from the UI itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F4EE` | main background |
| `--bg-soft` | `#F6F4EE` | card background |
| `--bg-quiet` | `#F6F4EE` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#212121` | secondary text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

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

The principle is one of intentional recession: the interface provides structure and contrast but never attempts to be the subject.

## 3. Typography

Typography employs a bold grotesque-sans in a tight, modern rhythm, used with purposeful weight to establish clear hierarchy. The system favors high-impact headers and direct, uppercase set text for navigation and calls to action, reinforcing a voice that is confident and straightforward.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 700 | -0.4px | Primary headlines and product collection titles. |
| body | 16px | 1.5 | 400 | -0.45px | Main body text, navigation links, and standard content. |
| label | 14px | 1.3 | 700 | -0.4px | Uppercase navigation items, button labels, and category tags. |

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

## 4. Spacing

Spacing follows an 8px base grid, with generous whitespace between major sections to let products breathe and maintain the clean, curated atmosphere.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 8px base grid with generous whitespace between major sections to let products breathe.

## 5. Surfaces

Surface treatments are minimal, relying on a consistent light background and subtle, deep shadows for elevation only where necessary. Borders are structural and reserved, with high-contrast, pill-shaped buttons providing the primary visual weight in the component language.

- **Radius:** sm 2px · md 6px · lg 0px · pill 100px
- **Shadows:**
  - 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.

## 6. Layout

The layout skeleton begins with full-bleed, image-based hero sections that command the viewport, followed by structured, grid-based product catalogs. This vertical flow prioritizes visual storytelling and product discovery through large, uninterrupted imagery.

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

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

## 7. Motion & Interaction

Motion is minimal and polished, serving functional feedback rather than ornamentation. Standard 0.3s cubic-bezier transitions on interactive states and seamless image carousel rotations provide a sense of smooth, deliberate interaction.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and transform transitions on hover states
  - Micro-interactions for cart and navigation state changes
  - Seamless image carousel transitions for product galleries

- **Hover:** Subtle background or color transitions on clickable text elements and buttons.
- **Click:** Immediate visual feedback on button press, typically a slight color shift or scale down.
- **Transition:** Smooth 0.3s cubic-bezier transitions applied to background-color, opacity, and transform properties.
- **Keyboard:** Standard sequential focus states, primarily visible on input fields and interactive buttons.

## 8. Voice & Don'ts

The editorial voice is direct, friendly, and confidently straightforward, mirroring the functional clarity of the products. Headlines are short, punchy, and often uppercase, while calls to action use imperative verbs in high-contrast buttons.

- **Tone:** Direct, friendly, and confidently straightforward.
- **Headline style:** Short, punchy, and highly descriptive, often in all-caps.
- **CTA style:** Action-oriented, imperative verbs, and set in all-caps within high-contrast buttons.
- **Avoid:** Flowery or overly technical jargon / Excessive adjectives or superlatives / Overly formal or distant corporate language

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

The system deliberately avoids flowery language, dark mode treatments, and any UI styling that would compete with the product photography it exists to showcase.

## System Prompt (paste into AI tool)

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