human-ui

Human UI

Build web interfaces that look intentionally designed by a human, not generated by AI.

Hard Rules

NEVER:

• Use emojis anywhere in UI text or code comments
• Use purple, violet, neon green, electric blue, or any saturated/bright color
• Use gradient text (background-clip: text)
• Use glow effects (box-shadow with color spread, shadow-[0_0_Xpx_color])
• Use floating/animated badges
• Use hover:scale-* zoom effects
• Use // SECTION NAME monospace comment labels as UI elements
• Use colored terminal dots (red/yellow/green) decoratively
• Use marquee/infinite scroll animations
• Use multiple accent colors (pick ONE accent, use it everywhere)
• Use generic font stacks (Inter, Roboto, Arial, system-ui as display fonts)

ALWAYS:

• Use shadcn/ui components as base (Button, Card, Badge, etc.)
• Use ONE accent color maximum, muted and warm
• Use generous whitespace (sections: py-24, cards: p-8, gaps: gap-6)
• Use tight tracking-[-0.02em] to tracking-[-0.05em] on headings
• Use subtle borders: border-border or border border-[color]/10
• Use transition-colors only (no transform transitions)
• Use text hierarchy: white/black headings, muted body (text-muted-foreground)
• Use em dashes (—) instead of checkmark icons for lists
• Prefer text-only feature cards over icon-heavy cards

Color Systems

See references/palettes.md for approved palettes.

Pick ONE palette per project. Each palette has: background, foreground, muted, accent, border.

Component Patterns

See references/components.md for approved patterns with code examples.

Typography

Display/Headings: Use a distinctive font. Good choices:

• Geist (Vercel's font) — clean, geometric
• Satoshi — modern, warm
• General Sans — friendly, professional
• Cabinet Grotesk — editorial feel
• Plus Jakarta Sans — soft, approachable

Pair with Geist Mono or JetBrains Mono for monospace accents.

Heading scale (mobile / desktop):

• H1: text-3xl / text-5xl lg:text-6xl, font-bold, tracking-[-0.03em]
• H2: text-2xl / text-3xl lg:text-4xl, font-semibold, tracking-[-0.02em]
• H3: text-lg / text-xl, font-medium
• Body: text-base, text-muted-foreground, leading-relaxed
• Small: text-sm, text-muted-foreground/50

Layout Rules

• Max content width: max-w-6xl or max-w-7xl
• Section padding: py-20 sm:py-28
• Card radius: rounded-2xl (large cards), rounded-xl (small)
• Grid gaps: gap-6 (cards), gap-12 (sections within grid)
• Center section headers: text-center mb-16
• Asymmetric grids: md:grid-cols-[1.2fr_1fr] for hero, md:grid-cols-3 for features

Spacing Rhythm

Alternate between tight and breathing sections:

Hero:        py-20 (compact, above the fold)
Stats:       py-12 (tight, quick scan)
Features:    py-28 (breathing room)
Showcase:    py-24 (standard)
Pricing:     py-28 (decision section, needs air)
CTA:         py-20 (compact closing)

Anti-Patterns Checklist

Before delivering any UI, verify NONE of these are present:

Pattern	Why it looks AI	Fix
6 colored icons in feature cards	Classic ChatGPT output	Text-only cards, single accent
gradient-text class	Overused by AI tools	Solid text-accent
Green pulse dots	AI startup cliche	Remove or use static text
hover:scale-105 on buttons	Cheap interaction	hover:bg-accent/90 color shift
Multiple section accent colors	No design system coherence	ONE accent everywhere
bg-gradient-to-r from-X to-Y on buttons	Screams AI	Solid bg-accent
// SECTION LABEL in monospace	AI code comment as design	Remove entirely
SVG checkmarks in every list	Over-decorated	Em dashes or plain bullets
Large blur blobs blur-[120px]	AI background effect	Solid or subtle gradient
Marquee scrolling text	Filler content signal	Remove or replace with static

Workflow

1. Read the user's request and identify: page type, content, target audience
2. Select palette from references/palettes.md
3. Select component patterns from references/components.md
4. Build with shadcn/ui primitives + Tailwind
5. Run anti-patterns checklist before delivering
6. Verify: no emojis, no bright colors, no gradients, no glow, no zoom