Skip to content
Launchfolio

Style Guide

Reference for typography, colors, buttons, cards, and form elements used throughout Launchfolio.

Typography

Heading 1 — Launchfolio

Heading 2 — Section title

Heading 3 — Card title

Heading 4 — Subsection

Body text — Launchfolio uses Inter for UI copy with comfortable line height for long-form reading.

Monospace — JetBrains Mono for code snippets.

Gradient text accent

Buttons

Badges

Default Accent Outline

Cards

Default card

Soft shadow, rounded corners, subtle gradient background.

Hover card

Elevated shadow on hover for interactive elements.

Forms

Contact form

Static form UI — connect to Formspree, Netlify Forms, or your preferred service in site.ts. See docs/customization.md for setup.

Newsletter form

Static UI — connect to Buttondown, ConvertKit, or your provider in site.ts.

Colors & spacing

Surface
Elevated
Muted
Accent

Design tokens live in src/styles/global.css and tailwind.config.mjs. Toggle dark mode with the header control to preview both themes.

Color presets

Switch the accent palette by setting themePreset in src/config/site.ts. Click a preset to preview it on this page.