# Frontend Design

> Aesthetic Standards

- Skill: `scottermonk/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add scottermonk/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/scottermonk/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ScotterMonk (https://skillmd.com/u/scottermonk)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/scottermonk/frontend-design

---


## Aesthetic Standards

### Typography
- Pair a distinctive **display font** (headings) with a refined **body font**.
- Source from Google Fonts, Adobe Fonts, or system variable fonts — never system-ui defaults.
- **Never use**: Inter, Roboto, Arial, Helvetica, system-ui, sans-serif as a primary choice.
- Vary weight, size, tracking dramatically. Let type carry visual weight.

### Color
- Use CSS custom properties (`--color-*`) for all palette values.
- Commit to a dominant color with **sharp accents** — avoid evenly distributed "tasteful" palettes.
- Light *and* dark themes are both valid — vary across designs, never default to one.
- **Never use**: purple-on-white gradients, generic blue CTAs, gray placeholder schemes.

### Motion
- CSS-only preferred for HTML; Motion library for React.
- One well-orchestrated **page load** (staggered reveals via `animation-delay`) beats scattered micro-interactions.
- Use scroll-triggered reveals and hover states that genuinely surprise.
- Match motion intensity to the aesthetic — minimalist designs get subtle easing, not bounces.

### Layout & Space
- Break the grid deliberately: asymmetry, overlap, diagonal flow, pinned elements.
- Generous negative space **or** controlled density — not the safe middle.
- Grid-breaking hero elements, offset section headers, bleed images.

### Backgrounds & Depth
- No solid flat backgrounds. Add atmosphere: gradient meshes, noise textures, geometric patterns, layered SVG, grain overlays.
- Dramatic shadows, glows, or depth via `backdrop-filter` and layered `box-shadow`.
- Match the texture to the aesthetic — don't apply grain to a clean luxury design.

---

## Anti-Patterns (Never Do)

- Generic font families as primary choices (Inter, Roboto, Arial, system fonts)
- Purple gradients on white — or any clichéd startup color scheme
- Predictable card → header → CTA layouts without intentional deviation
- Cookie-cutter component patterns that lack context-specific character
- Converging on the same aesthetic across different generations (Space Grotesk, glassmorphism, etc.)

---

## Output Checklist

Before finishing, verify:
- [ ] Aesthetic direction is clear and intentional — not a blend of defaults
- [ ] Typography uses distinctive, non-generic font choices
- [ ] Color scheme uses CSS variables with a dominant + accent structure
- [ ] At least one layout surprise or visual moment worth remembering
- [ ] Animations serve the aesthetic and don't feel scattered
- [ ] Code is production-ready and functional (no placeholder logic)
- [ ] For Flask/Jinja: template syntax is valid and extends the appropriate base