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

# Cotopaxi · Design System

> Bright outdoor gear, grounded in good.

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

Cotopaxi pairs an energetic outdoor identity with a clean, commerce-first storefront. Bold typography and immersive adventure photography are balanced by white space, straightforward product browsing, and impact-led storytelling.

## North star

Keep the storefront crisp and easy to shop, then let vivid outdoor photography and bold, friendly type carry the adventure.

## Overview

The page uses a predominantly white storefront canvas, with charcoal navigation and footer elements, pale gray product-image fields, and vivid color concentrated in photography and selected calls to action. A rust-toned Amigos campaign panel creates the first viewport’s strongest graphic interruption; it is campaign imagery, not a reason to recolor the wider interface. Mont is the dominant display and body face: rounded, heavy headings give product and editorial sections a friendly outdoor character. Gotham handles uppercase action labels and supporting interface copy. The layout moves from a wide photographic hero into a compact product carousel, paired editorial features, category tiles, travel storytelling, impact content, reviews, and a dark footer. Broad image blocks provide emotional scale while tight, orderly gutters keep shopping content efficient. Controls are mostly flat and square-edged, with restrained borders and only subtle card or button elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Trail Charcoal | `#25282a` | `--color-trail-charcoal` | brand | Main navigation, headings, body copy, footer surface, links, and dark borders. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page and section surface, product cards, navigation bar, and light button fills. |
| Mist Gray | `#f2f2f2` | `--color-mist-gray` | surface | Neutral canvas and pale media or input areas; product imagery often sits against this tone. |
| Trail Blue | `#385cad` | `--color-trail-blue` | accent | Checkout action and a small number of navigation or interface accents. |
| Cloud Gray | `#e8e8e8` | `--color-cloud-gray` | neutral | Subtle gray gradient and faint component-edge treatment, rather than a dominant section fill. |
| True Black | `#000000` | `--color-true-black` | semantic | Black product-link text and occasional high-contrast text detail. |
| Signal Ember | `#f04923` | `--color-signal-ember` | accent | Bright action accent and campaign-associated interface color; used sparingly. |
| Stone Gray | `#8a8d90` | `--color-stone-gray` | neutral | Muted footer copy and lower-emphasis informational text. |
| Weathered Gray | `#828282` | `--color-weathered-gray` | neutral | Secondary footer text and understated text or border details. |
| Slate Gray | `#54585c` | `--color-slate-gray` | neutral | Muted form text and low-emphasis footer content. |
| Pale Pewter | `#c5c6c6` | `--color-pale-pewter` | neutral | Fine input outline on white form fields. |
| Harvest Ochre | `#7f5504` | `--color-harvest-ochre` | accent | Top announcement strip background, providing a warm contrast above the white navigation. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Mist Gray) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#25282a` (Trail Charcoal) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#25282a` (Trail Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#25282a` (Trail Charcoal) · `--color-accent` → `#385cad` (Trail Blue) · `--color-accent-2` → `#f04923` (Signal Ember) · `--color-accent-3` → `#7f5504` (Harvest Ochre) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#25282a` | 1.42:1 | fail |
| `#25282a` | `#f2f2f2` | 13.25:1 | AAA |
| `#25282a` | `#ffffff` | 14.83:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#ffffff` | `#25282a` | 14.83:1 | AAA |
| `#385cad` | `#f2f2f2` | 5.68:1 | AA |
| `#385cad` | `#ffffff` | 6.36:1 | AA |
| `#385cad` | `#25282a` | 2.33:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(232, 232, 232) 25%, rgb(245, 245, 245) 50%, rgb(232, 232, 232) 75%)`
- `linear-gradient(rgb(37, 40, 42), rgb(37, 40, 42))`
- `linear-gradient(rgb(56, 92, 173), rgb(56, 92, 173))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Mont | `--font-body` | webfont | 600, 400, 800, 700 | Primary headings, product and body copy, captions, and navigation. | Montserrat |
| Gotham | `--font-gotham` | webfont | 400, 700, 800, 600 | Buttons, eyebrow labels, links, and selected interface or utility copy. | Montserrat |
| Montserrat | `--font-montserrat` | webfont | 400, 700 | Secondary interface and form text, plus an occasional action label. | Montserrat |

