# Design Fundamentals Beginner

> Covers basic typography and color decisions for UI and branding work — type scale, font pairing, hierarchy, and simple color palettes. Use when picking fonts or colors for a design and unsure where to start, or when a design feels visually inconsistent and you're not sure why.

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

---


# Design Fundamentals: Typography and Color (Beginner)

Typography and color are two of the fastest ways to make a design look either professional or amateur. This skill gives simple, reliable defaults so you're not guessing every time.

## Typography

### A simple type scale to start with
```
Heading 1: 32px / bold
Heading 2: 24px / semibold
Heading 3: 18px / semibold
Body text: 16px / regular
Caption/label: 13px / regular
```
Line height (space between lines) should be about 1.4-1.5x the font size for body text — this keeps paragraphs easy to read. Headings can be a bit tighter, around 1.2x.

### Font pairing rule
Use a maximum of two fonts in one project: one for headings, one for body text. Using more than two fonts almost always looks inconsistent, even if each font is nice on its own. If you don't have a strong preference, a clean sans-serif font (rounded, simple letterforms) for both headings and body is a safe, professional default.

### Check your hierarchy
Look at your screen and ask: does my eye know what to look at first, second, third? If everything is roughly the same size and weight, that's the most common typography mistake for beginners. Fix it by increasing the size or weight difference between heading and body — not by adding more colors to compensate.

## Color

### Keep your palette small
- 1 primary color (used for buttons, links, key actions)
- 1-2 neutral grays (for text and backgrounds)
- 1 accent color at most (for highlights or secondary actions)

Adding more colors "to make it interesting" usually backfires — it makes a design feel busy and unfocused instead of intentional.

### Contrast rule
Text needs to be clearly readable against its background. Use dark text on a light background, or light text on a dark background — never a mid-tone color on another mid-tone, which is hard to read for everyone, not just people with visual impairments.

### Steps to pick a palette
```
[ ] Step 1: Pick one primary color
[ ] Step 2: Pick a neutral gray scale (2-3 shades: light background, mid-tone for secondary text, dark for main text)
[ ] Step 3: Add one accent color only if you genuinely need it for buttons or highlights
[ ] Step 4: Check that text stays readable against every background you're using
```

## Common mistakes
- Using more than 2 fonts in a single design.
- Picking font sizes and weights that don't create clear hierarchy.
- Adding too many colors instead of keeping the palette minimal.
- Choosing decorative or trendy fonts for body text, where readability matters more than style.

## Checklist
```
[ ] Type scale applied consistently (not random sizes)
[ ] Maximum 2 fonts used
[ ] Clear hierarchy — first, second, third read order is obvious
[ ] Palette kept to 1 primary + 1-2 neutrals + 1 accent max
[ ] Text contrast checked against every background
```