UI Art Director — Composition-First UI Design & Critique

Summary

Your dashboard has no focal point — that is the root failure, and it is a
structural problem, not a styling one. The header row, the four KPI cards, the
table, and the right rail all compete at identical weight, so the eye lands
nowhere and reads everything as equally urgent. Fixing the colors will not
change this. The composition has to change first.

Verdict: 58/100 — flat hierarchy, five equal-weight zones, accent used as
surface fill rather than as information.

Composition Review (run before design review, so structure isn't buried)

Visual anchor: none. Squint test — I can still read six things equally.
That is the definition of flat.

Focal point: absent. P0.

Balance: symmetric and even, which reads as "unconsidered" rather than calm.

Proportion: the KPI band and the table compete for the same 30% of
vertical space. They do not deserve equal share.

Density: uniform. Your alert queue needs density and type strength; your
weekly cost summary needs to recede. Both currently sit at medium.

Whitespace: none is intentional. Every gap is a default gap.

Separation: every region is a rounded card, so containers carry no meaning.

Top three problems, by impact

1. P0 — No visual anchor. The primary metric is the same size as its own
   label. Nothing enters first.
2. P1 — Accent used as surface. Your orange fills entire card backgrounds
   across four cards. Accent must mark attention, not fill area.
3. P1 — Uniform density. Decision regions and context regions are styled
   identically, so nothing signals what matters.

Structural vs. visual vs. system

• Structural: anchor absent; five equal zones; card grid substituting for
  hierarchy.
• Visual: type scale has two useful sizes; delta indicators exist but are
  the same weight as labels.
• System: spacing scale is consistent (that part is correct — keep it);
  radius is universal pill; accent has no discipline rule.

Art direction

Keywords: instrument panel, not dashboard. One dominant metric, engineering
typography, hairline dividers instead of cards, one accent on state only.

Constraints: no card fills, no glow, one anchor, tabular numerals, real units.

Chosen grammar: 01 Dominant + Supporting — one primary region (60–75%)
carrying the hero metric and its trend, one subordinate rail. It matches the
information's shape: this page has exactly one question ("is the system
healthy right now?") and it should be answered above the fold in the largest
type.

Rejected: editorial (too sparse for an ops surface), asymmetric workspace
(no second task to justify the offset).

Visual Attention Budget — target

Visual attention is being spent on low-value elements. 22% on decoration
while the primary metric gets 14% is the whole diagnosis in one table.

Concrete changes

Intent: make the primary metric the first read.
Decision: metric to 44px display weight, drop its card background, remove the
border, add 40px of space above it and none below.
Effect: the eye lands on the number before anything else resolves.

Intent: make the accent mean something.
Decision: remove accent fills from all four KPI cards; keep accent only on
threshold breach, the delta arrow, and the primary action.
Effect: you can find the accent in under a second — which means the budget is
correct.

Intent: raise useful density.
Decision: delete three card wrappers, replace with hairline dividers; move the
alert queue to 13px with tabular numerals; push the weekly cost block to
muted grey at 12px.
Effect: more decisions per screen, hierarchy still legible.

Intent: make numbers interpretable.
Decision: every figure ships with unit, period, and baseline —
1,204 → 1,204 req + ▲ +8.2% vs 7-day avg + target 90%.
Effect: a number without a baseline is decoration pretending to be data.

Before → After

BEFORE                                AFTER
┌──────┬──────┬──────┬──────┐        ┌────────────────────────┬──────────┐
│ 1,204│  98% │  312 │  47  │        │ 1,204 req        ●     │ ALERTS   │
│ req  │ ok   │ ms   │ jobs │        │ ▲ +8.2% vs 7d   target │ ─────────│
└──────┴──────┴──────┴──────┘        │ 90%   ▁▂▃▅▇▅▃         │ ▲ queue 3│
┌───────────────────┬────────┐      │ ▲ breach 2  ▏ 41ms p99 │ 2 breach │
│ table...          │ rail   │      ├────────────────────────┤ 1 warn   │
└───────────────────┴────────┘      │ alerts / queue / owners │          │
                                     └────────────────────────┴──────────┘
4 equal cards = 0 anchors            1 anchor, dividers, accent = state

Code — the anchor region, smallest coherent change

<section class="panel">
  <header class="panel__head">
    <h2 class="panel__label">Throughput</h2>
    <span class="dot dot--ok" aria-label="healthy"></span>
  </header>

  <p class="metric">
    <span class="metric__value">1,204</span>
    <span class="metric__unit">req</span>
  </p>

  <p class="metric__delta">
    <span class="delta delta--up">▲ +8.2%</span>
    <span class="metric__baseline">vs 7-day avg</span>
    <span class="metric__target">target 90%</span>
  </p>

  ![svg](data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3BhcmsiIHZpZXdCb3g9IjAgMCAyMjAgNDAiIHJvbGU9ImltZyIKICAgICAgIGFyaWEtbGFiZWw9IlNldmVuIGRheSB0aHJvdWdocHV0IHRyZW5kLCByaXNpbmcgd2l0aCBhIGRpcCBvbiBkYXkgZml2ZSIgd2lkdGg9IjIyMCIgaGVpZ2h0PSI0MCI+CiAgICA8cG9seWxpbmUgcG9pbnRzPSIwLDMyIDM2LDI4IDczLDI5IDExMCwxOCAxNDYsOSAxODMsMTQgMjIwLDYiCiAgICAgICAgICAgICAgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPC9zdmc+)
</section>

/* one dominant anchor; everything else recedes */
.panel { border: 0; padding-block: 40px 0; }   /* no card, no background */
.metric__value { font-size: 44px; font-weight: 600;
                 letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric__unit  { font-size: 14px; color: var(--muted); margin-inline-start: 4px; }
.metric__delta { display: flex; gap: 12px; align-items: baseline; margin-block-start: 8px; }
.panel__label  { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
                 color: var(--muted); }
.spark { color: var(--accent); block-size: 40px; margin-block-start: 24px; }

/* accent marks state, never surface */
:root { --accent: #ff4d1c; --muted: #8b949e; --hairline: #242b34; }
.panel + .panel { border-block-start: 1px solid var(--hairline); } /* divider, not card */
.dot--ok { inline-size: 8px; block-size: 8px; border-radius: 50%;
          background: var(--accent); box-shadow: 0 0 0 3px rgb(255 77 28 / 12%); }

Next steps

1. Apply the anchor block above first and re-render. Nothing else matters until
   the first read is correct.
2. Then strip accent fills from the remaining three KPI cards — 10 minutes,
   biggest perceived-quality gain in the whole list.
3. Then delete card wrappers in favor of dividers.
4. Send the new screenshot back. I'll run the execution-gap check against this
   plan and grade it none/low/medium/high — intended vs. actual reading order.
5. Optional, after the above holds: responsive reprioritization at each
   breakpoint. That is a separate composition job, not a shrink.