- **Mont:** Rounded sans character; bold and extra-bold display weights, with compact body leading and mostly natural case.
- **Gotham:** Use strong weights for uppercase actions and tracked eyebrow labels; supporting links remain regular weight.
- **Montserrat:** Neutral sans fallback; measured use is limited, with regular form copy and bold uppercase action text.

### Type scale — Major Third (ratio ≈ 1.257, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 800 | 1.2 | 0.005em | — | Mont | Large primary campaign or page headline. |
| h2 | 32px | 700 | 1.3 | 0.005em | — | Mont | Section headings for product and editorial blocks. |
| h3 | 30px | 800 | 1.25 | 0 | — | Mont | Prominent feature and story titles. |
| h4 | 28px | 600 | 1.2 | 0 | — | Mont | Secondary section or card heading. |
| body | 16px | 600 | 1.15 | 0 | — | Mont | Product descriptions and supporting content. |
| caption | 14px | 600 | 1.2 | 0 | — | Mont | Compact product, review, and image captions. |
| button | 14px | 700 | 1.5 | 0.107em | uppercase | Gotham | Uppercase CTA labels and purchase actions. |
| nav | 13px | 400 | normal | 0 | — | Mont | Main navigation and utility menu labels. |
| link | 16px | 400 | 1.5 | 0 | — | Gotham | Product, editorial, and supporting links. |
| eyebrow | 14px | 700 | 1.5 | 0.107em | uppercase | Gotham | Tracked uppercase campaign and section labels. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 3, 4, 5, 7, 8, 10, 15, 16, 20, 24, 25, 30, 35, 40 px.
- Section rhythm 40px · element gap 10px · card padding 26px · max content width 1400px.

A wide desktop storefront uses a centered content area, with the measured page max width at 1400px. The navigation and announcement bands sit above full-width campaign imagery. Product browsing uses a multi-column grid, followed by paired editorial panels, a four-category tile row, and alternating image-led storytelling and content blocks. Most sections are white and align their headings to the content edge; hero and campaign copy may center over imagery. Rhythm is compact and consistent, with clear separation between major content blocks.

## Shape & elevation

