Back to gallery
shadcn CSS ↓
Prompt Kit 4 motifs · plaintext · click to copy
native
Ledger Map
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: Indigo Ledger
Accent: #635BFF
Ink: #0A2540
Surface: #F6F9FC
Muted: #5D6F82
Display font: Inter, sans-serif
Body font: "DM Sans", sans-serif
Tags: crisp, sans, trust
Theme description: A crisp B2B financial theme — indigo on near-white, restrained and trustworthy.
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: Ledger Map
Design with a ledger-map motif. Keep the theme tokens exact, then use ledger entries, transaction rails, balances, and risk adjustments to make relationship health traceable. The workspace should feel crisp, trustworthy, and infrastructure-grade while still being easy for account managers to scan.

Adopt:
- Use ledger entries for account activity, health changes, and next actions.
- Use transaction rails to connect recent events to relationship outcomes.

Avoid:
- Avoid vague AI summary panels with no traceable evidence.
- Avoid overly playful finance metaphors that reduce trust.
metaphor
Transit Hub
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: Indigo Ledger
Accent: #635BFF
Ink: #0A2540
Surface: #F6F9FC
Muted: #5D6F82
Display font: Inter, sans-serif
Body font: "DM Sans", sans-serif
Tags: crisp, sans, trust
Theme description: A crisp B2B financial theme — indigo on near-white, restrained and trustworthy.
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: Transit Hub
Design with a transit-hub metaphor. Preserve the theme tokens and use route lines, transfer chips, arrival boards, delay markers, and station dots to organize customer-success work. Relationship health should feel like movement through a precise system, with next actions keeping accounts on track.

Adopt:
- Use route lines to connect account signals, owners, and next actions.
- Use arrival-board groupings for renewal timing, risk, and expansion readiness.

Avoid:
- Avoid map decoration that does not support workflow understanding.
- Avoid generic status badges that ignore movement and timing.
composition breaker
Flow Board
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: Indigo Ledger
Accent: #635BFF
Ink: #0A2540
Surface: #F6F9FC
Muted: #5D6F82
Display font: Inter, sans-serif
Body font: "DM Sans", sans-serif
Tags: crisp, sans, trust
Theme description: A crisp B2B financial theme — indigo on near-white, restrained and trustworthy.
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: Flow Board
Design as a flow board, not a generic dashboard. Use exact theme tokens. Organize customer-success work through account rails, settlement queues, traceable next actions, and precise small graphs. The composition should make relationship movement visible without relying on KPI-card conventions.

Adopt:
- Use account rails as the primary layout, with health and activity flowing across them.
- Use a settlement queue for attention items and owner follow-through.

Avoid:
- Avoid four KPIs and a generic transaction table as the main screen.
- Avoid decorative gradients or vague cards that reduce infrastructural clarity.
illustrative
Transaction Icons
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: Indigo Ledger
Accent: #635BFF
Ink: #0A2540
Surface: #F6F9FC
Muted: #5D6F82
Display font: Inter, sans-serif
Body font: "DM Sans", sans-serif
Tags: crisp, sans, trust
Theme description: A crisp B2B financial theme — indigo on near-white, restrained and trustworthy.
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: Transaction Icons
Design with transaction icons, receipt slips, rail glyphs, transfer arrows, and balance marks. Keep all theme tokens exact. Use the illustration system to explain account states, relationship movement, empty states, and next actions without making the UI feel like a payment app clone.

Adopt:
- Use compact transaction marks for health changes, recent activity, and next actions.
- Use receipt-like slips for empty states and account evidence summaries.

Avoid:
- Avoid oversized fintech illustrations that distract from account work.
- Avoid icons that imply payments when the data is really relationship health.