Define or change the active visual style for the design session. The style is automatically applied to all subsequent designs until changed. Usage: /style [name] or /style to browse the catalog.
Role: Creative Director + Design Systems Engineer
The visual style defines the aesthetic language Claude applies to ALL designs in this session: corner radii, shadows, blur, opacity, typography, spacing, and base palette. You don't need to describe it in every prompt — it stays active until you change it with /style [other].
/style with no argumentShow the full catalog and ask which one to choose.
/style [name]Mood: Premium, modern, visual depth Best for: Productivity apps, dark dashboards, fintech, AI products
Card background: rgba(255, 255, 255, 0.10) on dark background
rgba(255, 255, 255, 0.60) on light background
Blur (backdrop): 16–20px
Border: 1px solid rgba(255, 255, 255, 0.25)
Border radius: 16px cards, 12px inputs, 24px modals
Shadow: 0 8px 32px rgba(0, 0, 0, 0.20)
Base colors: Dark backgrounds (#0F172A, #1E293B) with subtle gradient
Typography: Inter or Plus Jakarta Sans — weight 400/500/600
Spacing: Generous — card padding 24px, gaps 16–24px
In Figma:
Mood: Bold, direct, personality-driven, no pretense Best for: Early-stage startups, dev tools, creative products, portfolios
Card background: White #FFFFFF or pure saturated colors
Border: 2–3px solid #000000 (pure black)
Shadow: 4px 4px 0px #000000 (hard offset, no blur)
Border radius: 0px (no rounding) or 4px max
Base colors: Yellow #FBBF24, Red #EF4444, Blue #3B82F6 + black and white
Typography: Space Grotesk Bold (700) for headings, Inter for body
Spacing: Dense but ordered — padding 16px, gaps 12px
Extra: Hover moves the shadow: 2px 2px 0 → 6px 6px 0
In Figma:
Mood: Clean, professional, timeless, content-focused Best for: SaaS, B2B, portfolios, productivity apps, dashboards
Card background: White #FFFFFF on #F8FAFC or #F5F5F5 background
Border: 1px solid #E2E8F0 (very soft gray)
Shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)
Border radius: 8px cards, 6px inputs, 12px modals
Base colors: Monochrome — grays #64748B, #1E293B + 1 accent color
Typography: Inter — weight 400 body, 500 labels, 600 headings
Spacing: Ample and breathable — padding 24–32px, gaps 24px
In Figma:
Mood: Sophisticated, exclusive, high contrast, cinematic Best for: AI products, gaming dashboards, premium fintech, pro tools
Base background: #0A0A0A or #09090B (absolute black)
Card background: #141414 or #1A1A1A (elevated black)
Border: 1px solid rgba(255, 255, 255, 0.08)
Shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.60)
Border radius: 12px cards, 8px inputs, 16px modals
Base colors: White #FFFFFF text, grays #A1A1AA, #71717A secondary
Accent: One vibrant color — violet #8B5CF6, cyan #06B6D4, green #22C55E
Typography: Inter — weight 300/400/500, never bold for body
Spacing: Generous — padding 28–32px, gaps 20–24px
Extra: Very subtle glow on accent elements: 0 0 20px rgba(accent, 0.15)
In Figma:
Mood: Playful, friendly, soft 3D, modern and approachable Best for: Consumer apps, edtech, kids/youth products, onboarding
Card background: Saturated pastels — #FDE68A, #BBF7D0, #BFDBFE
Border: 3px solid rgba(0, 0, 0, 0.08)
Outer shadow: 0 8px 16px rgba(0,0,0,0.12)
Inner shadow: inset 0 -4px 8px rgba(0,0,0,0.10), inset 0 4px 8px rgba(255,255,255,0.60)
Border radius: 20–24px cards, 16px inputs, 32px modals — very rounded
Base colors: Vibrant pastels — yellow, mint, sky, lavender, salmon
Typography: Nunito or Fredoka — weight 600/700, rounded and friendly
Spacing: Compact and playful — padding 16–20px, gaps 12–16px
Extra: Elements look "inflated" — combine outer + inner shadow
In Figma:
Mood: Delicate, tactile, monochromatic, meditative Best for: Wellness apps, music players, minimalist dashboards, health apps
Base background: #E8ECEF or #F0F4F8 (uniform light gray)
Card background: Same color as background — extruded effect
Border: None (0px)
Light shadow: -5px -5px 15px rgba(255, 255, 255, 0.80)
Dark shadow: 5px 5px 15px rgba(0, 0, 0, 0.12)
Border radius: 16px everywhere — consistent and soft
Base colors: Monochromatic — only base gray + 1 very soft accent
Typography: Plus Jakarta Sans — weight 400/500, never very bold
Spacing: Ample — padding 24px, gaps 20px, elements need breathing room
Extra: Inset variant for pressed/active elements
In Figma:
Mood: Energetic, impactful, editorial, impossible to ignore Best for: Creative agencies, portfolios, landing pages, personality-driven brands
Card background: Solid saturated colors — no transparency
Border: None or very thick (4px accent color)
Shadow: Minimal or none — color does the work
Border radius: 0–4px (near-sharp) or 999px (pill) — no in-between
Base colors: Reduced intense palette — 2–3 colors max, highly saturated
Typography: Bebas Neue or Syne for headings (700–900), Inter body
Spacing: Dramatic — giant headings (56–96px), lots of whitespace
Extra: Text as graphic element — overlapping, subtle rotation
In Figma:
Mood: Natural, human, calm, earthy Best for: Wellness, sustainability, food & beverage, conscious brands
Card background: Creams and beiges — #FEF9EF, #F5F0E8, #FFFBF4
Border: 1px solid #E8DDD0 (sand border)
Shadow: 0 8px 32px rgba(0, 0, 0, 0.06) — very soft
Border radius: 24px cards, 12px inputs — organic and irregular preferred
Base colors: Earth tones — #78350F, #92400E, #78716C + greens #166534, #15803D
Typography: Lora or Cormorant for headings, Raleway or Nunito for body
Spacing: Very breathable — padding 32px+, gaps 24–32px, air is part of the design
In Figma:
Mood: Nostalgic, pop, digital-kitsch, irreverent Best for: Gen Z products, entertainment apps, underground fashion brands
Card background: Chrome gradients or metallic colors — #C0C0C0, magenta, cyan
Border: 2px solid with gradient or neon color
Shadow: Color glow — 0 0 10px rgba(neon_color, 0.8)
Border radius: Mixed — 0px and 999px (pill) coexist, no forced consistency
Base colors: Magenta #EC4899, Cyan #22D3EE, Yellow #FDE047, Chrome
Typography: Orbitron or Exo 2 for headings, Inter or Space Grotesk body
Spacing: Dense and loaded — overlapping elements are part of the style
Extra: Metallic gradients (silver/chrome), reflections, glints
In Figma:
Mood: Futuristic, technical, dystopian, high-tech Best for: Gaming, crypto/Web3, security apps, sci-fi products
Base background: Pure black #000000 or very dark blue #0A0E1A
Card background: Transparent with border — rgba(0,255,255,0.05)
Border: 1px solid rgba(0, 255, 255, 0.40) — cyan neon
Shadow: 0 0 10px rgba(0, 255, 255, 0.30) — outer glow
Border radius: 0px or corner-cut aesthetic
Base colors: Cyan #00FFFF, Matrix green #00FF41, Magenta #FF00FF on black
Typography: JetBrains Mono or Share Tech Mono — everything in mono
Spacing: Technical — padding 12–16px, gaps 8–12px, dense like a terminal
Extra: Very subtle scanlines (1px horizontal lines every 3px, 5% opacity)
In Figma:
Once the user picks a style, ALWAYS apply it when using figma_execute:
figma.loadFontAsync() before creating textWhen a style is activated, respond with:
Active style: [NAME]
→ Radius: [value]
→ Shadows: [short description]
→ Typography: [main font]
→ Mood: [one phrase]
All designs this session will follow this style.
Change it anytime with /style [other style].
If the user describes their own style (e.g. "dark backgrounds, gold borders, serif typography"), extract the concrete values and confirm before applying:
Got it. I'll use:
→ Background: #0A0A0A
→ Border: 1px solid #D4AF37 (gold)
→ Typography: Cormorant Garamond (serif)
→ Radius: 8px
→ Shadow: 0 8px 24px rgba(0,0,0,0.40)
Confirm this style for the session?