Find your theme
Four moves / one accent
02 / MAKE IT YOURS

Same foundation.
Your identity.

A theme should disappear into your project. Here is the order of operations that gets you there fastest, and a live example you can push around.

THE ORDER OF OPERATIONS

Four moves,
in this order.

Everything else is detail work you can do once the shape is right.

  1. 01

    Change the words first.

    Before touching a colour, replace the copy. Most themes look generic because the demo text is still in them. Your own words change the rhythm of every layout and tell you what actually needs adjusting.

    Content collectionsPage frontmatter
  2. 02

    Move the accent, not the palette.

    Every theme exposes its colour as custom properties in one file. Change the single accent token and the whole site follows: buttons, active states, focus rings, the serif highlights. Rewriting the neutrals is rarely the improvement it looks like.

    Design tokensOne accent hue
  3. 03

    Set your type scale once.

    Display size, body size and the tracking that goes with them live in the same token block. Adjust them together. A heading scale that moves without its tracking is the fastest way to make a considered theme look assembled.

    Fluid clamp() scaleNegative tracking
  4. 04

    Swap the images last.

    Import images into the project rather than dropping them in a public folder, and the build generates sized WebP for you. Match the aspect ratios the layout expects before you start arguing with the grid.

    astro:assetsFixed aspect ratios
TRY IT

Same foundation.
Your identity.

Change the name, the words and the accent. See how a few decisions transform this example.

TRY A DIRECTION

Accent colour

Interactive style example. This is a local preview, not an AI editor and not an exported Astro theme.

YOUR LIVE PREVIEW
Northline Studio
INDEPENDENT DESIGN STUDIO

Good design moves things forward.

Thoughtful identities and digital experiences for people building something meaningful.

Explore our work ↗
An editorial still life of layered website designs lit from within A different perspective.
CLARITY. CRAFT. CHARACTER. 01 — 2026

Design studio · Glacier · Wide preview

Your editor. Your workflow. Work directly in the source, or use an AI coding assistant to help adapt your copy, colours and sections. Always review the result before publishing.

Questions about customisation? ↗

Working with a coding assistant

An AI assistant in your editor can do a lot of the mechanical work: renaming routes, rewriting demo copy, adjusting a token across files. Give it the business context first, change one thing at a time, and read the diff.

What it should not do unsupervised is redesign. A theme holds together because a small set of constraints is enforced everywhere. An assistant asked to “make it pop” will break exactly those constraints, politely and in twenty files at once.

Installation & deployment