PLAYBOOK · PRESETS
Design Presets
Copyable design systems your agent can apply to any project instantly.
DESIGN.MD HUB
Copy a whole design system into your agent
Each preset is a copy-ready design.md block. Paste it before a prompt and the agent will build to that system.
Acid Terminal
Dark · dev-tool
Manrope
JetBrains Mono
bg
surface
border
text
accent
design.md
# Acid Terminal — design.md
theme: dark
fonts: { display: Manrope, mono: JetBrains Mono }
color:
bg: “#0A0A0B” surface: “#141417”
border: “#2A2A30” text: “#ECECEE”
muted: “#9A9AA3” accent: “#C4F04C”
radius: { card: 16, control: 10, pill: 999 }
space: [4, 8, 12, 16, 24, 32, 48, 64]
rules:
- one accent, used sparingly
- mono for code, labels, numbers
- 1px hairline borders, no heavy shadows
Warm Editorial
Light · magazine
Source Serif 4
Inter
paper
raise
line
ink
accent
design.md
# Warm Editorial — design.md
theme: light
fonts: { display: Source Serif 4, body: Inter }
color:
paper: “#F7F4EE” raise: “#EFEAE0”
line: “#E2DCD0” ink: “#1A1714”
muted: “#6F6658” accent: “#B5481F”
radius: { card: 6, control: 6, pill: 999 }
space: [6, 12, 20, 32, 48, 72]
rules:
- serif display, generous line-height
- long measure, ~68ch body width
- rules and small caps over boxes
Clean SaaS
Light · product
Manrope
Inter
bg
surface
border
ink
accent
design.md
# Clean SaaS — design.md
theme: light
fonts: { display: Manrope, body: Inter }
color:
bg: “#FFFFFF” surface: “#F6F8FB”
border: “#E4E9F0” ink: “#0B1220”
muted: “#5B6577” accent: “#2D6BFF”
radius: { card: 14, control: 10, pill: 999 }
space: [4, 8, 16, 24, 40, 64, 96]
rules:
- soft tinted shadows, never pure grey
- blue accent on CTAs and links only
- cards on a faint surface tint
Neo Brutalist
Loud · punchy
Manrope
JetBrains Mono
paper
ink
accent
alert
line
design.md
# Neo Brutalist — design.md
theme: light
fonts: { display: Manrope (800), mono: JetBrains Mono }
color:
paper: “#FFFFFF” ink: “#0A0A0A”
accent: “#FFE600” alert: “#FF3B30”
radius: { card: 0, control: 0, pill: 0 }
border: 2px solid #0A0A0A
shadow: 6px 6px 0 #0A0A0A
rules:
- hard edges, offset block shadows
- oversized weights, tight tracking
- high-contrast, no gradients
PROMPT LIBRARY
40 prompts to apply & remix presets
$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes
live preview
Design PresetsBeginner~100 credits
Apply a design.md
Paste a system, build to it.
Here is a design.md. Apply its colors, fonts, radii, and spacing as project styles, then rebuild this section to match it exactly — surfaces, borders, type scale, and spacing. Create reusable styles rather than hardcoding any values.
Qo.
live preview
Design PresetsBeginner~50 credits
Switch the type system
Re-skin all typography.
Switch the site typography to a serif display paired with a clean sans body. Keep the existing sizes and spacing, rebind every text layer to the right style, and make sure headings and body still read as a coherent hierarchy.
live preview
Design PresetsIntermediate~150 credits
Re-theme to a new palette
One-prompt recolor.
Re-theme the site to a warm editorial palette — cream paper, ink text, and a terracotta accent — using color styles rather than hardcoded values so it can be changed again later. Keep contrast accessible and leave imagery untouched.
live preview
Design PresetsIntermediate~150 credits
Neo-brutalist makeover
A bold, hard-edged restyle.
Restyle this page neo-brutalist: hard 90-degree corners, 2px solid black borders, offset block shadows, oversized tight-tracked headings, and no gradients. Keep the content and structure, just change the visual language, and keep it readable.
live preview
Design PresetsIntermediate~100 credits
Soft SaaS preset
A clean product look.
Apply a clean SaaS preset: white surfaces on a faint tinted background, soft shadows that are never pure grey, rounded cards, and a single blue accent reserved for CTAs and links. Keep spacing generous and the hierarchy calm.
$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes
live preview
Design PresetsAdvanced~150 credits
Extract a design.md
Reverse a system from a page.
Analyze this page and output a design.md that captures its color tokens, font families and sizes, radii, spacing scale, and a few usage rules. Make it precise enough that another agent could rebuild a matching page from it alone.
live preview
Design PresetsBeginner~100 credits
Dark dev-tool preset
A terminal aesthetic.
Apply a dark dev-tool preset: a zinc off-black background, one lime accent used sparingly, monospace for code, labels, and numbers, and 1px hairline borders instead of heavy shadows. Create the styles so the look is consistent everywhere.
live preview
Design PresetsIntermediate~100 credits
Generate color styles
Build a token set.
Create a full set of color styles from this palette — background, surface, border, text, muted, and accent, each with a light and dark value — and apply them across the page so nothing uses a hardcoded color anymore.
Aa.
live preview
Design PresetsIntermediate~100 credits
Build a text-style scale
A reusable type system.
Create text styles for H1 through H4, body, and caption from this scale, with responsive sizes per breakpoint, and bind every text layer on the page to the correct one. Keep no more than six styles so the hierarchy stays disciplined.
live preview
Design PresetsAdvanced~200 credits
Two themes, one toggle
Light and dark presets.
Build both a light and a dark preset as theme-aware color styles, then wire a toggle in the nav that switches the whole site between them with a smooth transition. Verify contrast in both modes and persist the choice across pages.
live preview
Design PresetsIntermediate~100 credits
Remix the accent
Try a new accent safely.
Swap the accent color to a vivid coral everywhere it is currently used — buttons, links, highlights — by editing the accent color style only. Leave every neutral and intentionally static color untouched, and check contrast on the new accent.
live preview
Design PresetsBeginner~50 credits
Tighten spacing tokens
A consistent spatial rhythm.
Define a spacing scale (4, 8, 12, 16, 24, 32, 48, 64) and apply it so every gap and padding on this page snaps to a value on the scale. Remove one-off spacing values and keep the visual rhythm even between sections.
Tg.
live preview
Design PresetsAdvanced~150 credits
Variable font setup
Fluid weight and width.
Set up a variable font with weight and optical-size axes and use it for the headings, tuning the weight responsively so big headlines feel tighter and small ones stay legible. Keep the body on a steady weight and fall back gracefully.
live preview
Design PresetsIntermediate~150 credits
Glass + gradient preset
A premium frosted look.
Apply a glassmorphism preset: frosted panels with 1px inner borders and subtle inner shadows over an animated mesh-gradient background. Keep all text fully legible, control the blur for Safari performance, and use it only where elevation helps.
live preview
Design PresetsBeginner~100 credits
Radii + shadow system
Concentric and consistent.
Define a radius and shadow system and apply it so cards, buttons, and inputs share one consistent scale, with nested elements using a smaller radius so corners stay concentric. Tint shadows to the background rather than using pure black.
live preview
Design PresetsAdvanced~200 credits
Six style explorations
Branch the brand.
Create a design page with six distinct style presets applied to this same hero — vary the type, color, surface, and treatment so they feel genuinely different — while keeping the content identical so they're easy to compare side by side.
Tg.
live preview
Design PresetsAdvanced~300 credits
Editorial Magazine Preset
Apply a high-contrast editorial type and layout system sitewide
Re-theme the whole site into an editorial magazine preset. Create a serif display text style for headlines and a clean sans for body, with a dramatic 5-step type scale. Build color styles for ink black, paper cream, and one accent red as variables. Restructure hero and article sections into an asymmetric two-column grid with generous margins. Set distinct desktop, tablet, and phone breakpoints so columns collapse gracefully. Add staggered fade-up reveals on scroll, and respect prefers-reduced-motion by disabling them.
live preview
Design PresetsAdvanced~250 credits
Spacing Token Generator
Generate a consistent spacing scale and apply it across sections
Generate a complete spacing token system and apply it everywhere. Create numeric variables for an 8-point scale from 4 up to 96, then audit every section, stack, and frame and rebind their padding and gaps to the nearest token. Replace one-off pixel values so spacing reads consistently. Verify the rhythm holds at desktop, tablet, and phone breakpoints, tightening gaps proportionally on smaller screens. Report which elements you changed and flag any that needed manual judgement.
live preview
Design PresetsAdvanced~280 credits
Brand Palette From Logo
Derive a full color-style palette from an uploaded brand logo
Look at the brand logo in the project assets and derive a complete palette from it. Extract two or three dominant hues, then build color styles for primary, secondary, accent, plus neutral surface and text tints with proper light and dark steps. Save each as a variable and apply them to buttons, links, backgrounds, and headings sitewide. Ensure text on every background passes contrast. Create both a default and a tinted-surface variant so I can preview the palette in context.
$ npx @framer/agent
✓ connected to canvas
build a hero, dark, one accent
generating nodes
live preview
Design PresetsAdvanced~320 credits
Retro Terminal Theme
Convert the site into a green-on-black monospace terminal aesthetic
Convert the entire site into a retro terminal preset. Set a monospace variable font as the global text style, create color styles for phosphor green text, amber accent, and near-black background, and bind them as variables. Add a subtle scanline overlay and a blinking cursor effect on the primary headline. Restructure buttons into bracketed command-style labels. Keep all breakpoints functional and ensure the scanline and cursor animation disable under prefers-reduced-motion for accessibility.
live preview
Design PresetsIntermediate~250 credits
Pastel Memphis Preset
Apply playful pastel colors, shapes, and bold geometry sitewide
Re-theme the site into a playful pastel Memphis preset. Build color styles for soft pink, mint, sky, and butter yellow as variables, plus a charcoal for text. Add decorative geometric shapes, squiggles, and dotted patterns as background accents in hero and feature sections. Use a rounded geometric sans text style with bold weights. Increase border radii and add chunky offset shadows. Confirm the decorations reflow without overlapping content at tablet and phone breakpoints.
$ npx @framer/agent
✓ connected to canvas
add a CMS blog
generating nodes
live preview
Design PresetsAdvanced~300 credits
Theme Variable Audit
Find hardcoded colors and migrate them to shared variables
Audit the project for hardcoded colors and fonts that bypass the design system. Scan every node, list each raw hex value and inline font, then migrate them to the nearest existing color or text style, creating new shared variables only when no match exists. Consolidate near-duplicate colors into a single token. Leave the visual result unchanged while making the theme fully variable-driven. Output a summary table of what was migrated and any duplicates you merged.
live preview
Design PresetsAdvanced~320 credits
Luxury Gold Preset
Dress the site in deep tones, gold accents, and refined type
Apply a luxury preset across the site. Create color styles for deep charcoal, off-black, and a metallic gold accent saved as variables, with restrained neutral surfaces. Set an elegant high-contrast serif display style for headings and a fine sans for body, with increased letter-spacing on uppercase labels. Add thin gold dividers and subtle hover lifts on cards. Tune the type scale and spacing to feel spacious. Verify contrast and that the refined spacing holds across all breakpoints.
Qo.
live preview
Design PresetsAdvanced~260 credits
Type Scale Modular Ratio
Rebuild the heading scale on a strict modular ratio
Rebuild the typographic scale using a strict modular ratio. Pick a 1.25 major-third ratio from a base body size and generate text styles for six steps from caption through display, each computed off the previous. Apply them to every heading, paragraph, and label so sizing is mathematically consistent. Add fluid clamping so type scales smoothly between phone and desktop breakpoints. Keep line-height proportional per step. Report the final size for each level and where each is used.
live preview
Design PresetsAdvanced~340 credits
Cyberpunk Neon Preset
Switch to dark surfaces with electric neon glows and gradients
Re-theme the site into a cyberpunk neon preset. Build color styles for near-black surfaces with electric cyan and magenta accents as variables, plus a violet gradient for hero backgrounds. Add glowing text shadows on headlines and neon outline hovers on buttons. Use a condensed geometric sans display style. Restructure the hero into a layered glass panel over the gradient. Keep glows performant, and ensure glow pulses pause under prefers-reduced-motion while contrast stays legible.
live preview
Design PresetsAdvanced~360 credits
Light And Dark Tokens
Build paired light and dark color tokens for instant theme swaps
Set up a paired light and dark token system. For every semantic role, surface, surface-raised, text, text-muted, border, and accent, create two color styles and wire them to variables that swap by theme. Apply the semantic tokens across all sections instead of literal colors. Add a theme toggle override that flips the variable set with a smooth transition. Verify both modes pass contrast and that no hardcoded colors remain. Summarize the token map you created.
live preview
Design PresetsAdvanced~300 credits
Swiss Grid System
Impose a strict 12-column Swiss grid across every page
Impose a strict Swiss-style grid system sitewide. Define a 12-column layout with consistent gutter and margin variables, then realign every section so content snaps to columns. Use a Helvetica-like sans text style with tight tracking and a clear three-level hierarchy. Favor left alignment, generous whitespace, and a single accent color. Set column counts to drop to 6 on tablet and stack on phone. Show me an overlay describing how each major section maps onto the grid.
live preview
Design PresetsIntermediate~240 credits
Shadow Elevation Scale
Create a layered shadow elevation system for cards and overlays
Create a cohesive elevation system and apply it consistently. Define five shadow levels from subtle resting to prominent overlay, each as a reusable style with calibrated blur, spread, and tinted color saved to variables. Assign appropriate levels to cards, dropdowns, modals, and sticky bars so depth reads intentionally. Pair each elevation with a matching hover lift. Ensure shadows look correct on both light and dark surfaces, and list which elements received which level.
live preview
Design PresetsIntermediate~230 credits
Warm Minimal Preset
Apply a calm warm-neutral minimal theme with airy spacing
Apply a warm minimal preset to the whole site. Build color styles for warm off-white, sand, and a muted terracotta accent as variables with a soft brown text color. Set a humanist sans for body and a slightly larger display style, both with relaxed line-height. Strip heavy borders and shadows in favor of generous whitespace and hairline dividers. Increase section padding for an airy feel. Confirm the calm spacing and contrast hold across desktop, tablet, and phone breakpoints.
live preview
Design PresetsAdvanced~400 credits
Variant Style Explorations
Generate several full theme directions as side-by-side variants
Generate four distinct full-theme directions so I can compare them. For each, create a complete set of color styles and a heading and body text style under a clear naming prefix, then duplicate the hero section and apply one theme per copy laid out side by side on a scratch frame. Vary palette mood, type pairing, and radii meaningfully between them. Keep all four pinned to the same content so the comparison is fair. Label each variant with its concept.
live preview
Design PresetsAdvanced~300 credits
Accessible Contrast Preset
Retune the palette so every text pairing passes WCAG AA
Retune the existing theme so every text and background pairing meets WCAG AA, and AAA for body where possible. Scan all color styles, compute contrast ratios against the surfaces they sit on, and adjust lightness on the offending tokens without shifting hue identity. Update link, button, and muted-text colors to pass in both default and hover states. Re-bind the corrected variables everywhere. Report the before and after ratio for each pairing you changed.
live preview
Design PresetsAdvanced~330 credits
Coastal Gradient Theme
Apply ocean mesh gradients with airy glass surfaces sitewide
Apply a coastal preset built on ocean tones. Create color styles for deep navy, teal, and seafoam plus a sand neutral as variables, and add a soft mesh gradient blending teal into navy for hero and CTA backgrounds. Layer frosted-glass panels with subtle blur over the gradient. Set a light airy sans text style. Add a gentle parallax drift on the gradient that disables under prefers-reduced-motion. Verify glass panels keep text legible across all breakpoints.
live preview
Design PresetsAdvanced~360 credits
Dashboard Data Preset
Theme the site as a dense analytics dashboard with stat tiles
Re-theme the project into an analytics dashboard preset. Build a neutral cool-gray palette with one signal accent and semantic success, warning, and danger color styles as variables. Set a compact tabular-friendly sans text style with a tight type scale. Restructure feature sections into a bento grid of stat tiles showing large numeric counters with labels and trend deltas. Add subtle count-up animation on scroll that respects prefers-reduced-motion. Keep tiles equal-height and reflow to a single column on phone.
live preview
Design PresetsAdvanced~280 credits
Brutalist Mono Preset
Strip styling to raw monospace, hard borders, and stark contrast
Apply a raw brutalist preset across the site. Set a single monospace text style for everything with an oversized display step, create stark black, white, and one alarm-orange color style as variables, and remove all border radii and shadows in favor of thick black borders. Left-align everything, expose a visible grid, and use plain underlined links. Keep layout deliberately blocky but functional at every breakpoint. Confirm tap targets stay usable on phone despite the stark styling.
live preview
Design PresetsAdvanced~380 credits
Seasonal Theme Switcher
Build four seasonal palettes selectable from one variable set
Build a seasonal theming system with one switchable variable set. Create four palettes, spring, summer, autumn, and winter, each as a coordinated group of surface, text, and accent color styles, then wire a single theme variable that swaps the whole set. Add a small selector override that cycles seasons with a smooth cross-fade. Apply the semantic tokens sitewide so switching is instant. Verify each season passes contrast and the cross-fade disables under prefers-reduced-motion.
live preview
Design PresetsAdvanced~300 credits
Fluid Responsive Tokens
Replace fixed type and spacing with clamp-based fluid tokens
Migrate the design system to fluid responsive tokens. Convert fixed heading sizes and key spacing values into clamp-based variables that scale smoothly between a phone minimum and desktop maximum, eliminating awkward jumps at breakpoints. Apply the fluid type styles to all headings and the fluid spacing to section padding. Keep body text within comfortable reading sizes. Test at several viewport widths and report the min, preferred, and max for each fluid token you created.
live preview
Design PresetsAdvanced~330 credits
Sunset Mesh Gradient
Apply a warm animated sunset mesh gradient as the hero theme
Apply a warm sunset mesh-gradient preset to the hero and primary sections. Create color styles for coral, amber, magenta, and deep plum as variables, then build a multi-stop mesh gradient that blends them, with a slow animated drift. Set a clean light sans display style in white over the gradient with a soft text shadow for legibility. Add glass CTA buttons. Ensure the drift animation pauses under prefers-reduced-motion and the gradient stays smooth on phone.
live preview
Design PresetsIntermediate~240 credits
Icon And Radii System
Standardize corner radii and icon sizing into shared tokens
Standardize corner radii and icon sizing into a token system. Create radius variables for small, medium, large, and pill, then audit every button, card, input, and image and rebind to the nearest token. Define icon-size variables for inline, button, and feature scales and apply them to all icons. Pair each radius level with its intended component role consistently. Verify the rounding and icon scale look balanced across breakpoints and summarize the tokens and their assignments.
live preview
Design PresetsAdvanced~280 credits
Monochrome Plus Accent
Reduce to a grayscale base with one disciplined accent color
Re-theme the site to a disciplined monochrome system with a single accent. Build a grayscale ramp of six neutral color styles from near-white to near-black as variables, then choose one vivid accent reserved strictly for primary actions, links, and key highlights. Strip color from every other element. Apply a clean sans with strong weight contrast for hierarchy. Ensure the accent never dilutes by appearing too often, and confirm contrast and accent placement read clearly across all breakpoints.
live preview
Design PresetsAdvanced~340 credits
Scroll Motion Preset
Add a cohesive scroll-reveal motion language across sections
Apply a cohesive scroll-motion preset to the whole site. Define motion tokens as variables for duration, easing, and stagger, then add consistent fade-up and slight-scale reveals to section headings, cards, and images as they enter the viewport, staggering children within each group. Add a subtle parallax on hero media. Keep timing uniform via the shared tokens so motion feels intentional, not random. Disable all reveals and parallax under prefers-reduced-motion and confirm performance stays smooth.