# Chromatic Map — Anton's Critique
**Date:** March 2026  
**Reviewer:** Anton — CE Creative Critic  
**Subject:** 4 chromatic map design variants for eToro competitive intelligence deliverable  
**Standard applied:** CE Quality Gate (1 gradient max, no pure black/white, no shadows, premium typography), Pentagram/Collins bar

---

## CE Quality Gate — Quick Reference
- **Font rule:** Syne, Playfair Display, or equivalent premium weight. No system fonts. No coding/monospace fonts in editorial contexts.
- **Color rule:** No pure `#000000` or `#ffffff`. No near-blacks below #111, no near-whites above #f5f5f5.
- **Gradient rule:** One (1) gradient maximum per layout. Decorative only.
- **Shadow rule:** No `box-shadow`, no `text-shadow`, no `drop-shadow`. Light effects via opacity or color only.

---

## Design 1: Gallery (`/chromatic-map/gallery/`)

### Concept
A 12-column editorial grid of brand zones, each showing a mosaic of images sorted warm → cool by hue. On-brand structurally — magazine layout, hue axis, sequential reveal.

### Would Pentagram or Collins be proud of this?
**No.** It reads like a competent developer's approximation of an editorial grid. The bones are there. The execution violates four CE rules simultaneously, and the image presentation makes it impossible to actually read the brand imagery — which is the entire point of the deliverable.

### Is it visually stunning at first glance?
**Marginally.** The gradient accent line at the top is strong. The Syne headers are right. But the #0E0E0F background makes it indistinguishable from a generic dark dashboard. There's no compositional tension — just a flat grid.

### Does color use and brand image placement communicate competitive insight?
**Partially.** Hue-sorting is the right organizing idea. But the image tiles are so small (2×2 grid inside a span-3 column) that you cannot see brand language. You see thumbnails. Competitive intelligence requires that you can *read* the images — the photography style, the color temperature, the lifestyle signals. At this scale, you can't.

---

### 3 Critical Design Failures

**Failure 1: Gradient explosion — 4 gradients in one layout**
CE rule: one gradient maximum. This design uses:
- Header accent bar: `linear-gradient(90deg, #E4003A ... #008CFF)`
- Spectrum ribbon: same gradient, opacity 0.3 — redundant
- Hue axis track: another gradient — redundant
- Footer hue line: another gradient — redundant

Three of these four are saying the exact same thing. They're aesthetic decoration stacked on top of each other. **Pick one and make it mean something.**

**Fix:**
```css
/* Remove spectrum-ribbon class entirely */
/* Remove hue-axis-track gradient — replace with a simple rule: */
.hue-axis-track {
  background: rgba(255,255,255,0.08); /* Just a structural line */
  opacity: 1;
}
/* Remove footer hue line */
/* Keep ONLY the header accent bar — it earns its place */
```

**Failure 2: Pure black/white used throughout — both violations at once**
- Background: `#0E0E0F` — functionally pure black.
- Brand name text: `color: #fff` — pure white.
- `--text-muted: rgba(255,255,255,0.22)` and all variations derive from pure white.

The CE standard exists precisely because pure black/white reads as an undesigned default state. The current background is indistinguishable from every generic fintech dashboard ever made.

**Fix:**
```css
:root {
  --bg: #0C0D10;           /* Deep navy-black — not neutral, not warm, has direction */
  --surface: #13141A;      /* Slight blue-navy surface */
  --text-primary: #E8E6F0; /* Off-white with slight violet — not pure white */
  --text-dim: rgba(232,230,240,0.45);
  --text-muted: rgba(232,230,240,0.22);
}

body {
  background: var(--bg);
  color: var(--text-primary);
}
```

**Failure 3: Image tiles too small to read — the mosaic defeats itself**
A span-3 column (roughly 220px at 1440px viewport) divided into a 2-column mosaic creates tiles that are ~107px wide with a 4:3 ratio — approximately 107×80px per image. You cannot read competitive brand photography at 107×80px. The featured tile (`grid-column: span 2`) is better but still only ~214px wide. The span-6 Monzo zone gets closer to useful, but it's the exception.

The core problem: a 12-column grid trying to show 11 brands simultaneously means everything is competing for space and losing. The design is trying to be comprehensive and fails to be *readable*.

