Back to gallery
shadcn CSS ↓
Prompt Kit 4 motifs · plaintext · click to copy
native
Field Notes
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: Almond Reader
Accent: #E75F3E
Ink: #1A1612
Surface: #F4F0E8
Muted: #716D68
Display font: Fraunces, serif
Body font: "Source Serif 4", serif
Tags: editorial, warm, serif
Theme description: A warm editorial serif theme — terracotta accent on cream, calm and bookish.
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: Field Notes
Design inside a field-notes motif. Preserve the theme tokens exactly, then use the visual language of notebooks, margin notes, weekly reviews, and annotated passages to make the customer-success workspace distinctive. Favor a primary narrative column, nearby marginalia, dated observations, and quiet paper-like separators. Do not invent new colors or fonts; use motif details for layout, illustration, and hierarchy.

Adopt:
- Use a narrative main column with compact margin callouts for risks and next steps.
- Group activity as dated notes, review stamps, and short account observations.

Avoid:
- Avoid a row of identical KPI cards across the top of the screen.
- Avoid glossy dashboard chrome that fights the handwritten operating-notes metaphor.
metaphor
Garden Bed
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: Almond Reader
Accent: #E75F3E
Ink: #1A1612
Surface: #F4F0E8
Muted: #716D68
Display font: Fraunces, serif
Body font: "Source Serif 4", serif
Tags: editorial, warm, serif
Theme description: A warm editorial serif theme — terracotta accent on cream, calm and bookish.
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: Garden Bed
Design with a garden-bed metaphor. Keep all theme tokens fixed, but structure the workspace around tending customer relationships: cultivated rows, seed markers, growth rings, care notes, and seasonal sections. The result should feel thoughtful and operational, not playful decoration. Use the metaphor to guide hierarchy, empty states, and small illustrations while maintaining credible B2B utility.

Adopt:
- Arrange account health as cultivated rows with growth markers and care notes.
- Use seasonal sections for renewal, expansion, risk, and dormant accounts.

Avoid:
- Avoid literal farm-game decoration or cartoon garden imagery.
- Avoid a spreadsheet-first layout where the metaphor disappears behind rows of data.
composition breaker
No-KPI Journal
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: Almond Reader
Accent: #E75F3E
Ink: #1A1612
Surface: #F4F0E8
Muted: #716D68
Display font: Fraunces, serif
Body font: "Source Serif 4", serif
Tags: editorial, warm, serif
Theme description: A warm editorial serif theme — terracotta accent on cream, calm and bookish.
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-KPI Journal
Design the customer-success workspace as a journal spread, not a generic dashboard. Use the theme tokens exactly. Put relationship narrative, attention ledger, review ribbon, and inline account evidence at the center. Metrics should support the story rather than dominate the top of the screen. Use annotation-like illustration details to make hierarchy memorable.

Adopt:
- Lead with the most important relationship narrative and place metrics as inline evidence.
- Use a side ledger for attention items, next actions, and unresolved customer signals.

Avoid:
- Avoid four-card KPI rows, oversized charts, and generic left-sidebar admin scaffolding.
- Avoid visual hierarchy that treats every account signal as equal.
illustrative
Margin Sketches
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: Almond Reader
Accent: #E75F3E
Ink: #1A1612
Surface: #F4F0E8
Muted: #716D68
Display font: Fraunces, serif
Body font: "Source Serif 4", serif
Tags: editorial, warm, serif
Theme description: A warm editorial serif theme — terracotta accent on cream, calm and bookish.
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: Margin Sketches
Design with margin sketches, paper tabs, and ink stamps as the illustration language. The motif should live inside the UI: beside risks, next actions, account notes, and empty states. Keep every color and font tied to the theme. Make the workspace feel specific and handcrafted while preserving fast scanning and credible customer-success workflows.

Adopt:
- Place small sketches beside sections that need interpretation, such as risk or next action.
- Use paper tabs and stamped labels to separate account states without heavy containers.

Avoid:
- Avoid stock illustration blocks that sit apart from the actual workflow.
- Avoid decorative marks that obscure account data or reduce scan speed.