# 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.