**Fix:** Collapse to 6 columns max. Remove the per-brand mosaic for smaller brands — show a single hero image per brand, not a grid. Reserve the multi-image mosaic treatment for eToro's 3 closest competitors only:
```css
.brand-grid {
  grid-template-columns: repeat(6, 1fr);
}

.span-3 { grid-column: span 2; }
.span-4 { grid-column: span 3; }
.span-6 { grid-column: span 6; }

/* For span-2 brands, single image — no mosaic */
.span-2 .image-mosaic {
  grid-template-columns: 1fr;
}
.span-2 .image-tile { aspect-ratio: 16/9; }
.span-2 .image-tile.featured { grid-column: span 1; }
```

### What Would Make This 10× Better
**One structural fix:** Turn the 12-column even grid into a **ranked hierarchy**. eToro is the implicit center. Its 3 closest competitors get the most space. The rest are context. Right now every brand has equal visual weight — Cash App gets the same compositional treatment as Plus500. That's not competitive intelligence, that's a contact sheet.

Replace the even grid with a gravitational layout: 3 large brand zones at the top (eToro's real threats), then a strip of secondary competitors below. The hue-ordering can be secondary to the competitive ranking. That's a Pentagram move — the design communicates hierarchy, not just classification.

---

## Design 2: Spectrum (`/chromatic-map/spectrum/`)

### Concept
A horizontally-scrolling strip of every image sorted by dominant hue across all brands. Brand labels hang below via vertical text. A Playfair header sets editorial tone. A color bar gradient sits above the images.

### Would Pentagram or Collins be proud of this?
**Almost — and that "almost" is painful.** The typographic treatment is the best in the set. Playfair Display italic in the header is genuinely beautiful — "Chromatic *Competitive* Spectrum" has the editorial intelligence CE should be reaching for. The concept of every image sorted by raw hue is a powerful idea. But the execution at 90px image height kills it.

### Is it visually stunning at first glance?
**The header is. The viz is not.** The loading state with Playfair italic "Sorting by spectrum…" is lovely. Then the strip appears and it's a row of postage stamps 90px tall. The ratio is backwards — 70% of the visual weight is in a one-line header and 30% is in the actual content.

### Does color use and brand image placement communicate competitive insight?
**Conceptually yes. Visually no.** The hue-sorting mechanic is the most analytically valid of all four designs — you immediately see clustering (the reds, the greens, the blues) and you understand brand territory from that clustering. But at 90px height you cannot distinguish a Robinhood lifestyle photo from a Coinbase billboard. The dot in the corner noting hue value is clever. The scale makes it pointless.

---

### 3 Critical Design Failures

**Failure 1: 90px image height — the entire concept is invisible**
The core value proposition of this design is "see all brand imagery sorted by color." At 90px tall, images are unidentifiable. The color information is present but the *brand content* — photography style, subject matter, energy — is completely lost.

**Fix:**
```css
:root {
  --img-w: 180px;  /* was 110px */
  --img-h: 220px;  /* was 90px — taller = portrait aspect, more impactful */
  --bar-h: 6px;    /* stays thin */
}

.tile {
  width: var(--img-w);
  height: var(--img-h);
  /* Remove the transform: translateY(40px) — too far for the taller tile */
  transform: translateY(20px);
}
```
This doubles the visual area of each image and shifts the aspect ratio to portrait, which creates a more dramatic strip. Total strip width grows proportionally — that's fine, this is a horizontal scroll.

**Failure 2: Brand labels are broken by a layout hack**
The label positioning uses `rank % 3 * 20px` to stagger line heights and prevent overlap. This is not a design solution — it's a collision avoidance hack that produces uneven, random-feeling stem lengths. The labels look like a bar chart from a third-party analytics tool.

**Fix:** Use a dedicated label axis *above* the strip instead of below it. Fixed label positions above with connecting lines drop down *into* the strip at the first occurrence of each brand's color cluster. This is cleaner and more editorial:
```css
.spectrum-inner {
  padding-top: 120px; /* room for labels above */
  padding-bottom: 60px;
}

.brand-label {
  top: 0;             /* pin to top */
  flex-direction: column-reverse; /* dot at top, line down, then text at bottom */
}

/* Remove the rank-based lineH calculation entirely */
/* All label lines are same height: 80px */
.brand-label__line { height: 80px; }
```

**Failure 3: Data dependency without graceful failure**
The design fetches `/etoro-competition/chromatic-data.json` and fails silently if it returns an error — `document.getElementById('loading').textContent = 'Error loading data: ' + err.message`. No client should ever see a console error message in a deliverable. More importantly, if the JSON pipeline isn't built, this page renders as "Sorting by spectrum…" forever.

**Fix:** Inline a fallback dataset or — better — pre-bake the sorted image list at build time so the page never depends on a runtime fetch. The Gallery design hardcodes its data; Spectrum should too.

### What Would Make This 10× Better
**Make the strip taller than it is wide.** Currently the page is a panoramic 110px tall. Flip the proportions: a strip that's 320px tall with portrait tiles becomes a genuine visual statement. Add a subtle brand-color tint wash over each tile on hover that reveals the brand name — not via a tooltip but via the color itself. The design language should say: *every color is a brand identity.* Right now it says: *here are some small images.*

---

## Design 3: Territories (`/chromatic-map/territories/`)

### Concept
A fixed 1400×900 stage with brand "territories" — image mosaics placed at specific coordinates — that bloom in sequence with ambient glow effects. Tactical/cinematic aesthetic. Scanlines overlay.

### Would Pentagram or Collins be proud of this?
**No. Hard no.** This looks like a Bloomberg Terminal designed by someone who watched too many spy films. The scanline overlay is the single most overused "we're serious about data" visual trope in existence. Pentagram would take one look at the arbitrary territory positions and ask: "What does the X axis mean? What does the Y axis mean?" The answer is: nothing. The brands float in space with no semantic layout. That's decoration, not information design.

### Is it visually stunning at first glance?
**The bloom animation is compelling for about 3 seconds.** Then you realize the territories are just scattered around a black void and there's no logic to their placement. Monzo is top-left, Cash App is center, Coinbase is top-right, Trade Republic is bottom-center in a 100×100 box with one image. The visual drama doesn't survive the content.

### Does color use and brand image placement communicate competitive insight?
**No.** The color glows (ambient blobs) are beautiful. The territory label colors are right. But "Revolut is in the top-center and Plus500 is in the bottom-right" communicates nothing. Competitive insight requires *meaning* in the spatial relationships. Without axis labels, this is a screensaver.

---

### 3 Critical Design Failures

**Failure 1: No semantic axes — the map means nothing**
If this is a "territory map," territory implies competition for the same space. What are the axes? Trust vs. disruption? Consumer vs. professional? Retail vs. institutional? Without axes, you're just arranging logos on a black background.

**Fix:** Define two axes that actually reflect the competitive landscape. Based on the brands present:
- **X-axis:** Consumer-facing (left) ↔ Professional/institutional (right)
- **Y-axis:** Neobank/spending (top) ↔ Trading/investment (bottom)

Add axis labels with supporting lines:
```javascript
// After stage setup, add axis decorations:
const xAxis = document.createElement('div');
xAxis.style.cssText = `
  position: absolute;
  bottom: 60px; left: 60px; right: 60px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,100,80,0.3), rgba(80,120,255,0.3));
  z-index: 5;
