website_designs

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

Recommended Google Fonts

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>

This site is open source. Improve this page.