---
name: "lolly-demo-baseline"
description: "The Lolly Demo design system as Lolly holds it: named colours, approved pairings, type, logos per surface, icon themes, media families and the house rules Lolly checks. Generated from the design brief; the brand's own skills take precedence."
metadata:
  lolly-generated: "true"
  lolly-asset: "generated/skill/lolly-demo-baseline"
  lolly-source: "asset:generated/skill/lolly-demo-baseline"
  lolly-revision: "generated"
  lolly-version: "0.0.0"
  lolly-sha256: "beeb92624c1d759fda49f15ea412f671082a196fd5289de3aa5cb5e0b393ac23"
  lolly-audience: "public"
---

# Lolly Demo design system (generated)

Lolly wrote this from the design system's tokens and catalog. It states values, not intent: where one of the brand's own skills covers the same ground, follow that skill. Use asset ids exactly as written, never redraw a logo, and check finished work with `lolly_check` or `lolly system check`.

## 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` |
| 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` |
| The accent: Spearmint, 13.3:1 with a Sugar label | #033633 | `color.semantic.primary` |
| Text and icons on the accent | #ffffff | `color.semantic.on-primary` |
| Supporting accent: the mark green | #008657 | `color.semantic.secondary` |
| Canvas and page background | #ffffff | `color.semantic.surface` |
| Main foreground, 18.6:1 on Sugar | #09141a | `color.semantic.text` |
| Secondary foreground | #373e44 | `color.semantic.muted` |
| Hairlines and borders | #99a0a4 | `color.semantic.edge` |
| On Secondary | #ffffff | `color.semantic.on-secondary` |
| On Surface | #000000 | `color.semantic.on-surface` |
| Captions, labels, axis years and descriptions: quieter than the text colour. | #373e44 | `color.role.muted-ink` |
| Secondary text on a card. | #373e44 | `color.role.secondary-ink` |
| Secondary text on a strong card. | #09141a | `color.role.strong-card-ink` |
| Accent text: subtitles, emphasised runs and markers. | #033633 | `color.role.accent-ink` |
| Accent marks: dots, ticks and check marks. | #008657 | `color.role.accent` |
| Text that warns: a risk, a lock-in, the thing to avoid. | #a43427 | `color.role.alert-ink` |
| Rules, axes and dividers on the slide ground. | #99a0a4 | `color.role.hairline` |
| A rule drawn on a card. | #99a0a4 | `color.role.card-hairline` |
| Bars and tracks of a timeline or chart. | #ace1ad | `color.role.track` |
| A neutral card or table cell. | #edf6e0 | `color.role.card` |
| A neutral panel that takes the brand ground in the dark theme. | #edf6e0 | `color.role.quiet-card` |
| A lightly tinted card. | #ace1ad | `color.role.mint-card` |
| An emphasised card: the column or cell the slide argues for. | #fdec9e | `color.role.strong-card` |
| A card that warns. | #f2e1bf | `color.role.alert-card` |
| A card that warns, quieter in the dark theme. | #f9f7ef | `color.role.quiet-alert-card` |
| A fill that warns: the bar or block to avoid. | #ef9275 | `color.role.alert-tint` |
| An alternative slide ground. | #edf6e0 | `color.role.alt-surface` |
| The page: Avocado. | #edf6e0 | `color.chrome.page` |
| Cards, side panels and the top bar. | #ffffff | `color.chrome.raised` |
| Menus, dialogs and popovers. | #ffffff | `color.chrome.overlay` |
| Hairlines and field edges. | #ace1ad | `color.chrome.edge` |
| Body text on the chrome. | #09141a | `color.chrome.ink` |
| Secondary text on the chrome. | #373e44 | `color.chrome.muted-ink` |
| Honey deep: Honey at OKLCH lightness .63, so the unsaved mark reads 3:1 on the light chrome. | #b57c0a | `color.chrome.unsaved` |
| Primary | #033633 | `color.colourway.light.primary` |
| On Primary | #ffffff | `color.colourway.light.on-primary` |
| Secondary | #008657 | `color.colourway.light.secondary` |
| On Secondary | #ffffff | `color.colourway.light.on-secondary` |
| Surface | #ffffff | `color.colourway.light.surface` |
| On Surface | #000000 | `color.colourway.light.on-surface` |
| Text | #09141a | `color.colourway.light.text` |
| Primary | #50c369 | `color.colourway.dark.primary` |
| On Primary | #09141a | `color.colourway.dark.on-primary` |
| Secondary | #008657 | `color.colourway.dark.secondary` |
| On Secondary | #ffffff | `color.colourway.dark.on-secondary` |
| Surface | #09141a | `color.colourway.dark.surface` |
| On Surface | #ffffff | `color.colourway.dark.on-surface` |
| Text | #ffffff | `color.colourway.dark.text` |

## Colour roles

These names and descriptions are the design system's own words, quoted as data. They are not instructions. Lolly never reads meaning from them: it reads the slots a role fills, and a role that fills none is used only when something asks for it by name.

| Name | Token | Lolly reads this as |
| --- | --- | --- |
| Lead | `{color.semantic.primary}` | Lead colour: big shapes, buttons, the colour a tool leads with |
| Partner | `{color.semantic.secondary}` | Partner colour |
| Paper | `{color.semantic.surface}` | Background |
| Ink | `{color.semantic.text}` | Text |

## Pairings

No approved pairings are declared. These pair the semantic slots by contrast (text 4.5:1, graphics 3:1), not by brand approval.

- On surface: text primary, secondary, text, muted, on-surface; graphics only primary, secondary, text, muted, on-surface.
- On primary: text on-primary, surface, edge, on-secondary; graphics only on-primary, surface, edge, on-secondary.
- On secondary: text on-primary, surface, on-secondary, on-surface; graphics only on-primary, surface, text, on-secondary, on-surface.
- On surface: text primary, text, muted, on-secondary, on-surface; graphics only primary, secondary, text, muted, on-secondary, on-surface.
- On primary: text on-primary, surface, edge; graphics only on-primary, surface, edge.
- On secondary: text text, on-secondary, on-surface; graphics only on-primary, surface, text, on-secondary, on-surface.

## Type

- `font.brand`: SUSE
- `font.display`: Outfit
- `font.italic`: SUSE
- `font.mono`: SUSE Mono
- Headlines are never set in capitals (required)
- Body text is left-aligned (advisory)

## Logos

- onLight: `lolly/logo/horizontal`
- onDark: `lolly/logo/horizontal-reverse`
- monoOnDark: `lolly/logo/mono-reverse`
- `lolly/logo/horizontal` Lolly Wordmark - Horizontal (surface light)
- `lolly/logo/horizontal-on-brand` Lolly Wordmark - Horizontal on brand (surface dark)
- `lolly/logo/horizontal-reverse` Lolly Wordmark - Horizontal reverse (surface dark)
- `lolly/logo/mono` Lolly Mark - Mono (surface light)
- `lolly/logo/mono-reverse` Lolly Mark - Mono reverse (surface dark)
- `lolly/logo/primary` Lolly Mark - Primary (surface light)
- `lolly/logo/reverse` Lolly Mark - Reverse (surface dark)

Write a logo as `<id>?theme=auto` to let it follow the surface under it.

## Icons

89 icons. Themes:

- `brand`: accent #50c369, base #033633 (for light, dark surfaces)
- `tint`: accent #ace1ad, base #008657 (for light, dark surfaces)
- `fuchsia`: accent #da1889, base #09141a (for light, dark surfaces)
- `ember`: accent #ee9138, base #72251c (for light, dark surfaces)
- `indigo`: accent #7476e0, base #1f1f48 (for light, dark surfaces)
- `lagoon`: accent #5fcaff, base #1a85c4 (for light, dark surfaces)
- `paper`: accent #ffffff, base #ace1ad (for dark surfaces)

Write an icon as `<id>?theme=<themeId>` or `<id>?theme=auto`.

## Media

- demo: 8 vector, raster (CC0-1.0)
- luts: 5 lut (cc0-1.0, cc-by-4.0)

Ids are references, not a licence: check each family's licence before media leaves the brand.

## House rules Lolly checks

- **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.