Foundry: Your SaaS Site, Designed Before You Write a Line

{"summary": "Build a warm editorial SaaS marketing landing page on a cream canvas with a large Fraunces serif display headline, a split hero with a dark right-hand product-canvas panel, an asymmetric features grid of staggered cards, a real-reference library showcase, a centered pull-quote testimonial, a dark craft/palette story section, a three-tier pricing block with one highlighted plan, a rounded olive CTA banner, and a four-column footer. Sticky blurred nav with an announcement bar on top; fully responsive reflow at 1280 / 768 / 390.", "style": {"description": "Warm editorial magazine aesthetic: cream paper base, ink near-black text, a terracotta accent and an olive secondary, set in Fraunces serif display over Inter body. Premium, crafted, not-generated; soft shadows, hairline borders, and pill chips, never beige AI sludge.", "prompt": "Palette is warm editorial paper: page base cream #faf6ef, ink near-black #1a1714 for text and dark panels, sand #f1e9da fills with sand-line #e6dccb hairline borders, muted #6e655a for secondary body text. Primary accent is terracotta #d4642a with a deeper hover #b8501c (used for the italic display highlight word, primary buttons, accent dot, star ratings, link underline, ::selection background). Secondary accent is olive #6b7244 / olive-deep #565c34 (announcement bar, CTA banner, the 'real reference library' card). Fonts via Google Fonts: Fraunces (serif display, optical-sizing 144, weights 300-700, letter-spacing -0.02em, line-height ~0.98) for all headlines, the wordmark and the eyebrow italic flourishes; Inter (sans body, weights 400-700) for body, nav, buttons and uppercase eyebrows (letter-spacing 0.18em). Mood: warm, literary, confident; soft layered shadows (float-card 0 30px 60px -20px rgba(26,23,20,0.28); soft-card 0 18px 40px -28px rgba(26,23,20,0.22)), inset 1px hairline pills, a faint vertical 3-column grid texture behind the hero. Accents stay terracotta + olive on cream only; no blue, no purple, no generic gradients."}, "layout_and_structure": {"description": "Centered max-width 1200px container with px-6 / md:px-10 gutters, generous vertical rhythm (py-20 / lg:py-28). The page alternates cream and dark (ink) sections for editorial contrast, leans on asymmetric grids and staggered card translate-y offsets, and reflows every section from 3-up to 1-up on mobile.", "prompts": [{"part": "announcement bar + sticky nav", "prompt": "Full-width olive #6b7244 announcement bar (h-10, centered cream text, sparkle icon + 'New: 240 editorial layouts' + an underlined 'Browse the library' link with an arrow). Below it a sticky top-0 z-50 header with nav-blur (backdrop-blur-12px, background rgba(250,246,239,0.82)) and a sand-line bottom border; 72px row: left = ink rounded-10px logo tile (cream plant/sparkle glyph) + Fraunces 'Foundry' wordmark; center = Inter nav links (Library, How it works, Craft, Pricing) each with an animated terracotta underline-on-hover; right = 'Sign in' text link + a terracotta pill 'Start designing' button. Hide center links below lg."}, {"part": "split hero", "prompt": "Two-column hero grid lg:grid-cols-[1.05fr_0.95fr], with a dark ink panel absolutely filling the right 42% on lg+. Left column: a pill eyebrow ('The prompt library for product designers' with a terracotta dot), a Fraunces display H1 clamp(2.7rem,6vw,4.6rem) with line breaks and one italic terracotta highlight word ('write a line.'), a muted lede paragraph, a button row (terracotta primary 'Design my page' with arrow + cream pill secondary 'See it generate' with play icon), and a social-proof row (five terracotta stars + '4.8 / 5 from 1,200+ founders'). Right column: a floating 'infinite canvas' product mockup card (float-card shadow, canvas chrome bar with 'Generating' pill) containing a mini dark hero preview and two mini feature cards, plus an absolutely-positioned floating prompt-chip card bottom-left. On mobile the right panel drops and the mockup stacks under the copy."}, {"part": "logo trust strip", "prompt": "Full-width band with sand/40 background and top+bottom sand-line borders; centered uppercase eyebrow 'Trusted by design-led teams shipping in public' over a wrapped row of seven faux wordmarks at ink/55 opacity, intentionally mixing Fraunces serif and Inter sans treatments (Northwind, beacon, Cobalt, Atlas, Mercato, Loop, Verde)."}, {"part": "asymmetric why/how features", "prompt": "Section grid lg:grid-cols-[0.8fr_1.2fr]. Left is a sticky (lg:sticky top-28) intro: terracotta eyebrow 'Why Foundry', Fraunces H2, muted paragraph, and a terracotta text link 'Explore 240 layouts'. Right is a 2-column card grid where each card uses a different translate-y offset (0, +8, -2, +6) for a staggered editorial rhythm; cards alternate cream-with-hairline, dark ink, cream, and solid olive backgrounds, each with a rounded icon tile, a Fraunces card title and muted body."}, {"part": "library showcase", "prompt": "sand/50 band with top+bottom hairlines. Header row: olive eyebrow 'The library' + Fraunces H2 'Layouts worth shipping' on the left, a right-aligned muted blurb on the right. Below, a 3-column card grid (md:grid-cols-3); each card is a cream rounded-2xl with a 176px colored preview thumbnail (dark ink hero mock, olive 2x2 grid mock, cream pricing mock with one terracotta-outlined column), then a footer with a Fraunces title, a category pill (Hero/Features/Pricing), and a one-line muted description."}, {"part": "pull-quote testimonial", "prompt": "Centered max-w-4xl figure: a large terracotta quote-marks icon, a Fraunces blockquote at clamp(1.8rem,4vw,3.1rem) with one italic terracotta highlight phrase, then a centered figcaption with an olive-tint circular monogram avatar, name, and role."}, {"part": "dark craft / palette story", "prompt": "Full-bleed ink #1a1714 section, cream text. Two-column lg grid: left = terracotta eyebrow 'The craft', Fraunces H2, cream/70 paragraph, and three check-icon feature rows (terracotta check + bold cream label + cream/60 subtext). Right = a glass-ish card (cream/[0.04] bg, cream/10 border) showing a 4-swatch palette row (cream, terracotta, olive, ink), a type specimen ('Fraunces display.' with italic terracotta), and three rounded tag chips (Editorial / Warm / Magazine)."}, {"part": "pricing", "prompt": "Centered intro (terracotta eyebrow, Fraunces H2 'Simple, like a good layout', muted subcopy). Three-column md grid, items-stretch, max-w-5xl: two cream tier cards (Sketch $0/forever, Atelier $79/month) flanking a highlighted dark ink center card (Studio $24/month) that is translate-y -3 with a terracotta 'Most popular' ribbon. Each card: Fraunces tier name, muted tagline, big Fraunces price with /period, a check-list of features (olive-deep checks on cream cards, terracotta checks on the dark card), and a full-width pill CTA (terracotta on the highlight, cream pill on the others)."}, {"part": "CTA banner + footer", "prompt": "A rounded-3xl olive #6b7244 CTA banner with faint cream + terracotta circle blobs, a Fraunces H2 'Ready to skip the blank page?', a cream/80 subline, and two buttons (terracotta solid + translucent cream-border). Footer: cream with a top sand-line, a 4-column grid [1.4fr_1fr_1fr_1fr] = brand block (logo + blurb + three round social icon chips) plus Product / Resources / Company link columns with uppercase eyebrow headings and terracotta-hover links; a bottom hairline bar with '© 2026 Foundry Design Labs. Crafted, not generated.' and 'Made on an infinite canvas.'"}]}, "special_ui_components": ["Sticky blurred nav (backdrop-blur, rgba cream background, sand-line border) with an animated terracotta underline-on-hover on each link", "Floating 'infinite canvas' product mockup card with a chrome bar, a 'Generating' status pill, a mini hero preview and mini feature cards, plus a detached floating prompt-chip card", "Staggered editorial feature cards using per-card translate-y offsets and alternating cream / ink / olive backgrounds", "Library showcase cards with colored skeleton preview thumbnails and category pills (Hero / Features / Pricing)", "Pull-quote testimonial with oversized terracotta quote glyph and a monogram avatar", "Palette/type specimen card (4 swatches + Fraunces type sample + tag chips) on a dark section", "Three-tier pricing with a raised, dark, 'Most popular' highlighted middle plan", "Rounded olive CTA banner with soft decorative circle blobs", "Pill components throughout using an inset 1px hairline (box-shadow inset 0 0 0 1px rgba(26,23,20,0.14)) instead of a hard border"], "special_notes": "Warm editorial, not generic SaaS: keep the Fraunces serif display + Inter body pairing, the cream/ink/terracotta/olive palette, and the one-italic-terracotta-highlight-word pattern in every major headline. Use soft layered shadows and inset-hairline pills, never heavy borders. Alternate cream and dark ink sections for rhythm and lean on asymmetric grids with staggered card offsets. Phosphor-style line icons only. Responsive: hero right panel + mockup stack on mobile, multi-column grids collapse 3->1, sticky intro becomes static. No em-dashes in any copy; keep the 'Crafted, not generated' editorial voice. Accents stay terracotta + olive on cream; no blue, purple, or default gradients."}

