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

# Chubbies · Design System

> Weekend energy, told through bold type and vivid lifestyle imagery.

**Theme:** light · **Industry:** fashion · **Source:** https://www.chubbiesshorts.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._

Chubbies’ homepage pairs a clean, compact storefront frame with full-bleed lifestyle photography and confident uppercase headlines. Teal, hot pink, and lime accents bring a playful weekend mood to a largely white, image-led shopping experience.

## North star

Keep the storefront framework crisp and compact, then let bold uppercase type and full-bleed lifestyle photography create the energy.

## Overview

The page uses white as its main canvas, allowing a sequence of large lifestyle photographs to carry most of the visual impact. Teal anchors the announcement strip and footer, while a saturated pink promotional band and lime details supply playful contrast; these measured interface colors should stay distinct from the browns, reds, and other tones inside campaign photography. Montserrat provides a consistent, assertive voice: large headings are heavy and uppercase, navigation is compact, and body copy remains small and practical. The layout moves from a slim utility bar and navigation into full-width campaign imagery, then alternates category tiles, editorial product stories, and shopping modules. White gutters and simple rectangular image blocks keep the dense assortment legible. Buttons use rounded pill silhouettes and concise uppercase labels. Favor flat, crisp surfaces and strong photographic framing over decorative shadows or elaborate card chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation background, and white text on dark teal and campaign photography. |
| Ocean Signal | `#0082a6` | `--color-ocean-signal` | accent | Bright teal for the promotional CTA, selected navigation details, and links. |
| Lime Pop | `#d1f270` | `--color-lime-pop` | accent | Lime accent for select buttons and small high-contrast membership or footer actions. |
| Hard Ink | `#000000` | `--color-hard-ink` | neutral | Primary navigation, headings, body text, and dark icons on white surfaces. |
| Deep Current | `#006c8c` | `--color-deep-current` | brand | Brand teal for the utility strip, member CTA band, and large footer background. |
| Soft Divider | `#d2d4d7` | `--color-soft-divider` | neutral | Subtle borders and hairlines around controls and interface elements. |
| Mist Gray | `#e0e0e0` | `--color-mist-gray` | surface | Part of the gray loading shimmer treatment in recommendation placeholders, not a primary brand color. |
| Cloud Gray | `#f0f0f0` | `--color-cloud-gray` | surface | Pale neutral surface and loading-shimmer midpoint for placeholder product cards. |
| Cool Haze | `#f5f7fa` | `--color-cool-haze` | surface | Light gray-blue support and benefits section background near the lower page. |
| Weekend Pink | `#ee5780` | `--color-weekend-pink` | brand | Prominent pink announcement and newsletter bands, plus the new-arrivals CTA. |
| Coral Flash | `#f26643` | `--color-coral-flash` | accent | Minor button accent; not a defining large-area interface color in the screenshots. |
| Pool Blue | `#02bce5` | `--color-pool-blue` | accent | Bright blue promotional button accent, including the mystery-box CTA. |
| Sale Red | `#d50a0a` | `--color-sale-red` | semantic | Sparse button-level red accent; do not use as a broad page surface. |
| Promo Red | `#ff0000` | `--color-promo-red` | semantic | Measured red section color, likely campaign-specific; not part of the persistent storefront chrome. |
| Stone Gray | `#cccccc` | `--color-stone-gray` | neutral | Occasional muted background tone; keep limited to secondary interface areas. |
| Quiet Gray | `#a0a2a5` | `--color-quiet-gray` | neutral | Muted input and navigation details, such as placeholder text and subtle control borders. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#006c8c` (Deep Current) · `--color-surface-2` → `#f5f7fa` (Cool Haze) · `--color-surface-3` → `#f0f0f0` (Cloud Gray) · `--color-surface-4` → `#cccccc` (Stone Gray) · `--color-text` → `#000000` (Hard Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d2d4d7` (Soft Divider) · `--color-accent` → `#006c8c` (Deep Current) · `--color-accent-2` → `#0082a6` (Ocean Signal) · `--color-accent-3` → `#d1f270` (Lime Pop) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#006c8c` | 3.52:1 | AA-large |
| `#000000` | `#f5f7fa` | 19.57:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#ffffff` | `#006c8c` | 5.96:1 | AA |
| `#ffffff` | `#f5f7fa` | 1.07:1 | fail |
| `#ffffff` | `#f0f0f0` | 1.14:1 | fail |
| `#006c8c` | `#ffffff` | 5.96:1 | AA |
| `#006c8c` | `#f5f7fa` | 5.55:1 | AA |
| `#006c8c` | `#f0f0f0` | 5.23:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(224, 224, 224) 0px, rgb(240, 240, 240) 40%, rgb(224, 224, 224) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montserrat | `--font-body` | webfont | 700, 400, 800, 600 | All measured page typography, from navigation and product labels to campaign headlines and buttons. | Montserrat |

