YourSaaS

LaunchFst uses a config-driven design architecture: swap a single value in lib/config/site.ts and every page reflects the change automatically. No file hunting, no component editing.

Theme Presets

6 built-in color presets using OKLCH CSS variables:

Preset	Primary Hue	Best For
`teal`	200	SaaS, productivity, dev tools
`blue`	250	Enterprise, finance, trust
`purple`	285	Creative, AI, design tools
`orange`	45	Marketplaces, food, energy
`green`	155	Health, sustainability, finance
`rose`	350	Social, lifestyle, fashion

Switch theme with one line in lib/config/site.ts:

export const siteConfig = {
  theme: "purple", // "teal" | "blue" | "purple" | "orange" | "green" | "rose"
}

See Themes for the full CSS variables reference and how to create custom themes.

Landing Templates

5 top-level page templates. Set landingTemplate to switch:

Template	Value	Style
Classic	`classic`	Most flexible. Uses all `heroStyle`, `featuresLayout`, etc. options.
SaaS	`saas`	Full-featured: bento features, marquee testimonials, browser mockup, pricing, FAQ.
Startup	`startup`	Clean minimal: badge hero, trusted-by strip, numbered how-it-works, pricing.
DevTool	`devtool`	Terminal aesthetic: code tabs, stats bar, monospace font, Aurora headline.
Agency	`agency`	Portfolio focus: split hero, showcase grid, featured testimonial pull-quote.

design: { landingTemplate: "saas" }

Header Styles

5 header variants, all sticky with scroll-based blur/shadow effects:

Style	Value	Description
Default	`default`	Logo left, nav links center, CTA buttons right
Centered	`centered`	Logo centered, nav wraps around it
Minimal	`minimal`	Logo left, single CTA + hamburger on all screen sizes
Floating	`floating`	Detached pill floating below the top edge
Bordered	`bordered`	Full-width enterprise header with bottom border

All headers include: sticky positioning, mobile hamburger sheet, dynamic theme toggle, nav link filtering by feature flags.

Hero Styles

4 hero section layouts (used by the classic template):

Style	Value	Description
Centered	`centered`	Headline + CTAs centered, screenshot mockup below
Split	`split`	Text + CTAs on left, Safari/browser mockup on right
Video	`video`	Play button overlay with video modal
Product	`product`	Floating feature cards around a dashboard preview

Hero Backgrounds

6 animated background presets:

Background	Value	Description
Grid	`grid`	Subtle CSS grid lines fading from center
Dots	`dots`	Low-opacity dot pattern (`DotPattern` component)
Gradient	`gradient`	3 layered gradient color blurs
Particles	`particles`	Animated floating particles (`Particles` component)
Animated Grid	`animated-grid`	Moving grid squares (`AnimatedGridPattern` component)
Light Rays	`light-rays`	Radial light rays (`LightRays` component)

design: { heroBackground: "particles" }

Hero Headline Styles

5 text animation options for the hero headline highlight:

Style	Value	Effect
Gradient	`gradient`	Text gradient using primary colors
Aurora	`aurora`	Animated color-shifting aurora effect (`AuroraText`)
Typing	`typing`	Typewriter animation (`TypingAnimation`)
Word Rotate	`word-rotate`	Cycles through `headlineWords` array (`WordRotate`)
Plain	`plain`	No animation, standard text

Hero CTA Button Styles

5 button styles for the primary CTA:

Style	Value	Description
Glow	`glow`	Button with primary-color glow shadow (default)
Shimmer	`shimmer`	Magic UI ShimmerButton with animated shimmer
Outline	`outline`	Bordered button that fills on hover
Gradient	`gradient`	Gradient background with drop shadow
Pill	`pill`	Pill shape with circular arrow indicator

CTA Section Styles

5 bottom-of-page CTA section variants:

Style	Value	Description
Centered	`centered`	Full-width centered headline + button
Split	`split`	Text + checklist on left, stats card on right
Banner	`banner`	Primary-colored full-width banner
Card	`card`	Centered card with gradient border glow
Minimal	`minimal`	Simple inline text + link

Popular Plan Highlight Styles

