Acd Playful Figma Design

---
name: acd-playful-figma-design
description: Reference DESIGN.md for multi-color, rounded, illustration-friendly SaaS. Use when building UI components, applying design tokens, or implementing visual styles for playful figma.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, playful, claude-design]
---

# Figma — Playful Color Design Mode

You are an expert in the Figma — Playful Color aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for multi-color, rounded, illustration-friendly SaaS.

## 1. Visual Theme & Atmosphere

Playful color. The brand palette itself is the identity. Multiple hues coexist. Rounded corners, illustrated accents, friendly microcopy. Approachable for consumer and prosumer alike.

Mood: welcoming, expressive, generous.

## 2. Color Palette & Roles

```
--bg:              #ffffff
--bg-alt:          #fafafa
--text:            #0f0f14
--text-muted:      #6e6e78
--border:          #e5e5ea

/* brand prism — all first-class */
--brand-green:     #0acf83
--brand-orange:    #f24e1e
--brand-purple:    #a259ff
--brand-red:       #ff7262
--brand-blue:      #1abcfe

--accent-default:  var(--brand-purple)
```

Rule: any of the five brand hues is valid as an accent. Use one per page section, rotate across the site.

## 3. Typography Rules

- **Headlines:** `Whyte Inktrap`, fallback `PP Editorial New`, weight 500, tight tracking.
- **Body:** `Inter`, weight 400, 16px.
- **UI:** Inter, weight 500.
- **Mono:** `Söhne Mono`.

Scale: 13 / 15 / 17 / 20 / 24 / 32 / 44 / 64 / 88.

## 4. Component Stylings

**Buttons**
- Primary: brand-hue fill, white text, radius 8px, padding 10/18, weight 500.
- Hover: 10% darker fill, no scale.
- Secondary: 1.5px brand-hue border, brand-hue text.

**Cards**
- White fill, 1px `--border`, radius 12px, padding 24.
- Hover: `0 8px 24px rgba(15, 15, 20, 0.08)` shadow.

**Illustrations**
- Flat vector, 2–3 brand hues per illustration.
- Simple geometric shapes (circle, rounded square, blob).
- Avoid photorealism; avoid gradients that aren't brand hues.

**Inputs**
- 1.5px `--border`, radius 8px, padding 10/14. Focus: 2px brand-hue ring.

## 5. Layout Principles

- 1280px max, 32px gutter on desktop.
- 8px base unit.
- Sections alternate tinted backgrounds (10% opacity of brand hues).

## 6. Depth & Elevation

Soft shadows allowed on cards. Radius is generous (12–24px on cards, 999 on pills). No neumorphism.

## 7. Do's and Don'ts

**Do**
- Rotate accent hue across sections.
- Use illustrations that reinforce the brand.
- Write microcopy that sounds like a helpful friend.

**Don't**
- Use only one brand hue across the entire page.
- Sharp 0–4px radii (too cold).
- Dark mode as the default.

## 8. Responsive Behavior

- Sections stack gracefully below 768px.
- Illustrations center and scale to 50% width.
- Headlines scale 88 → 32 on mobile.

## 9. Agent Prompt Guide

Bias: five-color brand prism rotated across sections, 8–16px radii, soft shadows, illustrations in flat vector, friendly copy.

Reject: single monochrome palette, 0px radius, photorealistic imagery, dark-by-default layouts.

## When to Use This Mode

- When user references **figma** or the **playful** family as inspiration
- When building UI in the playful aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic