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 market-data 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.