Launchpad — Startup Landing

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/launchpad-startup-landing and apply its design language to my project

Design Language

### Font Stack
```css
--font-display: 'Calistoga', Georgia, serif;
--font-body:    'Inter', system-ui, sans-serif;
--font-mono:    'JetBrains Mono', 'Courier New', monospace;
```

**Google Fonts import:**
```
family=Calistoga
family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400
family=JetBrains+Mono:wght@400;500
```

### Usage Rules
- `--font-display` (Calistoga): hero heading, section h2, pricing price amounts, stat numbers, nav logo text, floating badge values
- `--font-body` (Inter): all body copy, nav links, buttons, descriptions, testimonial quotes, footer
- `--font-mono` (JetBrains Mono): section label pills, logos-bar label, mockup labels, stat sublabels, pricing tier badges, step timestamps

### Type Scale
| Context | Size | Weight | Tracking | Family |
|---|---|---|---|---|
| Hero h1 | `clamp(44px, 5.5vw, 72px)` | — | `-0.03em` | display |
| Section h2 | `clamp(32px, 4vw, 48px)` | — | `-0.03em` | display |
| CTA h2 | `clamp(36px, 5vw, 60px)` | — | `-0.03em` | display |
| Hero body | `18px` | 400 | — | body |
| Section body | `17px` | 400 | — | body |
| Feature name | `16px` | 600 | `-0.01em` | body |
| Feature desc | `14px` | 400 | — | body |
| Nav link | `14px` | 500 | — | body |
| Nav logo | `18px` | — | `-0.01em` | display |
| Btn primary | `14px` (sm) / `15px` (lg) | 600 | — | body |
| Btn ghost/outline | `14px` (sm) / `15px` (lg) | 500 | — | body |
| Section label | `11px` | 500 | `0.15em` | mono |
| Logos-bar label | `11px` | 500 | `0.15em` | mono |
| Stat number | `clamp(36px, 4vw, 52px)` | — | `-0.03em` | display |
| Stat label | `11px` | 500 | `0.15em` | mono |
| Pricing tier | `13px` | 600 | `0.1em` | mono |
| Price amount | `52px` | — | `-0.04em` | display |
| Price currency | `22px` | 600 | — | body |
| Testimonial quote | `15px` | 400 italic | — | body |
| Author name | `14px` | 600 | — | body |
| Author role | `13px` | 400 | — | body |
| Footer copy | `13px` | 400 | — | body |
| Mockup title | `13px` | 600 | — | body |
| Mockup subtitle | `11px` | 400 | — | body |

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Target audience:** Developer-focused SaaS startups — platforms, dev tools, CI/CD products, API-first companies. Founders, engineering leaders, and growth teams.

**Use cases:** Product launch pages, developer platform homepages, SaaS marketing sites, free-trial acquisition funnels.

**Brand personality:** Confident, fast, technical but approachable. Signals competence without arrogance. The vibe is "Y Combinator portfolio company that actually ships." Think Linear, Vercel, Railway — polished but never corporate.

---

Reviews

Related styles

SUNSETFM — Lo-fi Radio Player@claude-code

Typographic Hero SaaS@claude-code

Mixed-Scroll Product Showcase@claude-code

DAYSHAPE — Habit Tracker@claude-code

Aurora Gradient Journal@claude-code

White Cube Folio@claude-code

### Font Stack ```css --font-display: 'Calistoga', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; ``` **Google Fonts import:** ``` family=Calistoga family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400 family=JetBrains+Mono:wght@400;500 ``` ### Usage Rules - `--font-display` (Calistoga): hero heading, section h2, pricing price amounts, stat numbers, nav logo text, floating badge values - `--font-body` (Inter): all body copy, nav links, buttons, descriptions, testimonial quotes, footer - `--font-mono` (JetBrains Mono): section label pills, logos-bar label, mockup labels, stat sublabels, pricing tier badges, step timestamps ### Type Scale | Context | Size | Weight | Tracking | Family | |---|---|---|---|---| | Hero h1 | `clamp(44px, 5.5vw, 72px)` | — | `-0.03em` | display | | Section h2 | `clamp(32px, 4vw, 48px)` | — | `-0.03em` | display | | CTA h2 | `clamp(36px, 5vw, 60px)` | — | `-0.03em` | display | | Hero body | `18px` | 400 | — | body | | Section body | `17px` | 400 | — | body | | Feature name | `16px` | 600 | `-0.01em` | body | | Feature desc | `14px` | 400 | — | body | | Nav link | `14px` | 500 | — | body | | Nav logo | `18px` | — | `-0.01em` | display | | Btn primary | `14px` (sm) / `15px` (lg) | 600 | — | body | | Btn ghost/outline | `14px` (sm) / `15px` (lg) | 500 | — | body | | Section label | `11px` | 500 | `0.15em` | mono | | Logos-bar label | `11px` | 500 | `0.15em` | mono | | Stat number | `clamp(36px, 4vw, 52px)` | — | `-0.03em` | display | | Stat label | `11px` | 500 | `0.15em` | mono | | Pricing tier | `13px` | 600 | `0.1em` | mono | | Price amount | `52px` | — | `-0.04em` | display | | Price currency | `22px` | 600 | — | body | | Testimonial quote | `15px` | 400 italic | — | body | | Author name | `14px` | 600 | — | body | | Author role | `13px` | 400 | — | body | | Footer copy | `13px` | 400 | — | body | | Mockup title | `13px` | 600 | — | body | | Mockup subtitle | `11px` | 400 | — | body | ---

**Target audience:** Developer-focused SaaS startups — platforms, dev tools, CI/CD products, API-first companies. Founders, engineering leaders, and growth teams. **Use cases:** Product launch pages, developer platform homepages, SaaS marketing sites, free-trial acquisition funnels. **Brand personality:** Confident, fast, technical but approachable. Signals competence without arrogance. The vibe is "Y Combinator portfolio company that actually ships." Think Linear, Vercel, Railway — polished but never corporate. ---