Loam — Warm Earthy Organic Agency Website

{"summary": "A warm, earthy, organic agency / studio website. Cozy sand-and-terracotta palette with olive and clay accents, a large Fraunces serif display headline (with one italic terracotta phrase underlined by a hand-drawn squiggle), Inter body text, and soft 'leaf-blob' organic border-radius shapes used for the hero photo, background washes, and cards. Sticky blurred nav, dark ink stats band, a 4-up project-card grid, a numbered services list, an about/values section with a photo + 3 value cards, a terracotta contact block with a mock form, and a dark footer. Subtle paper-grain texture over everything.", "style": {"description": "Warm earthy organic editorial. Grounded, handcrafted, slow-and-soft mood: sand/cream base (#efe7d8), terracotta primary action color (#c4633f), muted olive (#6b7048) and clay (#cf9a6f) accents, near-black warm ink for text (#2b251d). Fraunces serif for all headings (optical sizing, weights 600-700, with italics for emphasis), Inter for UI/body. Organic blobby radii (border-radius:'organic' = 2.5rem plus custom leaf-blob shapes), generous whitespace, soft layered shadows tinted by ink/terra, a faint radial-dot paper grain, and large blurred organic background washes behind sections.", "prompt": "Design in a warm earthy organic editorial style. Palette: sand base #efe7d8 (darker sand #e6dac5, lighter sand #f6f0e4), terracotta primary #c4633f (dark #a64f30), olive #6b7048 (dark #565a39), clay #cf9a6f (light #dcae84), warm ink text #2b251d (soft #5c5345). Headings use the Fraunces serif (font-optical-sizing:auto, weights 600/700, italic for one emphasized phrase); body and UI use Inter (400-700). Use organic blob border-radii: a reusable 'organic' radius of 2.5rem on cards and the contact form, plus irregular leaf-blob radii (e.g. 64% 36% 57% 43% / 47% 56% 44% 53%) for the hero photo, about photo and large blurred background washes. Apply a faint paper grain via a radial-dot background (rgba(43,37,29,0.035) 1px dots on a 4px grid). Use soft, warm-tinted layered shadows (shadow-ink/20, shadow-terra/25). Buttons are fully rounded pills; eyebrow labels are uppercase with wide 0.22em letter-spacing. Overall feel: handcrafted, grounded, unhurried, never cold or clinical."}, "layout_and_structure": {"description": "Single-column long-form landing page, max-width 7xl (80rem) container with px-6 / lg:px-10 gutters. Top-down order: sticky blurred header nav, hero (12-col grid: 6 copy / 6 organic photo), dark ink stats band (4 stats), Selected Work (4-up card grid), Services (4 intro col + 8 list col, numbered rows), About/Values (5 photo / 7 values with 3 cards), terracotta Contact block (6 copy / 6 form card), dark footer (4 columns + bottom bar). Sections alternate sand / sandhi / ink / terra backgrounds for rhythm. Responsive: grids collapse to 1-2 cols on mobile, nav links hide behind lg, blob washes clip via overflow-hidden.", "prompts": [{"part": "Sticky nav", "prompt": "A sticky top header (z-50) with a translucent sand background (bg-sand/85) and backdrop blur+saturate. Inside a max-w-7xl row, height 72px: left = a circular terracotta badge with a leaf icon plus the 'Loam.' wordmark in Fraunces (the period in terracotta); center = horizontal text links (Work, Services, Studio, Contact) in muted ink, hidden below lg; right = a dark ink pill CTA 'Start a project' with an up-right arrow icon that darkens to terracotta on hover. Thin ink/10 bottom border."}, {"part": "Hero", "prompt": "Two-column hero on a 12-col grid (lg:6/6) with two large blurred organic background washes (clay and olive blobs). Left: an olive-tinted pill eyebrow with a sparkle icon ('Agency websites, grown by prompt'), then a huge Fraunces 700 headline using clamp(2.6rem,5.4vw,4.6rem) with tight leading; one phrase ('made by hand,') is italic terracotta and underlined by a hand-drawn SVG squiggle stroke. Sub-paragraph in muted ink, then two pill CTAs (solid terracotta 'Grow your site' with arrow, outlined 'See the canvas' with a terracotta play icon), then an avatar stack (clay/olive/terra circles + a '+9k' ink chip) with 'Trusted by indie studios and product teams'. Right: a leaf-blob-shaped photo (aspect 6/5) with a soft gradient overlay, an absolutely-positioned 'prompt' chip card (sandhi, rounded-3xl) quoting an example prompt, and an olive 'Generated in 40s' pill with a plant icon floating at top-right."}, {"part": "Stats band", "prompt": "A full-bleed dark ink band (bg-ink, text-sand). Inside max-w-7xl, a 4-up grid (2 cols on mobile) of stats: big Fraunces 700 numbers in light clay (#dcae84) like 1,240 / 94% / 40s / 9k+ where the unit (%/s/+) is a smaller muted clay, with an uppercase wide-tracked label beneath in sand/60. Vertical sand/15 dividers between columns on lg."}, {"part": "Selected work grid", "prompt": "A 'Selected work' section on sand with a blurred terra background wash. Header row: terracotta eyebrow, a two-line Fraunces 700 heading ('Studios we grew from a single prompt'), and a right-aligned olive text link 'View the full library' with arrow. Below, a responsive card grid (1 / sm:2 / lg:4). Each card is rounded-organic, sandhi background, thin ink/5 border, with a 56-tall photo header (gradient-overlaid Unsplash image) carrying a small rounded pill category tag top-left; body has a Fraunces project name, a one-line muted description, and a terracotta 'Open case' link with an up-right arrow. On hover the card lifts (-translate-y-1), shadow deepens, and a terra/20 ring appears."}, {"part": "Services list", "prompt": "A services section on a slightly lighter sandhi/70 band with ink/5 top+bottom borders. 12-col grid: left 4 cols = terracotta eyebrow, a Fraunces 700 heading ('From a prompt to a whole studio site.'), an intro paragraph, and an olive pill CTA 'Browse all prompts'. Right 8 cols = a divided list (divide-y ink/10) of 4 rows; each row has a two-digit clay serial number (01-04), a rounded-2xl tinted icon tile (terra/olive/clay backgrounds with layout / squares / paintbrush / rocket icons), a Fraunces row title with a muted one-line description, and a trailing up-right arrow that turns terracotta and nudges right on group hover."}, {"part": "About / values", "prompt": "An about/values section on sand with a large blurred olive blob wash bottom-left. 12-col grid (lg:5/7): left = a blob-2-shaped tall photo (aspect 4/5) with a soft dark gradient and an absolutely-positioned terracotta badge card ('est. 2026 / a quiet studio'). Right = terracotta eyebrow, a Fraunces 700 heading ('We believe good design should feel grown, not generated.'), an intro paragraph, then a 3-up grid of value cards (rounded-3xl sandhi, ink/5 border): each card has a circular tinted icon chip (heart / scissors / hand), a Fraunces title, and a small muted body line."}, {"part": "Contact block", "prompt": "A full-bleed terracotta section (bg-terra, text-sandhi) with two blurred organic washes (sandhi and ink). 12-col grid (6/6): left = a sandhi/75 eyebrow ('Plant the seed'), a large Fraunces 700 headline, an intro paragraph in sandhi/85, and a contact line with envelope + map-pin icons. Right = a sandhi-background rounded-organic form card with deep shadow: a 2-col row of mocked 'Your name' / 'Email' fields (sand-filled rounded-2xl inputs with placeholder text), a full-width 'Describe your site' textarea mock, a solid terracotta full-width pill submit button 'Grow my first draft' with a plant icon, and a small reassurance line 'Free to preview. No card to start.'"}, {"part": "Footer", "prompt": "A dark ink footer (text-sand). max-w-7xl 4-column grid: first column = the leaf-badge 'Loam.' wordmark, a short description, and three circular social icon buttons (X / Dribbble / Instagram) that turn terracotta on hover; three link columns (Library, Studio, Get in touch) with uppercase wide-tracked sand/50 headings and sand/75 links hovering to light clay, the contact column using small light-clay icons. A top-bordered bottom bar splits copyright ('© 2026 Loam Studio. Grown with care.') from Privacy / Terms / 'Made on Acme' links."}]}, "special_ui_components": ["Organic 'leaf-blob' shapes: irregular border-radius values (e.g. 64% 36% 57% 43% / 47% 56% 44% 53% and two variants) reused for the hero photo, about photo, and large blurred background washes", "Reusable 'organic' rounded radius (2.5rem) applied to project cards and the contact form card", "Hand-drawn underline: an inline SVG squiggle path stroked in terracotta beneath the italic emphasis phrase in the hero headline", "Paper-grain texture: a radial-dot background (rgba(43,37,29,0.035) 1px dots on a 4px grid) layered over the whole body", "Floating overlay cards on photos: a 'prompt' quote chip and an olive 'Generated in 40s' pill on the hero, and an 'est. 2026' terracotta badge on the about photo", "Phosphor (Iconify ph:*) icons throughout: leaf, sparkle, arrows, plant, terminal, layout, squares-four, paint-brush, rocket-launch, heart, scissors, hand, envelope, map-pin, social logos", "Pill buttons (fully rounded) in three variants: solid terracotta, solid olive, solid ink, plus an outlined ghost variant", "Uppercase wide-tracked (0.22em) eyebrow labels above each section heading", "Numbered services rows with tinted rounded-square icon tiles and a group-hover arrow nudge"], "special_notes": "Fonts loaded from Google Fonts: Fraunces (opsz 9..144, weights 400-800, serif display, optical sizing on) and Inter (400-700, sans UI/body). Styled with Tailwind via CDN using a custom theme palette (sand/sandlo/sandhi, terra/terradk, olive/olivedk, clay/claylo, ink/inksoft) and a custom 'organic' border radius. Photos are Unsplash earthy nature shots (soil, fields, foliage) with gradient overlays. html has scroll-behavior:smooth and overflow-x:hidden so the large blurred blobs never cause horizontal scroll. The mood must stay warm, grounded and handcrafted, never cold, neon or corporate."}

