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

Logos

  • Lolly Wordmark - HorizontalLolly Wordmark - HorizontalFor light surfaces
  • Lolly Wordmark - Horizontal on brandLolly Wordmark - Horizontal on brandFor dark surfaces
  • Lolly Wordmark - Horizontal reverseLolly Wordmark - Horizontal reverseFor dark surfaces
  • Lolly Mark - MonoLolly Mark - MonoFor light surfaces
  • Lolly Mark - Mono reverseLolly Mark - Mono reverseFor dark surfaces
  • Lolly Mark - PrimaryLolly Mark - PrimaryFor light surfaces
  • Lolly Mark - ReverseLolly Mark - ReverseFor dark surfaces

Owner-published, not an open licence. Using this brand

Colours

  • Lead#033633Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#008657Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#50c369Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#008657Shapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Lead#c55123Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#1a85c4Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#fac044Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#5fcaffShapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Lead#da1889Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#818e44Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#f39dbdShapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#50c369Shapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Lead#1a85c4Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#734f31Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#25c2c2Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#d8b890Shapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Lead#72251cShapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#444f05Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#ef9275Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#ee9138Shapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Lead#09141aShapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#7476e0Shapes on the page, 3:1 or more.Partner colour
  • Paper#ffffffSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#09141aLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#373e44
  • Hairlines#99a0a4
  • Lead#7476e0Shapes on the page, 3:1 or more. Words on the lead, 4.5:1 or more.Lead colour
  • Partner#b6f1f1Shapes on the page, 3:1 or more.Partner colour
  • Paper#09141aSugar in the light look, the Liquorice hull in the dark. Most work is Liquorice on Sugar.Background
  • Ink#ffffffLiquorice on Sugar in the light look, Sugar on Liquorice in the dark.Text
  • Quiet text#99a0a4
  • Hairlines#373e44
  • Spearmint#033633
  • Bunyapine#008657
  • Green Apple#50c369
  • Pandanus#ace1ad
  • Avocado#edf6e0
  • Khaki#444f05
  • Olive#818e44
  • Ochre#72251c
  • Bauxite#a43427
  • Outback#c55123
  • Arvo#ef9275
  • Banksia#ee9138
  • Honey#fac044
  • Wattle#fdec9e
  • Bark#734f31
  • Pancake#d8b890
  • Beach#f2e1bf
  • Meringue#f9f7ef
  • Fuchsia#da1889
  • Donut#f39dbd
  • Jacaranda#7476e0
  • Lagoon#1a85c4
  • Sky#5fcaff
  • Reef#25c2c2
  • Swell#b6f1f1
  • Void#000000
  • Liquorice#09141a
  • Liquorice raised#121d24
  • Liquorice panel#1c282f
  • Basalt#373e44
  • Pebble#99a0a4
  • Sugar#ffffff
  • Daylight#ffffff

Type

In use

Poster
Poster
Title slide
Title slide
Content slide
Content slide

House rules

  • Headlines are never set in capitalsHeadings 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.Required
  • Body text is left-alignedChecks 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 darkThe 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 hereDashes mark a place where something can be dropped and never frame an empty state. Lines drawn with the pen are not checked.Advisory

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.

PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#ffffff on #03363313.3:1Lc -103Reads as body text
Lead on the background#033633 on #ffffff13.3:1Lc 99Reads as body text
Text on Partner#ffffff on #0086574.62:1Lc -77Reads as body text
Partner on the background#008657 on #ffffff4.62:1Lc 71Reads as body text
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #50c3698.3:1Lc 59Reads as body text
Lead on the background#50c369 on #09141a8.3:1Lc -58Reads as body text
Text on Partner#ffffff on #0086574.62:1Lc -77Reads as body text
Partner on the background#008657 on #09141a4.04:1Lc -30Large text and graphics only
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#ffffff on #c551234.59:1Lc -77Reads as body text
Lead on the background#c55123 on #ffffff4.59:1Lc 71Reads as body text
Text on Partner#000000 on #1a85c45.2:1Lc 37Reads as body text
Partner on the background#1a85c4 on #ffffff4.04:1Lc 67Large text and graphics only
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #fac04411.26:1Lc 74Reads as body text
Lead on the background#fac044 on #09141a11.26:1Lc -73Reads as body text
Text on Partner#000000 on #5fcaff11.38:1Lc 69Reads as body text
Partner on the background#5fcaff on #09141a10.1:1Lc -67Reads as body text
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#ffffff on #da18894.69:1Lc -76Reads as body text
Lead on the background#da1889 on #ffffff4.69:1Lc 71Reads as body text
Text on Partner#000000 on #818e445.89:1Lc 41Reads as body text
Partner on the background#818e44 on #ffffff3.57:1Lc 63Large text and graphics only
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #f39dbd9.2:1Lc 64Reads as body text
Lead on the background#f39dbd on #09141a9.2:1Lc -63Reads as body text
Text on Partner#000000 on #50c3699.35:1Lc 60Reads as body text
Partner on the background#50c369 on #09141a8.3:1Lc -58Reads as body text
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#09141a on #1a85c44.61:1Lc 36Reads as body text
Lead on the background#1a85c4 on #ffffff4.04:1Lc 67Large text and graphics only
Text on Partner#ffffff on #734f317.26:1Lc -90Reads as body text
Partner on the background#734f31 on #ffffff7.26:1Lc 85Reads as body text
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #25c2c28.5:1Lc 60Reads as body text
Lead on the background#25c2c2 on #09141a8.5:1Lc -59Reads as body text
Text on Partner#000000 on #d8b89011.18:1Lc 68Reads as body text
Partner on the background#d8b890 on #09141a9.92:1Lc -66Reads as body text
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#ffffff on #72251c10.52:1Lc -98Reads as body text
Lead on the background#72251c on #ffffff10.52:1Lc 94Reads as body text
Text on Partner#ffffff on #444f058.87:1Lc -95Reads as body text
Partner on the background#444f05 on #ffffff8.87:1Lc 90Reads as body text
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #ef92758.02:1Lc 58Reads as body text
Lead on the background#ef9275 on #09141a8.02:1Lc -56Reads as body text
Text on Partner#000000 on #ee91388.74:1Lc 57Reads as body text
Partner on the background#ee9138 on #09141a7.76:1Lc -54Reads as body text
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#373e44 on #ffffff10.85:1Lc 95Reads as body text
Text on Lead#ffffff on #09141a18.64:1Lc -107Reads as body text
Lead on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
Text on Partner#000000 on #7476e05.41:1Lc 38Reads as body text
Partner on the background#7476e0 on #ffffff3.88:1Lc 66Large text and graphics only
Ink on the background#09141a on #ffffff18.64:1Lc 105Reads as body text
PairColoursWCAGAPCAReading
Muted text on surface#99a0a4 on #09141a7.03:1Lc -50Reads as body text
Text on Lead#09141a on #7476e04.8:1Lc 37Reads as body text
Lead on the background#7476e0 on #09141a4.8:1Lc -35Reads as body text
Text on Partner#000000 on #b6f1f116.84:1Lc 91Reads as body text
Partner on the background#b6f1f1 on #09141a14.95:1Lc -91Reads as body text
Ink on the background#ffffff on #09141a18.64:1Lc -107Reads as body text

All colourways and rules, as data

For agents and builds

  • DESIGN.mdThe tokens and notes in one file for coding agents.
  • AGENTS.mdPaste or download this into a project.
  • llms.txtAn index of this page for agents.
  • Design tokensThe whole system as DTCG. Resolved copies per colourway sit beside it.
  • brand.jsonEvery file with its digest.
  • Baseline, generated from the tokensGenerated by Lolly from the Lolly Demo design brief: colours, pairings, type, logos, icons, media and house rules. Authored skills take precedence.
  • Lolly Demo brand standardsThe Lolly Demo brand standards for any piece of work made with the Lolly Demo design system. Read this first, before the photography or motion skill, whenever you design, write or review Lolly Demo material.
  • Lolly Demo motionHow Lolly Demo moves and sounds: timing, easing, transitions, kinetic type and music. Use when making a video, animation, Lottie clip, animated slide or anything with a timeline or soundtrack for Lolly Demo.
  • Lolly Demo photographyHow Lolly Demo photographs look and how to grade, crop and treat them. Use when choosing, editing or grading a photograph for Lolly Demo work, in Darkroom, Filter or Design.

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 (1)
  • Names on house rule reviews: a public file does not name who reviewed a rule