Color

Seven families, seventy steps

Blue is the brand. Navy is the ink. Cream is the paper. Everything else is a pop of colour used once per layout, not spread across it. Click any swatch to copy its value.

Copy as:
{{ formatHint }}
{{ s }}
{{ row.name }}
{{ row.meta }}
Outlined swatch = brand anchor step. Ramps were built in OKLCH so each step moves an even amount of perceived lightness.

How to divide a layout

Roughly 60% neutral, 30% brand blue, 10% one accent. The proportion is what keeps FlatWorld looking like FlatWorld.

60 / 30 / 10

Cream and white carry the page. Blue does the structural and interactive work — headings, buttons, links. One accent gets the last 10%.

One accent per piece

Teal, coral, sunshine and magenta each work beautifully alone. Together in one layout they read as a party invitation, not a textbook.

Page
Card

Cream page, white card

Backgrounds are cream. White is reserved for cards and reading surfaces so they lift off the page. Reversing the two flattens everything.

Acceptable
New edition

Principles of Macroeconomics

eReader access from $24.95, with instructor supplements included.

Explore catalog

Navy text, blue button, one teal tag. Cream behind, white card in front.

Not acceptable
New edition

Principles of Macroeconomics

eReader access from $24.95, with instructor supplements included.

Explore catalog

Four accents at once, a gradient background, pure black text, and an accent doing the primary button's job.

Contrast & accessibility

Body text needs a contrast ratio of at least 4.5:1 against its background. Text at 24px or bolded 19px and above needs 3:1. Check any pair below before you ship it.

Text colour
{{ o.name }}{{ o.hex }}
Background colour
{{ o.name }}{{ o.hex }}
{{ ratio }}: 1
Affordable by design

Body copy at 15px. If this is hard to read here, it will be harder on a projector in a lecture hall.

Body text — AA (4.5:1){{ aa }}
Large text — AA (3:1){{ aaLarge }}
Body text — AAA (7:1){{ aaa }}

Safe defaults

Navy 800 on cream 50 clears AAA. White on blue 600 clears AA. Those two pairings cover most of what you will ever need to set.

Watch the light accents

Sunshine 200 and teal 400 are bright. They fail as text colours on light backgrounds — use them as fills with navy text on top.

Never colour alone

Anything communicated with colour — status, availability, required fields — also needs a label, an icon, or a shape.

Needs content

Print colour values

The CMYK values in the copy menu are calculated conversions, accurate enough for internal proofs but not for press. Before a print run, confirm the official CMYK and Pantone references for blue 600, navy 800 and cream 50 with whoever holds the original brand files, then replace the calculated values here.

Copied{{ toastValue }}