Your design systems

1. Go to 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.

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.

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.

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.

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.

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.

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.