Skip to content
DesignMunkDesignMunk Submit a site

Founderstack

founderstack.pro
The stack your business needs—lifetime access, no subscriptions.
AI Software Next.js Homepage Inter Newsreader
Share Visit site
founderstack.pro DESKTOP · 1440
Founderstack

AI Breakdown

Design export

---
version: alpha
name: Founderstack
description: The stack your business needs—lifetime access, no subscriptions.
colors:
  primary: "#5d6989"
  secondary: "#242424"
  tertiary: "#246bfd"
  neutral: "#ffffff"
  border: "#dfe5f2"
  brand-poster-blue: "#134081"
  brand-french-sky-blue: "#7bb4fc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Newsreader
    fontSize: 61px
    fontWeight: 480
    lineHeight: 1.2
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Newsreader
    fontSize: 45px
    fontWeight: 480
    lineHeight: 1.2
    letterSpacing: -0.042em
  headline-sm:
    fontFamily: Newsreader
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.046em
  headline-xs:
    fontFamily: Newsreader
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.49
    letterSpacing: -0.064em
  body-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
rounded:
  sm: 24px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 34px
  xl: 46px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 17px 24px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 17px 24px
    height: 48px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "#172354"
    rounded: "{rounded.sm}"
    padding: 34px
---

# FounderStack: Big Serif Headlines, One Resolute Blue CTA

## Overview

FounderStack's UI is calm, confident, and sales-focused without feeling loud. The audience is startup founders evaluating a one-time purchase. The feel is spacious and editorial: large serif headlines, generous whitespace, soft blue halos, and a single decisive accent blue for actions. Density is medium—copy can run long, but line height and carding keep it readable.

## Colors

