Website path Design

Look the part

A consistent visual style across the page.

Start this module

Example brief

A yoga studio wants a calm, readable page with two colors and one font family.

An example. Use your own idea next.

Steps

Choose two colors (text and accent) and one font family.
Ask for them as so they are used everywhere.
Ask for consistent spacing and a simple , then check the finding in the audit.

What you will learn

Design tokens: A small set of named values (two colors, one font, a spacing unit) used everywhere keeps a page consistent.
CSS custom properties: Variables such as --accent let you change a color once instead of in twenty places.
Type scale: Pick a base size and a ratio for headings. Consistent steps look professional without effort.

A sample prompt

Build a one-page site for Stillwater Yoga, a calm studio. Use two colors as CSS custom properties: text #1f2933 and accent #2f6f5e on a light background, one font family and three text sizes, with generous, even spacing. Sections for classes, teachers and your first visit, and a button that says 'Book your first class'.

Write yours first, then compare.

To complete it

Pass all 6 checks on one version, then accept.