Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
PastelMinimalisteClairTexture
Aperçu

VSCO Design Reference

VSCO is a lifestyle and photographic aesthetic named after the VSCO photo-editing app, launched in 2012, which became famous for its film-emulating presets and minimalist social platform that eschewed public likes and follower counts. The aesthetic rose to mainstream cultural recognition in 2019 with the "VSCO Girl" phenomenon -- a subculture defined by muted film-like photography, beachy minimalist fashion (oversized tees, scrunchies, Hydro Flasks, shell necklaces, Birkenstocks), and an effortlessly casual, eco-conscious identity built around phrases like "and I oop" and "save the turtles." Visually, VSCO is characterized by warm desaturated color grading reminiscent of Kodak Portra and Fuji Superia film stocks, lifted shadows that never reach true black, soft film grain, and a persistent golden-hour warmth that makes everyday moments feel nostalgic and curated. When translated to web and UI design, the aesthetic favors generous whitespace, warm off-white backgrounds, muted earth-tone accents, light-weight typography with relaxed letter-spacing, soft rounded containers, and photography-dominant layouts that prioritize mood and atmosphere over information density.

Visual Characteristics

Core Design Traits

  • Warm desaturated color grading -- colors are pulled back from full saturation and shifted toward warm amber-peach mid-tones, mimicking the faded look of analog film stocks; nothing feels digitally vivid or harsh
  • Lifted shadows and faded blacks -- shadows never reach true black; instead they fade to a milky warm charcoal, creating the signature low-contrast film look that softens the entire tonal range
  • Golden hour warmth -- a persistent amber-to-peach warmth pervades backgrounds, skin tones, and neutral UI surfaces, evoking late-afternoon sunlight and lazy summer days
  • Film grain texture -- subtle noise overlays mimic the organic texture of 35mm or medium-format film, adding tactile analog warmth to digital surfaces
  • Minimalist layout with maximal photography -- the design framework is sparse and airy, using generous whitespace to let large atmospheric photographs serve as the primary visual content
  • Soft, diffused lighting feel -- imagery and UI elements feel naturally lit with no harsh directional shadows; everything appears bathed in even, gentle daylight
  • Rounded, organic UI elements -- buttons, cards, and containers use generous border-radius values and soft warm-tinted shadows, reinforcing the approachable mood
  • Natural and candid composition -- content arrangement feels effortlessly assembled rather than rigidly grid-aligned, as though beautiful things naturally fell into place
  • Eco-conscious visual motifs -- subtle references to nature, sustainability, and beach life through imagery, color choices, and organic textures
  • Low-contrast typography -- text does not aggressively contrast with backgrounds; it sits gently against warm surfaces with comfortable, strain-free readability

Design Principles

  • Photography first -- every layout decision serves the imagery; UI chrome stays invisible and recedes behind the content
  • Warm over cool -- default to amber, sand, and peach tones rather than blue-grey or stark white; even neutrals should lean warm
  • Effortless curation -- the design should feel casually assembled with intention, never looking like it required visible effort
  • Analog authenticity -- favor textures, colors, and treatments that reference physical film and printed materials over sharp digital precision
  • Breathing room -- generous margins, padding, and line-height give every element space to exist calmly; never crowd the layout
  • Quiet confidence -- no loud calls-to-action, no aggressive contrast; the design invites rather than demands attention
  • Imperfection as charm -- slight grain, soft focus, and faded tones are features, not flaws; embrace the beauty of analog imperfection

Color Palette

Swatch Name Hex Role / Usage
Shell White #FFFBF5 Bright highlight surfaces, lightest accent
Warm Sand #F5EDE3 Primary page background, warm off-white base
Linen Cream #FAF3EB Card and panel surfaces, secondary background
Film Fog #D6CEC5 Borders, dividers, subtle UI separators
Golden Hour #E8B87D Primary warm accent, highlight elements, active states
Faded Peach #E6B8A2 Secondary accent, tags, badges, soft fills
Sunset Coral #D4907A Call-to-action buttons, emphasis elements
Dusty Rose #C4A08E Tertiary warm accent, hover states, decorative elements
Sage Mist #A3B5A0 Nature accent, success states, eco-themed elements
Sea Glass #B5C9C3 Cool complement, subtle teal accent for balance
Washed Denim #8FA3B0 Cool contrast accent, link color, interactive highlights
Driftwood #7A6B5D Primary body text, secondary headings
Faded Charcoal #5C534A Heading text, navigation links, labels
Grain Shadow #3E3832 Darkest tone (lifted black), footer backgrounds, emphasis text