- Primary (#5D6989): Slate ink for body text, secondary headlines, and subdued icons.
- Secondary (#242424): Deep charcoal for high-emphasis headings and badges when stronger contrast is needed.
- Tertiary (#246BFD): Signal blue for primary actions, links-on-hover, and key highlights.
- Neutral (#FFFFFF): Base canvas and card backgrounds.
- Border (#DFE5F2): Hairline dividers, card outlines, input borders.
- Brand-poster-blue (#134081): Deep poster navy for heavy brand moments and dark blue gradients.
- Brand-french-sky-blue (#7BB4FC): Light sky blue for gradients, glows, and subtle accents.
- Surface (#FFFFFF): Alias of neutral; use for elevated panels and cards.
- On-surface (#5D6989): Alias of primary; default text color on light surfaces.

## Typography

- Newsreader (Google, free): Used for all headline levels. Large, elegant serif with slightly tightened tracking for impact. Substitutes: Source Serif 4, Merriweather, or Georgia for system fallback.
- Inter (Google, free): Used for body, UI labels, and long-form content. Substitutes: Roboto, IBM Plex Sans, or system-ui stack (-apple-system, Segoe UI, Roboto).
- Scale and roles: headline-lg 61px/1.2 (hero), headline-md 45px/1.2 (section intros), headline-sm 33px/1.11 (card titles), headline-xs 24px/1.49 (subheads). Body-md 18px/1.7 is the default paragraph size across sections and FAQs.

## Layout

- Spacing scale: 8, 16, 24, 34, 46px. Use 24px as the base rhythm; step up to 34/46px for section padding and hero breathing room.
- Grids: Centered, single-column narrative interleaved with responsive card grids. Cards and feature chips align to a 24px internal padding and 16–24px gutters.
- Section structure: Hero (46–68px vertical padding multiples), feature grids, product quartet, pricing, testimonials, guarantee, FAQ, and footer newsletter. Keep max line lengths to ~70–80ch by constraining content width and using 1.7 line height.

## Elevation & Depth

- Shadows: one soft shadow measured (rgba(47,68,116,0.07) 0 12px 28px). Apply sparingly to floating cards or modal-like surfaces.
- Default depth is achieved by: crisp #DFE5F2 borders, tonal contrast between #FFFFFF and on-surface #5D6989, and generous whitespace. Avoid stacking multiple shadows; prefer borders plus spacing.

## Shapes

- Corners: cards use sm radius 24px for a friendly, modern profile; buttons and chips use full radius 9999px for pills.
- Meaning: pills signal primary actions and selectable items; 24px corners denote content containers and pricing blocks. Avoid introducing small radii that would clash with the established language.

## Components

Buttons
- Primary: Blue background #246BFD, white text #FFFFFF, 48px height, 17px × 24px padding, full radius 9999px. Use for purchase CTAs ("Stack me up").
- Secondary: Outline or neutral variant when a second action is needed; maintain 48px height and pill shape. Text stays #5D6989 unless on blue backgrounds.
- Link: Text-only, #5D6989 with no underline by default; reserve for low-emphasis navigation.

Card
- Background #FFFFFF, text #172354, 24px radius, 34px internal padding, thin #DFE5F2 border or the soft sm shadow when elevated.

Distinctive page components

### Hero with serif headline
- headline-lg Newsreader 61px/1.2, -0.045em; supporting Inter 18px/1.7. Blue pill CTA (#246BFD) and soft radial blue gradient using #7BB4FC → transparent.

### Feature chip grid
- Two-row grid of rounded tiles (24px radius) with pastel icons, 16–24px gutters, thin #DFE5F2 borders. Use for capability scanning above the fold.

### Product quartet
- Four cards (FeedHive, Aidbase, LinkDrip, SignupGate) each with name, one-sentence role, plus a "Replaces" list. Use headline-sm (33px) for product names and body-md for descriptions.

### Future tools teaser
- Two mystery cards with "?" artwork and launch years. Same 24px radius; subdued border; minimal copy. Treat as low-contrast to avoid stealing attention from pricing.

### Pricing cards
- Two-up layout: Single ($599) and Bundle ($799). 24px radius, 34px internal padding, badge for "Best value". Primary CTA uses the blue pill; list features beneath with 16px spacing.

### Social proof strip
- Avatars, "Trusted by +50,000 founders", ratings. Keep icons small with Inter labels; use border gray to separate from hero.

### Testimonials wall
- Repeating quote cards in 2–3 columns. Use headline-xs for names/roles and body-md for quotes. Avoid overlong sequences on mobile—collapse or paginate.

### Guarantee panel with signature
- Statement from the founder with Inter body, optional signature image, and a reinforced 30-day badge. Use spacing-xl (46px) top/bottom to give it breathing room.

### FAQ accordion
- Inter 18px questions in bold, answers regular. Borders #DFE5F2 between items; 16–24px vertical padding per row.

## Do's and Don'ts

- Do pair Newsreader headlines with Inter body at the provided sizes; mixing two serifs will dilute hierarchy.
- Do keep primary actions in #246BFD with white text and 48px-tall pills.
- Do use #DFE5F2 borders to separate dense sections instead of heavy shadows.
- Don't introduce additional corner radii; stick to 24px for containers and full pills for actions/chips.
- Don't stack multiple shadows or use dark drop shadows on light cards; the system is border-first.
- Don't crowd the hero—maintain at least 46px vertical padding and one clear CTA.

## Agent Prompt Guide

Quick color reference
- Text: #5D6989 (on-surface)
- Background: #FFFFFF (surface)
- Border: #DFE5F2
- Accent/CTA: #246BFD

1) Build the hero
"Create a centered hero on #FFFFFF with a radial halo using #7BB4FC fading to transparent. H1 set in Newsreader 61px, weight 480, line-height 1.2, letter-spacing -0.045em. Supporting paragraph in Inter 18px/1.7, color #5D6989. Primary CTA: pill button 48px tall, 17px × 24px padding, radius 9999px, background #246BFD, text #FFFFFF."

2) Feature chip grid
"Below the hero, render a responsive grid of 10–14 feature chips. Each chip: #FFFFFF background, 24px corner radius, 16px internal padding, 1px border #DFE5F2, label in Inter 18px #5D6989. Use 16–24px gutters."

3) Product quartet section
"Add a four-card row. Each card: #FFFFFF, 24px radius, 34px padding, optional soft shadow rgba(47,68,116,0.07) 0 12px 28px. Title in Newsreader 33px/1.11, description in Inter 18px/1.7 #5D6989. Include a small 'Replaces' list in Inter 16–18px."

4) Pricing two-up
"Create two pricing cards (Single $599, Bundle $799). Cards: #FFFFFF, 24px radius, 34px padding, border #DFE5F2. Titles in Newsreader 33px, prices in Newsreader 45px. Feature list in Inter 18px/1.7. Primary CTA button in each: pill 48px tall, background #246BFD, text #FFFFFF."

5) FAQ accordion
"Add an accordion with 6–8 items. Question row: Inter 18px, medium weight, #242424; answer: Inter 18px regular #5D6989. Row separators: 1px #DFE5F2. Spacing: 16px vertical inside items, 24px between groups."

## Similar Brands

- Stripe: Similar calm blue accent and generous whitespace; Stripe leans sans-only and darker neutrals where FounderStack uses a serif for headlines.
- Intercom: Blue CTAs and rounded cards; Intercom favors illustrations and gradients with higher saturation, while FounderStack stays lighter and more editorial.
- Basecamp: Friendly radius and straightforward pricing; Basecamp uses hand-drawn cues and warmer colors versus FounderStack's cooler, polished palette.
- Notion: Minimal surfaces and long-form sections; Notion is monochrome-first and sans-serif, where FounderStack adds a serif headline and branded blues.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago