# Art Direction — Warm Craft UI

Read this file for any page-level work where differentiation matters: apps, dashboards, landing pages, websites, profile pages, and major flows.

This file exists to stop Warm Craft from collapsing into the same light rounded-card layout every time.

The system stays coherent, but the expression must change with the product, the user, and the dominant task.

---

## Core Rule

**Same warmth, different character.**

Keep the Warm Craft DNA:
- warm-toned surfaces and soft depth
- humanist typography with serif headings
- generous whitespace as a design principle
- rounded, approachable forms

But do **not** keep the exact same composition, hero, card rhythm, or visual emphasis from project to project.

---

## Mandatory Pre-Build Outputs

Before designing a full page, produce all of these:

1. **Human**
   The real person using this page right now.

2. **Main action**
   The one decision, action, or question that matters most on this screen.

3. **Felt quality**
   Concrete emotional words such as `warm`, `spacious`, `trustworthy`, `crafted`, `calm`, `inviting`, `focused`, `playful`, `gentle`, `grounded`.
   Never use empty labels like `clean`, `modern`, or `beautiful`.

4. **Domain vocabulary**
   At least 5 concepts from the product's world.
   Example for a learning app: `lesson`, `streak`, `milestone`, `practice`, `mastery`.

5. **Material world**
   At least 5 materials or textures that belong to that product world.
   Example: warm paper, natural wood, linen cloth, clay, dried flowers, leather notebook, morning sunlight.

6. **Defaults to avoid**
   Name 3 obvious UI choices that would make the result generic.

7. **Signature move**
   One memorable design move that can appear in at least 5 places on the page.

If you cannot do these seven, you are not ready to compose the page.

---

## Expression Modes

Choose **one primary mode** per screen. You may borrow a small amount from a secondary mode only after the main expression is clear.

### 1. Morning Desk

Use for:
- productivity apps
- task managers
- personal dashboards
- note-taking tools
- CRM for small teams

Feel:
- organized
- spacious
- focused
- like opening a clean notebook

Composition:
- clear content zones with generous breathing room
- one dominant action area above the fold
- sidebar as quiet companion, not attention-grabber
- cards as containers, not decoration

Visual cues:
- warm white backgrounds with barely-there warm tint
- soft card shadows that suggest depth without shouting
- serif headings that ground the hierarchy
- accent used only on the primary action

Signature ideas:
- oversized greeting header with user context ("Good morning, Sarah. 3 tasks today.")
- card with subtle left border accent for priority items
- inline progress indicator with warm fill animation

### 2. Sunlit Studio

Use for:
- creative tools
- design platforms
- portfolio builders
- content creation apps
- media management

Feel:
- inspiring
- creative
- warm but vibrant
- like a well-lit art studio

Composition:
- larger visual elements and media previews
- asymmetric layouts that feel curated, not random
- generous negative space around focal content
- playful grid that rewards browsing

Visual cues:
- accent color used more expressively (subtle background washes, not just buttons)
- more pronounced shadow depth for media cards
- type mixing as creative expression: serif titles, sans body, occasional italic
- rounded containers that feel like frames

Signature ideas:
- gallery grid with hover-reveal metadata
- hero media card with editorial caption treatment
- floating toolbar with pill-shaped rounded actions

### 3. Garden Path

Use for:
- onboarding flows
- education apps
- health and wellness
- meditation and mindfulness
- guided experiences

Feel:
- gentle
- progressive
- encouraging
- like a guided walk through a garden

Composition:
- linear narrative flow
- one step at a time, generous vertical rhythm
- progress indicators that feel rewarding
- illustrations or organic shapes as wayfinding

Visual cues:
- softer accent palette (muted terracotta, sage green, warm amber)
- more rounded everything (pill buttons, oval badges, circular avatars)
- gentle background gradients that shift with progress
- decorative organic shapes (circles, blobs) in background — always subtle

Signature ideas:
- step indicator as garden path (dots connected by a curved line)
- celebration moment with warm radial burst
- floating encouragement card after milestones

### 4. Reading Room

Use for:
- documentation platforms
- knowledge bases
- blog platforms
- long-form content
- journal apps

Feel:
- intellectual
- measured
- unhurried
- like a quiet library with warm light

Composition:
- narrow, readable content column (max 680px)
- generous margins
- strong typographic hierarchy with minimal decoration
- sidebar as table of contents, not feature list

