Lantern
Design system · version 1.2.1 · free and open source

One light.
Twelve colours.

Lantern draws explanations: cut-away buildings full of small figures at work, one warm light, and glowing lines where energy and information flow. Pick a colour and this whole page changes with it.

Pick a colour

variant type set

Six scenes, any colour

Each one is a slide, a social post and a seamless loop. All words on them are editable.

The shade ramp

Eleven steps from 50 to 950, built around the core colour (outlined). Select a chip to copy its hex value.

The interface kit

The same tokens drive buttons, cards, forms and tables, so a dashboard can match the deck.

The assembly hall

Cars move down the line and are checked at every station.

line 2runningon plan
Cars finished this week
1 240
up 4% on last week

Take it with you

Claude Code

Add the marketplace once, then install the colours you want.

claude.ai

Download the skill and upload it under Settings, Capabilities, Skills.

Slide template

Ten editable slides for PowerPoint, Keynote and Google Slides, with a live chart.

Design tokens

CSS variables for both variants; set data-theme on <html> to switch.

Your colour

Choose any brand colour to see its ramp and the Lantern colour it sits closest to. One command turns it, a logo or a website into a full theme.


        

The scene library

24 ready cut-aways for the ideas people explain most often, shown here across the colours. Every one comes in every colour and both variants.