@jaimevalasek/aioson 1.4.0 → 1.5.1

package/template/.aioson/skills/design/warm-craft-ui/references/art-direction.md

@@ -0,0 +1,324 @@
+# 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.