Visual cues:
- serif dominance (headings AND body can be serif here)
- book-like margins and line spacing
- footnotes, pull quotes, and editorial details
- minimal chrome — the content IS the interface

Signature ideas:
- pull quote with oversized serif and warm accent bar
- chapter-style section breaks with ornamental divider
- reading progress bar integrated into the top bar

### 5. Warm Dashboard

Use for:
- analytics overview
- admin panels
- project management dashboards
- finance overview
- reporting tools

Feel:
- clear
- trustworthy
- comprehensive but not overwhelming
- like a well-organized desk with everything in reach

Composition:
- stat cards as opening, but NOT four equal boxes
- one hero metric or insight above the fold
- tables and charts below, organized by priority
- sidebar for navigation, content area for data

Visual cues:
- warm-toned chart colors (terracotta, amber, sage, slate — never neon)
- card depth hierarchy: elevated stats > flat lists > subtle backgrounds
- serif for stat numbers and section titles, sans for data labels
- accent sparingly: one chart highlight color, not rainbow

Signature ideas:
- hero insight card with large serif number + trend context
- warm-toned donut/bar chart with hand-picked palette
- activity timeline with avatar bubbles and warm connecting line

---

## Signature Move Library

Pick one and commit. Do not apply three weak gestures when one strong one would do.

### Apps
- greeting card with personalized context and warm illustration
- soft left-accent border on priority items (3px rounded, warm coral)
- inline milestone celebration with subtle confetti or warm burst

### Dashboards
- one hero insight with large serif number instead of four equal KPI cards
- warm-toned chart palette that feels intentional, not default
- activity feed with avatar timeline and connecting warm line

### Landing Pages
- split hero with product shot on warm gradient background
- testimonial as editorial pull quote with serif and warm accent
- feature sections with alternating illustration/text rhythm — never a grid of icons

### Websites
- editorial section headers with serif overline and warm divider
- case-study cards with generous media and warm caption treatment
- organic background shapes (circles, waves) that add warmth without distraction

Rule:
- your signature move must appear in at least 5 concrete places, or it is not a real signature

---

## Anti-Generic Tests

Run these before presenting:

### Swap Test

If you swapped:
- the serif headings for Inter or system sans
- the warm colors for gray and blue
- the rounded corners for sharp rectangles

and the page still feels mostly the same, it is too generic.

### Squint Test

Blur your eyes:
- can you still see hierarchy?
- is there one dominant idea?
- do the warm tones feel intentional or just tinted?

Warmth should feel embedded, not painted on.

### Signature Test

Point to 5 exact places where the chosen signature appears.
If you cannot name them, you do not have a signature.

### Domain Test

Hide the product name.
Would the page still feel like it belongs to this specific product world?
If not, you are decorating a template.

### Coldness Test (unique to Warm Craft)

Does any part of the page feel clinical, cold, or sterile?
Check: gray cards without warm tint, sharp shadows, blue/purple accents, dense tables without breathing room.
Fix: warm the tone, round the edges, add spacing.

---

## Variation Rules By Surface Type

### Apps
- Do not always start with a greeting card. Sometimes the primary content IS the greeting.
- Sidebar should feel like furniture, not like a spreadsheet navigation.
- Dense is never the goal — clarity through structure, not compression.

### Dashboards
- Avoid four equal KPI cards as the only opening move.
- Prefer one insight story above the fold: a trend, a warning, a celebration.
- Charts should use warm palette colors, never default library colors.

### Landing Pages
- Do not default to centered hero + three feature cards + testimonials + CTA.
- Use editorial rhythm: alternating layouts, visual breaks, narrative pacing.
- Illustrations should feel warm and hand-crafted, never cold and geometric.

### Websites
- Not every page needs to be light. Consider warm dark for dramatic sections.
- Institutional does not mean boring — let typography, whitespace, and warmth carry the experience.
- Let proof and narrative carry trust before using effects.

---

## Non-Negotiable Expression Rules

1. One accent family, one expression mode, one signature move.
2. The page must feel designed for a domain, not for a prompt category.
3. Typography must carry personality before decoration does — serif headings are the anchor.
4. Background warmth must feel natural, never tinted as an afterthought.
5. If the design feels familiar, push the composition, not the gimmicks.
6. Whitespace is not wasted space — it is the most important design element in this system.
