# Your design systems

> Keep your colours, fonts and corners as design systems: start from a ready-made one, or create one with AI or from your brand files.

Checked 10 November 2026 · https://docs.seascape.bz/website/design-systems

A design system is your colours, fonts and corners, used by every theme. A theme is your layout. Change either one without the other: any design system works on any theme. Your logo, name and voice belong to your brand, so every design system shares them.

You can keep several design systems and switch when you like. Your website uses one at a time.

## Open your design systems
1. Go to [**Settings** → **Design systems**](https://app.seascape.bz/dashboard/settings/design-systems). It sits under **Brand** in the Settings list.
2. Or press **Design systems** on **Website** → **Design**.

Website → Design, **Settings** → **Brand** and **Design systems** all say the same thing about yours: the one your website uses, or No design system yet, or Not using a design system when you have saved ones but use none. Until then, your website uses its own colours and fonts.

## Start from a ready-made design system
A shop with no design system yet can start from one Seascape made. The first design system becomes your website's straight away, in your draft.

1. On **Design systems**, find **Or start from a ready-made one**.
2. Choose **Your website now** (your current colours, fonts and corners), Reef, Blue Hole or Caye.
3. Press **Use**.

![Design systems, for a shop that has none yet](https://docs.seascape.bz/img/website/web-9-no-design-system-yet.da05259503.webp)
*Design systems, for a shop that has none yet.*

## Create a design system with AI
1. On **Design systems**, press **Create with AI**. The **Design assistant** opens on the left.
2. Choose how to start:
   - **Describe it**: say how your shop should feel, then press **Start**.
   - **From your logo**: press **Use my main logo**, or **Upload another**.
   - **From a website**: paste an address and press **Look at this site**. From another business's site, Seascape takes only its colours and fonts.
3. Compare the three directions on your own home page. **Keep the fonts, new colours**, **New fonts** and **New corners** change one thing at a time.
4. Press **Use this**, then **Review and save**.

![Create with AI, before you choose how to start](https://docs.seascape.bz/img/website/web-9-create-with-ai.c866a1f309.webp)
*Create with AI, before you choose how to start.*

![Three directions from the Design assistant, on the shop's home page](https://docs.seascape.bz/img/website/web-9-design-assistant-directions.785c63ea66.webp)
*Three directions from the Design assistant, previewed on the home page.*

## Make a design system from your brand files
Fonts need a licence tick before anything is read. A font you bought often comes with a desktop licence only, and a website needs a web licence.

1. On **Design systems**, press **Upload brand files**.
2. Drop up to 20 files: logos (SVG or PNG), a brand guide (PDF, up to 40 pages), a tokens file (JSON or CSS variables) and fonts (WOFF2, OTF or TTF).
3. Tick the font licence, or press **Remove the fonts**.
4. Press the Read button, which counts your files. You can **Close and keep reading** and come back when it's ready.
5. **Review** shows every colour and font, and which file it came from. **What I assumed** lists anything your files didn't say.
6. Press **Save as new design system**.

![Upload brand files: logos, a brand guide, a tokens file and fonts](https://docs.seascape.bz/img/website/web-9-upload-brand-files.205587387c.webp)
*Upload brand files: logos, a brand guide, a tokens file and fonts.*

A file that can't be used says why, for example an Illustrator file, which needs saving as SVG or PDF first. When two files disagree about a colour, you're asked once, with both side by side.

## Use, preview and manage your design systems
Each design system is a card showing your home page in its colours, with its fonts and corners. The one your live website uses is marked **In use on your website**.

1. Press **Preview on your site** to see a design system on your own pages, in any theme, on a computer or a phone. Previewing changes nothing.
2. Press **Use**. Seascape lists what changes when you publish (your website and, if the main colour is different, your booking pages, trip calendar, emails and share cards) and what stays.
3. Press **Use in my draft**. Until you publish, the one still live says **Live on your website**.

The ⋯ menu has **Rename**, **Duplicate**, **Export** (a design tokens file other tools can read) and **Delete**. Delete asks first, and can't delete the one your website uses.

## Colours that stay readable
Your exact colours stay exact. Where one would be hard to read, such as white writing on a light colour, Seascape uses a lighter or darker shade of it there, and says so beside that colour. Nothing that is hard to read can be saved.

![Colours, with the second colour using a readable shade on light backgrounds](https://docs.seascape.bz/img/website/web-9-readable-shades.d901ae3591.webp)
*The second colour uses a readable shade on light backgrounds, and says so.*

> [!PERMISSION] Edit the website
> Seeing design systems needs **See the website editor**, and making, using or changing one needs **Edit the website**.