CSS Custom Properties

:root {
  /* Backgrounds */
  --vsco-shell: #FFFBF5;
  --vsco-sand: #F5EDE3;
  --vsco-cream: #FAF3EB;
  --vsco-fog: #D6CEC5;

  /* Warm Accents */
  --vsco-golden: #E8B87D;
  --vsco-peach: #E6B8A2;
  --vsco-coral: #D4907A;
  --vsco-dusty-rose: #C4A08E;

  /* Cool Accents */
  --vsco-sage: #A3B5A0;
  --vsco-sea-glass: #B5C9C3;
  --vsco-denim: #8FA3B0;

  /* Text */
  --vsco-driftwood: #7A6B5D;
  --vsco-charcoal: #5C534A;
  --vsco-grain: #3E3832;

  /* Functional Aliases */
  --vsco-bg-primary: var(--vsco-sand);
  --vsco-bg-secondary: var(--vsco-cream);
  --vsco-bg-surface: var(--vsco-shell);
  --vsco-text-primary: var(--vsco-charcoal);
  --vsco-text-body: var(--vsco-driftwood);
  --vsco-text-emphasis: var(--vsco-grain);
  --vsco-accent-primary: var(--vsco-golden);
  --vsco-accent-cta: var(--vsco-coral);
  --vsco-accent-cool: var(--vsco-denim);
  --vsco-border: var(--vsco-fog);
  --vsco-link: var(--vsco-denim);
}

Typography

Font Style Suggested Usage
Josefin Sans Elegant geometric sans, thin strokes Display headings, hero titles, uppercase labels
Nunito Sans Warm humanist sans-serif Body text, descriptions, UI elements
DM Sans Modern geometric sans, open counters Captions, metadata, secondary text
Lora Contemporary serif, brushed curves Editorial body text, pull-quotes, journal entries
Libre Baskerville Classic serif, refined proportions Long-form reading, blog content
Poppins Clean geometric sans-serif, rounded Navigation, buttons, form labels
Cormorant Garamond Light elegant display serif Large hero headlines, editorial display text
Caveat Casual handwritten Annotations, personal notes, decorative accents

Font Pairing Suggestions

Heading Font Body Font Character
Josefin Sans (Light, uppercase) Nunito Sans (Regular) Airy minimalist lifestyle -- the quintessential VSCO pairing
Cormorant Garamond (Light) DM Sans (Regular) Elegant editorial with clean modern readability
Josefin Sans (Light, uppercase) Lora (Regular italic) Refined journal aesthetic, analog warmth
Poppins (Medium) Libre Baskerville (Regular) Modern clean UI with literary warmth
DM Sans (Regular) Lora (Regular) Clean contemporary with editorial serif support

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500&family=Nunito+Sans:wght@300;400;600&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&family=Caveat:wght@400&display=swap');

/* Body text */
body {
  font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--vsco-driftwood);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Headings -- light, airy, uppercase */
h1, h2, h3, h4 {
  font-family: 'Josefin Sans', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsco-charcoal);
  line-height: 1.2;
}

/* Display / Hero text */
.vsco-display {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vsco-grain);
}

/* Editorial / Pull-quote text */
blockquote, .vsco-editorial {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--vsco-driftwood);
  line-height: 1.85;
}

/* Uppercase labels and metadata */
.vsco-label {
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 400;
  color: var(--vsco-dusty-rose);
}

/* Navigation links */
nav a {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsco-driftwood);
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--vsco-coral);
}

/* Handwritten accent */
.vsco-handwritten {
  font-family: 'Caveat', cursive;
  font-size: 1.3em;
  color: var(--vsco-dusty-rose);
}