4 styles for highlighting the recommended pricing tier:

Style	Value
Border Beam	`border-beam`
Shine	`shine`
Neon	`neon`
Glow	`glow`

Block Variants

33+ swappable section variants. See Blocks for the full list.

Section	Options
Hero	4 variants
Features	grid, asymmetric, bento, tabs
Testimonials	marquee, carousel, grid, featured
CTA	centered, split, banner, card, minimal
Hero Background	grid, dots, gradient, particles, animated-grid, light-rays
Dashboard Widgets	9 chart + stat variants

Magic UI Components

The following Magic UI / animated components are available in components/ui/:

Component	File	Used For
`ShimmerButton`	`shimmer-button.tsx`	CTA button variant
`AnimatedGradientText`	`animated-gradient-text.tsx`	Hero badge
`NumberTicker`	`number-ticker.tsx`	Animated counters
`BlurFade`	`blur-fade.tsx`	Scroll reveal animation
`BorderBeam`	`border-beam.tsx`	Popular pricing card border
`Marquee`	`marquee.tsx`	Logo cloud, testimonials
`AuroraText`	`aurora-text.tsx`	Hero headline variant
`Safari`	`safari.tsx`	Browser frame mockup
`WordRotate`	`word-rotate.tsx`	Hero rotating word
`TypingAnimation`	`typing-animation.tsx`	Hero typing animation
`ShineBorder`	`shine-border.tsx`	Pricing card highlight
`NeonGradientCard`	`neon-gradient-card.tsx`	Pricing card highlight
`PulsatingButton`	`pulsating-button.tsx`	CTA button variant
`AnimatedList`	`animated-list.tsx`	Feature list animation
`Meteors`	`meteors.tsx`	Background decoration
`Particles`	`particles.tsx`	Hero background
`AnimatedGridPattern`	`animated-grid-pattern.tsx`	Hero background
`LightRays`	`light-rays.tsx`	Hero background
`AnimatedThemeToggler`	`animated-theme-toggler.tsx`	View Transitions theme toggle
`ScrollProgress`	`scroll-progress.tsx`	Reading progress bar

Typography

Two fonts, configured via CSS variables — never use hardcoded font names:

--font-heading → Plus Jakarta Sans — headings, labels, card titles
--font-body → DM Sans — body text, UI copy

Apply via Tailwind: font-heading and font-body utility classes.

Do not use Inter, Roboto, or Arial — these are explicitly excluded from the design system.

Theme Toggle

Two styles for the dark/light mode toggle:

animated — Smooth circular reveal using the View Transitions API (AnimatedThemeToggler). Animates from the click point outward.
simple — Standard Sun/Moon icon swap (instant, no animation).

design: { themeToggle: "simple" } // or "animated"

Full Design Config Reference

// lib/config/site.ts
design: {
  landingTemplate: "classic",     // "classic" | "saas" | "startup" | "devtool" | "agency"
  heroStyle: "centered",          // "centered" | "split" | "video" | "product"
  headerStyle: "default",         // "default" | "centered" | "minimal" | "floating" | "bordered"
  heroBackground: "particles",    // "grid" | "dots" | "gradient" | "particles" | "animated-grid" | "light-rays"
  heroHeadline: "gradient",       // "gradient" | "aurora" | "typing" | "word-rotate" | "plain"
  heroCta: "shimmer",             // "glow" | "shimmer" | "outline" | "gradient" | "pill"
  heroScreenshot: "safari",       // "safari" | "browser" | "none"
  logoCloud: "marquee",           // "marquee" | "static" | "none"
  featuresLayout: "bento",        // "grid" | "asymmetric" | "bento" | "tabs"
  pricingPopular: "border-beam",  // "border-beam" | "shine" | "neon" | "glow"
  testimonials: "marquee",        // "marquee" | "carousel" | "grid" | "featured"
  sectionReveal: "blur-fade",     // "blur-fade" | "fade-up" | "none"
  ctaStyle: "banner",             // "centered" | "split" | "banner" | "card" | "minimal"
  themeToggle: "simple",          // "animated" | "simple"
}