ui-design-principles

What this skill does

# UI Design Principles

## Starting from Scratch

### Start with a Feature, Not a Layout
- Don't begin with the shell (navbar, sidebar, footer). Start with the actual feature/functionality.
- Design in grayscale first to force clear hierarchy through spacing, contrast, and size rather than color.
- Don't design every single feature upfront. Work in short cycles: design a simple version, implement it, iterate.

### Choose a Personality
- Font choice affects personality: serif = elegant/classic, rounded sans-serif = playful, neutral sans-serif = professional.
- Color affects personality: blue = safe/familiar, gold = high-end, pink = fun/playful.
- Border radius affects personality: small = neutral/serious, large = playful, none = formal.

### Limit Your Choices
- Define systems in advance: spacing scales, font sizes, colors, shadows, etc.
- Systematize everything to avoid decision fatigue and inconsistency.

## Hierarchy is Everything

### Size Isn't Everything
- Don't rely on font size alone for hierarchy. Use font weight and color as primary tools.
- For primary content: use dark color (e.g., hsl(210, 15%, 20%)), normal-to-bold weight.
- For secondary content: use medium grey (e.g., hsl(210, 10%, 55%)), normal weight.
- For tertiary content: use lighter grey (e.g., hsl(210, 10%, 70%)), normal weight, smaller size.
- Use 2-3 shades of grey for text: dark, medium, and light. Avoid more than that.
- Don't use grey text on colored backgrounds. Instead, use the background color with adjusted opacity or a hand-picked color that matches.

### Emphasize by De-emphasizing
- Sometimes the best way to make something stand out is to de-emphasize the things around it.
- Instead of making a primary action bigger, make secondary actions smaller/lighter.

### Labels Are a Last Resort
- Don't slap a label on everything. The data itself often indicates what it represents.
- Combine labels with values when possible (e.g., "12 left in stock" instead of "In Stock: 12").
- When you do use labels, de-emphasize them (smaller, lighter, uppercase) and emphasize the value.

### Separate Visual Hierarchy from Document Hierarchy
- Don't let semantic HTML dictate visual styling. An h3 can be visually large and bold when it's the page title.
- Style based on the role content plays in the UI, not its HTML tag.

### Balance Weight and Contrast
- Bold text with low contrast can have the same visual weight as normal text with high contrast.
- Icons beside text often feel too heavy; reduce contrast/opacity on the icon to balance.

### Semantics Are Secondary
- Use semantic colors (red for destructive actions) as secondary indicators, not primary ones.
- For destructive actions: make the button smaller/less prominent, not big and red.

## Layout and Spacing

### Start with Too Much White Space
- Begin with way more space than you think you need, then reduce.
- White space should be removed, not added.

### Establish a Spacing and Sizing System
- Use a constrained scale based on a base value of 16px:
  - 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 192px, 256px, 384px, 512px, 640px, 768px
- Each step should be at least 25% different from adjacent values.
- A linear scale (multiples of 4px) doesn't work because jumps feel too small at large sizes and too large at small sizes.

### You Don't Have to Fill the Whole Screen
- If content needs 600px, use 600px. Don't spread it to fill 1400px.
- Not everything needs to be full-width. A login form on a wide page should still be constrained.
- Start with mobile (~400px) and work up.
- Use columns instead of stretching narrow content.

### Grids Are Overrated
- Don't make everything fluid/percentage-based. Sidebars should often have fixed widths.
- Give components the space they need. Use max-width instead of grid column widths.
- Don't shrink elements until you need to (responsive breakpoints).

### Relative Sizing Doesn't Scale
- Don't assume all elements should scale proportionally across screen sizes.
- Large elements shrink faster than small ones on smaller screens.
- Button padding should not be proportional to font size — larger buttons get more generous padding.

### Avoid Ambiguous Spacing
- When groups of elements lack visible separators, use spacing to show relationships.
- The space between a label and its input should be less than the space between form groups.
- More space around groups than within them. This applies to form fields, headings, list items, and horizontal layouts.

## Typography

### Establish a Type Scale
- Recommended scale: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px.
- Don't use em units for type scales — use px or rem to guarantee consistency.
- Avoid modular scales (mathematical ratios) for interfaces — they produce fractional values and too few useful sizes.

### Use Good Fonts
- For UI design, default to neutral sans-serif fonts.
- System font stack: `-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue`
- Filter fonts by number of weights: only consider typefaces with 5+ weights (10+ styles including italics).
- Optimize for legibility: avoid condensed typefaces with short x-heights for body text.
- Trust popular fonts: sort by popularity in font directories.

### Line Length
- Keep paragraphs 45-75 characters per line (20-35em).
- Use `max-width` in em units to control line length independent of container width.
- Wider content areas can contain images/components at full width while constraining paragraph text.

### Baseline Alignment
- When mixing font sizes on the same line, align by baseline, not center.
- `align-items: baseline;` not `align-items: center;`

### Line-Height Is Proportional
- Line-height and font size are inversely proportional.
- Small text (body): line-height 1.5-1.75
- Large text (headlines): line-height 1-1.25
- Wide content needs taller line-height; narrow content can use shorter line-height.

### Links
- Not every link needs a bright color. In link-heavy UIs, use bolder weight or darker color instead.
- Ancillary links can be styled on hover only.

### Text Alignment
- Default to left-aligned text for English.
- Center alignment works for headlines and short blocks (2-3 lines max).
- Right-align numbers in tables for easy comparison.
- Enable `hyphens: auto` when using justified text.

### Letter-Spacing
- Trust the typeface designer by default.
- Tighten letter-spacing for headlines using wide-spaced font families (`letter-spacing: -0.02em`).
- Increase letter-spacing for ALL CAPS text (`letter-spacing: 0.05em`).

## Working with Color

### Use HSL, Not Hex
- HSL represents colors as humans perceive them: hue (0-360 degrees), saturation (0-100%), lightness (0-100%).
- HSL makes it easy to create color variations by adjusting a single parameter.

### You Need More Colors Than You Think
- A real UI needs 8-10 shades per color, not just 5 hex codes.
- Three categories: Greys (8-10 shades), Primary colors (5-10 shades each), Accent colors (5-10 shades each for semantic states).
- True black looks unnatural. Start with a very dark grey.

### Define Shades Up Front
- Don't use CSS preprocessor functions (lighten/darken) to create shades on the fly.
- Pick a base color (good for a button background), then find the darkest shade (for text) and lightest shade (for tinted backgrounds).
- Fill in gaps: use 9 shades (100-900 scale). Start with 100, 500, 900, then fill 300, 700, then 200, 400, 600, 800.

### Saturation and Lightness
- As lightness approaches 0% or 100%, increase saturation to compensate for washed-out appearance.
- To make a color lighter without losing intensity, rotate hue toward bright hues (60°/yellow, 180°/cyan, 300°/magenta).
- To make a color darker, rotate hue toward dark hues (0°/red, 120°/green, 240°/blue).
- Don't rotate more than 20-30° or the color will look completely different.

### Grey Temperature
- Saturate greys with blue for a cool feel, or yellow/orange for a warm feel.
- Increase saturation for li