list_styles

List all available style presets. Each preset defines a complete visual language — colors, fonts, spacing, button treatments, card styles, shadows, typography, and animations — that is applied to all blocks in a composed page.

Annotations

Annotation	Value
readOnlyHint	true
destructiveHint	false
openWorldHint	false

Parameters

None.

Available Styles

Style ID	Name	Design Language	Best For
noir	Noir	Refined dark, layered shadows, pill buttons, spell.sh-inspired	SaaS, dev tools, portfolios, startups
editorial	Editorial	Generous whitespace, serif headings, sharp corners	Agencies, luxury, blogs, personal brands
bold	Bold	Vibrant gradients, big type, dramatic glow effects	Product launches, announcements, marketing
fun	Fun	Bright, bouncy, emoji-friendly, auto-confetti	Birthdays, events, invitations, meme pages

Return format

Returns each style preset with:

• ID — used in compose_page
• Name — human-readable label
• Description — the visual direction
• Fonts — heading and body font families
• Colors — primary, background, and text colors

Example

You: "What styles are available?"

Claude: Calls list_styles and presents the four preset options with their descriptions and color palettes.

You: "Use the dark style for my page"

Claude: Passes style: "noir" to compose_page.

Notes

• Styles use the Tailwind CSS CDN with custom configuration. Colors are mapped to semantic tokens (bg-primary, text-textMuted, etc.) so blocks automatically adapt to any style.
• Google Fonts are loaded automatically based on the style's font families.
• Each preset defines rich design tokens beyond colors — button styles, card treatments, shadow layers, typography scales, and animation behavior.
• You can combine any style with any set of blocks — they're fully interchangeable.
• If you need something beyond the presets, Claude can generate custom HTML with any design you describe. Styles are a shortcut, not a constraint.