---
title: "BAGGU design system"
variant: extended
source: https://baggu.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/baggu-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# BAGGU · Design System

> Everyday products, shown with bold simplicity.

**Theme:** light · **Industry:** fashion · **Source:** https://baggu.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

BAGGU pairs a crisp monochrome storefront with expressive product and lifestyle photography. Bold typography, open white space, and compact shop cues keep the shopping experience direct and visual.

## North star

Keep the interface stark and direct, letting colorful product photography provide nearly all of the visual variation.

## Overview

The page uses a white canvas and black text as its visual foundation, keeping the interface nearly monochrome so product imagery carries the color and personality. A narrow black shipping strip anchors the top, while the centered BAGGU wordmark and simple edge-aligned navigation sit over the hero image. Typography is consistently bold and compact: uppercase headings create sharp signposts, while smaller labels and product names stay legible without competing with photography. The homepage moves through broad, image-led bands—hero, new arrivals, travel, collections, recycled leather, and social content—with white gutters and restrained separators rather than decorative containers. Product tiles and category panels use straightforward grids; lifestyle photography supplies human scale and changing color. Olive and violet appear as small, selective text accents, not as broad interface fills. The footer returns to a practical black-and-white system with an email field, pill-shaped subscribe button, and dense link groups.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and open space around image-led product, category, and footer sections. |
| Baggu Ink | `#000000` | `--color-baggu-ink` | brand | Primary text, top announcement strip, footer wordmark, outlines, and filled subscribe button. |
| Quiet Gray | `#7f7f7f` | `--color-quiet-gray` | neutral | Muted secondary text and understated supporting labels. |
| Olive Signal | `#90912b` | `--color-olive-signal` | accent | Selective olive headline accent, notably the hero category label; keep it sparse. |
| Violet Signal | `#3024b7` | `--color-violet-signal` | accent | Small accent text, including the email input text treatment; not a dominant surface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Baggu Ink) · `--color-text` → `#000000` (Baggu Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#7f7f7f` (Quiet Gray) · `--color-border` → `#000000` (Baggu Ink) · `--color-accent` → `#90912b` (Olive Signal) · `--color-accent-2` → `#3024b7` (Violet Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#7f7f7f` | `#ffffff` | 4:1 | AA-large |
| `#7f7f7f` | `#000000` | 5.24:1 | AA |
| `#90912b` | `#ffffff` | 3.35:1 | AA-large |
| `#90912b` | `#000000` | 6.27:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| studioPro | `--font-body` | webfont | 700, 600 | Site-wide interface, navigation, headings, product labels, buttons, and footer copy. | League Spartan |

- **studioPro:** Bold weights dominate; headings may be uppercase with tight tracking. Keep labels compact and crisp.

### Type scale — Custom (ratio ≈ 1.711, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 41px | 700 | 1 | -0.05em | uppercase | studioPro | Oversized uppercase hero or campaign headline. |
| h2 | 18px | 700 | 1 | -0.025em | — | studioPro | Bold section and product-group headings. |
| body | 14px | 700 | 1.25 | -0.025em | — | studioPro | Compact supporting copy and product details. |
| caption | 12px | 700 | 1 | -0.01em | — | studioPro | Small secondary labels and metadata. |
| button | 18px | 700 | 1.25 | -0.056em | — | studioPro | Prominent action text, including subscribe and shop cues. |
| link | 12px | 700 | 1 | -0.01em | — | studioPro | Compact navigation and product links. |

OpenType features in use: `"case", "ss02" 0, "ss03", "ss06", "ss07", "ss08", "ss09"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 8, 12, 13, 16, 20, 24, 36, 44, 64 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width —.

Build a wide, full-bleed storefront with navigation aligned to the edges and the wordmark centered. The page alternates between broad image bands and product or category grids, generally using three-, five-, or multi-column arrangements. Keep content aligned to the viewport rather than introducing an unmeasured fixed maximum width. Separate sections with generous white breathing room and slim gutters. The overall density is comfortable: each block is visually simple, with product imagery and concise labels doing most of the work.

## Shape & elevation

- Radius: button `9999px` · input `4px`
- Shadow `hairline` (input): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat: white sections meet directly, and black text and image edges provide definition. Avoid card shadows and decorative depth. Use crisp gutters and occasional thin black rules or borders where needed; the measured input shadow is effectively imperceptible. The subscribe action is a black pill against the white footer.

## Imagery

Use crisp lifestyle and product photography as the main source of color and texture. Hero imagery spans the viewport and crops closely around people carrying bags; later sections mix product-only tiles with models and styled groupings. Keep photos bright and natural, without heavy overlays, frames, or illustration-led decoration. The social feed uses small real-world snapshots, while the oversized footer wordmark is a graphic treatment rather than product imagery.

## Components

### Announcement strip

A slim black band at the very top with centered, small white shipping copy.

### Store navigation

White header with SHOP and INFO at left, centered BAGGU wordmark, and CART (0) at right; keep labels black and bold.

### Image-led hero

Wide lifestyle photograph followed by a stark SHOP label and olive category headline on white.

### New-arrivals carousel

Product image tiles with compact names, color details, price, and small MORE indicators; use arrows and a centered section label.

### Category tile grid

Lifestyle or product images in even columns, with short uppercase shop links directly beneath.

### Newsletter signup

Footer email input with violet text treatment and a black rounded SUBSCRIBE button.

### Link footer

Compact black links arranged in plain columns on white, above an oversized BAGGU wordmark graphic.

### Measured component styles

- **Primary button** (“SUBSCRIBE”): background #000000 · text #ffffff · border 1px solid #000000 · radius 24px · padding 0px 20px · 600 16px studioPro · uppercase
- **Link** (“SHOP TRAVEL”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px studioPro
- **Input**: transparent background · text #3024b7 · radius 4px · padding 6px 0px 8px 0px · 700 18px studioPro · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 
- **Navigation item** (“SHOP INFO”): transparent background · text #000000 · radius 0px · padding 0px 16px · 400 16px studioPro

## Do

- Use white space and black typography as the interface baseline.
- Let product photography bring most color into the page.
- Keep navigation short, bold, and edge-aligned.
- Use uppercase display labels for prominent shop cues.
- Present products in clean, evenly spaced image grids.
- Reserve olive and violet for small, intentional accents.

## Don't

- Do not add gradients or decorative background fills.
- Do not place every product in a raised card.
- Do not let interface color compete with the photography.
- Do not use soft, low-contrast text for key labels.
- Do not crowd image tiles with long descriptions.
- Do not add unsupported shadows or rounded containers.

## Agent prompt

Build a new BAGGU-style ecommerce page with a clean white canvas (#ffffff, Gallery White) and high-contrast black typography (#000000, Baggu Ink). Keep the header minimal: compact navigation at the left, centered wordmark, and cart at the right; a slim black announcement strip can sit above it. Use bold, tightly tracked sans-serif headings, simple uppercase shop cues, and small product labels. Arrange large lifestyle photography and product images in broad bands and clean grids, with open white gutters and no card shadows. Use #90912b Olive Signal and #3024b7 Violet Signal only for small accent details, never as broad fills. Keep the footer practical, with grouped links, an email field, and a black pill-shaped subscribe button. Prioritize direct shopping paths and photography over decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width lifestyle hero beneath a compact announcement and edge-aligned navigation. | shipping announcement, shop and info links, cart shortcut | black top strip, centered wordmark, full-bleed photography |
| 2 | product-grid | White band with a split shop heading and a horizontally browsable row of product tiles. | new-arrival discovery, carousel arrows, quick product scan | bold heading, olive category label, compact product metadata |
| 3 | category-nav | Three-column row of large travel imagery with shop links directly underneath. | browse travel styles, image-led category links | three image panels, centered compact captions |
| 4 | category-nav | Horizontal multi-column product-category strip with a centered heading and labels below imagery. | category discovery, carousel navigation | product cutouts, white gutters, uppercase category labels |
| 5 | product-showcase | Three wide lifestyle image panels with repeated shop links beneath. | collection exploration, shop collection links | model photography, even three-column composition |
| 6 | gallery | Wide, multi-column social image feed with brief follow prompts. | social discovery, follow brand | small candid photos, minimal captions |
| 7 | footer | White footer with newsletter signup and several compact link groups. | email signup, support and policy navigation | black subscribe pill, plain text link columns, social icons |
| 8 | other | Full-bleed graphic closing band with oversized wordmark imagery. | brand sign-off | giant black lettering, pink smiley motifs |

## Source CSS custom properties (selected)

```css
--bg: #ffffff;
--text: #000;
--accent: #3024b7;
--ease-in-out: cubic-bezier(.4,0,.2,1);
--tw-border-opacity: 1;
--tw-text-opacity: 1;
--kl-reviews-color-light-gray: #e9e9eb;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/baggu-com