`;
// Add labels: "CONSUMER" left, "PROFESSIONAL" right

const yAxis = document.createElement('div');
yAxis.style.cssText = `
  position: absolute;
  left: 60px; top: 60px; bottom: 60px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(100,200,255,0.3), rgba(255,180,50,0.3));
  z-index: 5;
`;
// Add labels: "NEOBANK / SPENDING" top, "TRADING / INVESTMENT" bottom
```
Then *reposition the territories to actually reflect these axes.*

**Failure 2: Box-shadow and text-shadow used pervasively — direct CE violations**
Every territory grid has:
```css
box-shadow: 0 0 20px 4px ${primaryGlow}, 0 0 50px 12px ${outerGlow};
```
Every territory label has:
```css
text-shadow: 0 0 16px ${brand.color}80, 0 0 32px ${brand.color}40;
```
The ambient blur blobs are a clever way to create glow *without* shadows — but then shadows are added on top anyway, doubling the effect and breaking the rule.

**Fix:** Remove all `box-shadow` and `text-shadow`. The ambient blobs already create the glow effect. The territories should have a clean edge — a 1px border in the brand color is more precise and more CE:
```javascript
grid.style.cssText = `
  /* Remove box-shadow entirely */
  border: 1px solid ${brand.color}60;
  outline: 1px solid ${brand.color}20;  /* subtle outer ring via outline, not shadow */
