# ApexLens — Style Guide (anchored in reference imagery)

Companion to `apexlens-strategy-rundown.html`. A reusable visual language for long-form
strategy/GTM documents, distilled from the reference work shared by **@hewarsaber, @KarthikBeladev,
and @pankajstwt** (design-in-public posts) and verified by a multi-model vision suite.

> **Method.** 20 images (11 from @hewarsaber's showcase, 1 from @KarthikBeladev's "Angelo" hero,
> 8 from @pankajstwt's landing-page iterations) were sent, in full, to 7 independent vision-language
> models, each asked to return a JSON style guide. The guide below is the synthesized, consensus
> output (the strongest agreement carries the most weight).

**Vision suite (7 models):**

| Model | Family / provider | Confidence it expressed |
|---|---|---|
| Google Gemini 3.1 Flash-Lite | Gemini 3 | 1.00 |
| Google Gemini 2.5 Pro | Gemini 2.5 | 0.95 |
| Qwen 3-VL 235B (A22B, dense) | Qwen / Alibaba | 0.92 |
| Qwen 3-VL 32B | Qwen / Alibaba | 0.92 |
| OpenAI GPT-4.1-mini | OpenAI | 0.95 |
| Meta Llama-4 Maverick | Llama / Meta | 0.80 |
| Amazon Nova-Lite | Nova / AWS | 0.85 |

(Note: `mistralai/mistral-small-3.2-24b` was excluded — the reachable OpenRouter provider does not
accept image input.)

---

## 1 · The shared aesthetic (synthesis)

The seven models converge on one reading: **cinematic, high-contrast, "retro-futurist / sci-fi-noir"
tension between textured analog mood and clean modern precision.**

- Glossy **3D centerpiece object** per hero — lit, emissive, floating, not realistic but not flat.
- Strong **dark/light section rhythm** — near-black cinematic sections alternating with off-white,
  high-whitespace ones.
- **Bento / modular** layout for content; asymmetry and layered z-depth for liveliness.
- **Glassmorphism + grain + glow** instead of flat shading or heavy drop shadows.
- Vibrant, saturated, **retro-RGB accents** on dark (red · blue · mint), never pastel.
- Data viz is **minimal + elegant**: one glowing metric, layered gradients, no decoration.

> One line: *"the strategy deck should feel like a narrative product — data-heavy, hyper-precise,
> wrapped in evocative, slightly surreal imagery."* — Gemini 3.1 Flash-Lite

## 2 · Color system

Consensus palette (final token set used by the rundown):

| Token | Hex | Role | Usage |
|---|---|---|---|
| `--ink` | `#0A090F` | Near-black base | Hero + band backgrounds, cinematic canvas |
| `--ink-2 / --ink-3` | `#14131C / #1C1B28` | Layered dark | Cards, panels, gradients on dark |
| `--paper` | `#F5F5F0` | Off-white | Light sections & body — warmer than pure white |
| `--paper-2` | `#ECF0F5` | Alt light | Alternating light band |
| `--accent` | `#FF4136` | **Action / heat** | CTAs, critical values, combat, headlines | 
| `--accent-2` | `#FF8A3D` | Warm glow | Gradient partner, hover, auxiliary accents |
| `--blue` | `#007AFF` | **Tech / data-viz** | Structural lines, chart strokes, interactive nodes |
| `--teal` / mint | `#0F7B6C / #2FE3B6` | **Status / highlight** | Success, live signals, secondary buttons |
| `--gold` | `#FFC400` | Premium / warning | Coach tier, warnings, spot highlights |
| `--muted` | `#8A8A80` | Muted text | Captions, metadata, secondary labels |

Rules:
- Use the near-black + off-white as the two anchors; color is an **accent tool**, not a fill.
- Accent colors are vivid and saturated (`#FF4136`, `#007AFF`, `#00F0B5`-family) — the retro-RGB triad.
- Never more than two accents competing in one view; one leads, one supports.

## 3 · Signature gradient

> *"Gradients are not smooth — they are textured and emissive. Use radial auras (heat-map / glow)
> rather than flat UI gradients."* — Gemini 2.5 Pro

Faithful recipe:
```css
/* emissive light source behind a 3D object or as atmospheric overlay */
background:
  radial-gradient(circle at 70% 20%, rgba(255,65,54,.55), transparent 55%),  /* red heat */
  radial-gradient(circle at 15% 90%, rgba(0,122,255,.45), transparent 55%),  /* cobalt */
  radial-gradient(circle at 90% 85%, rgba(0,240,181,.35), transparent 55%),  /* mint */
  #0A090F;
```
Apply as **blurred/glowing light behind imagery**, never as a fill on cards or buttons.
Pair with a grain overlay (see §5).

## 4 · Typography

- **Character:** geometric sans-serif, high x-height, tight tracking, strong weight contrast.
  (`Inter / Geist / Satoshi / Montserrat` family.) *"Confident, technical, sharp."*
- **Display / hero:** extra-bold (700–900), `letter-spacing: -0.02em`, large, high contrast vs the
  dark canvas. Uppercase sub-headlines used sparingly. Consider gradient or outlined numerals for
  section markers.
- **Kickers:** uppercase, letterspaced (~0.1–0.24em), small; they carry the "technical" voice.
- **Numerals / stats:** tabular, bold, large, colored by accent; they are the data voice.
- **Legibility over flourish:** base body at readable weight, avoid low-contrast text on busy bg.

## 5 · Texture & material

- **Film grain / noise** over dark areas (SVG `feTurbulence` data-URI) — kills digital sterility.
- **Gloss / glass:** translucent surfaces, 1px light borders, backdrop blur — not hard skeuomorphism.
- **Glow beats shadow:** prefer blurred color glow over standard `box-shadow` drop shadows.
- **Floating elements** (chips, shards, orbs) — use sparingly and with restraint (see anti-patterns).

## 6 · Layout & composition

- Hero = split or split-with-centerpiece: bold copy left, glossy 3D object right/center.
- **Dark/light rhythm:** alternate cinematic dark bands with clean light sections.
- **Bento grids** for modular content; cards with generous radius (16–22px).
- Whitespace is the luxury; let sections breathe.
- Layered z-depth: halo/ring behind the hero object, floating chips above it.

## 7 · Motion

- Implied motion that the stills suggest: **floating/bob**, **slow rotation of the centerpiece**,
  **scroll reveal**, **shimmer on gradients**, **parallax between layers**, **pulsing live gates**.
- Keep it slow and classy; motion supports hierarchy, it doesn't compete with it.

## 8 · Data visualization

- One glowing headline metric per block (big colored numeral).
- **Minimal elegant**: bar/donut/sparkline with subtle gradients + thin strokes, no 3D gimmicks.
- Use accent colors only where they mean something (combat = red, success = mint, tech = blue).
- Trend lines get a gradient stroke (warm→cool); thresholds drawn as dashed glow line.

## 9 · Anti-patterns (what the models flagged)

1. Flat, textureless backgrounds — always add grain/emissive depth.
2. Standard drop shadows on UI cards — use blur/glow or borders instead.
3. **Overuse of glow / gradients / floating elements → visual noise.** Restraint is the discipline.
4. Cluttered multi-column primary content; low-contrast text on busy backgrounds.
5. Inconsistent type scale / mixing too many font families.
6. Overly decorative/playful typography; glossy or skeuomorphic UI.
7. Over-saturated data-viz decoration — charts should be quiet, not loud.

## 10 · How this applies to the rundown

- `:root` tokens above replace the earlier orange/teal/purple set → red/blue/mint triad on painterly
  near-black `#0A090F`, warm off-white `#F5F5F0`.
- Hero + band gradients become **emissive radial auras** (red heat, cobalt, mint) with grain.
- Keep the glass/bento/counters/sparkline/donut language — it already matches.
- Toning discipline applied: fewer competing glows, glow-instead-of-shadow, high contrast.

## 11 · Sources

- References: 20 images pulled from the three public posts (media resolved via their oEmbed +
  status-page media URLs). Anchoring posts:
  - `x.com/hewarsaber/status/2084680618072252799` (~@hewarsaber, "this style is undefeated")
  - `x.com/KarthikBeladev/status/2077438882208260162` (~'Angelo' hero section)
  - `x.com/pankajstwt/status/2083455660252102756` (~landing-page iterations)
- Analysis: 7-model vision suite (above) over the same 20 images.
- Evidence style note: this guide is a **design opinion** informed by models, not a market fact.