---
"Foundry: Your SaaS Site, Designed Before You Write a Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Foundry: Your SaaS Site, Designed Before You Write a Line. \"Foundry: Your SaaS Site, Designed Before You Write a Line\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-foundry-your-saas-site-designed-before-you-write-a-line",
      "license": "CC0-1.0",
      "attribution": "\"Foundry: Your SaaS Site, Designed Before You Write a Line\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#faf6ef"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1a1714"
    },
    "card": {
      "$type": "color",
      "$value": "#faf6ef"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1a1714"
    },
    "primary": {
      "$type": "color",
      "$value": "#faf6ef"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#1a1714"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1a1714"
    },
    "accent": {
      "$type": "color",
      "$value": "#f1e9da"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#ebe7e1"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6a6866"
    },
    "border": {
      "$type": "color",
      "$value": "#d7d4ce"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#faf6ef"
    }
  },
  "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 */
/* "Foundry: Your SaaS Site, Designed Before You Write a Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520. */
:root {
  --background: #faf6ef;
  --foreground: #1a1714;
  --card: #faf6ef;
  --card-foreground: #1a1714;
  --primary: #faf6ef;
  --primary-foreground: #1c1917;
  --secondary: #1a1714;
  --secondary-foreground: #1a1714;
  --accent: #f1e9da;
  --accent-foreground: #1c1917;
  --muted: #ebe7e1;
  --muted-foreground: #6a6866;
  --border: #d7d4ce;
  --destructive: #dc2626;
  --ring: #faf6ef;
  --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 */
/* "Foundry: Your SaaS Site, Designed Before You Write a Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520. */
/** Tailwind theme extend for Foundry: Your SaaS Site, Designed Before You Write a Line (superdesign-foundry-your-saas-site-designed-before-you-write-a-line) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#faf6ef",
        "foreground": "#1a1714",
        "card": "#faf6ef",
        "primary": "#faf6ef",
        "primary-foreground": "#1c1917",
        "secondary": "#1a1714",
        "accent": "#f1e9da",
        "muted": "#ebe7e1",
        "border": "#d7d4ce",
        "destructive": "#dc2626",
        "ring": "#faf6ef"
      },
      "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 */
/* "Foundry: Your SaaS Site, Designed Before You Write a Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/foundry-your-saas-site-designed-before-you-write-a-line @ 6c6090694520. */
@layer base {
:root {
  --background: #faf6ef;
  --foreground: #1a1714;
  --card: #faf6ef;
  --card-foreground: #1a1714;
  --primary: #faf6ef;
  --primary-foreground: #1c1917;
  --secondary: #1a1714;
  --secondary-foreground: #1a1714;
  --accent: #f1e9da;
  --accent-foreground: #1c1917;
  --muted: #ebe7e1;
  --muted-foreground: #6a6866;
  --border: #d7d4ce;
  --destructive: #dc2626;
  --ring: #faf6ef;
  --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);
}
}