ui-design

name	ui-design
description	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	Marketing-template look; wastes vertical space; flattens hierarchy	Use tables for tabular data, rules (hairline borders) to separate sections, and reserve cards for genuine KPI callouts. Small radius (4–8px) or none.
Emoji as icons (📈 💰 🚀 in headings/labels)	Looks unserious; breaks in print; inconsistent rendering	Use a real icon set sparingly (inline SVG, e.g. lucide), or just clean typographic labels. Most research UIs need no icons at all.
Rainbow categorical charts — 8 saturated hues with no logic	Looks like a default Chart.js palette; hard to read; no semantic meaning	A restrained sequential or single-hue-with-tints palette; reserve green/red strictly for profit/loss. Max 3-4 categorical colors, muted.
Centered everything with huge top margins	Landing-page composition; poor for scanning data	Left-aligned reading column, tables flush, consistent baseline grid.
Generic stock-photo-style placeholder vibes — giant empty cards, "Lorem"-feeling filler	Signals the content wasn't really designed	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)

1. 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.)
2. 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.
3. 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.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

Type scale

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:

.figure, td.num, .kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; opacity: 1 !important; }
}

(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