# Web Design Guidelines

> A portable design system (Typography, Spacing, Accessibility). Preventing "ugly" default UI generation by enforcing specific CSS standards.

- Skill: `mayurrathi/web-design-guidelines` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mayurrathi/web-design-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mayurrathi/web-design-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: mayurrathi (https://skillmd.com/u/mayurrathi)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/mayurrathi/web-design-guidelines

---


# 2.1.4 Web Design Guidelines

This meta-skill acts as a strict firewall against generic, default, or "ugly" UI generation in web applications.

## 1. Typography
- **Kill Defaults:** Never use Times New Roman or default browser sans-serif. Inject modern fonts like Inter, Roboto, or system UI fonts immediately.
- **Hierarchy:** Use a strict mathematical scale (e.g., 1.25 ratio) for headings to body text.

## 2. Spacing & Layout
- **The 8pt Grid:** Use margins and paddings in multiples of 4 or 8 (`8px, 16px, 24px, 32px`). Avoid arbitrary pixel values.
- **Breathing Room:** Liberal use of whitespace is mandatory. Dense UIs are unacceptable unless building a dashboard.

## 3. Color & Aesthetics
- **Never Pure Colors:** Do not use `red`, `blue`, or `#000000`. Use curated, slightly muted hex codes or HSL values (e.g., `#1e293b` for black).
- **Subtlety:** Use very subtle box shadows (`rgba(0,0,0,0.05)`) and slight border radii (`8px` or `12px`) to soften layouts.