Merge Syne-specific anti-pattern into the general overused fonts list

Syne stays in reflex_fonts_to_reject but no longer gets a standalone
DON'T rule in the skill or a separate LLM-only entry in the catalog.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-09 16:46:33 -07:00
co-authored by Claude Opus 4.6
parent 2a554bd4ef
commit e94fe3d931
2 changed files with 1 additions and 12 deletions
-10
View File
@@ -138,8 +138,6 @@ export const VISUAL_EXAMPLES = {
// ── LLM-only rule visuals ─────────────────────────────────────────
'syne-display-font': `<div style="font-family: system-ui, sans-serif; color: #111; text-align: left;"><div style="font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-stretch: 125%; text-transform: none; line-height: 1;">Synelike</div><div style="font-size: 11px; color: #888; margin-top: 6px;">Every AI landing page uses this shape.</div></div>`,
'monospace-as-technical': `<div style="font-family: 'Courier New', monospace; color: #111;"><div style="font-size: 18px; font-weight: 700; margin-bottom: 6px;">TECHNICAL_TOOL</div><div style="font-size: 11px; color: #555;">Mono for "developer" vibes. Lazy.</div></div>`,
'dark-mode-default': `<div style="background: #0f1117; padding: 18px; border-radius: 8px; font-family: system-ui, sans-serif;"><div style="color: #e5e7eb; font-size: 14px; font-weight: 600; margin-bottom: 4px;">Dark by default</div><div style="color: #9ca3af; font-size: 11px;">Defaulting to dark is a retreat from a decision.</div></div>`,
@@ -256,14 +254,6 @@ export const GALLERY_ITEMS = [
// ─── LLM-only rules ──────────────────────────────────────────────────
export const LLM_ONLY_RULES = [
{
id: 'syne-display-font',
category: 'slop',
name: 'Syne as display font',
description:
'Syne is the most overused "distinctive" display font and reads as an instant AI design tell. Pick something else.',
skillSection: 'Typography',
},
{
id: 'monospace-as-technical',
category: 'slop',
+1 -2
View File
@@ -95,7 +95,7 @@ Instrument Sans
Instrument Serif
</reflex_fonts_to_reject>
Reject every font that appears in the reflex_fonts_to_reject list. They are your training-data defaults and they create monoculture across projects. **Syne in particular is the most overused "distinctive" display font and is an instant AI design tell. Never use it.**
Reject every font that appears in the reflex_fonts_to_reject list. They are your training-data defaults and they create monoculture across projects.
Step 3. Browse a font catalog with the 3 brand words in mind. Sources: Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim Type Foundry, Velvetyne. Look for something that fits the brand as a *physical object* — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a children's book printed on cheap newsprint. Reject the first thing that "looks designy" — that's the trained reflex too. Keep looking.
@@ -108,7 +108,6 @@ DO vary font weights and sizes to create clear visual hierarchy.
DO vary your font choices across projects. If you used a serif display font on the last project, look for a sans, monospace, or display face on this one.
DO NOT use overused fonts like Inter, Roboto, Arial, Open Sans, or system defaults — but also do not simply switch to your second-favorite. Every font in the reflex_fonts_to_reject list above is banned. Look further.
DO NOT use Syne. Ever. It is an instant AI design tell.
DO NOT use monospace typography as lazy shorthand for "technical/developer" vibes.
DO NOT put large icons with rounded corners above every heading. They rarely add value and make sites look templated.
DO NOT use only one font family for the entire page. Pair a distinctive display font with a refined body font.