@jaimevalasek/aioson 1.7.2 → 1.9.0

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

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