# Lolly Demo

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

## Logos

- [Lolly Wordmark - Horizontal](logos/lolly/logo/horizontal.svg): light surfaces. Asset id `lolly/logo/horizontal`.
- [Lolly Wordmark - Horizontal on brand](logos/lolly/logo/horizontal-on-brand.svg): dark surfaces. Asset id `lolly/logo/horizontal-on-brand`.
- [Lolly Wordmark - Horizontal reverse](logos/lolly/logo/horizontal-reverse.svg): dark surfaces. Asset id `lolly/logo/horizontal-reverse`.
- [Lolly Mark - Mono](logos/lolly/logo/mono.svg): light surfaces. Asset id `lolly/logo/mono`.
- [Lolly Mark - Mono reverse](logos/lolly/logo/mono-reverse.svg): dark surfaces. Asset id `lolly/logo/mono-reverse`.
- [Lolly Mark - Primary](logos/lolly/logo/primary.svg): light surfaces. Asset id `lolly/logo/primary`.
- [Lolly Mark - Reverse](logos/lolly/logo/reverse.svg): dark surfaces. Asset id `lolly/logo/reverse`.

Owner-published, not an open licence.

## Colours

### Spearmint, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #033633 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #008657 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Spearmint, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #50c369 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #008657 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Morning, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #c55123 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #1a85c4 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Morning, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #fac044 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #5fcaff | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Spring, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #da1889 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #818e44 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Spring, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #f39dbd | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #50c369 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Beach, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #1a85c4 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #734f31 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Beach, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #25c2c2 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #d8b890 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Afternoon, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #72251c | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #444f05 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Afternoon, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #ef9275 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #ee9138 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Midnight, Light

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #09141a | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #7476e0 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #ffffff | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #09141a | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #373e44 | `color.semantic.muted` |
| Hairlines | #99a0a4 | `color.semantic.edge` |

### Midnight, Dark

| Role | Value | What it is for | Lolly reads this as |
| --- | --- | --- | --- |
| Lead | #7476e0 | Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more. | Lead colour |
| Partner | #b6f1f1 | Shapes on the page, 3:1 or more. | Partner colour |
| Paper | #09141a | Sugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar. | Background |
| Ink | #ffffff | Liquorice on Sugar in the light look, Sugar on Liquorice in the dark. | Text |

| Colour | Value | Token |
| --- | --- | --- |
| Quiet text | #99a0a4 | `color.semantic.muted` |
| Hairlines | #373e44 | `color.semantic.edge` |

### Named colours

| 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` |

## Type

- **SUSE:** [font file](fonts/suse-100-900-normal.ttf), [SIL Open Font License 1.1](fonts/suse-licence.txt).
- **Outfit:** [font file](fonts/outfit-100-900-normal.ttf), [SIL Open Font License 1.1](fonts/outfit-licence.txt).
- **SUSE Mono:** [font file](fonts/suse-mono-100-900-normal.ttf), [SIL Open Font License 1.1](fonts/suse-mono-licence.txt).

## In use

- [Poster](examples/poster.svg)
- [Title slide](examples/slide-title.svg)
- [Content slide](examples/slide-content.svg)

## House rules

- **Headlines are never set in capitals** (required). 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.
- **Body text is left-aligned** (advisory). 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.
- **Primary marks on light, reverse marks on dark** (advisory). 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.
- **Dashed lines mean drop here** (advisory). Dashes mark a place where something can be dropped and never frame an empty state. Lines drawn with the pen are not checked.

## What was checked

These are measurements of token pairs and rule checks on example documents. They do not judge any finished piece, and a person still decides.

See [checks.json](checks.json).

## For agents and builds

- [DESIGN.md](DESIGN.md)
- [AGENTS.md](AGENTS.md)
- [llms.txt](llms.txt)
- [Design tokens](tokens/tokens.json)
- [brand.json](brand.json)
- [Baseline, generated from the tokens](skills/lolly-demo-baseline/SKILL.md)
- [Lolly Demo brand standards](skills/lolly-demo-brand/SKILL.md)
- [Lolly Demo motion](skills/lolly-demo-motion/SKILL.md)
- [Lolly Demo photography](skills/lolly-demo-photography/SKILL.md)

## Using this brand

The Lolly name and marks belong to Andy Fitzsimon. They are not under an open licence: the Mozilla Public License 2.0 on Lolly's source code grants no rights in them (section 2.3). You may show these files unaltered to refer to Lolly. For any other use, ask at https://github.com/lolly-tools/lolly/issues.

## Not published here

- **Names on house rule reviews:** a public file does not name who reviewed a rule