Design-quality reference for financial-research visual output: typography, color, composition, and avoiding generic AI aesthetics
Installation
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Design-quality reference for financial-research visual output: typography, color, composition, and avoiding generic AI aesthetics
UI Design
A design-quality reference for any visual output you produce. It exists to make that output look like it came from a research desk, not a marketing landing page or a generic AI template.
Read this before producing any styled output — it covers design taste: typography, color, composition, and restraint. The examples below are HTML/CSS (the most common surface), but the principles apply to any visual you render — charts and images, PDFs, on-screen layouts — not just HTML.
This skill exists to help you match the user's personal frontend style and UI preferences — those always win over the defaults below. If the user has stated a taste — in this conversation, in your long-term memory, or in their saved preferences — it outranks every rule here. They want a specific brand color, a chosen font, a different accent, dark-only, no serif? Do that. The directions below are strong defaults for when the user hasn't expressed a preference; they are never a license to overrule the user's explicit style.
These are reference defaults, not a cage. They anchor quality and steer you off generic, lazy output — they don't replace your own judgment. When you have a clearly better, coherent choice for the specific content, take it. The only non-negotiables are the hard constraints: WCAG AA contrast, green/red reserved for profit/loss, and the theme-variable + print mechanics. The specific palette, font pairings, and exact scale below are strong starting points you are free to improve on.
The Tone: Research Desk, Not Marketing Page
The audience is a portfolio manager, analyst, or sophisticated investor reading a research note. They want dense, scannable, credible information design — the visual language of a sell-side note, a Bloomberg terminal, or a quality print newspaper's business section. Not a SaaS hero page.
This means:
Information density over whitespace theatre. A research reader expects a high signal-per-screen ratio.
Restraint over decoration. No hero gradients, no oversized rounded cards floating on pastel backgrounds, no "Get Started" energy.
Numbers are the protagonist. Tables, figures, and charts carry the page; prose supports them.
Credibility cues: sources cited, dates stamped, units labelled, precision consistent.
Avoid AI Slop
These are the tells of generic AI-generated UI. Each one has a concrete replacement — use the "instead" column.
Anti-pattern
Why it reads as slop
Instead
Inter everywhere (or system-font-only) for headings and body
The default AI font; signals zero typographic intent
Commit to a real pairing (see Typography). A serif or a distinctive grotesque for headings; a clean readable face for body.
Purple/violet gradients on white, or any gradient hero
The single most overused AI aesthetic
One flat accent color used sparingly. Backgrounds are paper (light) or ink (dark), not gradients.
Uniform rounded card grids — everything is a border-radius: 16px card with a drop shadow
Fill with real numbers and real findings; size containers to the actual content.
Typography
Commit to an intentional pairing — a real headline voice plus a clean body face, loaded from the Google Fonts CDN (allowlisted). The three below are proven starting points: pick one, use the user's brand font, or choose your own with the same level of intent. What matters is the commitment — don't fall back to Inter-everywhere or the bare system stack.
Pairings that work (starting points)
Editorial / authoritative — headings "Source Serif 4", Georgia, serif; body "Inter", -apple-system, sans-serif. Serif headings give a print-research feel; body stays clean and readable. (The only acceptable use of Inter: as the body of a serif-headed document — never as the headline voice.)
Modern terminal — headings & body "IBM Plex Sans", system-ui, sans-serif; figures/tables "IBM Plex Mono", monospace. Plex reads as engineered and precise; the mono companion makes numeric tables align beautifully.
Refined grotesque — headings "Newsreader", Georgia, serif (a true reading serif) or "Libre Franklin", sans-serif; body "Libre Franklin", sans-serif. Franklin is a workhorse news face with more character than Inter.
A real, restrained scale (ratio ~1.25) keeps sizing coherent. The values below are a sensible default — whatever scale you use, keep it consistent rather than sizing ad-hoc.
--text-xs: 0.75rem; /* 12px — captions, source lines, table headers */--text-sm: 0.875rem; /* 14px — secondary text, dense table cells */--text-base: 1rem; /* 16px — body */--text-lg: 1.25rem; /* 20px — section headings (h2/h3) */--text-xl: 1.75rem; /* 28px — KPI figures */--text-2xl: 2.25rem; /* 36px — page title (h1); typically one per document */
Numbers
Financial figures must use tabular (monospaced) digits so columns align and numbers don't jitter when they update:
Right-align numeric table columns. Keep decimal precision consistent within a column (e.g. all prices to 2dp). Label units once in the header, not on every cell.
Color
A restrained, committed palette: ink on paper with a single accent, plus the two semantic financial colors. One accent is the disciplined default — add a second hue only when it genuinely earns its place (a deliberate two-tone scheme), never as rainbow filler. The table below is a reference palette that meets AA on its paired backgrounds; use it, or derive your own that holds the same constraints.
Role
Light value
Dark value
Notes
Paper (page bg)
#fbfaf8 / #ffffff
#0f1117
Warm off-white reads as print; pure white is harsher
Ink (primary text)
#1a1a1a
#e8e8e8
Near-black, not pure #000
Muted ink (secondary)
#5a5a5a
#9aa0aa
Labels, captions, source lines
Accent
#1f5fb4 (steel blue)
#5b9bff
Links, active states, single-series charts
Profit / positive
#1a7f4f
#3fb37a
Green — gains only
Loss / negative
#b42318
#f0685a
Red — losses only
Hairline border
#e4e1dc
#262a33
Rules between sections, table row lines; use at 1px or 0.5px
Rules:
WCAG AA: body text ≥ 4.5:1 against its background; large text/UI ≥ 3:1. The values above meet AA on their paired backgrounds. Verify any custom pairing.
Green/red are reserved for profit/loss and beat/miss. Never use them as decorative categorical colors.
Dark-aware via the fallback pattern: author every color as var(--color-role, #literalFallback) so the output themes with the app yet still renders standalone and in print.
Categorical chart palette (when you genuinely need categories): derive 3-4 muted tints rather than full-saturation hues, e.g. the accent plus two desaturated neighbors. More than 4 series → switch to small multiples or a table.
Composition
One reading column, left-aligned, max-width ~min(100%, 1100px) for reading-heavy layouts (wider for dense, data-heavy views). Center the column on the page, not the text within it.
Hairline rules over boxes to divide sections. A 1px top border on each section header carries hierarchy more cleanly than wrapping everything in shadowed cards.
A real grid for KPI rows: display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .... Consistent gaps; aligned baselines.
Generous but consistent vertical rhythm between sections; tight, dense rhythm inside tables. Density is a feature for data; air is for separating ideas.
Hierarchy through weight and size, not color. A heading is bigger/heavier, not a different hue. Reserve color for semantics (links, profit/loss).
Tables earn their space: zebra striping is optional and should be subtle (a 2-3% tint); a hairline under the header row and between groups is usually enough. Right-align numbers, left-align labels.
Motion (Restrained)
Motion is the exception, not the rule, in a research document.
Keep motion restrained and purposeful — a brief entrance (e.g. a staggered fade-in of sections on load) is plenty. Avoid scattered hover wiggles, parallax, and infinite loops in a report.
Charts may animate their initial draw (Chart.js/ECharts default) — keep it short.
Respect reduced-motion and never let animation block print:
(The opacity: 1 !important in the @media print block above is what keeps entrance-animated elements from exporting blank — keep it.)
Match Complexity to the Content
Spend effort on precision, number formatting, alignment, and sourcing — not decoration. Add visual complexity only when the content genuinely calls for it; a clean, dense research note beats an over-animated one.
Apply Checklist
Before delivering any styled output:
Committed to one typographic pairing from above (no Inter-as-headline, no system-font-only)
Real type scale used — no ad-hoc font sizes
Financial figures use font-variant-numeric: tabular-nums; numeric columns right-aligned, consistent precision
One accent color; green/red reserved strictly for profit/loss
All colors authored as var(--color-role, #fallback); WCAG AA verified for body text
No purple gradients, no uniform shadowed-card grids, no emoji icons, no rainbow charts
Left-aligned reading column, hairline rules over boxes, consistent vertical rhythm
Motion (if any) respects prefers-reduced-motion and is forced off / opacity-restored in @media print
Reads as a research desk artifact, not a marketing page — dense, credible, scannable