- **Montserrat:** Use bold and extra-bold uppercase for display headings and buttons; keep body copy regular and navigation bold, with no notable tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.441, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 800 | 0.9 | 0 | uppercase | Montserrat | Oversized uppercase campaign headline layered over hero photography. |
| h1 | 48px | 800 | 0.9 | 0 | uppercase | Montserrat | Primary campaign or collection headline, set in heavy uppercase. |
| h2 | 24px | 800 | 0.9 | 0 | uppercase | Montserrat | Section titles and prominent promotional headings. |
| h3 | 18px | 800 | 0.9 | 0 | uppercase | Montserrat | Category, product-story, and smaller module headings. |
| body | 13px | 400 | 1.2 | 0 | — | Montserrat | Supporting promotional copy, descriptions, and storefront text. |
| caption | 11px | 700 | 1.2 | 0 | — | Montserrat | Small utility labels and concise image or product captions. |
| button | 13px | 700 | 1 | 0 | uppercase | Montserrat | Short uppercase CTA labels in bold type. |
| nav | 15px | 700 | 1.2 | 0 | — | Montserrat | Main storefront categories in compact bold text. |
| link | 13px | 700 | 1.2 | 0 | — | Montserrat | Product, footer, and utility links in clear bold text. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 18, 24, 32 px.
- Section rhythm 32px · element gap 8px · card padding 20px · max content width 1344px.

Build a compact storefront header above broad, image-led campaign sections. The measured maximum page width is 1344px; the 1440px screenshot keeps the main hero edge-to-edge while the product and category modules use neat multi-column rows. Use compact spacing within navigation and cards, with clearer breathing room between major modules; the measured base spacing is 4px, element gap 8px, card padding 20px, and section gap 32px. Align campaign copy over imagery and keep utility and footer content in organized columns.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · xs `4px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px -2px 12px 0px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The interface is predominantly flat, with crisp white and colored section bands rather than stacked, shadowed cards. Separate modules through whitespace, image boundaries, and occasional fine gray borders. Inputs and buttons rely on pill-shaped outlines or fills; reserve shadows for subtle interface layering and avoid adding heavy card elevation.

## Imagery

Photography is the main visual asset: full-bleed scenes of people wearing the clothes, tightly framed product details, and multi-card category imagery. Use natural, candid lifestyle settings with vivid garment colors and confident human subjects. Keep images rectangular and edge-to-edge within their modules; use white gutters and occasional dark overlays or contrast to keep overlaid uppercase copy readable. No illustrative or 3D style defines the page.

## Components

### Utility bar and navigation

Slim deep-teal utility strip above a white navigation row, with a script-style logo, compact bold category links, search, and account/cart icons.

### Campaign announcement

Full-width hot-pink message band with centered uppercase copy and a bright blue pill CTA.

### Hero campaign

Edge-to-edge lifestyle photograph with a large white uppercase headline and pink pill CTA overlaid near the lower-left.

### Category tiles

Four-column image grid with centered white uppercase category labels; use photos as the tile surface rather than ornamental card backgrounds.

### Editorial product story

Large split or tightly cropped campaign image with a short uppercase collection title and a small pill-shaped shopping action.

### Newsletter signup

Hot-pink signup band combining concise copy with a long rounded email field and compact teal subscribe button.

### Footer

Deep-teal multi-column link directory with small white text, lime support actions, and social icons.

### Measured component styles

- **Primary button** (“SHOP SWIM”): background #006c8c · text #ffffff · border 1px solid · radius 500px · padding 14px 24px · 700 13px Montserrat · uppercase
- **Secondary button** (“GRAB ONE WHILE YOU CAN”): background #02bce5 · text #ffffff · border 1px solid · radius 500px · padding 10px 16px · 700 13px Montserrat · uppercase
- **Link** (“VIEW DEALS”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Montserrat
- **Input**: background #ffffff · text #000000 · radius 100px · padding 12px · 400 13px Montserrat
- **Card** (“NEW ARRIVALS Shop All”): background #efefef · text #000000 · radius 0px · padding 24px 16px · 400 16px Montserrat
- **Navigation item** (“Featured Shorts Swim Pants Tops Kids NFL”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Montserrat

## Do

- Keep the canvas white and the shopping frame compact.
- Use full-width lifestyle photography for major campaigns.
- Set display headlines in heavy uppercase Montserrat.
- Use pink and teal as clear, separate promotional signals.
- Make key CTAs pill-shaped with short uppercase labels.
- Organize category and footer links into tidy columns.

## Don't

- Do not let interface colors compete with campaign photography.
- Do not use gray shimmer tones as prominent brand colors.
- Avoid excessive shadows, rounded cards, or layered panels.
- Do not use delicate serif display typography.
- Avoid loose, oversized spacing in the storefront navigation.
- Do not place white text over busy images without sufficient contrast.

## Agent prompt

Create a new Chubbies-style storefront page with a crisp white (#ffffff) canvas, compact retail navigation, and broad campaign photography that carries the personality. Use Deep Current (#006c8c) for utility and footer bands, Weekend Pink (#ee5780) for promotional sections, Ocean Signal (#0082a6) for prominent CTAs, and sparing Lime Pop (#d1f270) details. Keep interface text in Montserrat: heavy uppercase display headlines and buttons, compact bold navigation, and practical regular-weight body copy. Organize content into full-bleed hero imagery, rectangular category or product grids, and clear footer columns. Use pill-shaped buttons and simple borders; rely on whitespace and image edges instead of card shadows. Do not reuse image-specific colors as interface palette tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Pale gray-blue service band with five evenly spaced benefit blocks, icons, short descriptions, and supporting links. | service reassurance, store locator, shipping and returns links | light tinted background, simple line icons, compact columns |
| 2 | newsletter | Full-width hot-pink band with a copy block and a horizontal email signup form. | email signup, promotion updates | pink section background, rounded email field, teal submit button |
| 3 | footer | Full-width deep-teal footer with four link columns, support actions, social links, and a slim legal row. | category navigation, customer support, social links, legal links | teal background, small white links, lime pill actions |

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