---
watermark: ORIRO
name: creative-design-principles
provider: ORIRO.ai
copyright: Copyright (c) 2026 ORIRO.ai
description: >
  Design fundamentals — color theory, typography, layout, visual hierarchy, gestalt principles, and design thinking.






  Sources: Open educational resources, Canva Design School, MIT OCW Architecture, design classics.
---

# Design Fundamentals

## The core principles (C.R.A.P.)

**Contrast:** Make different things look different. Similar things look similar.
Contrast creates visual hierarchy and directs the eye.
Ways to contrast: Size, color, weight, shape, texture, position.
Bad design: Everything the same size, same color, same weight — looks flat.

**Repetition:** Repeat visual elements throughout a design to create consistency and unity.
Fonts, colors, spacing, shapes — use consistently.
Creates recognition, professionalism, brand identity.

**Alignment:** Every element should have a visual connection to something else.
Align text and images to an invisible grid.
Centered alignment = formal but weaker. Left or right alignment = stronger visual line.
Never center everything by default.

**Proximity:** Group related items together. Separate unrelated items.
White space between groups signals separation. White space within signals relationship.
Group navigation links together. Separate headers from body text with appropriate space.

## Color theory

**Color wheel:** Primary (red, yellow, blue) → Secondary → Tertiary.
**Color harmonies:**
Complementary: Opposite on wheel (red/green). High contrast, vibrant.
Analogous: Adjacent on wheel. Harmonious, natural.
Triadic: Three evenly spaced colors. Vibrant but balanced.
Split-complementary: Color + two adjacent to its complement. Less tension than complementary.

**Color properties:** Hue (the color), Saturation (intensity), Value/Brightness (light to dark).
**Warm vs. cool:** Red/orange/yellow = warm (energetic). Blue/green/purple = cool (calm).
**Color psychology:**
Red: Energy, urgency, passion, danger.
Blue: Trust, calm, professionalism.
Green: Nature, health, growth.
Yellow: Optimism, warning, attention.
Purple: Luxury, creativity.
Black: Elegance, authority.
White: Clean, simple, space.

**Contrast ratios:** Text must meet WCAG accessibility requirements.
Normal text: 4.5:1 contrast ratio. Large text (18pt+): 3:1.
Tool: webaim.org/resources/contrastchecker (free).

## Typography

**Type anatomy:** Baseline, cap height, x-height, ascender, descender.
**Typeface categories:**
Serif: Letters have serifs (small strokes at letter ends). Traditional, authoritative. Good for body text in print. (Times New Roman, Georgia, Garamond)
Sans-serif: No serifs. Clean, modern. Better for screens. (Helvetica, Arial, Roboto)
Display/Decorative: Eye-catching. Never use for body text.
Monospace: Fixed width. Code, technical. (Courier, Consolas)

**Hierarchy rules:** No more than 2-3 typefaces. Use size, weight, and color to create hierarchy.
**Line length:** 45-75 characters per line for comfortable reading.
**Line height (leading):** 1.4-1.6× for body text. Too tight = cramped. Too loose = disconnected.
**Tracking (letter spacing):** Loosen slightly for large headlines. Tighten sparingly.

## Visual hierarchy

Guides the eye through a design in order of importance.
**Size:** Bigger = more important (usually).
**Weight:** Bold = more important.
**Color:** High-contrast elements draw the eye first.
**Position:** Top/left reads first (in Western cultures). F-pattern and Z-pattern reading.
**White space:** Surrounded by space = important (isolation effect).

## Gestalt principles

How the human brain perceives visual elements as patterns:
**Proximity:** Close elements perceived as related groups.
**Similarity:** Elements that look alike perceived as related.
**Continuity:** Eye follows lines or curves.
**Closure:** Brain completes incomplete shapes.
**Figure/ground:** Object vs. background. Negative space can contain meaning.

Sources: Robin Williams "The Non-Designer's Design Book" (principles), IDEO Design Thinking, Google Material Design (free), Apple Human Interface Guidelines (free), Canva Design School (free)