Style

1. GLASSMORPHISM

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:

• Card fill: solid color at 10% opacity
• Effect: Background Blur 16px
• Stroke: white, 25% opacity, 1px inside
• Corner radius: 16

2. NEUBRUTALISM

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:

• Fill: solid saturated color or white
• Stroke: black #000000, 2–3px outside
• Drop Shadow: X=4 Y=4 Blur=0 Color=#000000

3. MINIMAL / SWISS

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:

• Fill: pure white
• Stroke: #E2E8F0, 1px inside
• Drop Shadow: X=0 Y=1 Blur=3 Spread=0 Color=#000000 Opacity=8%

4. DARK PREMIUM

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:

• Frame background: #0A0A0A
• Card fill: #141414
• Stroke: white at 8% opacity, 1px inside
• Inner Shadow + Drop Shadow combined

5. CLAYMORPHISM

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:

• Fill: pastel color at 100% opacity
• Stroke: black 8% opacity, 3px inside
• Drop Shadow Y=8 Blur=16 Color=black 12%
• Inner Shadow Y=-4 Blur=8 Color=black 10% + Inner Shadow Y=4 Blur=8 Color=white 60%

6. SOFT / NEUMORPHISM

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:

• Fill: same as background (#E8ECEF)
• Drop Shadow X=-5 Y=-5 Blur=15 Color=white 80%
• Drop Shadow X=5 Y=5 Blur=15 Color=black 12%
• No stroke

7. BOLD / EXPRESSIVE

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:

• Fill: solid color at 100% opacity
• No complex effects — composition does the work
• Heading text: 64–80px weight 700+

8. ORGANIC / BIOPHILIC

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:

• Fill: beige/cream
• Stroke: #E8DDD0, 1px inside
• Drop Shadow Y=8 Blur=32 Color=black 6%
• Corner radius: 24

9. RETRO / Y2K

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:

• Fill: linear gradient of 2–3 saturated colors
• Drop Shadow with color (not black) — glow effect
• Stroke with gradient if possible

10. CYBERPUNK / HUD

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:

• Fill: black with 5% accent color opacity
• Stroke: cyan #00FFFF at 40% opacity, 1px
• Drop Shadow: cyan color, not black — 0 0 10px

How to apply the style in designs

Once the user picks a style, ALWAYS apply it when using figma_execute:

1. Cards and containers → use the style's fill, stroke, corner radius, and shadow values
2. Typography → load the style font with figma.loadFontAsync() before creating text
3. Colors → use the style's base palette for backgrounds, text, and accents
4. Spacing → respect the padding and gaps defined by the style
5. If the file has tokens → map existing tokens to the style values (tokens take priority)

Confirmation to user

When 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].

Custom 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?