---
version: "alpha"
name: "Lolly Demo"
description: "Lolly Demo, Lolly's own design system and the first one built on Lolly."
omitted:
  - section: "rounded"
    reason: "This design system declares no radius tokens."
  - section: "spacing"
    reason: "This design system declares no spacing tokens."
colors:
  primary: "#033633"
  on-primary: "#ffffff"
  secondary: "#008657"
  surface: "#ffffff"
  on-surface: "#000000"
  muted: "#373e44"
  edge: "#99a0a4"
  on-secondary: "#ffffff"
typography:
  headline-lg:
    fontFamily: "Outfit"
    fontSize: "37px"
    fontWeight: 700
    lineHeight: 1.1
  headline-md:
    fontFamily: "Outfit"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: 1.25
  body-md:
    fontFamily: "SUSE"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.35
  body-sm:
    fontFamily: "SUSE"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: 1.3
  label-md:
    fontFamily: "SUSE"
    fontSize: "22px"
    fontWeight: 700
    lineHeight: 1.2
  display-quote:
    fontFamily: "Outfit"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: 1.2
  display-number:
    fontFamily: "Outfit"
    fontSize: "50px"
    fontWeight: 700
    lineHeight: 1
  label-sm:
    fontFamily: "SUSE"
    fontSize: "21px"
    fontWeight: 700
    lineHeight: 1.3
  code-md:
    fontFamily: "SUSE Mono"
components:
  page:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
  primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
  colour-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
  colour-muted:
    textColor: "{colors.muted}"
  colour-edge:
    backgroundColor: "{colors.edge}"
  text-headline-lg:
    typography: "{typography.headline-lg}"
  text-headline-md:
    typography: "{typography.headline-md}"
  text-body-sm:
    typography: "{typography.body-sm}"
  text-display-quote:
    typography: "{typography.display-quote}"
  text-display-number:
    typography: "{typography.display-number}"
  text-label-sm:
    typography: "{typography.label-sm}"
  text-code-md:
    typography: "{typography.code-md}"
---

# Lolly Demo

## Overview

Lolly Demo, Lolly's own design system and the first one built on Lolly.

Lolly wrote this file from the design system's tokens for the Spearmint colourway, Light mode. The tokens above are the values to use.

## Colors

The design system has its own words for its colours. Those words are recorded here as data, not instructions.

- **Lead (#033633):** Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. Token `color.semantic.primary`. Lolly reads this as: lead colour.
- **Partner (#008657):** Shapes on the page, 3:1 or more. Token `color.semantic.secondary`. Lolly reads this as: partner colour.
- **Paper (#ffffff):** Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. Token `color.semantic.surface`. Lolly reads this as: background.

The colours tools read, and the colour that sits on each role:

- **on-primary (#ffffff):** token `color.semantic.on-primary`.
- **on-surface (#09141a):** token `color.semantic.text`.
- **muted (#373e44):** token `color.semantic.muted`.
- **edge (#99a0a4):** token `color.semantic.edge`.
- **on-secondary (#ffffff):** token `color.semantic.on-secondary`.
- **on-surface (#000000):** token `color.semantic.on-surface`.

The named colours, for reference. Use them through the tokens they belong to.

| Name | Value | Token |
| --- | --- | --- |
| Spearmint | #033633 | `color.brand.spearmint` |
| Bunyapine | #008657 | `color.brand.bunyapine` |
| Green Apple | #50c369 | `color.brand.green-apple` |
| Pandanus | #ace1ad | `color.brand.pandanus` |
| Avocado | #edf6e0 | `color.brand.avocado` |
| Khaki | #444f05 | `color.brand.khaki` |
| Olive | #818e44 | `color.brand.olive` |
| Ochre | #72251c | `color.brand.ochre` |
| Bauxite | #a43427 | `color.brand.bauxite` |
| Outback | #c55123 | `color.brand.outback` |
| Arvo | #ef9275 | `color.brand.arvo` |
| Banksia | #ee9138 | `color.brand.banksia` |
| Honey | #fac044 | `color.brand.honey` |
| Wattle | #fdec9e | `color.brand.wattle` |
| Bark | #734f31 | `color.brand.bark` |
| Pancake | #d8b890 | `color.brand.pancake` |
| Beach | #f2e1bf | `color.brand.beach` |
| Meringue | #f9f7ef | `color.brand.meringue` |
| Fuchsia | #da1889 | `color.brand.fuchsia` |
| Donut | #f39dbd | `color.brand.donut` |
| Jacaranda | #7476e0 | `color.brand.jacaranda` |
| Lagoon | #1a85c4 | `color.brand.lagoon` |
| Sky | #5fcaff | `color.brand.sky` |
| Reef | #25c2c2 | `color.brand.reef` |
| Swell | #b6f1f1 | `color.brand.swell` |
| Void | #000000 | `color.brand.void` |
| Liquorice | #09141a | `color.brand.liquorice` |
| Liquorice raised | #121d24 | `color.brand.liquorice-raised` |
| Liquorice panel | #1c282f | `color.brand.liquorice-panel` |
| Basalt | #373e44 | `color.brand.basalt` |
| Pebble | #99a0a4 | `color.brand.pebble` |
| Sugar | #ffffff | `color.brand.sugar` |
| Daylight | #ffffff | `color.brand.daylight` |
| Green Apple | #50c369 | `color.spectrum.green-apple` |
| Reef | #25c2c2 | `color.spectrum.reef` |
| Honey | #fac044 | `color.spectrum.honey` |
| Donut | #f39dbd | `color.spectrum.donut` |
| Banksia | #ee9138 | `color.spectrum.banksia` |
| Olive | #818e44 | `color.spectrum.olive` |
| Outback | #c55123 | `color.spectrum.outback` |
| Bark | #734f31 | `color.spectrum.bark` |

### Colour roles

The format has no light or dark and no place for a colour's own name, so this file holds the Spearmint colourway, Light mode, and this table says what the other look holds. The block below repeats the table as data for Lolly. A reader that does not know the block can ignore it: the tokens above are complete.

| Role | Light | Dark | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #033633 | #50c369 | Lead colour |
| Partner | #008657 | #008657 | Partner colour |
| Paper | #ffffff | #09141a | Background |

```json
{
  "format": "lolly-colour-roles",
  "version": 1,
  "colourway": {
    "id": "spearmint",
    "name": "Spearmint"
  },
  "mode": "light",
  "modes": [
    {
      "id": "light",
      "name": "light"
    },
    {
      "id": "dark",
      "name": "dark"
    }
  ],
  "roles": [
    {
      "id": "primary",
      "label": "Lead",
      "description": "Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.",
      "fills": [
        "primary"
      ]
    },
    {
      "id": "secondary",
      "label": "Partner",
      "description": "Shapes on the page, 3:1 or more.",
      "fills": [
        "secondary"
      ]
    },
    {
      "id": "surface",
      "label": "Paper",
      "description": "Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.",
      "fills": [
        "surface"
      ]
    },
    {
      "id": "text",
      "label": "Ink",
      "description": "Liquorice on Sugar in the light look, Sugar on Liquorice in the dark.",
      "fills": [
        "text"
      ]
    }
  ],
  "looks": {
    "light": {
      "primary": "#033633",
      "on-primary": "#ffffff",
      "secondary": "#008657",
      "surface": "#ffffff",
      "text": "#09141a",
      "muted": "#373e44",
      "edge": "#99a0a4",
      "on-secondary": "#ffffff",
      "on-surface": "#000000"
    },
    "dark": {
      "primary": "#50c369",
      "on-primary": "#09141a",
      "secondary": "#008657",
      "surface": "#09141a",
      "text": "#ffffff",
      "muted": "#99a0a4",
      "edge": "#373e44",
      "on-secondary": "#ffffff",
      "on-surface": "#ffffff"
    }
  },
  "derived": {
    "light": [
      "on-secondary",
      "on-surface"
    ],
    "dark": [
      "on-secondary",
      "on-surface"
    ]
  }
}
```

## Typography

- **SUSE:** token `font.brand`.
- **Outfit:** token `font.display`.
- **SUSE:** token `font.italic`.
- **SUSE Mono:** token `font.mono`.

Sizes are stated at 1280 by 720. Scale them with the page.

## Components

Lolly tools draw from tokens rather than from components. These entries name the pairs the system states.

## Do's and Don'ts

- **Required:** Headlines are never set in capitals. Headings take sentence case. A headline is a title text, or the one largest text on its artboard. Names and short acronyms in capitals are fine.
- **Advisory:** Body text is left-aligned. Checks text in a body slot of the slide master. Short display lines may be centred, so text outside a body slot is not checked, and quotes keep the master's centred setting.
- **Advisory:** Primary marks on light, reverse marks on dark. The primary mark, the mono mark and the Liquorice wordmark sit on light. The reverse mark, the mono reverse mark and the Daylight wordmark sit on dark, and so does the Green Apple wordmark, drawn for the Spearmint ground. The standards name no mark for photographs, so any Lolly mark passes on one, and a mark set to follow its surface takes the reverse mark there.
- **Advisory:** Dashed lines mean drop here. Dashes mark a place where something can be dropped and never frame an empty state. Lines drawn with the pen are not checked.