# VSCO® — Style Reference
> High-contrast geometric abstraction. Like engineering blueprints rendered in bold ink on a white page, punctuated by a single, sharp burst of yellow ink.
**Theme:** light
VSCO's design system creates a raw, utilitarian feel, blending high-contrast black and white with a select, vibrant yellow accent. The heavy reliance on a custom sans-serif font with tight letter-spacing for headlines establishes a direct, unadorned communication style. The overall impression is one of stark professionalism with a hint of creative energy, achieved through the deliberate scarcity of color and the bold, geometric typography.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Absolute Black | `#000000` | `--color-absolute-black` | Primary text, headline text, buttons, background for dark sections. Establishes the stark contrast. |
| Pure White | `#ffffff` | `--color-pure-white` | Page backgrounds, card surfaces, ghost button text. The canvas for all content, amplifying contrast. |
| Fog Gray | `#f2f2f2` | `--color-fog-gray` | Subtle background for alternating sections, differentiating content blocks without visual noise. |
| Steel Gray | `#d9d9d9` | `--color-steel-gray` | Outline for ghost buttons, subtle borders. Adds definition without heaviness. |
| Medium Gray | `#737373` | `--color-medium-gray` | Secondary text, descriptive elements. Provides hierarchy without losing legibility. |
| Amber Glow | `#f1a900` | `--color-amber-glow` | Key CTA buttons, badges, interactive accents. The single, sharp burst of color to draw attention. |
| Sunshine Yellow | `#ffbc3c` | `--color-sunshine-yellow` | Alternate CTA button color, indicating a secondary but still active call-to-action. |
## Tokens — Typography
### VSCO Gothic — The primary typeface for all textual content, from body to display. Its custom nature and geometric structure, particularly the tight negative letter-spacing on display sizes, create a distinctive, authoritative, and modern feel that a system font would not achieve. · `--font-vsco-gothic`
- **Substitute:** Open Sans
- **Weights:** 400, 500, 600
- **Sizes:** 10px, 11px, 13px, 15px, 16px, 24px, 29px, 36px, 54px, 89px, 98px
- **Line height:** 0.88, 0.93, 0.95, 1.00, 1.08, 1.10, 1.14, 1.20, 1.24, 1.25, 1.29, 1.30, 1.40, 1.50
- **Letter spacing:** -0.05em at large sizes, 0.05em, 0.08em, 0.10em
- **OpenType features:** `"clig" 0, "liga" 0`
- **Role:** The primary typeface for all textual content, from body to display. Its custom nature and geometric structure, particularly the tight negative letter-spacing on display sizes, create a distinctive, authoritative, and modern feel that a system font would not achieve.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | — | `--text-caption` |
| body | 15px | 1.3 | — | `--text-body` |
| subheading | 24px | 1.25 | — | `--text-subheading` |
| heading | 36px | 1.25 | — | `--text-heading` |
| heading-lg | 54px | 1.14 | — | `--text-heading-lg` |
| display | 98px | 0.93 | -0.98px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** compact
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 100 | 100px | `--spacing-100` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 0px |
| badges | 4px |
| images | 4px |
| buttons | 999px |
| navItems | 4px |
### Layout
- **Section gap:** 100px
- **Card padding:** 28-30px
- **Element gap:** 4-20px
## Components
### Primary CTA Button
**Role:** Call to action
Solid black background (#000000), white text (#ffffff), 999px border-radius, 2px vertical padding, 16px horizontal padding. Font is VSCO Gothic, weight 600.
### Ghost Button
**Role:** Secondary action
Transparent background, black text (#000000), 1px solid black border (#000000), 999px border-radius, 2px vertical padding, 28px horizontal padding. Font is VSCO Gothic, weight 400.
### Underlined Navigation Button
**Role:** Navigation links
Transparent background, black text (#000000), 1px solid black border-bottom (#000000), 0px border-radius, 8px vertical padding, 0px horizontal padding. Font is VSCO Gothic, weight 400.
### Amber CTA Button
**Role:** Alternate call to action
Solid amber background (#f1a900), black text (#000000), 999px border-radius, 2px vertical padding, 28px horizontal padding. Font is VSCO Gothic, weight 600.
### Info Badge (Amber)
**Role:** Labels for new features or status
Solid amber background (#f1a900), black text (#000000), 4px border-radius, 4px vertical padding, 6px horizontal padding. Font is VSCO Gothic.
### Pricing Card (Dark)
**Role:** Displays pricing tiers or feature sets
Solid black background (#000000), white text (#ffffff), 0px border-radius, 30px vertical padding, 28px horizontal padding.
### Pricing Card (Light)
**Role:** Displays pricing tiers or feature sets
Solid white background (#ffffff), black text (#000000), 0px border-radius, 30px vertical padding, 28px horizontal padding.
### Hero Headline
**Role:** Main page title
VSCO Gothic, 98px size, 0.93 line-height, -0.05em letter-spacing, pure black text (#000000).
## Do's and Don'ts
### Do
- Prioritize Absolute Black (#000000) and Pure White (#ffffff) for high-contrast pairs, especially for text and background combinations.
- Use VSCO Gothic with negative letter-spacing for headlines (e.g., -0.05em at large sizes) to create a distinct, modern feel.
- Apply 999px border-radius for all primary and secondary buttons, signifying interactive elements.
- Employ Amber Glow (#f1a900) as the exclusive accent color for primary calls-to-action and badges.
- Maintain a tight vertical rhythm using base units of 4px, especially for margin-bottom and padding in blocks and text.
- Utilize Fog Gray (#f2f2f2) to subtly differentiate background sections without introducing strong chromatic shifts.
### Don't
- Avoid using multiple accent colors; Amber Glow (#f1a900) and Sunshine Yellow (#ffbc3c) serve as the only chromatic highlights.
- Do not introduce soft shadows or gradients; the design relies on stark contrast and flat surfaces for depth.
- Omit rounded corners for cards and main content blocks; these should remain sharp (0px radius) to maintain the geometric aesthetic.
- Do not deviate from VSCO Gothic; it is integral to the brand's typographic identity.
- Avoid excessive spacing; elements are presented compactly to maintain information density.
- Do not use subtle gray for actionable elements; interactivity should be clearly indicated by Absolute Black, Pure White, or Amber Glow.
## Imagery
Imagery on this site is dominated by high-quality photography, often depicting people using cameras or artistic, abstract compositions. Images are typically full-bleed in hero sections or contained within fluid, responsive layouts, sometimes with a 4px border-radius. Product screenshots are minimal, focusing on the interface itself. The role of imagery is primarily aspirational and atmospheric, showcasing the potential results of using the product, with a secondary role in explanatory content via illustrative product UI shots. Graphics are largely absent, favoring photography.
## Layout
The page model alternates between full-bleed sections and a max-width contained layout, centered on the page. The hero features a full-bleed background photograph with a prominent, centered headline and subtext over solid white. Subsequent sections often use alternating white and Fog Gray (#f2f2f2) backgrounds with consistent vertical spacing. Content is primarily arranged in two-column layouts featuring text and imagery, or three-column card grids for features. The navigation is a sticky top bar with clearly delineated links and call-to-action buttons. The overall density is compact, presenting information efficiently with minimal whitespace between elements.
## Agent Prompt Guide
### Quick Color Reference
Text: #000000
Background: #ffffff
CTA: #f1a900
Border: #d9d9d9
Accent: #f1a900
### Example Component Prompts
1. **Create a Hero Section**: Background photo. Centered headline 'WHERE PHOTOGRAPHERS TURN PRO' (VSCO Gothic, 98px, 0.93 lh, -0.05em ls, #000000). Below, body text 'Capture and edit photos with professional apps...' (VSCO Gothic, 15px, 1.3 lh, #000000). Two buttons below that: 'TRY VSCO FOR FREE' (black background #000000, white text #ffffff, 999px radius, 2px vertical padding, 16px horizontal padding) and 'EXPLORE PRO' (Amber Glow background #f1a900, black text #000000, 999px radius, 2px vertical padding, 28px horizontal padding).
2. **Generate a Feature Card**: Background Pure White (#ffffff), 0px radius, 30px vertical and 28px horizontal padding. Headline 'PHOTO FILTERS' (VSCO Gothic, 24px, 1.25 lh, #000000). Below, a small image with 4px radius. At the bottom, a link 'Learn More' (VSCO Gothic, 15px, 1.3 lh, #000000) with an arrow icon.
3. **Build a Navigation Bar**: Background Pure White (#ffffff). Links 'Products', 'Solutions', etc. (VSCO Gothic, 15px, 1.3 lh, #000000, 8px vertical padding, 0px horizontal padding, 1px solid black border-bottom). One ghost button 'LOG IN' (transparent background, #000000 text, 1px #000000 border, 999px radius, 2px vertical padding, 28px horizontal padding) and one primary CTA button 'TRY FOR FREE' (black background #000000, white text #ffffff, 999px radius, 2px vertical padding, 16px horizontal padding).
4. **Create a Section Divider**: Background Fog Gray (#f2f2f2), minimum height 100px. Headline 'EVERYTHING A PHOTOGRAPHER NEEDS' (VSCO Gothic, 54px, 1.14 lh, #000000, -0.05em ls) centered within this section. Below the headline, a row of underlined navigation links, 'WHAT’S NEW', 'CREATE', 'CONNECT', 'WORK', all with black text, 8px vertical padding, and a 1px solid black border-bottom, using VSCO Gothic 15px, 1.3 lh.
## Similar Brands
- **Adobe Creative Cloud** — Similar target audience (creatives), uses a clean, utilitarian aesthetic with high-contrast text and limited accent colors for professional tools.
- **Figma** — Employs a stark, functional interface with strong typography and a measured use of brand accent colors against a mostly monochromatic background.
- **Frame.io** — Features a direct, high-contrast visual style with a focus on product visuals and a precise typographic hierarchy for professional users.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-absolute-black: #000000;
--color-pure-white: #ffffff;
--color-fog-gray: #f2f2f2;
--color-steel-gray: #d9d9d9;
--color-medium-gray: #737373;
--color-amber-glow: #f1a900;
--color-sunshine-yellow: #ffbc3c;
/* Typography — Font Families */
--font-vsco-gothic: 'VSCO Gothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.5;
--text-body: 15px;
--leading-body: 1.3;
--text-subheading: 24px;
--leading-subheading: 1.25;
--text-heading: 36px;
--leading-heading: 1.25;
--text-heading-lg: 54px;
--leading-heading-lg: 1.14;
--text-display: 98px;
--leading-display: 0.93;
--tracking-display: -0.98px;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-100: 100px;
/* Layout */
--section-gap: 100px;
--card-padding: 28-30px;
--element-gap: 4-20px;
/* Border Radius */
--radius-md: 4px;
--radius-full: 999px;
/* Named Radii */
--radius-cards: 0px;
--radius-badges: 4px;
--radius-images: 4px;
--radius-buttons: 999px;
--radius-navitems: 4px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-absolute-black: #000000;
--color-pure-white: #ffffff;
--color-fog-gray: #f2f2f2;
--color-steel-gray: #d9d9d9;
--color-medium-gray: #737373;
--color-amber-glow: #f1a900;
--color-sunshine-yellow: #ffbc3c;
/* Typography */
--font-vsco-gothic: 'VSCO Gothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 10px;
--leading-caption: 1.5;
--text-body: 15px;
--leading-body: 1.3;
--text-subheading: 24px;
--leading-subheading: 1.25;
--text-heading: 36px;
--leading-heading: 1.25;
--text-heading-lg: 54px;
--leading-heading-lg: 1.14;
--text-display: 98px;
--leading-display: 0.93;
--tracking-display: -0.98px;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-100: 100px;
/* Border Radius */
--radius-md: 4px;
--radius-full: 999px;
}
```
High-contrast utility with violet…
Engineering blueprint on stark…

Crisp paper on a clean desk. A…
High-contrast precision blueprint.

Architectural blueprint on white…

Crisp canvas, gradient fireworks.…
digital workbench, blueprint sketch

Architectural Digital Canvas. A…
Warm, Crisp Canvas

High-contrast geometric clarity

Strategic blueprint on polished…
Expansive sky, clean canvas.

organized desktop, clean and bright

Precise Canvas, Vivid Product. A…
gallery wall contrast
Vibrant digital gallery. Each…

High-contrast research tool; like…
Black & White Blueprint: A stark,…
Digital Blueprint on Whiteboard.…
Architectural blueprint on creamy…