Skip to main contentChris Lane JonesSenior web engineer

Chris Lane Jones / Color & type

A little blue.
A lot of clarity.

A coastal palette that feels like the site, with readable type and color choices you can check.

Explore the palette
60Canvas
30Surface
10Blue

Room to breathe. Blue where it counts.

Use 60–30–10 as a starting point for visual balance. Give the page a calm canvas, group content with softer surfaces, and save blue for actions and emphasis.

The proportions are a design guideline. Contrast depends on the two colors touching, not how much of each color you use.

One palette. Shared everywhere.

These values come directly from the site’s CSS tokens. Switch the theme to see their counterparts.

Canvas

Loading…

The space around everything.

--coast-base

Surface

Loading…

Quiet separation for content.

--coast-panel

Sea mist

Loading…

Selected rows and soft emphasis.

--coast-soft

Ink

Loading…

Headlines and everyday reading.

--coast-ink

Secondary ink

Loading…

Supporting text, still readable.

--coast-muted

Coastal blue

Loading…

Actions, links, and focus.

--coast-accent

On blue

Loading…

Text on the action color.

--coast-on-accent

Quiet line

Loading…

Decorative dividers, not input outlines.

--coast-line

Control edge

Loading…

A stronger outline for controls.

--coast-control-line

Good neighbors make readable colors.

Choose a foreground and a background. The result uses WCAG’s contrast calculation for opaque sRGB colors.

Aa

A clearer view.

Small text should be easy to read, too. This is your selected color pairing.

…

Reading the palette…

  • Normal text / 4.5:1 …
  • Large text / 3:1 …
  • AAA normal text / 7:1 …

Large text means at least 24 CSS pixels, or about 18.67 pixels when bold. Pass/fail uses the unrounded ratio. This checker does not certify the whole website. Read the WCAG guidance.

The font already fits.

Keep TT Interphases Pro. Three primary size roles, fluid scaling, and the existing 400, 600, and 700 weights are enough for a clear hierarchy.

Display

Make space.

--type-display
Heading

A new perspective.

--type-heading
Body

Comfortable reading starts with room between the lines. Keep body copy around 16–18 pixels and give each paragraph a sensible line length.

--type-body

These are the new shared roles. Older pages still use the legacy scale while they are migrated.

A smaller screen.
The same clear priorities.

One content column. Comfortable edges. Controls you can reach. Open the menu on your phone to try the new grouped navigation.

  • Start with the work. Lead with the introduction and main action, then projects, writing, and personal content.
  • Keep the reading comfortable. Use 16–24px page gutters and avoid shrinking labels just to fit another column.
  • Make room for fingers. Aim for 44–48px controls. Keep close and contact actions easy to find.
  • Expand only what you need. Group menu links under clear labels; keep the active page marked with more than color.