- Radius: button `2px` · input `2px` · xs `2px` · sm `4px` · pill `9999px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0.12) 0px 1px 4px 0px`
- Shadow `sm-2` (card): `rgba(189, 189, 189, 0.25) 3px -3px 8px 0px`
- Shadow `hairline` (card): `rgb(234, 234, 234) 0px 2px 2px -1px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with white sections separated by spacing rather than heavy card outlines. Product imagery rests in pale gray fields, and subtle shadows appear on a small number of cards or buttons. Borders are restrained: dark outlines appear on selected controls, while fine pale gray borders distinguish form fields. Avoid deep shadows or floating layers.

## Imagery

Photography defines the page: outdoor travelers, gear in use, product pack shots, and people in scenic environments. The hero combines two adventure images with a centered campaign panel; product photography is isolated against pale neutral fields. Editorial tiles use cropped, edge-to-edge images with readable text overlays where needed. Image color is intentionally lively and varied, while interface chrome stays restrained. No illustration or 3D treatment defines the visual identity.

## Components

### Announcement and navigation

A narrow ochre shipping strip precedes a white navigation bar with charcoal links, logo, and utility icons.

### Campaign hero

Wide adventure photography frames a centered rust-toned campaign panel with prominent type and a white Join Now action.

### Product carousel

A bold section title and short supporting line lead into a compact multi-column product row with pale image fields, names, and prices.

### Editorial image panels

Paired outdoor photographs carry short overlay labels and white uppercase shopping actions.

### Category tiles

A four-column row of portrait lifestyle images uses concise category titles beneath each image.

### Impact and review blocks

Impact stories use a staggered image grid; testimonials pair lifestyle photography with review copy and a small shopping link.

### Newsletter and footer

A light signup area presents form fields and an orange next-step action above a charcoal, multi-column footer.

### Measured component styles

- **Primary button** (“CHECK OUT”): background #385cad · text #ffffff · border 2px solid #385cad · radius 0px · padding 8px 35px · 700 14px Gotham · uppercase
- **Secondary button** (“JOIN NOW”): background #ffffff · text #25282a · border 2px solid #ffffff · radius 0px · padding 8px 25px · 700 14px Gotham · uppercase
- **Link** (“Todo 22L Convertible Tote Bag $90”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Mont
- **Input**: background #f2f2f2 · text #25282a · border 1px solid #f2f2f2 · radius 99px · padding 9px 10px 7px 35px · 400 16px Mont
- **Card** (“Wishlist”): background #cccccc · text #ffffff · radius 0px · padding 32px 20px · 400 16px Gotham · shadow rgb(234, 234, 234) 0px 2px 2px -1px
- **Navigation item** (“Free Standard Shipping On Orders $99+ Ea”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px Gotham

## Do

- Use white as the dominant storefront surface.
- Reserve vivid color for photography and selected actions.
- Set headings in bold, rounded sans-serif type.
- Make product imagery large, clear, and easy to scan.
- Use compact uppercase labels for prominent actions.
- Separate editorial blocks with generous visual breathing room.

## Don't

- Do not turn campaign image colors into site-wide interface colors.
- Do not add gradients as a dominant brand background.
- Do not use heavy shadows on cards or controls.
- Do not crowd product cards with decorative UI.
- Do not let text overlays obscure the subject of a photograph.
- Do not replace the white, clean storefront with a dark theme.

## Agent prompt

Build a new Cotopaxi-style outdoor ecommerce page with a crisp white storefront, bold rounded sans-serif headings, and vivid adventure photography. Use Trail Charcoal (#25282a) for navigation, headings, links, and dark footer areas; Gallery White (#ffffff) for the main surfaces; and Mist Gray (#f2f2f2) for subdued media fields. Keep Trail Blue (#385cad) and Signal Ember (#f04923) for restrained action accents, and Harvest Ochre (#7f5504) for a narrow announcement band. Create a clear hierarchy from announcement and navigation to a large image-led hero, scannable product rows, editorial image panels, and supporting brand content. Favor square, flat controls, compact uppercase CTA text, consistent gutters, and subtle borders over elevation. Keep campaign-specific colors inside their campaign block rather than spreading them across the interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered campaign panel flanked by two full-height adventure photographs. | campaign announcement, single join action | split photography, rust-color center panel, white button |
| 2 | product-grid | Left-aligned introduction above a horizontal multi-column product carousel. | category tabs, carousel browsing, product price display | pale product-image fields, compact product labels, bold heading |
| 3 | feature-grid | Two equal-width photographic promotions in a side-by-side row. | shop-by-theme, direct shopping actions | image-led panels, white CTA buttons, overlay copy |
| 4 | category-nav | Four-column category tile row with aligned titles beneath portrait images. | category shortcuts, visual category selection | portrait lifestyle photos, simple text labels, even columns |
| 5 | feature-split | Wide, single-image travel banner with centered text and action. | travel collection promotion, single shopping action | full-width photography, centered overlay, high-contrast type |
| 6 | feature-grid | Two-column editorial block with a large image alongside stacked story panels. | impact storytelling, multiple report links | staggered image grid, photo overlays, short editorial titles |
| 7 | testimonials | Three-column section with a lifestyle image beside review content and supporting links. | customer review carousel, reviewer attribution, product link | star rating, large portrait image, simple copy block |
| 8 | feature-split | Three-column guarantee section with an emblem, copy, and supporting benefits. | warranty reassurance, returns and repair benefits | guarantee mark, bold heading, small icon-led links |
| 9 | footer | Three-column lower-page content followed by signup and a dark multi-column footer. | email signup, social links, site navigation | light form area, orange CTA, charcoal footer |

## Source CSS custom properties (selected)

```css
--bs-primary: #e03100;
--bs-secondary: #f1f0eb;
--bs-primary-rgb: 224, 49, 0;
--bs-secondary-rgb: 241, 240, 235;
--bs-body-color-rgb: 37, 40, 42;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: "Gotham", ("HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif);
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-body-font-family: Gotham, HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-color: #25282a;
--bs-body-bg: #fff;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #bdbdbd;
--bs-border-color-translucent: rgba(37, 40, 42, .175);
--bs-border-radius: 0px;
--bs-border-radius-sm: 0px;
--bs-border-radius-lg: 0px;
--bs-border-radius-xl: 1rem;
--bs-border-radius-2xl: 2rem;
--bs-border-radius-pill: 50rem;
--bs-link-color: #25282a;
--bs-link-hover-color: rgb(29.6, 32, 33.6);
--bs-code-color: #d63384;
--bs-highlight-bg: rgb(255, 240.4, 207.6);
--swiper-theme-color: #007aff;
```

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