Back to gallery
shadcn CSS ↓
Prompt Kit 4 motifs · plaintext · click to copy
native
Browser Studio
Create a B2B customer-success workspace for an account manager. The screen should show relationship health, an attention queue, recent activity, next actions, lightweight data display, and one quiet empty state. Use realistic product copy and make the screen feel like a complete product workspace, not a landing page.

Design system: Lilac Carnival
Accent: #FA7D52
Ink: #1B1830
Surface: #F4EAFE
Muted: #676278
Display font: "Space Grotesk", sans-serif
Body font: Inter, sans-serif
Tags: playful, display, violet
Theme description: A playful display theme — coral on violet-tinted lilac, opinionated and expressive.
Rules:
- Use the design system tokens as the source of truth for color and typography.
- Do not invent a new palette or unrelated font personality.
- Motif prompts guide composition, metaphor, illustration, and material language.
- The design-system name above only identifies where the tokens came from. Never use that company's name, logo, wordmark, or slogan in the screen — invent a neutral fictional product name and render its mark as plain styled text or a simple geometric shape.

Motif pack: Browser Studio
Design with a browser-studio motif. Preserve the theme tokens, then use spaces, pinned notes, tab-like labels, and spatial panels to make the customer-success workspace expressive. Keep the result practical and scannable, with playfulness contained in layout details and small illustration marks.

Adopt:
- Use space-like panels for account groups, recent activity, and next actions.
- Use pinned notes and tab-like labels for urgent relationship context.

Avoid:
- Avoid generic browser chrome copied literally from a real browser.
- Avoid playful decoration that makes B2B account work feel unserious.
metaphor
Rooms And Tabs
Create a B2B customer-success workspace for an account manager. The screen should show relationship health, an attention queue, recent activity, next actions, lightweight data display, and one quiet empty state. Use realistic product copy and make the screen feel like a complete product workspace, not a landing page.

Design system: Lilac Carnival
Accent: #FA7D52
Ink: #1B1830
Surface: #F4EAFE
Muted: #676278
Display font: "Space Grotesk", sans-serif
Body font: Inter, sans-serif
Tags: playful, display, violet
Theme description: A playful display theme — coral on violet-tinted lilac, opinionated and expressive.
Rules:
- Use the design system tokens as the source of truth for color and typography.
- Do not invent a new palette or unrelated font personality.
- Motif prompts guide composition, metaphor, illustration, and material language.
- The design-system name above only identifies where the tokens came from. Never use that company's name, logo, wordmark, or slogan in the screen — invent a neutral fictional product name and render its mark as plain styled text or a simple geometric shape.

Motif pack: Rooms And Tabs
Design with rooms, tabs, and easel notes as the organizing metaphor. Keep theme tokens fixed. Use room-like sections for account groups, tab anchors for context, and movable note cards for next actions. The screen should feel spatial and expressive without becoming chaotic.

Adopt:
- Use room-like sections for account groups and tab-like anchors for context.
- Use easel-note cards for next actions, recent signals, and empty states.

Avoid:
- Avoid a plain sidebar-and-table layout that erases the spatial metaphor.
- Avoid chaotic overlapping windows or collage effects.
composition breaker
No-Sidebar Browser
Create a B2B customer-success workspace for an account manager. The screen should show relationship health, an attention queue, recent activity, next actions, lightweight data display, and one quiet empty state. Use realistic product copy and make the screen feel like a complete product workspace, not a landing page.

Design system: Lilac Carnival
Accent: #FA7D52
Ink: #1B1830
Surface: #F4EAFE
Muted: #676278
Display font: "Space Grotesk", sans-serif
Body font: Inter, sans-serif
Tags: playful, display, violet
Theme description: A playful display theme — coral on violet-tinted lilac, opinionated and expressive.
Rules:
- Use the design system tokens as the source of truth for color and typography.
- Do not invent a new palette or unrelated font personality.
- Motif prompts guide composition, metaphor, illustration, and material language.
- The design-system name above only identifies where the tokens came from. Never use that company's name, logo, wordmark, or slogan in the screen — invent a neutral fictional product name and render its mark as plain styled text or a simple geometric shape.

Motif pack: No-Sidebar Browser
Design as a spatial customer-success canvas. Preserve theme tokens exactly. Use floating stacks, context pins, tabbed account groups, and spatial arrows. Do not use a standard admin sidebar, top KPI strip, or literal browser chrome. Make the composition expressive while keeping every element editable and readable.

Adopt:
- Use a spatial canvas with floating account groups and context pins.
- Use a compact stack for urgent items instead of a wide KPI header.

Avoid:
- Avoid standard left sidebar navigation, top KPI strips, and literal browser address bars.
- Avoid overlapping cards that harm readability or conversion into editable components.
illustrative
Sticker Sheets
Create a B2B customer-success workspace for an account manager. The screen should show relationship health, an attention queue, recent activity, next actions, lightweight data display, and one quiet empty state. Use realistic product copy and make the screen feel like a complete product workspace, not a landing page.

Design system: Lilac Carnival
Accent: #FA7D52
Ink: #1B1830
Surface: #F4EAFE
Muted: #676278
Display font: "Space Grotesk", sans-serif
Body font: Inter, sans-serif
Tags: playful, display, violet
Theme description: A playful display theme — coral on violet-tinted lilac, opinionated and expressive.
Rules:
- Use the design system tokens as the source of truth for color and typography.
- Do not invent a new palette or unrelated font personality.
- Motif prompts guide composition, metaphor, illustration, and material language.
- The design-system name above only identifies where the tokens came from. Never use that company's name, logo, wordmark, or slogan in the screen — invent a neutral fictional product name and render its mark as plain styled text or a simple geometric shape.

Motif pack: Sticker Sheets
Design with sticker sheets, soft badges, space labels, pinned stickers, and expressive state icons. Keep the theme tokens exact. Use illustration to make account risk, renewal, expansion, quiet state, and next action easier to remember. Do not let the motif overpower the workspace.

Adopt:
- Use soft stickers to mark account risk, expansion, renewal, and quiet states.
- Use space labels and pinned badges to organize customer groups.

Avoid:
- Avoid large playful illustrations that overtake the B2B workflow.
- Avoid decorative stickers that do not carry account meaning.