Layout Principles

  • Photography-dominant composition -- use large image blocks spanning full width or two-thirds of the layout; text occupies the remaining space and always supports the imagery
  • Asymmetric two-column layouts -- offset text and image columns (60/40 or 70/30 splits) for a relaxed editorial feel rather than rigid symmetry
  • Generous vertical rhythm -- use 48-80px spacing between major sections and 24-32px element gaps for a calm, unhurried pace
  • Narrow reading columns -- max content width of 650-800px for text blocks, creating a comfortable magazine-like reading experience
  • Full-bleed hero imagery -- hero sections stretch edge to edge with minimal overlaid text to maximize atmospheric photographic impact
  • Masonry-style photo grids -- stagger image heights and aspect ratios in gallery sections to mimic a curated photo wall or contact sheet
  • Soft section transitions -- sections blend into each other through subtle warm gradient fades rather than hard-edged color breaks
  • Single-column priority -- the default layout is a single centered column; multi-column layouts are used sparingly for photo grids and editorial pairings
  • Pull-quote breakers -- centered italic serif text between sections to create a journal-like cadence and visual breathing room
  • Fluid responsive scaling -- use clamp() for typography and proportional spacing reductions on mobile; maintain the airy, spacious feel at every viewport

CSS / Design Techniques

Film Grain Overlay

/* Subtle analog film grain texture */
.vsco-grain {
  position: relative;
}

.vsco-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

VSCO Image Filter (CSS)

/* Standard VSCO film emulation */
.vsco-filter {
  filter: saturate(0.8) contrast(0.92) brightness(1.04) sepia(0.08);
}

/* Warmer variant -- golden hour emphasis */
.vsco-filter--warm {
  filter: saturate(0.75) contrast(0.9) brightness(1.06) sepia(0.15);
}

/* Faded variant -- stronger lifted-shadow look */
.vsco-filter--fade {
  filter: saturate(0.7) contrast(0.85) brightness(1.08);
}

/* Cool variant -- washed denim / overcast tone */
.vsco-filter--cool {
  filter: saturate(0.8) contrast(0.9) brightness(1.02) hue-rotate(5deg);
}

Card Component

.vsco-card {
  background: var(--vsco-cream);
  border: 1px solid var(--vsco-fog);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 4px rgba(122, 107, 93, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.vsco-card:hover {
  box-shadow: 0 6px 20px rgba(122, 107, 93, 0.1);
  transform: translateY(-2px);
}

.vsco-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
  filter: saturate(0.85) contrast(0.95) brightness(1.02);
}

.vsco-card h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vsco-charcoal);
  margin-bottom: 8px;
}

.vsco-card p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--vsco-driftwood);
  line-height: 1.7;
}

.vsco-card__meta {
  margin-top: 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vsco-dusty-rose);
}

Button Component

/* Outlined -- the default VSCO button */
.vsco-button {
  display: inline-block;
  background: transparent;
  color: var(--vsco-charcoal);
  border: 1.5px solid var(--vsco-fog);
  border-radius: 24px;
  padding: 10px 28px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vsco-button:hover {
  background: var(--vsco-charcoal);
  color: var(--vsco-shell);
  border-color: var(--vsco-charcoal);
}

/* Filled -- warm coral CTA */
.vsco-button--filled {
  background: var(--vsco-coral);
  color: var(--vsco-shell);
  border-color: var(--vsco-coral);
}

.vsco-button--filled:hover {
  background: #C07A64;
  border-color: #C07A64;
}

/* Ghost -- minimal text-only button */
.vsco-button--ghost {
  background: none;
  border: none;
  color: var(--vsco-driftwood);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}

.vsco-button--ghost:hover {
  color: var(--vsco-coral);
  border-bottom-color: var(--vsco-coral);
}

.vsco-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: rgba(245, 237, 227, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vsco-fog);
  position: sticky;
  top: 0;
  z-index: 100;
}

.vsco-nav__logo {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vsco-charcoal);
  text-decoration: none;
}

.vsco-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vsco-nav__links a {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--vsco-driftwood);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.vsco-nav__links a:hover {
  color: var(--vsco-coral);
}

Hero Section

.vsco-hero {
  position: relative;
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    170deg,
    var(--vsco-peach) 0%,
    var(--vsco-golden) 30%,
    var(--vsco-sand) 70%,
    var(--vsco-sea-glass) 100%
  );
}

/* Film grain overlay on hero */
.vsco-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* For image-based heroes */
.vsco-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(0.9) brightness(1.05);
}

.vsco-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(245, 237, 227, 0.2) 0%,
    rgba(245, 237, 227, 0.6) 100%
  );
}