---
"Loam — Warm Earthy Organic Agency Website" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Loam — Warm Earthy Organic Agency Website. \"Loam — Warm Earthy Organic Agency Website\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-loam-warm-earthy-organic-agency-website",
      "license": "CC0-1.0",
      "attribution": "\"Loam — Warm Earthy Organic Agency Website\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f6f0e4"
    },
    "foreground": {
      "$type": "color",
      "$value": "#6b7048"
    },
    "card": {
      "$type": "color",
      "$value": "#f6f0e4"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#6b7048"
    },
    "primary": {
      "$type": "color",
      "$value": "#efe7d8"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#c4633f"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#6b7048"
    },
    "accent": {
      "$type": "color",
      "$value": "#c4633f"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e7e2d6"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#9fa288"
    },
    "border": {
      "$type": "color",
      "$value": "#d4cec4"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#efe7d8"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Loam — Warm Earthy Organic Agency Website" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520. */
:root {
  --background: #f6f0e4;
  --foreground: #6b7048;
  --card: #f6f0e4;
  --card-foreground: #6b7048;
  --primary: #efe7d8;
  --primary-foreground: #1c1917;
  --secondary: #c4633f;
  --secondary-foreground: #6b7048;
  --accent: #c4633f;
  --accent-foreground: #fafaf9;
  --muted: #e7e2d6;
  --muted-foreground: #9fa288;
  --border: #d4cec4;
  --destructive: #dc2626;
  --ring: #efe7d8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Loam — Warm Earthy Organic Agency Website" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520. */
/** Tailwind theme extend for Loam — Warm Earthy Organic Agency Website (superdesign-loam-warm-earthy-organic-agency-website) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f6f0e4",
        "foreground": "#6b7048",
        "card": "#f6f0e4",
        "primary": "#efe7d8",
        "primary-foreground": "#1c1917",
        "secondary": "#c4633f",
        "accent": "#c4633f",
        "muted": "#e7e2d6",
        "border": "#d4cec4",
        "destructive": "#dc2626",
        "ring": "#efe7d8"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Loam — Warm Earthy Organic Agency Website" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/loam-warm-earthy-organic-agency-website @ 6c6090694520. */
@layer base {
:root {
  --background: #f6f0e4;
  --foreground: #6b7048;
  --card: #f6f0e4;
  --card-foreground: #6b7048;
  --primary: #efe7d8;
  --primary-foreground: #1c1917;
  --secondary: #c4633f;
  --secondary-foreground: #6b7048;
  --accent: #c4633f;
  --accent-foreground: #fafaf9;
  --muted: #e7e2d6;
  --muted-foreground: #9fa288;
  --border: #d4cec4;
  --destructive: #dc2626;
  --ring: #efe7d8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}