@jaimevalasek/aioson 1.3.0 → 1.5.1

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

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