# Seeing Like a Designer

Seeing Like a Designer: Hierarchy, Alignment and Whitespace, Type That Reads Well: Scale, Line Length and Pairing, Color That Works: Palettes and Contrast.

Updated: November 10, 2026

1. [Hierarchy, Alignment and Whitespace](https://www.ask-codey.com/lessons/css-design-hierarchy-alignment-whitespace) (Apprentice): A page looks designed when the most important thing is seen first, everything lines up on a few shared edges, and space groups the things that belong together, and CSS sets all three with size, weight, color, text-align, padding and margin.
2. [Type That Reads Well: Scale, Line Length and Pairing](https://www.ask-codey.com/lessons/css-design-typography) (Journeyman): Text reads well when its sizes come from a type scale in rem, its lines hold about 45 to 75 characters, its line height suits body text and headings, and the page uses two fonts at most.
3. [Color That Works: Palettes and Contrast](https://www.ask-codey.com/lessons/css-color-and-contrast) (Journeyman): A small palette (a brand color, neutrals, an accent, and success and error colors) makes a site look like one brand, and text that meets a contrast ratio of 4.5 to 1, with meaning never shown by color alone, makes it readable for everyone.

Source: https://www.ask-codey.com/courses/css-in-depth/topics/css-seeing-like-a-designer