Design Systems

Apply and customize visual design systems to give your folios consistent, professional styling.

What Are Design Systems?

LiveFolio's design system feature provides curated visual themes that control every aspect of a folio's appearance. Instead of writing CSS from scratch, you select a theme, palette, typography pair, and optional custom colors.

Design systems are stored as structured preferences on each project and can be accessed by AI agents via MCP to ensure visual consistency across edits.

Design System Components

Theme Presets

Theme	Style
Warm Editorial	Elegant paper-ivory feel with classical borders and sepia margins
Premium SaaS Deck	Modern pitch aesthetic with sharp grids and tech-driven badges
Glassmorphic Quartz	Dark frosted interface with glowing borders and rich gradients
Retro Console	Dark terminal style with neon amber monospace accents

Color Palettes

Palette	Primary Colors
Honey Amber	Warm ivory background (`#FAF8F5`), amber accent (`#D97706`)
Cobalt Ocean	Slate tint background (`#F8FAFC`), deep cobalt accent (`#1D4ED8`)
Quartz Rose	Rose blush background (`#FFFDFB`), rose crimson accent (`#BE185D`)
Sage Forest	Pale sage background (`#F4F6F2`), forest green accent (`#15803D`)
Clay Canyon	Sand cream background (`#FCFAF7`), terracotta accent (`#C2410C`)
Night Emerald	Deep obsidian background (`#090D16`), emerald accent (`#10B981`)

Typography Pairs

Pair	Headers	Body
Lora & Inter	Lora (Classic Serif)	Inter (Clean Sans-Serif)
Outfit & Roboto Mono	Outfit (Bold Geometric)	Roboto Mono (Tech)
Space Grotesk & Plus Jakarta Sans	Space Grotesk (Editorial)	Plus Jakarta Sans (Curved)
Playfair Display & Georgia	Playfair (High-Contrast Serif)	Georgia (Standard Editorial)

Custom Colors

You can override any palette with custom hex colors for:

Primary — main action color (buttons, links, highlights)
Secondary — supporting elements
Accent — subtle highlights and badges

External Libraries

Design systems can declare approved libraries:

Tailwind CSS Core — cdn.tailwindcss.com
Chart.js — interactive charts
Canvas Confetti — celebration effects
Lucide Icons — icon library

Using Design Systems

In the Studio

Open a folio in the studio
Click the design system panel
Select theme, palette, and typography
Optionally add custom colors and guidelines
Publish — the design system preferences are saved with the folio

Via MCP

When creating or updating a folio via MCP, pass design_preferences:

{
  "design_preferences": {
    "theme": "Premium SaaS Deck",
    "typography": "Outfit & Roboto Mono",
    "palette": "Cobalt Ocean",
    "customColors": {
      "primary": "#4F46E5",
      "accent": "#10B981"
    },
    "libraries": ["Tailwind CSS Core", "Chart.js Summary Visuals"]
  }
}

Getting the Active Design System

Use get_active_design_system (MCP) to retrieve the current design specifications for any project. This returns a 9-section design document covering theme, palette, typography, elevation, grid, animations, mode-specific layouts, approved libraries, and anti-AI-slop guidelines.

Custom Guidelines

Add freeform customGuidelines text to enforce project-specific rules:

"Use HSL custom properties for all colors. No inline styles. All buttons must have hover transitions."

These guidelines appear in the design system document and are respected by AI agents when editing folios.