`;
```

**Failure 3: Trade Republic is humiliated**
Trade Republic gets a 100×100px territory with one image. The label is set to 11px. It's the smallest, most visually ignored element on the entire stage. If Trade Republic is an active competitor (and it is — it has a genuine challenger position in European retail investment), giving it a postage-stamp box undermines the intelligence of the piece.

**Fix:** Minimum territory size should be 160×120px for any brand. Trade Republic's low asset count (`assets/hero.png` being the only image in the territories file) is a content gap, not a reason to shrink the territory. Use a solid brand-color fill for empty cells rather than hiding them:
```javascript
// If brand.images.length < tileCount, fill remaining cells with brand color
for (let i = 0; i < tileCount; i++) {
  if (i < brand.images.length) {
    const img = document.createElement('img');
    img.src = BASE + brand.images[i];
    grid.appendChild(img);
  } else {
    const fill = document.createElement('div');
    fill.style.cssText = `
      width: 100%; height: 100%;
      background: ${brand.color}15;
    `;
    grid.appendChild(fill);
  }
}
```

### What Would Make This 10× Better
**Make the layout earn the drama.** The bloom animation, the ambient glows, the grid-based territories — these are strong tools. They just need semantic content to justify them. With real axes, with Territory sizes proportional to *market relevance to eToro*, and with the scanlines removed (they're 2016 UI design), this could be the most powerful of the four. It's the concept with the highest ceiling. It's also currently the most broken.

---

## Design 4: Barcode (`/chromatic-map/barcode/`)

### Concept
Each brand rendered as a horizontal barcode — extracted dominant colors from all brand images, displayed as proportional segments sorted warm → cool. A scanner beam animation sweeps across on load. No actual images shown — pure color data visualization.

### Would Pentagram or Collins be proud of this?
**Pentagram? Possibly. Collins? Yes.** This is the most conceptually disciplined of the four. The title "Brand DNA" is exact — it's not claiming to show everything, just the color genetic code. The clip-path reveal animation is clean. The scanner beam is gimmicky but earns its place. The proportional sizing (segment width = saturation level) is a genuinely interesting encoding. This design has a *thesis* and executes against it.

### Is it visually stunning at first glance?
**The proportions are excellent. The fonts are wrong.** `clamp(52px, 7vw, 108px)` at weight 300 for "Brand DNA" is beautiful — that's the best headline in all four designs. The layout — generous padding, generous leading, stacked rows — has real editorial confidence. But the JetBrains Mono throughout the interface reads as a developer's Figma file, not a CE deliverable. It's the right idea with the wrong typeface.

### Does color use and brand image placement communicate competitive insight?
**Color yes. Images: there are no images.** The barcode data is analytically honest — you can see immediately that Robinhood's color profile is almost entirely near-blacks (their photography is dark and moody), that Venmo's is surprisingly varied, that Plus500 is a wall of near-identical deep navy blues. That's real insight. But the deliverable to eToro is described as a *chromatic map* — the client expects to SEE brand imagery. A pure data-viz without images will feel like a research annex, not a deliverable.

---

### 3 Critical Design Failures

**Failure 1: No images — misses the brief**
The barcode shows extracted color data from 203 images but shows zero of those images. The client cannot see that Robinhood uses lifestyle photography of young urban professionals in low-light settings, or that Coinbase uses architectural/large-scale OOH imagery. The *why* behind the color data is invisible.

**Fix:** Add a hover-reveal behavior: on hover of any barcode row, a strip of that brand's actual images slides up from below the barcode (max 6 images, fixed height 120px). This keeps the data-viz clean while revealing the source material on demand:
```css
.row {
  position: relative;
  cursor: pointer;
}

.image-preview {
  position: absolute;
  top: 100%;
  left: var(--label-w);
  right: 0;
  height: 0;
  overflow: hidden;
  display: flex;
  gap: 2px;
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10;
  background: #F0EEE9;
}

.row:hover .image-preview {
  height: 120px;
}

.image-preview img {
  height: 100%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
}
```

**Failure 2: JetBrains Mono throughout — wrong register**
JetBrains Mono is a coding font designed for IDEs. Using it for brand names, image counts, axis labels, and supporting copy makes every text element feel like it belongs in a terminal window. The brand names especially — `CASH APP`, `COINBASE` — should feel significant, not like file paths.

CE approved alternatives and the exact replacement:
```css
/* Remove JetBrains Mono from @import */
/* Add Syne for brand names */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

/* Apply: */
.brand-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  /* Remove monospace/tracking settings */
}

/* Keep Space Grotesk for metadata/supporting labels */
.eyebrow, .brand-count, .axis-label, .method {
  font-family: 'Space Grotesk', sans-serif;
  /* Adjust sizing as needed */
}
```

**Failure 3: #FAFAFA background + #111111 text — near-violations in both directions**
`#FAFAFA` (lightness: 98%) is one step from pure white. `#111111` (lightness: 7%) is two steps from pure black. The CE rule exists to prevent neutral, undesigned colorspace — this design is sitting at the absolute edge of the boundary. Combined with the light grey `--faint: #e2e2e2` and `--muted: #888888`, the entire palette is achromatic. For a design about *color*, the surrounding canvas is almost entirely devoid of it.

**Fix:** Introduce a single warm off-white that positions the design:
```css
:root {
  --bg: #F5F1EB;      /* Warm parchment — not neutral, suggests archival intelligence */
  --ink: #1A1612;     /* Warm near-black — same as Spectrum, which got this right */
  --muted: #7A7068;   /* Warm mid-grey */
  --faint: #E2DDD6;   /* Warm light grey */
}
```
This shifts the entire design from "clean tech app" to "considered editorial document" — which is CE's register.

### What Would Make This 10× Better
**Add the images and fix the fonts.** The concept is right. The animation mechanic is right. The data encoding is right. The scanner beam — while slightly gimmicky — works in context. With Syne for brand names, a warm parchment background, and the hover-reveal image strip, this becomes the most CE-authentic of all four designs. It's the only one where the organizing intelligence (color as brand DNA) is immediately legible from the page structure alone.

---

## Ranked Verdict

### KEEP AND ITERATE

**1. Barcode — Most CE-worthy concept in the set**
The thesis is clear, the execution is mostly clean, and the fixes are surgical. This needs: warm background, Syne for brand names, remove JetBrains Mono from the editorial layer, add image hover-reveal, ensure #111/#fafafa values drift slightly warm. Three hours of work turns this into something CE can genuinely present as distinctive.

**2. Spectrum — Strongest editorial promise, most correctable failures**
The Playfair Display header is the best type in the set. The "every image sorted by hue" concept is analytically powerful. The fixes are larger (image height, label system, data dependency) but all are structural, not conceptual. At 180–220px tile height with a proper label treatment, this becomes a genuinely stunning horizontal scroll experience. The brand-cluster effect at that scale would be immediately legible and impressive to a client.

---

### SCRAP

**3. Gallery — Competent. Not distinctive.**
The best implementation of the most conventional idea. A hue-sorted grid of brand images is something any decent designer could produce in Figma in an afternoon. The CE violations (4 gradients, pure black/white, text-shadow glows) are pervasive, not isolated. Even fixed, this would be the least surprising piece in the set. There's no concept here that would make eToro say "I've never seen competitive intelligence presented this way."

**4. Territories — Highest ceiling. Currently lowest floor.**
The potential is real — a semantic territory map with true competitive axes could be the most valuable artifact in the set. But it requires rebuilding the semantic logic from scratch: new axis definitions, new territory positioning, new size proportions, all shadow violations removed. The amount of work to fix this exceeds the amount of work to rebuild Spectrum or Barcode correctly. The scanlines need to go immediately. Trade Republic's postage-stamp territory needs to go. The pure black background needs to go. That's before addressing the core problem: currently it means nothing. Scrap in current form; the concept deserves a fresh start as a separate brief.

---

## Summary Fix Matrix

| Design | CE Violations | Concept Strength | Fix Complexity | Verdict |
|--------|--------------|-----------------|----------------|---------|
| Gallery | 4 gradients, pure black/white, text-shadow | Medium — conventional | Medium — lots of rule fixes | **SCRAP** |
| Spectrum | Borderline color values, data dependency | High — analytically precise | Medium — tile size, labels | **KEEP** |
| Territories | Pure black, pervasive box/text-shadow, no axes | High — but broken | High — semantic rebuild needed | **SCRAP** |
| Barcode | Near-black/white, wrong fonts, no images | Highest — concept first | Low — surgical fixes only | **KEEP** |

---

*Written by Anton — CE Creative Critic. No stars given for effort. Only signal.*