Recipes

Pre-configured themes that instantly transform your site for specific use cases.

What are Recipes?

Recipes are complete site configurations that apply a cohesive theme across your entire site. Each recipe includes customized header layout, footer layout, logo style, color palette, navigation structure, and more.

Usage

Apply a recipe when initializing a cloned project:

# Clone the template
git clone https://github.com/dpawelec84/sofondo-mostra.git my-project
cd my-project

# Apply a recipe
npm run init:recipe -- --recipe=corporate

This will update your site.ts configuration, global.css theme variables, and homepage content to match the selected recipe.

Available Recipes

Free

corporate

Nexus Corp

Professional business site with gradient-box logo, standard header, and 4-column grid footer.

--recipe=corporate
Premium

agency

Pixel Flow Agency

Creative agency with centered header layout and flex-sections footer.

--recipe=agency
Free

startup

Velocity Tech

Tech startup with text-only logo, standard header, and flex-row footer.

--recipe=startup
Premium

product-launch

Spark Product Launch

Product launch page with emoji logo and minimal centered footer.

--recipe=product-launch
Premium

app-download

Zenith App

App landing page with emoji logo and minimal centered footer.

--recipe=app-download
Free

nonprofit

Ocean Guardians

Non-profit with SVG logo, centered header, and 4-column grid footer with legal links.

--recipe=nonprofit

What Gets Configured

Each recipe configures the following options:

  • Site Name & Branding - Site name, name accent, tagline, and description
  • Logo Style - Logo mark type (text-only, icon-text, gradient-box) with optional emoji, SVG, or image
  • Header Layout - Standard, centered, or minimal navigation layout
  • Navigation Spacing - Normal or compact spacing for navigation items
  • CTA Button Shape - Rounded or pill-shaped call-to-action button
  • Footer Layout - Grid columns, flex row, flex sections, or minimal centered
  • Social Links - Social icons, initials, or text with configurable positioning
  • Legal Links - Privacy policy and terms links with optional bottom row display
  • Theme Variables - Complete color palette via CSS custom properties
  • Dark Mode - Optional dark theme with themed scrollbar

Recipe Comparison

Recipe Type Header Footer Logo Style
corporate Free Standard Grid 4-col Gradient box
agency Premium Centered Flex sections Icon + text
startup Free Standard Flex row Text only
product-launch Premium Standard Minimal centered Emoji
app-download Premium Standard Minimal centered Emoji
newsletter Premium Standard (compact) Minimal centered Icon + text
nonprofit Free Centered Grid 4-col SVG icon

Creating Custom Recipes

Add your own recipes in src/recipes/index.ts:

export const myRecipe: Recipe = {
  name: 'My Custom Theme',
  description: 'Description of my theme',
  siteName: 'My Site',
  siteNameAccent: 'Pro',
  tagline: 'Site tagline',

  headerLayout: 'centered',
  footerLayout: 'flex-row',
  logoMark: 'text-only',
  ctaShape: 'pill',
  navSpacing: 'normal',

  theme: {
    '--bg-light': '#fafafa',
    '--bg-card': '#ffffff',
    '--text-primary': '#1c1917',
    '--accent-primary': '#3b82f6',
    // ... other CSS variables
  },
}

Preview Recipes

Before applying a recipe, you can preview it in the Showcase section. Each showcase example demonstrates how the recipe will look when applied to your site.