.vsco-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 24px;
}

.vsco-hero__content h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vsco-grain);
  margin-bottom: 16px;
}

.vsco-hero__content p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--vsco-charcoal);
  max-width: 500px;
  margin: 0 auto;
}

Photo Grid

.vsco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.vsco-grid__item {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}

.vsco-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.92) brightness(1.03);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.vsco-grid__item:hover img {
  filter: saturate(0.9) contrast(0.95) brightness(1.05);
  transform: scale(1.03);
}

/* Layout variations */
.vsco-grid__item--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.vsco-grid__item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

@media (max-width: 640px) {
  .vsco-grid { grid-template-columns: repeat(2, 1fr); }
  .vsco-grid__item--wide {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
}

Pull-Quote Block

.vsco-quote {
  text-align: center;
  padding: 60px 40px;
  max-width: 650px;
  margin: 0 auto;
}

.vsco-quote::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--vsco-fog);
  margin: 0 auto 28px;
}

.vsco-quote blockquote {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--vsco-charcoal);
  border: none;
  margin: 0;
  padding: 0;
}

.vsco-quote cite {
  display: block;
  margin-top: 20px;
  font-family: 'Josefin Sans', sans-serif;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vsco-dusty-rose);
}

Editorial Two-Column Block

.vsco-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 40px;
}

.vsco-editorial--reverse {
  direction: rtl;
}

.vsco-editorial--reverse > * {
  direction: ltr;
}

.vsco-editorial__image {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
}

.vsco-editorial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(0.9) brightness(1.05);
}

.vsco-editorial__text .tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vsco-dusty-rose);
  margin-bottom: 12px;
  display: block;
}

.vsco-editorial__text h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vsco-charcoal);
  margin-bottom: 20px;
}

.vsco-editorial__text p {
  margin-bottom: 16px;
  color: var(--vsco-driftwood);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .vsco-editorial {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px;
  }
  .vsco-editorial--reverse {
    direction: ltr;
  }
}

Design Do's and Don'ts

