--- version: alpha name: VSCO description: A photo app that designs like a gallery wall — VSCO Gothic in oversized uppercase headlines, a black-and-white canvas that steps out of the way of the imagery, square corners everywhere, and a single warm amber pill for the one action that matters. colors: # Surface / canvas background: "#ffffff" # the white gallery wall surface: "#ebebeb" # faint section bands surface-dark: "#111111" # inverted dark panels and the app-ground # Ink / text ink: "#000000" # pure-black uppercase headlines ink-secondary: "#404040" # body copy ink-tertiary: "#595959" # supporting / metadata ink-muted: "#b3b3b3" # captions, disabled, faint labels on-dark: "#ffffff" # white text on the dark inverted panels # Brand accent — the single warm amber CTA primary: "#ffbc3c" # the "Try VSCO for free" pill primary-hover: "#f1a900" # deeper amber on hover / badges on-primary: "#000000" # black text on the amber pill # Borders border: "#ebebeb" # faint hairline on light border-dark: "#404040" # hairline on the dark panels # Shadow tint (opaque approximation — the system is essentially shadowless) shadow-soft: "#000000" # was rgba(0,0,0,0.1) — Google format requires hex typography: display-hero: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 89px fontWeight: 500 lineHeight: 0.95 letterSpacing: 0px display: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 54px fontWeight: 500 lineHeight: 0.93 letterSpacing: 0px heading: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 29px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px heading-sub: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0px body-large: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px caption: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0px label: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.5px button-ui: fontFamily: "VSCO Gothic, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.15px spacing: xs: 5px sm: 10px md: 15px lg: 20px xl: 30px 2xl: 40px 3xl: 53px 4xl: 60px rounded: none: 0px sm: 2px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" padding: 20px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 12px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label}" padding: 16px 40px link: textColor: "{colors.ink}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.ink-tertiary}" eyebrow: textColor: "{colors.ink-tertiary}" typography: "{typography.label}" padding: 0px badge: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 3px 8px --- # VSCO Design System ## Overview VSCO designs like a photo gallery, not a software product. The single most distinctive move is the typography: **VSCO Gothic**, a custom neo-grotesque sans, set in enormous uppercase headlines (`{typography.display-hero}` at roughly 89px) with a line-height pulled *below* 1.0 so the caps stack into dense, architectural blocks — "WHERE PHOTOGRAPHERS TURN PRO" reads like a poster, not a headline. The type is the design. There is no logotype flourish, no illustration, no decorative chrome; just oversized condensed-feeling capitals doing the structural work that color and graphics do on other sites. The palette is deliberately almost-monochrome. The marketing canvas is a clean white gallery wall (`{colors.background}`) with pure-black headlines (`{colors.ink}`) and a stepped grayscale for everything else (`{colors.ink-secondary}` through `{colors.ink-muted}`). VSCO then flips between white sections and full-black panels (`{colors.surface-dark}`), the white-text-on-black inversions that let photography and product video sit dramatically in the page. The whole point of this restraint is to keep the interface neutral so that color belongs to the *photographs* — the imagery, filters, and presets a photographer brings. The one chromatic exception is a warm amber pill (`{colors.primary}`), used exclusively for the single most important action: "Try VSCO for free." Geometrically the system is sharp. Corners are square (`{rounded.none}`) on cards, images, and panels — the gallery-frame, edge-to-edge feel — with the lone exception of the amber CTA, which is a full pill (`{rounded.pill}`). There are essentially no drop shadows; separation comes from the hard black/white tonal flips and from the photography itself. It's a confident, editorial, slightly austere system: black, white, one amber, giant caps, and a lot of imagery. **Key Characteristics:** - **VSCO Gothic** custom grotesque sans across the entire site (`{typography.display-hero}`, `{typography.body}`) - Oversized **uppercase** display headlines with sub-1.0 line-height (`{typography.display-hero}`) — type as architecture - An almost-monochrome palette: white gallery wall (`{colors.background}`), pure-black ink (`{colors.ink}`), stepped grays - Hard tonal flips between white sections and **full-black panels** (`{colors.surface-dark}`) — the editorial rhythm - A single warm **amber pill** (`{colors.primary}`) reserved for the primary "Try for free" CTA, with black text - Square corners everywhere (`{rounded.none}`) — the only pill is that one CTA (`{rounded.pill}`) - Essentially shadowless — separation comes from tone and imagery, not elevation - Color is delegated to the **photography**; the chrome stays neutral by design - Weight 500 for display, 700 for buttons, 400 for body — medium-to-bold, never thin - Generous full-bleed imagery; the interface frames pictures rather than competing with them - Near-zero letter-spacing on big caps; a touch of tracking on small labels (`{typography.label}`) - Black secondary buttons (`{components.button-dark}`) and white pills for the quieter actions ## Colors ### Surface & Canvas - **Gallery White** (`{colors.background}`): The dominant marketing canvas — neutral by intent. - **Faint Band** (`{colors.surface}`): Barely-there section separation on light. - **Ink Panel** (`{colors.surface-dark}`): The full-black inverted sections that frame photography and video. ### Ink / Text - **Pure Black** (`{colors.ink}`): Uppercase display headlines and primary text. - **Charcoal** (`{colors.ink-secondary}`): Body copy. - **Gray** (`{colors.ink-tertiary}`): Supporting copy, eyebrows, link-hover. - **Muted Gray** (`{colors.ink-muted}`): Captions, disabled, faint labels. ### Brand Accent - **VSCO Amber** (`{colors.primary}`): The single chromatic accent — the "Try for free" pill, always with black text (`{colors.on-primary}`). Hover/badges deepen to `{colors.primary-hover}`. ### Borders & Shadow Tint - **Hairline** (`{colors.border}`): Faint rules on the light canvas. - **Dark Hairline** (`{colors.border-dark}`): Rules on the black panels. - **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the rare soft shadow — the system is essentially flat (originally rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: `VSCO Gothic` — a custom neo-grotesque sans, with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. It carries everything; there is no secondary family. - **Case**: display and headings are uppercase; body and captions are sentence case. - **Tracking**: near-zero on the big caps (the size and weight do the work); a small positive tracking on tiny labels and buttons. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 89px / 500 / uppercase / line-height 0.95 — the poster headline | | `display` | 54px / 500 / uppercase — section display lines | | `heading` | 29px / 500 / uppercase — feature headings | | `heading-sub` | 22px / 500 — sub-section heads | | `body-large` | 16px / 400 — lead paragraphs | | `body` | 14px / 400 — standard body | | `caption` | 13px / 400 — captions, metadata | | `label` | 13px / 500 / 0.5px tracking — eyebrows and small UI labels | | `button-ui` | 14px / 700 — button labels | ### Principles - **Caps as structure**: oversized uppercase headlines with sub-1.0 line-height build the page's bones. - **One family**: VSCO Gothic everywhere — the consistency reinforces the neutral, gallery-like feel. - **Medium-to-bold**: display sits at 500, buttons at 700; the system never goes thin or light. - **Let the type be big**: scale, not decoration, creates impact — headlines are meant to dominate. ## Layout ### Spacing System The full scale is in the `spacing:` token block. The rhythm runs on a roughly 5px/10px base (5 / 10 / 15 / 30) with large editorial jumps (`{spacing.4xl}` = 60px) between sections. Content sits in generous margins so each photo-led block reads as its own frame. ### Grid & Container - Wide, full-bleed sections that alternate white and black - Image-and-text bands: a giant headline beside or above full-bleed photography or product video - Pricing/feature cards laid out in a clean multi-column row near the foot ### Whitespace Philosophy - **The wall is white space**: the neutral canvas exists to set off imagery - **Frame, don't decorate**: blocks are separated by tonal flips and space, not borders or shadows - **Big rhythm**: large vertical gaps between sections; type and imagery carry the density ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Nearly everything — cards, panels, imagery | | Tonal Flip (Level 1) | White ↔ black panel (`{colors.surface-dark}`) | The primary separation device | | Hairline (Level 2) | 1px `{colors.border}` / `{colors.border-dark}` | Faint rules within sections | | Soft (Level 3, rare) | `0 2px 10px` at ~10% black (`{colors.shadow-soft}`) | The occasional floating menu or overlay | **Shadow Philosophy**: VSCO is essentially shadowless. Depth and separation come from hard tonal contrast — a white section abutting a full-black one — and from the photography itself, which carries its own light. The interface stays flat so it reads as a gallery wall, not a stack of cards. Reserve any soft shadow for a true overlay (a dropdown, a modal). ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Cards, images, panels, sections — the gallery-frame default | | `sm` | 2px | Inputs and small badges, a barely-there softening | | `pill` | 9999px | The amber primary CTA and the dark/white secondary buttons | The system is binary: square (`{rounded.none}`) for everything structural, full pill (`{rounded.pill}`) for buttons. There is no mid-range radius — that gap is intentional and part of the crisp, editorial feel. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Amber (`{colors.primary}`) pill, black label (`{typography.button-ui}`). The "Try VSCO for free" action and the only consistent use of color. Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — White pill, black text, for quieter actions. Hover fills `{colors.surface}`. - **`button-dark`** — Black (`{colors.ink}`) pill, white text — the secondary action on light sections. ### Cards - **`card`** / **`card-dark`** — Square corners, no shadow. The dark variant lives on black panels with white text; the light variant on the white wall. ### Inputs - **`input`** — White fill, 2px corners, hairline border. **`input-focus`** stays minimal — no glow. ### Navigation - **`nav-bar`** — White, VSCO Gothic labels (`{typography.label}`), sits flush at the top. PRODUCTS · SOLUTIONS · COMMUNITY · RESOURCES · PRICING. ### Accent & Labels - **`link`** — Black, no underline; hover shifts to gray (`{colors.ink-tertiary}`). - **`eyebrow`** — Gray uppercase label (`{typography.label}`) above headlines. - **`badge`** — Deep-amber chip with black text for "NEW" flags. ## Do's and Don'ts ### Do - Set headlines in **VSCO Gothic**, uppercase, oversized, with sub-1.0 line-height (`{typography.display-hero}`) - Keep the canvas a neutral white gallery wall (`{colors.background}`) so color belongs to the photography - Flip between white sections and full-black panels (`{colors.surface-dark}`) for editorial rhythm - Reserve amber (`{colors.primary}`) for the single primary CTA, with black text (`{colors.on-primary}`) - Keep corners square (`{rounded.none}`) on cards, images, and panels - Use a full pill (`{rounded.pill}`) only for buttons — the binary radius is the look - Keep the interface flat — separate with tone and space, not shadows - Let photography be full-bleed and dominant; the chrome frames it ### Don't - Don't use a second typeface — VSCO Gothic carries the whole system - Don't introduce a color palette — it's black, white, grays, and one amber; everything else is the imagery - Don't set big headlines in sentence case or loosen the line-height — caps and sub-1.0 stacking are the signature - Don't add mid-range border-radius — the system is binary (square or pill) - Don't drop-shadow cards — use white/black tonal flips instead - Don't make amber a general fill — it's the one CTA, not a section or accent color - Don't go thin or light on weight — display is 500, buttons 700 --- ## Responsive Behavior ### Breakpoints *(No explicit breakpoints surfaced; the stops below reflect the marketing layout's observed reflow.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero caps scale from ~89px toward ~40px; nav collapses to a menu; CTA pill goes full-width | | Tablet | 640–1023px | Image-and-text bands stack; display type scales down; pricing cards go two-up | | Desktop | 1024–1279px | Side-by-side headline + imagery; full multi-column pricing row | | Large | ≥1280px | Wide full-bleed sections; oversized poster headlines at full scale | ### Touch Targets - The amber CTA and nav items keep comfortable tap height (~44px) with bold labels - Small labels stay at 13px; tap rows carry extra vertical padding ### Collapsing Strategy - **Navigation**: full horizontal nav → menu toggle on mobile; the amber CTA persists - **Hero**: side-by-side headline + image → stacked, image full-width - **Type**: display caps scale down sharply while keeping the sub-1.0 stacking - **Spacing**: section gaps compress from `{spacing.4xl}` toward `{spacing.lg}` ### Image Behavior - Photography and product video run full-bleed, square-cornered, edge-to-edge within sections - Imagery reflows as flex/grid children; aspect ratios preserved as the viewport narrows --- ## Agent Prompt Guide ### Quick Color Reference - Background: Gallery White (`{colors.background}`) - Text: Pure Black (`{colors.ink}`) - Brand accent: VSCO Amber (`{colors.primary}`) — the one CTA - Secondary text: Charcoal (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Dark panel: Ink (`{colors.surface-dark}`) ### Example Component Prompts - "Create a hero on white (`{colors.background}`) with an enormous uppercase VSCO Gothic headline (`{typography.display-hero}`, 89px, weight 500, line-height 0.95) in pure black (`{colors.ink}`), a short body line (`{typography.body-large}`) in charcoal, and an amber pill CTA (`{colors.primary}` fill, black label, `{rounded.pill}`) reading 'Try VSCO for free'" - "Build a full-black inverted section (`{colors.surface-dark}`) with white uppercase display type (`{typography.display}`) and full-bleed square-cornered (`{rounded.none}`) photography" - "Make the primary CTA: amber (`{colors.primary}`) pill (`{rounded.pill}`), black bold label (`{typography.button-ui}`), 12px 24px padding; hover deepens to `{colors.primary-hover}`" - "Lay out a pricing card: white surface (`{colors.background}`), square corners (`{rounded.none}`), an uppercase heading (`{typography.heading}`), body in charcoal (`{typography.body}`), and a black pill button (`{components.button-dark}`)" - "Design the nav bar: white (`{colors.background}`), VSCO Gothic labels (`{typography.label}`) — PRODUCTS · SOLUTIONS · COMMUNITY · RESOURCES · PRICING — flush to the top, no shadow, with the amber CTA on the right" ### Iteration Guide 1. Start on the white gallery wall (`{colors.background}`) with pure-black ink (`{colors.ink}`). Keep the canvas neutral — color belongs to photography. 2. Set everything in VSCO Gothic. Make the headlines big, uppercase, and stack them with sub-1.0 line-height. 3. Square every structural corner (`{rounded.none}`). Use a pill (`{rounded.pill}`) only on buttons. Nothing in between. 4. Spend amber (`{colors.primary}`) on the one primary CTA, with black text. No other chromatic accent. 5. Create separation with white/black tonal flips (`{colors.surface-dark}`), not shadows. Keep the interface flat. 6. Let imagery go full-bleed and dominant — the chrome frames the pictures. 7. Keep weights at 500 (display) and 700 (buttons); never thin. Big, crisp, monochrome, one amber. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by VSCO. Brand names and trademarks belong to their respective owners.