inter-without-ai-slop
Inter Without the AI-Slop Look
Inter is not the problem. Using it as the only typographic decision — one face, one weight for everything, default line-height, default number rendering — is what reads as templated. This skill is a checklist for making Inter feel like a deliberate choice in dense, tabular, internal-tool UIs (sales cockpits, admin panels, ops dashboards).
When reviewing an existing file (not writing one from scratch), run scripts/audit_ui_file.py <file> first — it mechanically checks the two things in this checklist that are actually objective (hex colors close to the known AI-default accents, and how many distinct pill/badge shapes a file uses) instead of eyeballing them. It's a heuristic starting point, not a verdict: a flagged color might be an intentional choice (check hue distance and context before asking for a change), and it won't catch anything expressed outside inline hex/className strings (CSS variables, a theme file). Read the file yourself regardless — the script narrows where to look, it doesn't replace looking.
1. Split the typographic roles — don't let Inter do everything
A generic-looking screen uses one face for labels, values, headings, and body copy. Give Inter a defined lane and add at least one other face for numbers.
- Labels / nav / body text: Inter (Regular/Medium). This is its actual strength — leave it alone here.
- Numeric data (table columns, KPIs, currency, %): switch to a monospaced or tabular-figure face — JetBrains Mono, IBM Plex Mono, Berkeley Mono, or Söhne Mono. Numbers that align on a fixed grid read as "someone designed this table."
- Headings / hero figures (optional): a face with more character than Inter, used sparingly — one weight, one place. Don't reach for Inter Bold as the only lever for "this matters."
If a second face isn't feasible, at minimum force font-feature-settings: 'tnum' 1, 'ss01' 1 (tabular figures) on every numeric column so digits don't jitter between rows.
2. Ration badges and pills
The single biggest "AI dashboard" tell: every status, tag, trend, and category wrapped in the same rounded-pill shape regardless of semantic weight. Before adding a pill, ask what shape category it belongs to and stay consistent within that category only: