# Player Design

Source: https://docs.skaz.io/guide/design

> Dress your story in your own colours, fonts and button style. Palettes, a readability check, 13 fonts plus your own, four button styles and three corner cuts.

Out of the box, every story plays in the Skaz look. On **Studio** and **Team**
you can give a story its own: the colours of the page, the cards and the
buttons, the fonts for headings and text, and how the buttons are cut.

Open the story's page from the dashboard and go to the **Design** tab. The
settings are on the left and a **Preview** of the player on the right: the
story's intro, a scene line and two choices, drawn exactly as players will see
them. Everything you change shows up in the preview at once.

> Design belongs to one story. Each story you make can wear a different look.

## Colours

**Start from** offers six palettes to begin with: Skaz, Midnight, Forest, Sand,
Ocean and Mono. Pick one and adjust from there, or set every colour yourself.

| Colour | What it paints |
|---|---|
| **Background** | The page behind the story |
| **Cards** | Choices and the cover card |
| **Text** | The words, and the outlines and shadows of buttons and cards |
| **Accent** | The main buttons, like *Start the story* |

Click a swatch to pick a colour, or type a hex code next to it.

**The readability check.** If the text is hard to read on the background or on
the cards, or the accent almost disappears into the background, a warning says
so under the colours. It doesn't stop you saving, but it's worth listening to:
players on a phone in the sun will thank you.

The text on accent buttons picks itself: white or near-black, whichever reads
better on the colour you chose. A pale yellow accent gets dark text, not white
on yellow.

## Fonts

Choose a font for **Headings** (the story title and other big type) and one for
**Text** (everything players read). There are thirteen to choose from, all with
Cyrillic, plus the Skaz house font:

- **Sans:** Inter, Manrope, Montserrat, Rubik, Nunito, Onest
- **Display:** Unbounded
- **Serif:** Playfair Display, Lora, PT Serif, Cormorant Garamond, Merriweather
- **Mono:** JetBrains Mono

### Your own font

Have a brand font? Choose **Your own font…** in either list and upload the file.
**WOFF2, WOFF, TTF or OTF**, up to **3 MB**. One uploaded font per story; use it
for headings, for text, or for both. **Replace your font file** swaps it later.

> Use a font you're licensed to put on the web. Players' browsers download the
> file to show your story, so a desktop-only licence isn't enough.

WOFF2 is the best choice: the smallest file, so the story opens faster.

## Buttons and corners

**Button style** decides how choices and buttons are drawn:

| Style | Looks like |
|---|---|
| **Paper** | An outline and a hard, cut-paper shadow. The Skaz house style |
| **Soft** | No outline, a soft shadow that lifts on hover |
| **Flat** | An outline, no shadow. The outline takes the accent on hover |
| **Outline** | See-through choices drawn in the accent colour. Main buttons keep their fill, so there's still one obvious thing to press |

The cover card and panels follow the same style, so a soft player doesn't keep
a hard shadow on its cover.

**Corners** are **Sharp**, **Rounded** or **Pill**. Long choices that wrap onto
several lines get a gentler curve than a full pill, so they don't turn into
lozenges.

## Saving

Click **Save design**. Players see the new look within a few minutes: on the
story's link, on your [custom domain](/guide/custom-domain) and in
[embeds](/guide/publishing).

To undo everything, use **Back to the Skaz look**. It removes this story's
colours, fonts and buttons and returns it to the default.

> If you move off Studio or Team, your stories go back to the Skaz look, but the
> design you set up is kept. Upgrade again and it comes back as it was.