Typography, Color, and Visual Polish

Use type, color, depth, imagery, and polish to communicate and express personality — not to decorate.

When this applies

• Styling buttons, wells, inputs, panels, or other surfaces that need depth cues (P048).
• Selecting and setting type (P052).
• Designing icons and imagery for an interface (P054).
• Establishing a product or feature visual direction (P082).

Procedure

Apply these principles to the situation under review; for each, name the user goal at stake and the trade-off the choice carries.

1. Communicate raised or inset depth by choosing the intended surface profile and applying subtle lightness, highlights, and shadows that preserve the visual system. (P048)
2. Choose typefaces by role (serif for dense body text, sans serif for UI and small sizes, display only for headlines, monospace for numeric/simple displays), keep on-screen type at least 10pt with 12pt standard body, set adequate leading, pair a serif with a sans serif, and left-align long text. (P052)
3. Use cohesive, consistent, and contextually appropriate imagery grounded in the personas' mental models and cultural/domain visual language: give similar elements shared visual attributes and contrast only what differentiates meaning, design function-oriented icons that show both the action and the object acted upon, visually distinguish elements that behave differently with a consistent symbol per object type, and keep icons simple and schematic rather than photorealistic. (P054)
4. Define an intentional product personality and express it consistently through typography, color, corner shape, and interface copy. (P082)
5. Add polish by upgrading existing defaults such as bullets, quotes, links, and form controls before adding unrelated decorative elements. (P083)
6. Challenge generic component conventions when richer structure better communicates the choices or data, such as sectional dropdowns, hierarchical tables, visual table content, or selectable-card radios. (P084)

Principles applied

• P048 (medium) — grounded in claims/evidence and chunk anchors in sources/.
• P052 (high) — grounded in claims/evidence and chunk anchors in sources/.
• P054 (high) — grounded in claims/evidence and chunk anchors in sources/.
• P082 (medium) — grounded in claims/evidence and chunk anchors in sources/.
• P083 (medium) — grounded in claims/evidence and chunk anchors in sources/.
• P084 (medium) — grounded in claims/evidence and chunk anchors in sources/.

Provenance

Grounded in principles P048, P052, P054, P082, P083, P084, their backing claims and evidence records, and paragraph-level source anchors under sources/anchors/. Every cited id resolves into this package's distilled spine; see provenance-ledger.md and reports/faithfulness-report.yaml.