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

# VSCO · Design System

> A bold editorial canvas for photographers

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

VSCO pairs stark editorial typography and monochrome bands with vivid, photography-led color blocks. The homepage moves from a compact product entry point into a broad ecosystem of editing, community, and business tools.

## North star

Let bold uppercase typography and real photography lead, using color blocks sparingly to distinguish each product story.

## Overview

The visual system is built around a white canvas, nearly black content bands, and photography that supplies most of the page’s texture and color. The opening is deliberately spare: a compact announcement strip and navigation give way to a large, uppercase headline, short explanatory copy, and two rounded calls to action. VSCO Gothic carries the full interface, from oversized, tightly led display headings to small uppercase navigation and captions. Below the hero, the page alternates dark ecosystem and pricing sections with paired feature panels in blue, orange, and white; these bold colors distinguish product stories rather than replacing the neutral foundation. Image cards, campaign tiles, and video previews create an editorial portfolio feel. Content is aligned to the left and arranged in broad bands, split layouts, and compact card rows, with generous white space around major stories. Borders stay subtle, and the interface relies on contrast, imagery, and clean structure rather than depth effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Primary text, dark footer, inverse sections, and black pill buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light sections, card surfaces, and text on dark bands. |
| Soft Black | `#111111` | `--color-soft-black` | surface | Large dark product, video, and membership sections; softer than the footer black. |
| Campaign Red | `#c42304` | `--color-campaign-red` | accent | Red campaign gradient and VSCO One promotional artwork, not a general interface color. |
| Mist Gray | `#f2f2f2` | `--color-mist-gray` | surface | Pale neutral section surface, visible behind the membership cards. |
| Slate Blue | `#386584` | `--color-slate-blue` | semantic | Badge color detected in measured data; not a defining page surface. |
| Golden Button | `#ffbc3c` | `--color-golden-button` | accent | Filled primary free-trial button against the white hero. |
| Badge Amber | `#f1a900` | `--color-badge-amber` | accent | Most Popular membership badge; a small label accent rather than a section color. |
| Sky Blue | `#7bbce0` | `--color-sky-blue` | brand | Full-width photography craft feature panel paired with product imagery. |
| Studio Orange | `#ff6a2f` | `--color-studio-orange` | brand | Community feature panel background, paired with a photographer profile image. |
| Warm Orange | `#ffa72a` | `--color-warm-orange` | brand | Business tools feature panel; use as a distinct product-story section color. |
| Night Black | `#080808` | `--color-night-black` | surface | Dark section color sampled in page regions; visually close to the broader black surfaces. |
| Hairline Gray | `#d9d9d9` | `--color-hairline-gray` | neutral | Fine card and button borders, including pricing card outlines. |
| Muted Graphite | `#737373` | `--color-muted-graphite` | neutral | Secondary footer and supporting text, used more quietly than primary black text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#111111` (Soft Black) · `--color-surface-3` → `#f2f2f2` (Mist Gray) · `--color-surface-4` → `#7bbce0` (Sky Blue) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d9d9d9` (Hairline Gray) · `--color-accent` → `#c42304` (Campaign Red) · `--color-accent-2` → `#ffbc3c` (Golden Button) · `--color-accent-3` → `#7bbce0` (Sky Blue) · `--color-on-accent` → `#000000` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#111111` | 1.11:1 | fail |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#c42304` | `#ffffff` | 5.85:1 | AA |
| `#c42304` | `#000000` | 3.59:1 | AA-large |
| `#c42304` | `#111111` | 3.23:1 | AA-large |
| `#c42304` | `#f2f2f2` | 5.23:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(196, 35, 4), rgb(196, 35, 4) 29%, rgba(196, 35, 4, 0) 44%)`
- `linear-gradient(291.72deg, rgb(230, 30, 124) 3.48%, rgb(255, 102, 0) 14.14%, rgb(255, 197, 0) 32.06%, rgb(173, 229, 4) 48.97%, rgb(173, 229, 4) 51.03%, rgb(255, 197, 0) 67.94%, rgb(255, 102, 0) 85.86%, rgb(230, 30, 124) `
- `linear-gradient(291.72deg, rgb(230, 30, 124) 6.95%, rgb(255, 102, 0) 28.28%, rgb(255, 197, 0) 64.12%, rgb(173, 229, 4) 97.94%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| VSCO Gothic | `--font-body` | webfont | 400, 600, 500, 700 | Site-wide display, headings, body copy, navigation, buttons, captions, and links. | Montserrat |

- **VSCO Gothic:** Use medium uppercase display headings, regular sentence-case copy, and semibold uppercase utility labels; keep tracking restrained outside nav and captions.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 500 | 0.9 | 0 | uppercase | VSCO Gothic | Oversized uppercase campaign and hero statements. |
| h1 | 54px | 500 | 0.93 | 0 | uppercase | VSCO Gothic | Primary page headline in the opening hero. |
| h2 | 50px | 500 | 0.93 | 0 | uppercase | VSCO Gothic | Major section headings across feature and story bands. |
| h3 | 36px | 400 | 1 | 0 | — | VSCO Gothic | Feature, testimonial, and card-level headings. |
| h4 | 29px | 400 | 1.14 | 0 | — | VSCO Gothic | Smaller supporting headings within content blocks. |
| body | 15px | 400 | 1.24 | 0 | — | VSCO Gothic | Explanatory paragraphs and product descriptions. |
| caption | 13px | 600 | 1.1 | 0.1em | uppercase | VSCO Gothic | Compact uppercase labels on cards and image stories. |
| nav | 15px | 500 | 1.5 | 0.08em | uppercase | VSCO Gothic | Uppercase primary navigation labels. |
| link | 24px | 400 | 1.2 | 0 | — | VSCO Gothic | Prominent text links within product and content areas. |
| eyebrow | 13px | 600 | 1.1 | 0.1em | uppercase | VSCO Gothic | Short uppercase introductory labels above headings. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

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

Use broad, full-width horizontal sections with content aligned to a consistent left edge. The opening hero is a two-column text-led composition, followed by a dark product carousel, full-bleed video, and a multi-column pricing comparison. Later stories alternate paired text-and-image panels, editorial campaign tiles, and open testimonial space. The measured page max width is 1360px; keep the page compact within components while leaving clear breathing room between major bands. Maintain strong left alignment and distinct section transitions.

## Shape & elevation

- Radius: button `9999px` · card `10px` · badge `4px` · link `9999px` · xs `3px` · sm `4px` · md `10px` · pill `9999px`
- Shadow `hairline` (link): `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- Motion: standard transition `0.45s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

Keep the interface mostly flat. Use dark and colored section bands, image crops, and strong contrast to create hierarchy rather than layered shadows. Card edges are restrained, with measured light gray borders on pricing surfaces and small pill-shaped buttons. A subtle hairline treatment appears on links; avoid floating panels or heavy depth effects.

## Imagery

Photography is the main visual material: use candid portraits, working photographers, profile cards, app previews, and campaign imagery. Images appear in cropped horizontal cards, paired feature panels, and large video frames. Favor natural, documentary-feeling scenes with varied color and subject matter; dark sections may frame images, while the lower monochrome photographer strip gives the gallery a quieter editorial finish. No illustration or 3D style defines the page.

## Components

### Announcement strip

A narrow full-width promotional banner with a multicolor campaign gradient, compact announcement copy, and a black pill-shaped Learn More action.

### Primary navigation

White horizontal header with VSCO mark, uppercase product and resource links, and compact outlined or black pill actions at the right.

### Hero actions

Pair a golden filled TRY VSCO FOR FREE pill with a black EXPLORE VSCO pill beneath the large uppercase headline and supporting copy.

### Photography product rail

Dark section with a white uppercase title, small category tabs, and a horizontal row of image-led product cards with compact captions.

### Membership plans

Dark membership section with a pale card band, side-by-side plan cards, compact feature lists, and black pill plan actions; distinguish featured labels with a small amber badge.

### Split feature story

Two-column product story alternating a saturated text panel with a large photography or app-preview image; use outline pill actions.

### Editorial story tiles

A row of campaign images with short uppercase overlays and small contrasting pill links, treated as a photographic editorial gallery.

### Footer link directory

Black footer organized into multiple dense product, solution, resource, and company columns, with white links and compact bottom utility text.

### Measured component styles

- **Primary button** (“TRY VSCO FOR FREE”): background #ffbc3c · text #000000 · radius 999px · padding 2px 28px · 600 13px VSCO Gothic · uppercase
- **Secondary button** (“EXPLORE CREATIVE TOOLS”): transparent background · text #000000 · border 2px solid #000000 · radius 999px · padding 2px 28px · 600 13px VSCO Gothic · uppercase
- **Link** (“THE FIFTY”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px VSCO Gothic
- **Card** (“VSCO STUDIO PRO Batch edit with iconic p”): transparent background · text #ffffff · border 2px solid #ffffff · radius 10px · padding 20px · 400 16px VSCO Gothic
- **Badge** (“NEW”): background #000000 · text #ffffff · radius 3px · padding 3px 6px · 600 10.1px VSCO Gothic · uppercase
- **Navigation item** (“PRODUCTS SOLUTIONS COMMUNITY RESOURCES P”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px VSCO Gothic

## Do

- Use VSCO Gothic or a close geometric sans-serif substitute throughout.
- Set major headings in uppercase with tight line spacing.
- Keep the hero white, text-led, and left aligned.
- Use black bands to frame product discovery and membership content.
- Pair saturated feature panels with relevant photography.
- Use rounded pill actions for primary and secondary calls to action.

## Don't

- Do not add gradients to ordinary content sections.
- Do not treat sampled illustration colors as core interface colors.
- Do not rely on shadows to separate cards or sections.
- Do not center every heading or paragraph.
- Do not turn the photographic homepage into a generic icon-led SaaS dashboard.
- Do not overcrowd the hero with product imagery.

## Agent prompt

Build a new photography-platform page in the VSCO visual style. Use a Gallery White (#ffffff) canvas, Deep Ink (#000000) text, and Soft Black (#111111) bands to establish contrast. Reserve Golden Button (#ffbc3c) for the primary action; use Sky Blue (#7bbce0), Studio Orange (#ff6a2f), and Warm Orange (#ffa72a) only as distinct feature-story panels. Set the page in a geometric sans-serif similar to VSCO Gothic, with bold uppercase display headings, restrained body copy, and compact uppercase navigation. Organize content in broad horizontal bands: a spare text-led hero, image-rich product rail, feature splits, and editorial story cards. Use real photography as the main visual texture. Keep borders subtle, surfaces flat, and buttons pill-shaped; avoid excessive shadows, decorative UI chrome, or invented brand colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White, left-aligned text-led hero with headline, concise copy, and paired actions. | primary free-trial action, secondary explore action | oversized uppercase headline, gold and black pill buttons |
| 2 | product-grid | Dark section with category tabs above a horizontal row of image-led product cards. | category switching, browse product cards | white section heading, compact uppercase tabs, photographic cards |
| 3 | video | Full-bleed video preview inside a dark section. | play video, view introduction | darkened photographic frame, play control, caption and timeline |
| 4 | pricing | Dark backdrop with a row of light plan cards and a contrasting featured plan. | compare plans, view plan details | multi-column pricing cards, compact feature lists, amber popularity badge |
| 5 | feature-split | Blue text panel paired with a large editing-interface photograph. | explore creative tools, learn about editing workflow | saturated blue panel, uppercase heading, outline pill action |
| 6 | feature-split | Photographer profile image paired with an orange text panel. | explore community tools, follow photographer | orange panel, profile-style image card, outline pill action |
| 7 | feature-split | Warm orange text panel beside a client-work image. | explore work solutions, review business tools | warm orange panel, photographic client-work preview, outline pill action |
| 8 | product-showcase | Open white section with a product campaign card and supporting content columns. | get VSCO One, browse product tools | red campaign artwork, dark product labels, white negative space |
| 9 | gallery | Editorial horizontal image tiles followed by a short text-led transition. | discover stories, open campaign features | full image tiles, uppercase overlay titles, small contrasting links |
| 10 | cta | Compact white call-to-action band with copy and one outlined action. | browse all features | short explanatory copy, outlined pill button |
| 11 | testimonials | Spacious white testimonial area with heading, story links, and photographer quote content. | explore pro stories, read photographer stories | large uppercase heading, open whitespace, small story labels |
| 12 | other | Three-column white information row for help, news, and downloads. | open customer support, read blog, find downloads | three text columns, uppercase headings, compact links |
| 13 | gallery | Dark-backed, full-width grid of monochrome photographer portraits. | browse photographer imagery | grayscale image grid, white overlay heading |
| 14 | footer | Black footer with multiple link columns and a compact legal utility row. | navigate product categories, open company resources, download or try VSCO | dense white link lists, column headings, subtle divider |

## Source CSS custom properties (selected)

```css
--surface-green: #4d7d3f;
--swiper-theme-color: #007aff;
--currentcolor: currentColor;
```

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