Do

  • Do use warm, desaturated photography with lifted shadows and soft contrast as the primary visual element
  • Do apply film-emulation CSS filters (saturate(0.8) contrast(0.92) brightness(1.04) sepia(0.08)) to images for consistent VSCO tonality
  • Do keep typography light-weight, well-spaced, and uppercase for headings to maintain an editorial calm
  • Do use off-white and sand-toned backgrounds (#F5EDE3, #FAF3EB) instead of pure white
  • Do add subtle film grain overlays to backgrounds and hero sections for analog texture
  • Do maintain generous whitespace and vertical rhythm; let every section of the design breathe
  • Do choose imagery featuring natural light, golden hour, beaches, wildflowers, and candid lifestyle moments
  • Do use thin, muted borders and warm-tinted shadows for a low-contrast interface
  • Do pair a clean sans-serif heading font with an italic serif for editorial warmth
  • Do keep the UI chrome invisible; navigation and interactive controls should recede behind the content

Don't

  • Don't use high-saturation colors, neon accents, or electric gradients that break the desaturated mood
  • Don't use pure black (#000000) for text or backgrounds; always lift blacks to warm dark greys like #3E3832
  • Don't use heavy bold typefaces, thick strokes, or tight-tracked uppercase headings that feel aggressive
  • Don't clutter layouts with multiple competing elements; each section should feature a single clear focal point
  • Don't use sharp corners and hard-edged containers; prefer rounded or borderless shapes
  • Don't apply glossy, skeuomorphic, or glass-heavy effects that feel digitally processed
  • Don't use stark white (#FFFFFF) as the primary background; opt for warm off-whites like #F5EDE3
  • Don't use cold grey or blue-tinted neutrals as base colors; the entire palette must lean warm
  • Don't use overly processed, HDR, or heavily retouched photography; embrace natural imperfection
  • Don't apply complex animations or flashy transitions; any motion should be slow, subtle, and fade-based
Aesthetic Relationship to VSCO
Coastal Style Shares beachy, sun-bleached warmth and relaxed lifestyle imagery; Coastal leans more nautical and blue-toned while VSCO stays warm and desaturated
Earth Tones Both use warm muted natural palettes; Earth Tones is heavier and more grounded while VSCO adds film-fade sophistication
Cottagecore Both celebrate natural, sustainable living; Cottagecore is more ornamental and rustic while VSCO is cleaner and more urban-coastal
Danish Pastel Shares soft muted tones and cozy lifestyle appeal; Danish Pastel leans cooler and more playful while VSCO is warmer and photographic
Light Academia Both favor warm, intellectual minimalism; Light Academia leans scholarly and interior-focused, VSCO leans photographic and outdoors
Hygge Common emphasis on warmth, comfort, and natural atmosphere; Hygge centers on interior coziness, VSCO centers on photography and lifestyle
Frutiger Eco Both evoke nature and sustainability; Frutiger Eco uses glossy optimistic corporate naturalism while VSCO stays matte and analog
Wabi-Sabi Both embrace imperfection and natural beauty; Wabi-Sabi is more austere and philosophical, VSCO is warmer and lifestyle-oriented
Flat Design Shared minimalist UI philosophy; Flat Design is precise and geometric, VSCO is organic and texture-rich

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Goldenshore Journal -- VSCO Aesthetic</title>
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500&family=Nunito+Sans:wght@300;400;600&family=Lora:ital,wght@0,400;0,500;1,400&family=Caveat:wght@400&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --vsco-shell: #FFFBF5;
      --vsco-sand: #F5EDE3;
      --vsco-cream: #FAF3EB;
      --vsco-fog: #D6CEC5;
      --vsco-golden: #E8B87D;
      --vsco-peach: #E6B8A2;
      --vsco-coral: #D4907A;
      --vsco-dusty-rose: #C4A08E;
      --vsco-sage: #A3B5A0;
      --vsco-sea-glass: #B5C9C3;
      --vsco-denim: #8FA3B0;
      --vsco-driftwood: #7A6B5D;
      --vsco-charcoal: #5C534A;
      --vsco-grain: #3E3832;
    }

    body {
      font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.75;
      color: var(--vsco-driftwood);
      background: var(--vsco-sand);
      -webkit-font-smoothing: antialiased;
    }

    a { color: var(--vsco-denim); text-decoration: none; transition: color 0.2s ease; }
    a:hover { color: var(--vsco-coral); }

    /* ---------- Navigation ---------- */

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 40px;
      background: rgba(245, 237, 227, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--vsco-fog);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 300;
      font-size: 1.1rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--vsco-charcoal);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Nunito Sans', sans-serif;
      font-size: 0.82rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--vsco-driftwood);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s ease;
    }

    .nav-links a:hover { color: var(--vsco-coral); }

    /* ---------- Hero ---------- */

    .hero {
      position: relative;
      width: 100%;
      min-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        170deg,
        #E6B8A2 0%,
        #E8B87D 30%,
        #F5EDE3 70%,
        #B5C9C3 100%
      );
      overflow: hidden;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 40px 24px;
    }

    .hero-content h1 {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 300;
      font-size: clamp(2.2rem, 5.5vw, 3.8rem);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--vsco-grain);
      margin-bottom: 16px;
    }

    .hero-content p {
      font-family: 'Lora', serif;
      font-style: italic;
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--vsco-charcoal);
      max-width: 480px;
      margin: 0 auto 28px;
    }

    .btn {
      display: inline-block;
      background: transparent;
      color: var(--vsco-charcoal);
      border: 1.5px solid var(--vsco-fog);
      border-radius: 24px;
      padding: 10px 28px;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn:hover {
      background: var(--vsco-charcoal);
      color: var(--vsco-shell);
      border-color: var(--vsco-charcoal);
    }

    .btn--filled {
      background: var(--vsco-coral);
      color: var(--vsco-shell);
      border-color: var(--vsco-coral);
    }

    .btn--filled:hover {
      background: #C07A64;
      border-color: #C07A64;
    }

    /* ---------- Sections ---------- */

    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 80px 40px;
    }

    .section-title {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 300;
      font-size: 0.85rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
      text-align: center;
      margin-bottom: 48px;
    }

    .section-title::after {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--vsco-fog);
      margin: 16px auto 0;
    }

    /* ---------- Photo Grid ---------- */

    .photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }

    .photo-grid__item {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: var(--vsco-fog);
    }

    .photo-grid__item--wide {
      grid-column: span 2;
      aspect-ratio: 2 / 1;
    }

    .photo-grid__placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
      background: linear-gradient(135deg, var(--vsco-cream) 0%, var(--vsco-peach) 50%, var(--vsco-golden) 100%);
      filter: saturate(0.6) brightness(1.05);
      transition: filter 0.4s ease, transform 0.4s ease;
    }

    .photo-grid__item:hover .photo-grid__placeholder {
      filter: saturate(0.75) brightness(1.08);
      transform: scale(1.02);
    }

    /* ---------- Editorial Block ---------- */

    .editorial {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      max-width: 1000px;
      margin: 0 auto;
      padding: 80px 40px;
    }

    .editorial--reverse { direction: rtl; }
    .editorial--reverse > * { direction: ltr; }

    .editorial__image {
      aspect-ratio: 4 / 5;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--vsco-driftwood);
    }

    .editorial__image--warm {
      background: linear-gradient(160deg, var(--vsco-peach) 0%, var(--vsco-golden) 50%, var(--vsco-cream) 100%);
      filter: saturate(0.65) brightness(1.04);
    }

    .editorial__image--cool {
      background: linear-gradient(160deg, var(--vsco-sage) 0%, var(--vsco-sea-glass) 50%, var(--vsco-cream) 100%);
      filter: saturate(0.65) brightness(1.04);
    }

    .editorial__text h2 {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 300;
      font-size: 1.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--vsco-charcoal);
      margin-bottom: 20px;
    }

    .editorial__text p {
      margin-bottom: 16px;
      color: var(--vsco-driftwood);
    }

    .editorial__text .tag {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
      margin-bottom: 12px;
      display: block;
    }

    /* ---------- Pull Quote ---------- */

    .pull-quote {
      text-align: center;
      padding: 60px 40px;
      max-width: 650px;
      margin: 0 auto;
    }

    .pull-quote::before {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--vsco-fog);
      margin: 0 auto 28px;
    }

    .pull-quote blockquote {
      font-family: 'Lora', serif;
      font-style: italic;
      font-size: 1.35rem;
      line-height: 1.85;
      color: var(--vsco-charcoal);
    }

    .pull-quote cite {
      display: block;
      margin-top: 20px;
      font-family: 'Josefin Sans', sans-serif;
      font-style: normal;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
    }

    /* ---------- Card Row ---------- */

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .card {
      background: var(--vsco-cream);
      border: 1px solid var(--vsco-fog);
      border-radius: 12px;
      padding: 24px;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .card:hover {
      box-shadow: 0 6px 20px rgba(122, 107, 93, 0.08);
      transform: translateY(-3px);
    }

    .card__image {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 8px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
    }

    .card__image--beach {
      background: linear-gradient(135deg, var(--vsco-golden) 0%, var(--vsco-peach) 100%);
      filter: saturate(0.6);
    }

    .card__image--forest {
      background: linear-gradient(135deg, var(--vsco-sage) 0%, var(--vsco-sea-glass) 100%);
      filter: saturate(0.6);
    }

    .card__image--sunset {
      background: linear-gradient(135deg, var(--vsco-coral) 0%, var(--vsco-golden) 100%);
      filter: saturate(0.6);
    }

    .card h3 {
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--vsco-charcoal);
      margin-bottom: 8px;
    }

    .card p {
      font-size: 0.92rem;
      color: var(--vsco-driftwood);
      line-height: 1.7;
    }

    .card__meta {
      margin-top: 12px;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
    }

    /* ---------- Footer ---------- */

    footer {
      text-align: center;
      padding: 60px 40px;
      border-top: 1px solid var(--vsco-fog);
      margin-top: 80px;
    }

    footer p {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--vsco-dusty-rose);
    }

    .footer-links {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      gap: 24px;
      list-style: none;
    }

    .footer-links a {
      font-family: 'Nunito Sans', sans-serif;
      font-size: 0.8rem;
      color: var(--vsco-driftwood);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-links a:hover { color: var(--vsco-coral); }

    /* ---------- Responsive ---------- */

    @media (max-width: 768px) {
      nav { padding: 16px 20px; }
      .nav-links { gap: 16px; }
      .nav-links a { font-size: 0.75rem; }
      .hero { min-height: 70vh; }
      .section { padding: 48px 20px; }
      .photo-grid { grid-template-columns: repeat(2, 1fr); }
      .photo-grid__item--wide {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
      }
      .editorial {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 20px;
      }
      .editorial--reverse { direction: ltr; }
      .cards-row {
        grid-template-columns: 1fr;
        padding: 0 20px;
      }
      .pull-quote { padding: 40px 20px; }
    }

    @media (max-width: 480px) {
      .nav-links { display: none; }
      .photo-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">Goldenshore</a>
    <ul class="nav-links">
      <li><a href="#journal">Journal</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#shop">Shop</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1>Chasing Golden Light</h1>
      <p>A journal of quiet mornings, salt-air afternoons, and the gentle art of slowing down</p>
      <a href="#gallery" class="btn">Explore the Journal</a>
    </div>
  </section>

  <!-- Photo Grid -->
  <div class="section" id="gallery">
    <p class="section-title">Recent Frames</p>
    <div class="photo-grid">
      <div class="photo-grid__item photo-grid__item--wide">
        <div class="photo-grid__placeholder">Morning Tide</div>
      </div>
      <div class="photo-grid__item">
        <div class="photo-grid__placeholder">Wildflowers</div>
      </div>
      <div class="photo-grid__item">
        <div class="photo-grid__placeholder">Driftwood</div>
      </div>
      <div class="photo-grid__item">
        <div class="photo-grid__placeholder">Sea Glass</div>
      </div>
      <div class="photo-grid__item photo-grid__item--wide">
        <div class="photo-grid__placeholder">Golden Hour</div>
      </div>
    </div>
  </div>

  <!-- Editorial Block -->
  <div class="editorial" id="about">
    <div class="editorial__image editorial__image--warm">Beach Path</div>
    <div class="editorial__text">
      <span class="tag">Summer Edition</span>
      <h2>The Analog Slow-Down</h2>
      <p>There is something irreplaceable about the weight of a film camera in your hands, the deliberate click of the shutter, and the patience of waiting for prints. In a world of instant everything, analog photography teaches us that the best things develop slowly.</p>
      <p>This season we traded our phones for point-and-shoots and spent three weeks documenting the coastline on nothing but Kodak Portra 400.</p>
      <a href="#" class="btn btn--filled">Read the Story</a>
    </div>
  </div>

  <!-- Pull Quote -->
  <div class="pull-quote">
    <blockquote>The most beautiful photographs are the ones that feel like memories before you even finish looking at them.</blockquote>
    <cite>Field Notes, Issue 7</cite>
  </div>

  <!-- Editorial Block (reversed) -->
  <div class="editorial editorial--reverse">
    <div class="editorial__image editorial__image--cool">Fern Valley</div>
    <div class="editorial__text">
      <span class="tag">Mindful Living</span>
      <h2>Less Scroll, More Stroll</h2>
      <p>We partnered with local makers to curate a collection of reusable essentials designed to make sustainable choices feel effortless and beautiful. Think beeswax wraps in sun-faded florals, stainless steel bottles in matte sage, and tote bags printed with hand-drawn tide charts.</p>
      <a href="#" class="btn">View the Collection</a>
    </div>
  </div>

  <!-- Cards Section -->
  <div class="section" id="journal">
    <p class="section-title">From the Journal</p>
    <div class="cards-row">
      <div class="card">
        <div class="card__image card__image--beach">Coastline</div>
        <h3>Salt and Light</h3>
        <p>An early morning walk along the shore before the crowds arrive, capturing the way sunrise turns wet sand into liquid gold.</p>
        <div class="card__meta">12 min read</div>
      </div>
      <div class="card">
        <div class="card__image card__image--forest">Trail</div>
        <h3>Forest Bathing</h3>
        <p>We ventured into the coastal redwoods with nothing but a camera and a thermos of chamomile, letting the canopy filter the world.</p>
        <div class="card__meta">8 min read</div>
      </div>
      <div class="card">
        <div class="card__image card__image--sunset">Horizon</div>
        <h3>Golden Hour Guide</h3>
        <p>Our definitive guide to chasing that warm amber light, from timing and location scouting to the camera settings that capture the magic.</p>
        <div class="card__meta">15 min read</div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <p>Goldenshore Journal &mdash; Made with intention</p>
    <ul class="footer-links">
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Pinterest</a></li>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </footer>

</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.