Amber
#f1a900Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
VSCO®
vsco.coWebsite preview
The design language
VSCO's visual system reads as a monochrome photography gallery: a near-pure black-and-white canvas where a single warm amber accent punctuates action. Display type is narrow, geometric, and enormous — hero headlines push 89-98px, commanding attention through scale and tight tracking rather than through color or ornament. The palette stays disciplined: white sections frame black product bands, and full-bleed photography carries emotional weight that decoration never tries to. Buttons are pill-shaped and unflinching — black fills for default actions, amber for the single moment of warmth. The design is deliberately flat: no shadows, no gradients, no skeuomorphic depth. Elevation comes from surface contrast (white → black bands) and image bleed, not from layered depth effects.
Color palette
brand
Goldenrod
#ffbc3cLighter amber variant for hover states, secondary accent surfaces — same hue family, one step lighter
neutral
Photo Black
#000000Body text, filled buttons, dark section backgrounds, nav text, borders, icon strokes — the dominant structural color across all surfaces
Paper White
#ffffffPage canvas, hero background, footer background, text on dark surfaces, nav fill — the primary light surface
Fog Gray
#f2f2f2Subtle alternate section backgrounds, hairline washes — barely-there surface differentiation
Graphite
#737373Secondary text, footer link text, muted labels — the first step down from body black
Ash
#b8b8b8Tertiary text, lighter secondary labels, disabled-adjacent text
Silver
#d9d9d9Borders on ghost/outline buttons, subtle dividers, placeholder text
Steel
#999999Mid-gray auxiliary text and borders
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-xl
98px · 500 · 0.93 · -4.9px trackingThe quick brown fox jumps
display
89px · 500 · 0.95 · -4.45px trackingThe quick brown fox jumps
heading-lg
54px · 500 · 1.08 · -2.7px trackingThe quick brown fox jumps
heading
36px · 400 · 1.14 · -1.8px trackingThe quick brown fox jumps
heading-sm
29px · 500 · 1.2 · -1.45px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.29 · -1.2px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
text-15
15px · 400 · 1.24The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
VSCO Gothic
- Weights
- 400, 500, 600
- Sizes
- 10, 11, 13, 15, 16, 24, 29, 36, 54, 89, 98
- Line height
- 0.88-1.50
- Letter spacing
- Tight -0.05em on display sizes (54px+), 0 on body, wide 0.08-0.10em on nav/eyebrow text
- Fallback
- Oswald (closest free match for the narrow geometric forms) or Bebas Neue for display-only; pair with Inter for body if splitting families
- Features
- "clig" 0, "liga" 0
Single custom family used at every size — nav items at 13px tracked to 0.08-0.10em, body at 15-16px, product card titles at 24px, section headings at 36-54px, and hero display at 89-98px with -0.05em tracking. The narrow geometric letterforms with ligatures disabled give every text element a distinctive editorial-gallery feel, even at body sizes.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 48px
- Card padding
- 20px
- Element gap
- 8px
Border radius
nav
4pxtags
999pxcards
4pxbadges
4pxbuttons
999pxSpacing scale
2px3px4px6px8px10px12px16px20px24px28px30px32px36px40px48px50px60px90px100px150pxGuidelines
Do
- Use 999px border-radius for all buttons, tags, and pill-shaped interactive elements
- Set display headlines at 89-98px with -0.05em letter-spacing and line-height 0.93-0.95
- Track nav items and uppercase labels at 0.08-0.10em letter-spacing
- Use #000000 as the default filled button background and #f1a900 only for accent actions — never more than one amber button per viewport
- Set font-feature-settings to 'clig' 0, 'liga' 0 on VSCO Gothic to preserve the distinctive un-ligated letterforms
- Alternate white (#ffffff) and black (#000000) section backgrounds to create rhythm — never use intermediate grays for full sections
- Let photography bleed to viewport edges with no border-radius or overlay frames
Don’t
- Never add drop shadows, glows, or blur to cards, buttons, or any UI element — the system is flat by design
- Never use gradients — the palette is strictly solid colors
- Never introduce chromatic colors beyond the amber accent — no blues, greens, purples, or secondary hues
- Never use border-radius values other than 4px (for cards/badges/nav) or 999px (for buttons/tags)
- Never set display type below 54px for section headings or below 89px for hero headlines — the scale IS the identity
- Never use centered text alignment for headlines — always left-align
- Never use more than one amber button on the same screen — the accent is a one-per-viewport moment
Components
Filled Black Button
Default action — login, sign-up, primary navigation999px pill radius, #000000 background, #ffffff text, VSCO Gothic 13px weight 500, 1.08em letter-spacing, 6px 20px padding. The universal action button. No shadow, no border, no hover gradient — just inverted contrast.
Filled Amber Button
Accent action — explore, learn more, secondary CTA999px pill radius, #f1a900 background, #000000 text, VSCO Gothic 13px weight 500, 1.08em letter-spacing, 6px 20px padding. The single warm element on the page — used sparingly, one per viewport maximum.
Ghost Outline Button
Secondary action on dark surfaces — play video, explore stories999px pill radius, transparent background, 1px #d9d9d9 border, #ffffff text, VSCO Gothic 13px weight 500, 1.08em letter-spacing, 6px 20px padding. Designed for overlay on photography or dark sections.
Top Navigation Bar
Primary site navigation#ffffff background, 60-72px height, VSCO circular logo (black) on left, nav items in VSCO Gothic 13px weight 500 uppercase, 0.10em letter-spacing, #000000 color. Nav items separated by 24-28px gap. Right side: 'LOG IN' text link (13px, #000) and 'TRY FOR FREE' filled black pill button. No drop shadow, no border-bottom.
Product Card
Product feature showcase — photo filters, editor, capture, canvasDark card with #000000 background, 4px border radius, product image filling top ~75% of card height, label bar at bottom with 16px padding. Label in VSCO Gothic 13px weight 500, 0.08em letter-spacing, #ffffff color, uppercase, with a small arrow indicator (↗). Cards sit directly on a #000000 section background — the card edge is defined by the image boundary, not a visible card border.
Tab Bar
Section-level content switcher — What's New, Create, Connect, WorkHorizontal text tabs on a #000000 background. Each tab: VSCO Gothic 13px weight 500, 0.10em letter-spacing, uppercase. Active tab: #ffffff with a hairline underline. Inactive tabs: #737373 (Graphite). No background fill on tabs, no pill containers — just text with an underline indicator.
Hero Headline
Above-the-fold primary messageVSCO Gothic weight 600, 89-98px, #000000 on white sections / #ffffff on dark sections. Letter-spacing -0.05em. Line-height 0.93-0.95 (tight, almost touching). Always left-aligned, never centered. Occupies 2-3 lines at maximum.
Section Heading
Mid-page section titlesVSCO Gothic weight 600, 36-54px, uppercase, #ffffff on dark sections or #000000 on white. Letter-spacing -0.05em. Single line, left-aligned. Sits with generous space above (40-48px) and tight space below (16-20px).
Full-Bleed Photography Band
Atmospheric photography — product lifestyle, community imageryEdge-to-edge image spanning 100% viewport width, variable height (40-100vh). No border radius, no overlay frame. Text overlays use VSCO Gothic weight 500-600 in white with a 0-2px text-shadow for legibility. Photography is warm-toned, documentary/editorial style, often golden-hour or natural light.
Badge / New Tag
Product feature indicator — 'NEW' on AI Lab, Galleries4px border radius, #f1a900 background, #000000 text, VSCO Gothic 10-11px weight 500, 0.08em letter-spacing, uppercase. 2px vertical padding, 4-6px horizontal padding. Small, understated, sits adjacent to product names.
Mega Footer
Site-wide link directory#ffffff background, 4-column grid (Products, Solutions, Resources, Company) on white. Column headers in VSCO Gothic 13px weight 600, 0.10em letter-spacing, uppercase, #000000. Links in 15px weight 400, #737373. 28-30px gap between columns. 20-24px gap between links. Logo + two CTAs ('TRY FOR FREE' outlined, 'DOWNLOAD NOW' filled black) above the link grid. Thin bottom bar with language selector and legal links in #737373.
Ghost Footer Button
Secondary footer action — 'TRY FOR FREE' in footer999px pill radius, transparent background, 1px #000000 border, #000000 text, VSCO Gothic 13px weight 500, 0.08em letter-spacing, uppercase, 6px 20px padding. Pairs with the filled black button as a text/link-equivalent alternative.
Surfaces & elevation
Level 0
Canvas
#ffffffPrimary page background — hero, footer, and light sections
Level 1
Alternate Light
#f2f2f2Subtle band differentiation within light areas — used sparingly
Level 2
Inverted Surface
#000000Dark sections, product card backgrounds, button fills — contrast surface for product showcases
Flat by conviction. No drop shadows on cards, buttons, or floating elements anywhere in the system. Elevation is achieved entirely through surface inversion (white → black) and full-bleed image bleed, never through shadow depth or blur. The absence of shadows is deliberate: it keeps the photography sharp and unmediated.
Layout & imagery
Layout
Max-width 1280px centered for content blocks, with full-bleed photography bands breaking out to viewport edges. Hero is a white canvas with a massive left-aligned headline (89-98px) occupying the upper third, followed by body text and two pill buttons, then a full-bleed photograph. The page rhythm alternates: white hero → full-bleed photo → black section with 5-column product card grid → white mega footer. Navigation is a top bar (not sticky). The black product section is the visual anchor — it's the only large dark surface and it contains the entire product catalog as a 5-column grid. Section gaps are compact (40-48px) despite the large type, creating a tight editorial density rather than a spacious SaaS feel.
Imagery
Photography is the primary visual content, not decoration. Images are full-bleed, edge-to-edge, with no rounded corners or frames. The style is warm-toned, documentary/editorial — natural light, golden-hour palettes, candid human subjects, and unposed moments. Product screenshots appear as card thumbnails within a dark product grid. No illustrations, no abstract graphics, no 3D renders. The photography is always the hero; UI chrome stays out of its way. Color treatment is natural — no duotones, no filters applied to the imagery itself. Icon style is minimal: the VSCO circular logo mark, small arrow indicators (↗) on cards, and no icon system elsewhere.
Design notes
Agent Guide
## Quick Color Reference - Text: #000000 (primary), #737373 (secondary), #b8b8b8 (tertiary) - Background: #ffffff (light surfaces), #000000 (dark surfaces) - Border: #d9d9d9 (ghost buttons), #000000 (dividers on light) - Accent: #f1a900 (amber — badge fills, accent actions) - Filled button: #000000 background, #ffffff text - Accent button: #f1a900 background, #000000 text - primary action: no distinct CTA color ## Example Component Prompts 1. **Filled black button:** Create a pill button with 999px border-radius, #000000 background, 6px 20px padding. Label in VSCO Gothic 13px weight 500, 0.08em letter-spacing, uppercase, #ffffff color. No shadow, no border. 2. **Filled accent button:** Create a pill button with 999px border-radius, #f1a900 background, 6px 20px padding. Label in VSCO Gothic 13px weight 500, 0.08em letter-spacing, uppercase, #000000 color. Use sparingly — one per viewport. 3. **Product card:** Create a card with 4px border-radius, #000000 background. Product image fills the top 75% of the card edge-to-edge. Bottom 25% has 16px padding with label in VSCO Gothic 13px weight 500, 0.08em letter-spacing, uppercase, #ffffff, followed by a small ↗ arrow. 4. **Hero headline:** Set headline in VSCO Gothic weight 600, 89px, #000000, letter-spacing -4.45px, line-height 0.95. Left-aligned, max-width 900px, two lines. Below: body text at 16px, #000000. 5. **Tab bar:** Create horizontal text tabs on #000000 background. Each tab: VSCO Gothic 13px weight 500, 0.10em letter-spacing, uppercase. Active tab: #ffffff with 1px underline. Inactive: #737373. 24px gap between tabs.
Similar brands
Squarespace
Same monochrome-first palette, oversized display headlines, pill-shaped buttons, and full-bleed photography as the primary content type
Behance
Dark product showcase sections with image-driven card grids, photography-first content, and the same editorial creative-tool energy
Format
Photographer-focused platform with a similar black-and-white gallery aesthetic, large type, and minimal decorative chrome
Polaroid Originals
Photography brand with the same warm-amber accent against monochrome surfaces and a curatorial, gallery-style presentation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
