At a glance
Vsco, in one page
VSCO's iOS app is a darkroom, not an app. The entire editing experience lives on a pure-black canvas (#000000 — true black, not a charcoal) because VSCO's core belief is that the photograph is the only thing that should carry color. Open an image into the editor and you see exactly three things: the photo (full-bleed, centered, breathing with generous black margin), a hairline-thin adjustment slider, and a horizontally-scrolling carousel of film-emulation presets at the bottom. There are no cards, no shadows, no rounded panels, no tint. The chrome is a monochrome white-on-black skin so quiet that the eye never leaves the image.
The signature interface moment is the filter/preset carousel — a row of 56pt square thumbnails, each a tiny live preview of the photo under that film recipe (A6, C1, M5, AV4, KP9 — VSCO's famously cryptic two-character preset codes), with the active preset marked by a 2px solid-white ring (never a colored highlight). Tapping a preset cross-fades the photo into the graded look in ~250ms. The second signature is the adjust tool tray — a row of uppercase, wide-tracked tool labels (EXPOSURE, CONTRAST, SATURATION, GRAIN, SHARPEN, HSL…) that swap the carousel for a single bipolar hairline slider: a 1px track on #3A3A3A, a white fill from the zero-point, and an 18pt solid-white knob. The numeric value (+2.4, −1.8) sits above the slider in white. This slider is the most VSCO thing in the product — it is almost invisible, and that is the point.
The color system is radically restrained: black, white, and a 3-step gray ramp for dividers, tracks, and secondary text. There is no brand accent color — no "Spotify Green", no "Airbnb Coral". Selection, focus, and active states are all communicated through pure white (a ring, a fill, a label going from #B3B3B3 to #FFFFFF). The only color that ever appears in the UI is incidental: the photograph itself, and the film-tinted preset thumbnails (warm ambers #C8A86B, cool steel #7E8FA1) which are previews of *content*, not chrome.
Typography is Inter (VSCO's brand face is the proprietary "VSCO Gothic"; Inter is the closest free Google substitute — a neutral grotesque). The signature typographic move is uppercase labels with very wide letter-spacing (+1.6 for tool labels, +1.0 for preset tags) — it reads like a film-stock data-back imprint or a darkroom enlarger dial. Editorial titles (the Discover and Studio screens) use sentence-case Inter at 24–32pt, weights 600–700, but the *editing chrome* is exclusively uppercase tracked caps. The type system is the only expressive flourish in an otherwise invisible UI.
Key Characteristics:
- Pure black canvas (
#000000) — the editor is dark-native, there is NO light editing theme - Monochrome UI — white, three grays, zero accent color; the photo is the only color
- Hairline bipolar sliders — 1px track
#3A3A3A, white fill from zero, 18pt white knob - Film-preset carousel — 56pt square live-preview thumbnails, 2px white ring on active
- Adjust tool tray — uppercase wide-tracked labels swap to the single slider
- Selection = white only — a 2px ring or a fill change, never a tint
- Uppercase wide-tracked Inter labels (
+1.6tracking) — film-stock imprint feel - No chrome — no cards, no shadows, no borders on the editing surface
- Studio = full-bleed photo grid — a tight gapless monochrome thumbnail grid
- Discover = editorial sentence-case feed, the only "designed" screen
- 2px corner radius everywhere — squares, not pills; film frames, not bubbles
Do's and don'ts
Do
- Use pure black (
#000000) for the editor — true black, dark-native, no light editing theme - Keep the UI monochrome — white + three grays; the photograph is the only color
- Make sliders 1px hairlines on
#3A3A3Awith a solid white 18pt knob - Communicate selection with a 2px white ring or a fill change — never a tint
- Set tool labels and preset codes in UPPERCASE Inter with wide tracking (
+1.6/+1.0) - Give the photo maximum black breathing room — never clip it with chrome
- Use 2pt corner radius as the default (film-frame square), 0pt for the Studio grid
- Render preset tiles as live previews of the actual photo under that grade
- Keep the live value text white and the label gray until active
- Make the Studio grid gapless and dense — a contact sheet of negatives
- Use the slider knob's
0 1px 4pxshadow — the only content shadow in the app
Don't
- Don't introduce a brand accent color — VSCO has no "Spotify Green"; state is white
- Don't use a charcoal "dark mode" (
#191919etc.) for the editor — it is true#000000 - Don't use rounded pills for buttons — buttons are 2pt-radius rectangles
- Don't add cards, panels, borders, or shadows to the editing surface — everything floats on black
- Don't tint sliders, knobs, or rings — they are white, always
- Don't sentence-case tool labels or preset codes — they are UPPERCASE wide-tracked
- Don't put gaps or rounding in the Studio grid — it is a gapless 1px-gutter contact sheet
- Don't animate aggressively — motion is a quiet 180–300ms cross-fade vocabulary
- Don't show a colored "active" highlight on presets — it's a 2px white ring only
- Don't crowd the photo — the black margin is a designed element, protect it
- Don't use color anywhere in chrome except the destructive red (
#E5484D) in delete sheets
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Vsco design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- VSCO White: #ffffff
- VSCO White Pressed: #dbdbdb
- VSCO Black: #000000
- Surface 1: #0e0e0e
- Surface 2: #1a1a1a
- Surface 3: #242424
- Divider: #2a2a2a
- Slider Track: #3a3a3a
- Text Primary Dark: #ffffff
- Text Secondary Dark: #b3b3b3
Type:
- families: VSCO Gothic, Brand Face, Inter, Recommended Substitute
- scale: 10, 11, 12, 13, 14, 16, 19, 24, 32
- weights: 400, 500, 600, 700
Shape:
- radius: 2
- elevation: No tint, no gradient, no shadow on the track — just two hairlines | Use the slider knob's `0 1px 4px` shadow — the only content shadow in the app
Spacing: 13, 14
Rules:
- Use pure black (`#000000`) for the editor — true black, dark-native, no light editing theme
- Keep the UI monochrome — white + three grays; the photograph is the only color
- Make sliders 1px hairlines on `#3A3A3A` with a solid white 18pt knob
- Communicate selection with a 2px white ring or a fill change — never a tint
- Set tool labels and preset codes in UPPERCASE Inter with wide tracking (`+1.6` / `+1.0`)
- Give the photo maximum black breathing room — never clip it with chrome
Avoid:
- Don't introduce a brand accent color — VSCO has no "Spotify Green"; state is white
- Don't use a charcoal "dark mode" (`#191919` etc.) for the editor — it is true `#000000`
- Don't use rounded pills for buttons — buttons are 2pt-radius rectangles
- Don't add cards, panels, borders, or shadows to the editing surface — everything floats on black
- Don't tint sliders, knobs, or rings — they are white, always
- Don't sentence-case tool labels or preset codes — they are UPPERCASE wide-tracked
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- VSCO White (
#FFFFFF): The single interactive color — primary buttons, active labels, slider fill + knob, selection ring, "Next" action. - VSCO White Pressed (
#DBDBDB): Pressed state on the white primary button. - VSCO Black (
#000000): The canvas and the text-on-white color. Not a surface — the absence of one.
There is intentionally no accent / brand-tint color. VSCO communicates state with white alone.
Canvas & Surfaces (Dark — the only mode for the editor)
- VSCO Black (
#000000): Primary canvas — the editor stage, the photo margin, the tab bar. - Surface 1 (
#0E0E0E): Feed / Studio / Discover screen background — a near-black lift. - Surface 2 (
#1A1A1A): Sheets, menus, settings rows, contextual panels. - Surface 3 (
#242424): Pressed rows, segmented-control selected fill, chips. - Divider (
#2A2A2A): Hairline separators between tool tray and stage, list rows. - Slider Track (
#3A3A3A): The unfilled portion of every adjustment slider.
Light Mode (Studio / Discover browsing only)
VSCO offers a light theme for the *browsing* surfaces only (Studio grid, Discover feed, profile) — the editor never goes light. It is rarely used and deliberately plain.
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #000000 |
| Surface 1 | #F2F2F2 | #0E0E0E |
| Surface 2 | #E8E8E8 | #1A1A1A |
| Divider | #DCDCDC | #2A2A2A |
| Text Primary | #000000 | #FFFFFF |
| Text Secondary | #767676 | #B3B3B3 |
Text
- Text Primary Dark (
#FFFFFF): Active labels, values, titles, body on black. - Text Secondary Dark (
#B3B3B3): Inactive tool labels, metadata, captions. - Text Tertiary Dark (
#767676): Disabled, EXIF detail, inactive tab icons. - Text Primary Light (
#000000): Body on the light browsing surfaces. - Text Secondary Light (
#767676): Metadata on light.
Incidental Film Tones (content previews — not chrome)
These appear only inside preset thumbnails as a *preview of the graded photo*. Never use them as UI fills.
| Role | Color | Where |
|---|---|---|
| Film Warm (amber) | #C8A86B | Warm film presets (C-series, KP) thumbnail tint |
| Film Cool (steel) | #7E8FA1 | Cool film presets (M-series, AV) thumbnail tint |
| Film Neutral | #9A9388 | Neutral/desaturated preset thumbnail tint |
| Film Shadow | #3F382C | Shadow region of a warm-graded preview |
Semantic
- Destructive Red (
#E5484D): Delete photo confirmation, "Discard edits" — the ONLY non-monochrome UI color, used sparingly in destructive sheets only. - Success (
#FFFFFF): "Saved to Camera Roll" toast — communicated in white, not green. - Disabled: text drops to
#767676, controls to 38% opacity.
Type scaleRead the full spec
Font Family
- Brand Face:
VSCO Gothic(proprietary, a neutral humanist grotesque) — not publicly licensed. - Recommended Substitute:
Inter(by Rasmus Andersson, SIL OFL) — neutral grotesque, excellent at small UI sizes and wide tracking. - Editorial Alternate (Discover headlines, optional):
Interat 700 — VSCO occasionally sets editorial titles in a tighter display cut; Inter Bold covers it. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Monospace (EXIF / values, optional):
SF Mono— used only for technical capture metadata when shown.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Case | Notes |
|---|---|---|---|---|---|---|---|
| Display | Inter | 32pt | 700 | 1.15 | -0.4pt | Sentence | "Studio", profile name hero |
| Title | Inter | 24pt | 600 | 1.2 | -0.2pt | Sentence | Discover section, screen title |
| Section | Inter | 19pt | 600 | 1.3 | -0.1pt | Sentence | "Recipes", "Recents" |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Sentence | Editorial body, descriptions |
| Label | Inter | 14pt | 500 | 1.4 | 0pt | Sentence | Row labels, "Edited 2h ago" |
| Caption | Inter | 13pt | 400 | 1.4 | 0pt | Sentence | EXIF, file metadata |
| Value (live) | Inter | 14pt | 600 | 1.0 | 0pt | Numeric | +2.4 slider value, white |
| Tool Label | Inter | 12pt | 600 | 1.0 | +1.6pt | UPPERCASE | EXPOSURE, CONTRAST, GRAIN |
| Preset Tag | Inter | 11pt | 600 | 1.0 | +1.0pt | UPPERCASE | A6, C1, M5 preset codes |
| Nav Action | Inter | 13pt | 600 | 1.0 | +1.4pt | UPPERCASE | NEXT, SAVE, CANCEL |
| Top Title | Inter | 13pt | 500 | 1.0 | +1.4pt | UPPERCASE | EDIT (editor title bar) |
| Tab Label | Inter | 10pt | 600 | 1.0 | +0.6pt | UPPERCASE | Bottom tab (when shown) |
| Button | Inter | 12pt | 600 | 1.0 | +1.4pt | UPPERCASE | Primary / outline buttons |
Principles
- Two registers only: sentence-case editorial (titles/body, weight 400–700) for *content* screens; UPPERCASE wide-tracked (weight 600) for *editor chrome*. Never mix within one zone.
- Wide tracking is the signature: tool labels at
+1.6, preset codes at+1.0, nav actions at+1.4— this film-data-back imprint is VSCO's strongest type identity. - Weight stays at 400 / 500 / 600 / 700: no thin, no black. Editorial body is 400; all chrome is 600.
- Values are white, labels are gray: the live numeric value (
+2.4) is always#FFFFFF; its label is#B3B3B3until active. - Dynamic Type on content, fixed on chrome: editorial titles/body scale; tool labels, preset codes, slider values, tab labels stay fixed (layout-critical, single-line).
Components and layoutRead the full spec
Buttons
Primary Button ("Next" / "Save Recipe" / "Post")
- Shape: Rectangle, 2pt corner radius (film-frame square, NOT pill)
- Background:
#FFFFFF/ text#000000 - Padding: 14pt vertical, 28pt horizontal
- Font: Inter 12pt weight 600, UPPERCASE,
+1.4tracking - Pressed: background
#DBDBDB+ scale 0.98 - Often rendered as a top-bar text action ("NEXT") rather than a filled button — same type spec, no fill
Outline / Secondary Button ("Save Recipe", "Edit")
- Background: transparent
- Text:
#FFFFFF - Border: 1pt
#FFFFFF - Padding: 13pt vertical, 26pt horizontal
- Corner radius: 2pt
- Pressed: background
#FFFFFF12% overlay
Ghost / Cancel Button
- Background: transparent
- Text:
#B3B3B3(secondary) - No border, no fill
- Padding: 13pt vertical, 16pt horizontal
- Pressed: text →
#FFFFFF
Text Action ("Reset all", "Show original")
- Font: Inter 12pt weight 600, UPPERCASE,
+1.4tracking - Color:
#FFFFFF - No underline, no fill
- Pressed: 60% opacity
Icon Button (tool-tray, top bar × / ✓)
- Glyph: 22pt stroke icon,
stroke-width1.6 - Hit area: 44pt
- Default:
#B3B3B3; active:#FFFFFF - No background, no ring — color change only
Adjust Slider (the core atom)
The single most important component. A bipolar hairline.
- Track: full-width, 1pt tall,
#3A3A3A - Fill: from the zero-point (often center) to the knob, 1pt tall,
#FFFFFF - Knob: 18pt circle, solid
#FFFFFF, shadowrgba(0,0,0,0.6) 0 1px 4px, hit area 44pt - Label row (above slider): tool name UPPERCASE 12pt
+1.6#B3B3B3(left), live value 14pt w600#FFFFFF(right) - Zero detent: a subtle haptic + the fill collapsing to 0 when the knob crosses the neutral value
- Double-tap: resets to default (value animates back, soft haptic)
- No tint, no gradient, no shadow on the track — just two hairlines
Film-Preset Carousel (the signature)
A horizontal scroll of live-preview tiles.
- Tile: 56pt square, 2pt corner radius, the actual photo rendered under that preset's grade
- Spacing: 14pt between tiles
- Label: preset code below tile, UPPERCASE 11pt w600
+1.0#B3B3B3 - Active state: 2pt solid
#FFFFFFring around the tile + label →#FFFFFF. NEVER a colored highlight. - Strength sub-slider: tapping an already-active preset reveals a hairline slider (same spec as Adjust) to dial preset intensity 0–12
- Scroll: free, momentum, no snapping; ~80pt left/right peek
Tool Tray
The mode switcher under the stage.
- Row: horizontal scroll, 84pt tall,
border-top0.5pt#2A2A2A - Tool: 22pt stroke glyph + UPPERCASE 12pt
+1.6label, stacked, 8pt gap - Default:
#B3B3B3; active:#FFFFFF(glyph + label both) - Spacing: 30pt between tools
- Selecting a tool replaces the preset carousel with that tool's slider (or sub-UI: Crop grid, HSL wheel)
Navigation
Editor Top Bar
- Height: 52pt + safe area
- Leading:
×close glyph, 22pt, weight 300,#FFFFFF - Center: screen title "EDIT" — UPPERCASE 13pt w500
+1.4#B3B3B3 - Trailing: "NEXT" action — UPPERCASE 13pt w600
+1.4#FFFFFF - Background:
#000000, no border
Bottom Tab Bar (Studio / Feed / Discover / Profile)
- Height: 48pt + safe area
- Background:
#000000,border-top0.5pt#2A2A2A - 4 tabs: Studio (grid), Feed (up-arrow / for-you), Discover (camera/explore), Profile (avatar)
- Icon: 23pt stroke; active = filled
#FFFFFF, inactive = stroke#767676 - Labels usually hidden (icon-only); if shown, UPPERCASE 10pt w600
+0.6 - No tint pill — active is white fill only
Studio Top Bar
- Height: 44pt + safe area
- Leading: title "Studio" Inter 24pt w600 sentence-case
#FFFFFF - Trailing: select-mode, import, settings — 22pt stroke icons
#FFFFFF
Input Fields
Search (Discover / People)
- Height: 40pt
- Background:
#1A1A1A - Border: none
- Corner radius: 2pt
- Leading icon: magnifier 16pt
#767676 - Placeholder: "Search" Inter 14pt w400
#767676 - Text:
#FFFFFF - Focus: 1pt
#FFFFFFbottom hairline (no full border, no glow)
Caption / Bio Text Area
- Background: transparent on
#000000 - Text: Inter 16pt w400
#FFFFFF - Placeholder:
#767676 - Character count: bottom-right, Inter 12pt
#767676 - No box, no border — bare text on black
Distinctive Components
Hairline Bipolar Slider
- See Adjust Slider above — the defining VSCO control. Used for every numeric adjustment and for preset strength.
Film-Preset Tile
- A live-rendered photo preview, 56pt², 2pt radius, 2px white ring when active. The carousel of these IS VSCO's identity.
Recipe Pill
- A saved set of adjustments. Shown as a 2pt-radius
#1A1A1Atile with a tiny preview swatch + recipe number. Tap to apply all, long-press to manage.
HSL Color Wheel
- A circular hue selector with 8 color stops; selecting a hue reveals 3 hairline sliders (Hue / Saturation / Lightness). Wheel is the only "round" component; the stops are the only saturated UI color, and only because they ARE color-pickers.
Crop / Straighten Grid
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Studio grid 3-up; tool tray scrolls; photo letterboxed tighter |
| iPhone 13/14/15 | 390pt | Standard layout; 4-up Studio grid |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the editor top bar |
| iPhone 15/16 Pro Max | 430pt | Larger photo stage; 4-up grid with slightly bigger tiles |
| iPad (portrait) | 768pt | Photo stage centered max ~760pt; Studio grid 5-up; tray pinned bottom |
| iPad (landscape) | 1024pt+ | Photo centered max ~900pt; tray + carousel as a bottom rail; Studio 6-up |
Dynamic Type
- Editorial titles, section headers, body, captions: full scale
- Tool labels, preset codes, slider values, nav actions, tab labels: FIXED (single-line, layout-critical)
- Slider value never wraps — it is a fixed-width numeric
Orientation
- Editor supports rotation; photo re-letterboxes to fit, tray + carousel stay bottom-pinned
- Studio grid reflows column count by width
- Crop/straighten tool fully orientation-aware
Touch Targets
- Slider knob: 18pt glyph, 44pt hit
- Tool-tray item: 22pt glyph, 44pt hit
- Preset tile: 56pt (tap target is the full tile)
- Tab bar icon: 23pt glyph, 44pt hit
- Top-bar action: 13pt text, 44pt hit
- Studio thumbnail: full tile is the target; multi-select via long-press then tap
Safe Area Handling
- Top: editor top bar respects safe area + Dynamic Island
- Bottom: tool tray + tab bar respect the home indicator
- The photo stage shrinks to fit between safe areas — it is never occluded
- Sides: 20pt photo margin honors the safe area on notched devices
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-vsco {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #df242b;
--link-hover-color: #b51b20;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #e5484d;
--button-text-color: #000000;
--button-hover-bg: #db1f25;
--button-border: none;
--button-border-radius: 2px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-inter);
--heading-font: var(--font-mono);
--card-border-radius: 2px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- raya 95.4%
- happn 82.1%
- onitsukatiger 77.8%
- peloton 77.4%
- shiseido 77.1%
Where this came from
- Source document
ios/design-md/social/vsco/DESIGN.md· 26.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.