@jaimevalasek/aioson 1.7.2 → 1.9.0

package/template/.aioson/skills/design/cognitive-core-ui/references/art-direction.md

@@ -1,339 +1,339 @@
-# Art Direction - Cognitive Core 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 Cognitive Core from collapsing into the same dark dashboard every time.
-
-The system stays coherent, but the expression must change with the product, the user, and the dominant task.
-
----
-
-## Core Rule
-
-**Same system, different expressions.**
-
-Keep the Cognitive Core DNA:
-- structured information zones
-- refined surfaces and subtle borders
-- disciplined accent usage
-- premium technical feel
-
-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 `cold`, `calm`, `surgical`, `elevated`, `urgent`, `editorial`, `trustworthy`, `tactical`.
-   Never use empty labels like `clean`, `modern`, or `beautiful`.
-
-4. **Domain vocabulary**
-   At least 5 concepts from the product's world.
-   Example for logistics: `dispatch`, `route`, `load`, `dock`, `throughput`.
-
-5. **Color world**
-   At least 5 colors or materials that belong to that product world.
-   Example: graphite glass, brushed steel, fog gray, oxidized teal, warning amber.
-
-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. Tactical Monolith
-
-Use for:
-- command centers
-- security tools
-- infra and monitoring
-- serious operational dashboards
-
-Feel:
-- cold
-- exact
-- high-trust
-- dense but controlled
-
-Composition:
-- dominant analysis panel
-- strong left or top navigation spine
-- grouped secondary rails
-- no playful overlap
-
-Visual cues:
-- graphite surfaces
-- restrained cyan or teal accent
-- tight vertical rhythm
-- mono labels as metadata rails
-
-Signature ideas:
-- inset command strip
-- segmented control bar
-- status tape above the main panel
-
-### 2. Quiet Graphite
-
-Use for:
-- premium SaaS apps
-- B2B platforms
-- productized internal tools
-
-Feel:
-- calm
-- precise
-- premium
-- composed
-
-Composition:
-- generous negative space inside a dark shell
-- fewer but larger cards
-- content grouped by narrative importance, not just equal grid repetition
-
-Visual cues:
-- soft border-first depth
-- low-contrast radial wash
-- bold headings with restrained body copy
-- minimal decorative noise
-
-Signature ideas:
-- oversized title rail
-- media-backed hero card
-- one sculpted panel breaking the grid
-
-### 3. Signal Editorial
-
-Use for:
-- landing pages
-- product websites
-- manifesto pages
-- strategy or brand-heavy experiences
-
-Feel:
-- intelligent
-- narrative
-- premium
-- atmospheric
-
-Composition:
-- asymmetric sections
-- split hero or offset headline
-- quote blocks, proof rails, editorial stacks
-- alternating calm and high-impact moments
-
-Visual cues:
-- stronger display typography
-- more whitespace
-- mono as flavor, not reading mode
-- refined textures, lines, or atmospheric backgrounds
-
-Signature ideas:
-- offset hero frame
-- vertical proof rail
-- manifesto block with oversized quote
-
-### 4. Luminous Light
-
-Use for:
-- client-facing apps
-- enterprise admin with light theme
-- trust-heavy workflows
-- finance, healthcare, legal, institutional
-
-Feel:
-- clear
-- trustworthy
-- measured
-- polished
-
-Composition:
-- strong content containers
-- crisp headers
-- one dominant task surface above the fold
-- compact but breathable forms and tables
-
-Visual cues:
-- off-white surfaces, not raw white overload
-- deep teal accent, never weak sky blue buttons
-- clear border hierarchy
-- low-noise status colors
-
-Signature ideas:
-- elevated action bar
-- proof card ribbon
-- sculpted table header band
-
-### 5. Industrial Flow
-
-Use for:
-- logistics
-- supply chain
-- manufacturing
-- devtools with utilitarian tone
-
-Feel:
-- practical
-- mechanical
-- legible
-- high-signal
-
-Composition:
-- rigid grid
-- strong lanes and divisions
-- labeled blocks with obvious purpose
-- timeline, feed, or throughput emphasis
-
-Visual cues:
-- colder neutrals
-- measured hazard accents
-- boxed callouts
-- minimal flourish, maximal clarity
-
-Signature ideas:
-- corner ticks
-- rail markers
-- striped progress treatment
-
-### 6. Gallery Intelligence
-
-Use for:
-- media-heavy apps
-- CRM/contact systems
-- AI agents, profiles, collections
-- catalog products with analytics
-
-Feel:
-- curated
-- intelligent
-- dimensional
-- premium
-
-Composition:
-- large hero card or profile surface
-- supporting detail rail
-- modular cards with strong hierarchy between thumbnail, title, metadata, and status
-
-Visual cues:
-- cleaner spacing around media
-- tighter metadata rows
-- one expressive showcase area per viewport
-
-Signature ideas:
-- profile marquee panel
-- inset media frame
-- layered details strip
-
----
-
-## Signature Move Library
-
-Pick one and commit. Do not apply three weak gestures when one strong one would do.
-
-### Apps
-- segmented command bar with active underline and secondary metadata
-- sculpted workspace header with embedded actions
-- inset task rail that feels part of the shell, not pasted above content
-
-### Dashboards
-- one dominant hero metric surface instead of four equal KPI cards
-- trend arc or sparkline ribbon integrated into the main header
-- alert tape, timeline spine, or live activity lane
-
-### Landing Pages
-- offset split hero instead of centered everything
-- manifesto quote block with asymmetric CTA cluster
-- product theater frame with layered caption rails
-
-### Websites
-- editorial section header with overline, side note, and supporting proof
-- case-study strip with alternating image/text rhythm
-- atmospheric background treatment that supports the narrative without drowning the content
-
-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 typeface for a common SaaS font
-- the layout for a default sidebar + card grid
-- the hero for a centered headline + two buttons
-
-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?
-- are borders, glows, or accents screaming?
-
-Craft should whisper, not shout constantly.
-
-### 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.
-
----
-
-## Variation Rules By Surface Type
-
-### Apps
-- Do not always start with a stat row.
-- Do not always use a fixed left sidebar if a topbar + workspace rail fits better.
-- Dense does not mean crowded; keep one task dominant.
-
-### Dashboards
-- Avoid four equal KPI cards as the only opening move.
-- Prefer one focal story above the fold: alert cluster, trend panel, hero metric, queue, or live map.
-- Tables should feel integrated into the system, not pasted from a CRUD starter.
-
-### Landing Pages
-- Do not default to centered hero + three feature cards + testimonials + CTA.
-- Use at least one composition break: split layout, offset media, vertical rail, or alternating section cadence.
-- Every section should have a different job, not the same card rhythm repeated four times.
-
-### Websites
-- Not every page needs dark mode.
-- Institutional does not mean bland; use typography, measure, editorial rhythm, and section contrast.
-- Let proof, narrative, and structure carry beauty 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.
-4. Background atmosphere must support content, never compete with it.
-5. If the design feels familiar, push the composition, not the gimmicks.
+# Art Direction - Cognitive Core 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 Cognitive Core from collapsing into the same dark dashboard every time.
+
+The system stays coherent, but the expression must change with the product, the user, and the dominant task.
+
+---
+
+## Core Rule
+
+**Same system, different expressions.**
+
+Keep the Cognitive Core DNA:
+- structured information zones
+- refined surfaces and subtle borders
+- disciplined accent usage
+- premium technical feel
+
+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 `cold`, `calm`, `surgical`, `elevated`, `urgent`, `editorial`, `trustworthy`, `tactical`.
+   Never use empty labels like `clean`, `modern`, or `beautiful`.
+
+4. **Domain vocabulary**
+   At least 5 concepts from the product's world.
+   Example for logistics: `dispatch`, `route`, `load`, `dock`, `throughput`.
+
+5. **Color world**
+   At least 5 colors or materials that belong to that product world.
+   Example: graphite glass, brushed steel, fog gray, oxidized teal, warning amber.
+
+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. Tactical Monolith
+
+Use for:
+- command centers
+- security tools
+- infra and monitoring
+- serious operational dashboards
+
+Feel:
+- cold
+- exact
+- high-trust
+- dense but controlled
+
+Composition:
+- dominant analysis panel
+- strong left or top navigation spine
+- grouped secondary rails
+- no playful overlap
+
+Visual cues:
+- graphite surfaces
+- restrained cyan or teal accent
+- tight vertical rhythm
+- mono labels as metadata rails
+
+Signature ideas:
+- inset command strip
+- segmented control bar
+- status tape above the main panel
+
+### 2. Quiet Graphite
+
+Use for:
+- premium SaaS apps
+- B2B platforms
+- productized internal tools
+
+Feel:
+- calm
+- precise
+- premium
+- composed
+
+Composition:
+- generous negative space inside a dark shell
+- fewer but larger cards
+- content grouped by narrative importance, not just equal grid repetition
+
+Visual cues:
+- soft border-first depth
+- low-contrast radial wash
+- bold headings with restrained body copy
+- minimal decorative noise
+
+Signature ideas:
+- oversized title rail
+- media-backed hero card
+- one sculpted panel breaking the grid
+
+### 3. Signal Editorial
+
+Use for:
+- landing pages
+- product websites
+- manifesto pages
+- strategy or brand-heavy experiences
+
+Feel:
+- intelligent
+- narrative
+- premium
+- atmospheric
+
+Composition:
+- asymmetric sections
+- split hero or offset headline
+- quote blocks, proof rails, editorial stacks
+- alternating calm and high-impact moments
+
+Visual cues:
+- stronger display typography
+- more whitespace
+- mono as flavor, not reading mode
+- refined textures, lines, or atmospheric backgrounds
+
+Signature ideas:
+- offset hero frame
+- vertical proof rail
+- manifesto block with oversized quote
+
+### 4. Luminous Light
+
+Use for:
+- client-facing apps
+- enterprise admin with light theme
+- trust-heavy workflows
+- finance, healthcare, legal, institutional
+
+Feel:
+- clear
+- trustworthy
+- measured
+- polished
+
+Composition:
+- strong content containers
+- crisp headers
+- one dominant task surface above the fold
+- compact but breathable forms and tables
+
+Visual cues:
+- off-white surfaces, not raw white overload
+- deep teal accent, never weak sky blue buttons
+- clear border hierarchy
+- low-noise status colors
+
+Signature ideas:
+- elevated action bar
+- proof card ribbon
+- sculpted table header band
+
+### 5. Industrial Flow
+
+Use for:
+- logistics
+- supply chain
+- manufacturing
+- devtools with utilitarian tone
+
+Feel:
+- practical
+- mechanical
+- legible
+- high-signal
+
+Composition:
+- rigid grid
+- strong lanes and divisions
+- labeled blocks with obvious purpose
+- timeline, feed, or throughput emphasis
+
+Visual cues:
+- colder neutrals
+- measured hazard accents
+- boxed callouts
+- minimal flourish, maximal clarity
+
+Signature ideas:
+- corner ticks
+- rail markers
+- striped progress treatment
+
+### 6. Gallery Intelligence
+
+Use for:
+- media-heavy apps
+- CRM/contact systems
+- AI agents, profiles, collections
+- catalog products with analytics
+
+Feel:
+- curated
+- intelligent
+- dimensional
+- premium
+
+Composition:
+- large hero card or profile surface
+- supporting detail rail
+- modular cards with strong hierarchy between thumbnail, title, metadata, and status
+
+Visual cues:
+- cleaner spacing around media
+- tighter metadata rows
+- one expressive showcase area per viewport
+
+Signature ideas:
+- profile marquee panel
+- inset media frame
+- layered details strip
+
+---
+
+## Signature Move Library
+
+Pick one and commit. Do not apply three weak gestures when one strong one would do.
+
+### Apps
+- segmented command bar with active underline and secondary metadata
+- sculpted workspace header with embedded actions
+- inset task rail that feels part of the shell, not pasted above content
+
+### Dashboards
+- one dominant hero metric surface instead of four equal KPI cards
+- trend arc or sparkline ribbon integrated into the main header
+- alert tape, timeline spine, or live activity lane
+
+### Landing Pages
+- offset split hero instead of centered everything
+- manifesto quote block with asymmetric CTA cluster
+- product theater frame with layered caption rails
+
+### Websites
+- editorial section header with overline, side note, and supporting proof
+- case-study strip with alternating image/text rhythm
+- atmospheric background treatment that supports the narrative without drowning the content
+
+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 typeface for a common SaaS font
+- the layout for a default sidebar + card grid
+- the hero for a centered headline + two buttons
+
+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?
+- are borders, glows, or accents screaming?
+
+Craft should whisper, not shout constantly.
+
+### 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.
+
+---
+
+## Variation Rules By Surface Type
+
+### Apps
+- Do not always start with a stat row.
+- Do not always use a fixed left sidebar if a topbar + workspace rail fits better.
+- Dense does not mean crowded; keep one task dominant.
+
+### Dashboards
+- Avoid four equal KPI cards as the only opening move.
+- Prefer one focal story above the fold: alert cluster, trend panel, hero metric, queue, or live map.
+- Tables should feel integrated into the system, not pasted from a CRUD starter.
+
+### Landing Pages
+- Do not default to centered hero + three feature cards + testimonials + CTA.
+- Use at least one composition break: split layout, offset media, vertical rail, or alternating section cadence.
+- Every section should have a different job, not the same card rhythm repeated four times.
+
+### Websites
+- Not every page needs dark mode.
+- Institutional does not mean bland; use typography, measure, editorial rhythm, and section contrast.
+- Let proof, narrative, and structure carry beauty 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.
+4. Background atmosphere must support content, never compete with it.
+5. If the design feels familiar, push the composition, not the gimmicks.