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

# Shupatto · Design System

> Quiet product storytelling through form, motion, and space.

**Theme:** light · **Industry:** ecommerce · **Source:** https://prod-raw.shupatto.com/en/ · **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._

Shupatto’s homepage presents its foldable bags as a visual story, pairing an exceptionally restrained interface with large product imagery. Soft gray-white fields, concise typography, and sparse navigation keep attention on the bag’s transformation.

## North star

Let quiet, spacious product photography explain the bag’s transformation while the interface stays nearly invisible.

## Overview

The page uses a quiet, low-contrast palette led by the measured canvas #e1e3e1. In the first viewport, the expansive pale field is divided into two broad image areas; the subtle tonal shift and fine vertical boundary give the product sequence structure without introducing card framing. Text is near-black and restrained, with small uppercase navigation and short labels positioned around the imagery. Gill Sans Nova supplies a clean, humanist sans-serif voice; its measured tracking gives headings and utility labels a deliberate, editorial cadence. Product photography does the expressive work: bags appear against similarly pale backgrounds, shown flat, folded, or compacted so their changing form reads immediately. The composition feels spacious rather than dense, with interface elements pushed toward the edges and large breathing zones around the products. Keep the design flat and image-led, using only the measured colors for interface styling; brighter colors belong to photographed bag patterns, not the core UI palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Mist Canvas | `#e1e3e1` | `--color-mist-canvas` | surface | Dominant page canvas behind the full-viewport product story. |
| Soft Graphite | `#2d2d2d` | `--color-soft-graphite` | neutral | Primary muted text for headings, labels, and explanatory copy. |
| Quiet Black | `#000000` | `--color-quiet-black` | neutral | Measured border token and dark navigation or utility details; avoid adding prominent outlines. |
| Fog Gradient | `#c6c7c6` | `--color-fog-gradient` | surface | Subtle tonal gradient detail; secondary to the pale canvas rather than a section color. |
| Link Ink | `#161616` | `--color-link-ink` | semantic | Near-black link text, including concise navigation links. |

### Semantic aliases

`--color-canvas` → `#e1e3e1` (Mist Canvas) · `--color-text` → `#161616` (Link Ink) · `--color-text-muted` → `#2d2d2d` (Soft Graphite) · `--color-border` → `#000000` (Quiet Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#161616` | `#e1e3e1` | 14.03:1 | AAA |
| `#2d2d2d` | `#e1e3e1` | 10.67:1 | AAA |

### Gradients

- `linear-gradient(-90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.02) 0.5%, rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GillSansNova-Book | `--font-display` | webfont | 500 | Light editorial headings and descriptive labels. | Gill Sans, or Lato |
| GillSansNova-SemiBold | `--font-gillsansnova-semibold` | webfont | 800 | Primary display heading emphasis. | Lato |
| GillSansNova-Medium | `--font-body` | webfont | 600 | Body text and navigation links. | Lato |

- **GillSansNova-Book:** Measured book weight; headings use notably open tracking and sentence case.
- **GillSansNova-SemiBold:** Use for the main heading with measured strong weight and moderate letter spacing.
- **GillSansNova-Medium:** Measured medium weight; use tracked text and restrained, mostly uppercase navigation.

### Type scale — Minor Third (ratio ≈ 1.181, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 800 | 1.29 | 0.064em | — | GillSansNova-SemiBold | Main brand proposition and prominent hero heading. |
| h2 | 22px | 500 | 1 | 0.114em | — | GillSansNova-Book | Secondary section headings and action labels. |
| h3 | 21px | 500 | 1.33 | 0.119em | — | GillSansNova-Book | Supporting feature or product-story headings. |
| body | 17px | 600 | 1.41 | 0.071em | — | GillSansNova-Medium | Concise product descriptions and instructional copy. |
| link | 17px | 600 | 1.41 | 0.071em | — | GillSansNova-Medium | Compact primary navigation and text links. |

OpenType features in use: `"palt"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 27, 60 px.
- Section rhythm 60px · element gap 7px · card padding — · max content width —.

Build the opening as a full-viewport, single-column composition with a broad two-part product image stage. Keep the brand mark and navigation close to the lower edge, with the current story label and slide count near the upper corners. The product and its compact form occupy separate visual zones, divided by a faint vertical boundary. Maintain generous empty space and comfortable separation between elements. The measured data does not establish a page max-width, so preserve the screenshot’s edge-to-edge canvas rather than inventing a constrained container.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured component shadows, card treatments, or radius scale. Separate visual zones with pale tonal transitions and a fine, understated divider rather than raised panels. The measured gradient is subtle and should not become a strong decorative effect.

## Imagery

Use clean, high-key product photography of the bag in distinct states: extended, folded, or compacted. Photograph against a pale neutral background that blends into the page canvas; let real fabric color and pattern provide the visual contrast. Keep products isolated and legible, with generous surrounding space and no decorative illustration or prominent image frames.

## Components

### Story label

Place a small uppercase action heading and a short explanatory line near the upper-left edge of the image stage.

### Slide counter

Show the current position as a compact fraction near the upper-right edge.

### Product image stage

Arrange product states across broad pale image zones, with a faint vertical division and ample negative space.

### Brand mark

Anchor the Shupatto wordmark at the lower-left edge of the hero canvas.

### Bottom navigation

Use a small, widely tracked row of LINEUP, ABOUT, and SHOPLIST links at the lower-right.

### Measured component styles

- **Link** (“LINEUP”): transparent background · text #000000 · radius 0px · padding 0px · 600 17px GillSansNova-Medium

## Do

- Use #e1e3e1 as the dominant interface canvas.
- Give product photography more visual weight than copy.
- Keep the product isolated against pale neutral backgrounds.
- Use near-black text with restrained tracking.
- Place small utility labels near the canvas edges.
- Use whitespace to distinguish product states.

## Don't

- Do not introduce unmeasured interface colors.
- Do not turn product-photo colors into brand UI colors.
- Do not add cards, heavy borders, or pronounced shadows.
- Do not crowd the image stage with explanatory copy.
- Do not use dense grids or prominent button styling.
- Do not constrain the hero to an invented max-width.

## Agent prompt

Create a new Shupatto page that follows the homepage’s quiet, editorial product-story style. Use Mist Canvas (#e1e3e1) as the expansive background, Soft Graphite (#2d2d2d) for most text, and Link Ink (#161616) for links; reserve Quiet Black (#000000) for restrained dark details. Build an edge-to-edge, spacious composition around high-key product photography, with products shown clearly against pale backgrounds. Use Gill Sans Nova or a close humanist sans-serif substitute, tracked labels, and concise copy. Position small utility text near the edges, and keep navigation unobtrusive. Use subtle tonal division rather than cards or elevation. Let photographed fabric patterns supply color; do not add those hues to interface chrome. Avoid invented dimensions, radii, shadows, or palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport pale canvas with split product-photo zones, edge-positioned labels, and bottom-aligned branding and navigation. | Product state storytelling, Slide position indicator, Persistent compact navigation | High-key photography, Faint vertical divider, Tracked utility labels, Expansive negative space |

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