amircode2050/lantern-design-system

Most slide decks explain with bullet points. Lantern explains with pictures: cut-away machines and buildings full of small figures at work, one warm light in the dark, glowing lines that show where energy and information flow. Ask for "a slide that explains how a data centre stays cool" and you get an original illustration, a title that asks the question, one line that answers it, and labels that point to the parts that matter.

It comes in twelve colours, each with a dark and a light version, seven type sets, many languages and a full shade ramp. The same colours drive a small web interface kit, so a deck, a report and a dashboard can look like one family.

Contents

• What you get
• Try it in your browser
• Gallery
• The scene library
• Quick start
• Choosing a look
• The colours
• Type sets
• Languages
• Illustration modes and components
• Animation
• Interface kit and design tokens
• Your brand in one step
• Social posts
• Slide templates
• Make your own colour
• Words on the slide
• Accessibility
• Using the scripts directly
• Troubleshooting
• Building from source
• Contributing, security and licence

What you get

• Twelve colour themes, each in a dark and a light variant, with an 11-step shade ramp (50 to 950) and two alternative shades you can switch to.
• Two illustration modes: cut-away scenes with many small figures, and close-up portraits with large characters and a single beam of light.
• About forty drawing components: factory roofs, storm clouds, batteries, conveyors, server racks, domes, a watchtower, a saucer with a tractor beam, profile busts, robots, light cones and the lantern itself.
• Seven type sets and many languages (accented Latin, Vietnamese, Cyrillic, Greek, and right-to-left Persian and Arabic), every font bundled or one command away, so nothing falls back to Arial on someone else's machine.
• Seamless looping animation as GIF and MP4, with an automatic seam check.
• An interface kit: CSS variables, a Tailwind theme and eight components, in any colour.
• A theme generator that turns one brand colour into a complete theme and checks every text colour for contrast.
• A voice guide, so the words on a slide are as considered as the picture.
• A library of 24 ready scenes for the ideas people explain most often, from supply chains to the cloud, each with its question, answer and labels.
• Your brand in one step: point it at a logo, a website or a hex value and get a full theme with previews.
• Social posts in square, 4:5 and 9:16, as stills or seamless MP4 loops.
• Slide templates for PowerPoint, Keynote and Google Slides in every colour, every word and the chart editable.
• A playground on the web, where the whole page changes colour as you choose.

Try it in your browser

The Lantern playground shows the whole system without installing anything. Pick a colour and the entire page, its scenes, its shade ramp and its buttons take it on.

The page remembers your last choice in your own browser and sends nothing anywhere.

Gallery

The scene library

24 cut-aways, ready to drop into a deck. Each comes in every colour and both variants, carries its own words (a question, an answer line and three labels), and moves as a seamless loop. Shown here across the twelve colours.

python scripts/scenes.py                                  # list them
python scripts/scenes.py power_grid teal light modern     # one scene, any colour, variant and type set
python scripts/scenes.py power_grid clean                 # the picture without words

Change the words without touching the drawing: build("bank", words={"title": ["Where does the money go?"], "answer": "Mostly back out as loans."}).

Quick start

1. Install the skills

Every skill is a plain folder in skills/: skills/lantern is the master skill with every colour, and skills/lantern-<colour> holds one colour each. Install the master skill, or just the colours you use.

Claude Code

Inside a session (the terminal, the desktop app or an IDE extension):

/plugin marketplace add Amircode2050/lantern-design-system
/plugin install lantern@lantern-design-system

Or from your terminal, without opening a session:

claude plugin marketplace add Amircode2050/lantern-design-system
claude plugin install lantern@lantern-design-system
claude plugin install lantern-teal@lantern-design-system

Update later with claude plugin marketplace update lantern-design-system, and remove a skill with claude plugin uninstall lantern-teal@lantern-design-system.

If adding the marketplace fails (an SSH Permission denied (publickey), a checkout error, or a message that the repo has no release to download), add it by its full HTTPS address instead:

claude plugin marketplace add https://github.com/Amircode2050/lantern-design-system.git

or install from the release download, which needs no git at all: download lantern-design-system.zip from the latest release, unzip it, and from the folder that holds it run

claude plugin marketplace add ./lantern-design-system
claude plugin install lantern@lantern-design-system

On Windows, a checkout error usually means a path over 260 characters; git config --global core.longpaths true fixes it.

Claude.ai and the Claude app

Download the skill's zip (for example lantern.zip or lantern-teal.zip) from the latest release, then upload it under Settings, Capabilities, Skills. Skills you upload there also work in the Claude desktop and mobile apps.

OpenAI Codex

codex plugin marketplace add Amircode2050/lantern-design-system
codex plugin add lantern-design-system@lantern-design-system

The plugin carries all thirteen skills; Codex picks the colour you name. In the ChatGPT desktop app, the same marketplace appears in the Plugins directory once added. To install a single skill instead, use npx skills add Amircode2050/lantern-design-system --skill lantern -a codex.

GitHub Copilot CLI

copilot plugin marketplace add Amircode2050/lantern-design-system
copilot plugin install lantern@lantern-design-system
copilot plugin install lantern-teal@lantern-design-system

For Copilot in VS Code, use npx skills add Amircode2050/lantern-design-system -a github-copilot.

Gemini CLI

gemini extensions install https://github.com/Amircode2050/lantern-design-system

The extension carries all thirteen skills. Update it with gemini extensions update lantern-design-system.

Cursor

npx skills add Amircode2050/lantern-design-system --skill lantern -a cursor -g

A Cursor team can also add the skills as plugins: import this repository under Dashboard, Settings, Plugins, Import (it reads .cursor-plugin/marketplace.json).

OpenCode

npx skills add Amircode2050/lantern-design-system --skill lantern -a opencode -g

OpenCode also reads skills from .opencode/skills/, ~/.config/opencode/skills/, .agents/skills/ and .claude/skills/, so a copied folder works too.

Grok Build

npx skills add Amircode2050/lantern-design-system --skill lantern -a grok -g

Grok Build also reads Claude Code plugins and skills, so if Lantern is installed in Claude Code, Grok Build finds it without another step. Skills live in .grok/skills/ (this project) or ~/.grok/skills/ (every project).

Any other agent

The skills follow the open Agent Skills format (a folder with a SKILL.md), so any agent that reads that format can use them unchanged. The skills installer knows where each agent looks (npx skills add Amircode2050/lantern-design-system asks which skills and agents), or copy a folder by hand:

git clone https://github.com/Amircode2050/lantern-design-system
cp -r lantern-design-system/skills/lantern ~/.agents/skills/

Paths change as agents evolve, so check your agent's documentation if a skill does not appear. Whatever the agent, the skill draws with Python on your machine, so step 2 below applies to every agent. In agents that cannot show multiple-choice questions, the colour picker asks the same questions in plain text.

2. Install what it renders with

The skills draw SVG and photograph it with a headless browser, so the machine that runs them needs:

pip install pillow numpy playwright
python -m playwright install chromium

plus ffmpeg if you want GIF or MP4 output, pip install python-pptx for slide templates, and Python 3.11 or newer. To check a setup, run python scripts/kit.py inside any skill folder: it prints what is missing and the command that fixes it.

3. Ask for something

• "A title slide for a talk on supply chains, Lantern gold."
• "An annotated cut-away that explains how a heat pump works. Teal, light variant, editorial type."
• "A break slide in my Lantern style." (the master skill will show you the picker)
• "A 25-second loop of the saucer for the start of my keynote."
• "Export the rose theme as CSS variables and a Tailwind theme."
• "Here is our logo. Make a Lantern colour from it."
• "Our website is example.com. Make our slides match it."
• "Turn the supply chain scene into an Instagram story, Lantern orange."
• "Give me a PowerPoint template in Lantern teal, light."

Choosing a look

The master skill asks at most two short questions, each with a picture, and remembers your answers for the rest of the conversation.

Step one, the colour. Every installed theme with its mood, its light and its shade ramp:

Step two, the details. That colour in dark and light, the seven type sets, and the family's shade options. Pick a different shade (Burgundy instead of Maroon, say) and the skill builds it on the spot with the same recipe.

Name what you want in the request ("lantern teal, light, modern") and it skips the questions.

The colours

Every theme follows the same rules: a deep ground, a structure ramp built from the core colour, exactly one accent (the light) and a support colour reserved for natural things such as water. Text colours are fitted to WCAG contrast in both variants.

Black

A jet near-black ground (#1C1C1E) in neutral greys, with one metallic-gold light. Best for keynotes, launches and premium reports.

• Skill: lantern-black, or lantern and pick Black. It also answers to: jet, onyx, ebony, noir, black and gold.
• Defaults: dark variant, Classic type set.
• Other shades: Onyx #111111, Rich black #0B0B0C.

Key tokens

White

Ivory paper (#FAF8F2) in strict monochrome: ink on paper, the light is plain white. Best for print, documents and bright rooms.

• Skill: lantern-white, or lantern and pick White. It also answers to: ivory, porcelain, paper, cream, black and white.
• Defaults: light variant, Editorial type set.
• Other shades: Porcelain #F7F7F5, Pure white #FFFFFF.

Key tokens

Blue

A deep navy ground built from shades of the core colour #3366FF, with one amber light and a teal support family. Best for technology, science and finance.

• Skill: lantern-blue, or lantern and pick Blue. It also answers to: cobalt, royal blue, azure.
• Defaults: dark variant, Classic type set.
• Other shades: none.

Key tokens

Purple

A deep violet ground, with one warm peach light and a blue support family. Best for ideas, research and storytelling.

• Skill: lantern-purple, or lantern and pick Purple. It also answers to: violet, indigo, lavender.
• Defaults: dark variant, Classic type set.
• Other shades: none.

Key tokens

Green

A deep forest-green ground (#1B4D3E), with one amber light. Best for sustainability, health and growth.

• Skill: lantern-green, or lantern and pick Green. It also answers to: forest, emerald, jade, sage, olive.
• Defaults: dark variant, Classic type set.
• Other shades: Emerald #046C4E, Jade #00A86B.

Key tokens

Red

A deep maroon ground (#7A1F2B), with one champagne-gold light. Best for strategy, culture and history.

• Skill: lantern-red, or lantern and pick Red. It also answers to: maroon, burgundy, crimson, wine, oxblood.
• Defaults: dark variant, Editorial type set.
• Other shades: Burgundy #800020, Crimson #A4161A.

Key tokens

Gray

A charcoal ground (#36454F), with one amber light. Best for engineering, operations and data.

• Skill: lantern-gray, or lantern and pick Gray. It also answers to: grey, silver, charcoal, slate, graphite.
• Defaults: dark variant, Modern type set.
• Other shades: Slate #475569, Silver #A8A9AD.

Key tokens

Teal

A deep teal ground (#0F766E), with one amber light. Best for healthcare, water and calm explainers.

• Skill: lantern-teal, or lantern and pick Teal. It also answers to: deep teal, petrol, teal green.
• Defaults: dark variant, Modern type set.
• Other shades: Petrol #005F73, Teal #008080.

Key tokens

Gold

A warm near-black ground with metallic gold (#D4AF37) as the light. Best for awards, finance and luxury brands.

• Skill: lantern-gold, or lantern and pick Gold. It also answers to: yellow, mustard, golden, ochre.
• Defaults: dark variant, Classic type set.
• Other shades: Antique gold #C9A227, Mustard #E1AD01.

Key tokens

Orange

A warm near-black ground with burnt orange (#CC5500) as the brand colour and tangerine as the light. Best for energy, product launches and bold talks.

• Skill: lantern-orange, or lantern and pick Orange. It also answers to: burnt orange, tangerine, persimmon, copper.
• Defaults: dark variant, Modern type set.
• Other shades: Persimmon #E4572E, Tangerine #F28C28.

Key tokens

Cyan

A vivid deep-cyan ground built from bright cyan (#1CABE2), with one amber light. Best for digital products, cloud and fresh decks.

• Skill: lantern-cyan, or lantern and pick Cyan. It also answers to: aqua, turquoise, sky blue.
• Defaults: dark variant, Modern type set.
• Other shades: Cyan #0891B2, Aqua #00B4D8.

Key tokens

Rose

A deep rose ground (#C2185B), with one champagne-gold light. Best for culture, wellbeing and consumer brands.

• Skill: lantern-rose, or lantern and pick Rose. It also answers to: pink, raspberry, magenta, fuchsia.
• Defaults: dark variant, Editorial type set.
• Other shades: Deep rose #9E1450, Blush rose #D4708F.

Key tokens

Type sets

Any type set works with any colour. The scale is fixed so pieces stay consistent: a 132-point word for break slides, 44 for titles, 30 for labels, 16.5 for body text, and nothing smaller than 13.

Languages

Write the words in your language and Lantern picks the right letters. Persian, Arabic and Urdu are set right to left: titles move to the top right and every text block aligns to its right edge, while the picture and its labels keep their places.

All 24 library scenes also come translated into Persian and Spanish, and the slide template comes in Persian, right to left throughout (mirrored layouts, Persian digits, the chart reading from the right):

python scripts/scenes.py bank fa                    # a scene in Persian; es for Spanish
python scripts/social.py bank story rose fa         # a social post in Persian
python scripts/deck.py purple --lang fa             # a Persian slide template (font: Vazirmatn)

Persian slide templates for every colour are attached to each release.

The master lantern skill includes every pack. A colour skill includes core; add the others when you need them:

python scripts/fonts.py list              # what is installed
python scripts/fonts.py add sets europe   # or: add all
python scripts/fonts.py verify            # check every file against its recorded hash

fonts.py downloads only the files pinned in assets/fonts/manifest.json, from jsDelivr's mirror of the Fontsource packages, and keeps a file only if its SHA-256 hash matches. Chinese, Japanese and Korean are not bundled yet; they render in your system's font if it has one.

Illustration modes and components

Cut-away scenes open a building, machine or vessel like a doll's house: five to eight linked rooms, small silhouette figures who are always doing something, one dominant light, and flow lines between the parts. Flows carry meaning by shape as well as colour: round dots for energy, small squares for information, rings for water.

Portrait scenes use two or three large characters (a person in strict profile, a robot, a lit object between them), soft gradients and a single beam of light, with no text in the picture.

The building blocks:

Each skill's references/components.md lists every function with its arguments.

Animation

Any scene becomes a seamless loop: every moving part (gears, flows, rain, blinking lights, the lantern's flame) completes whole cycles per loop, and check_loop() measures the seam. GIFs come out at an exact length (the frame rate must divide 100, because GIF timing is in hundredths of a second) and shrink their palette automatically to stay under 15 MB. MP4s are 1080p H.264. Every animation ships with a still frame for anyone who prefers no motion.

def frame(t):
    return build(t)  # your scene as a function of time


if __name__ == "__main__":
    set_theme("dark", color="gold")
    set_canvas("16:9", loop=25)
    render_frames(frame, 10, "frames10", fresh=True)
    print(check_loop("frames10"))  # seam vs a normal frame step: should be close
    make_gif("frames10", "loop.gif")

Interface kit and design tokens

python scripts/export.py teal out/teal --type modern --default dark

The accent keeps its meaning in an interface: it marks the one thing to look at. Actions use the core colour, and a core too pale to carry white text falls back to ink.

Your brand in one step

python scripts/brand.py acme https://example.com     # the colours a website declares
python scripts/brand.py acme logo.png                # a logo or a few screenshots
python scripts/brand.py acme "#E4002B"               # a colour you already know

Lantern finds the brand's most characteristic colour (chromatic, used often, not too pale), borrows the recipe of the nearest of the twelve colours (a yellow gets Gold's near-black ground, a grey gets the monochrome recipe), and writes a complete theme. It then renders a cover slide, a scene and the component sheet in dark and light, plus the CSS and Tailwind tokens, into brand-acme/. If it picked the wrong colour, it prints the runners-up and the command to use one of them.

The website mode is the only part of Lantern that uses the network: it downloads that one page and up to five of its stylesheets, nothing else.

Social posts

python scripts/social.py cloud_computing square blue          # 1080x1080 for LinkedIn, X and Instagram
python scripts/social.py supply_chain portrait teal           # 1080x1350 feed post
python scripts/social.py knowledge_base story gold --loop 8   # 1080x1920 still plus a seamless 8 s MP4
python scripts/social.py all square rose --handle "@you"      # every scene, with your handle at the foot

Slide templates

Every colour has a ten-slide template in dark and light, attached to each release: title, agenda, section break, three illustrated explainers, a text slide, two columns, a native chart and a closing slide. The pictures are images; every title, label and number is editable, and the file's own theme colours and fonts are set, so a new shape or chart matches without effort. It opens in PowerPoint, Keynote and Google Slides (File, Import slides).

python scripts/deck.py teal light modern --out teal.pptx

The fonts are free from Google Fonts. Google Slides already has them; for PowerPoint and Keynote install the two families of your type set (for Classic, PT Serif and Inter).

Make your own colour

python scripts/new_theme.py lilac "#8E7CC3" --preview out
python scripts/picker.py --all

One colour in, a complete theme out: both variants, the shade ramp, a button-safe fill, and every text colour nudged until it passes contrast. The preview renders the component sheet in dark and light so you can judge it before using it.

Starting from a picture instead? python scripts/intake.py logo.png reports the dominant colours, the nearest installed theme, and the command to build a new one.

Words on the slide

Lantern has a voice as well as a look. A title is a real question; the answer line replies in one sentence; labels name the thing ("The workshop") and say what it does in a few short lines. Sentence case, British spelling, no exclamation marks, and a credit line that says what is stylised. The full guide, with limits for every slot and a list of words to avoid, is in each skill's references/voice.md.

Accessibility

• Text and flow colours are checked against every ground they may sit on: 7:1 for primary text, 4.5:1 for secondary text, the answer line and tags.
• Differences never rest on colour alone: flows differ by shape, chart bars carry their values, status tags carry a word.
• Every image gets one sentence of alt text, embedded in the SVG and returned with the file.
• Animations ship with a still, and nothing flashes more than three times a second.
• The interface kit has visible focus rings, 40-pixel controls and errors written under the field.

Using the scripts directly

The skills are plain Python, so you can script them:

import sys

sys.path.insert(0, "skills/lantern/scripts")
from kit import *
from components import *

set_theme("dark", color="green", type_set="classic")
set_canvas("16:9")
body = [
    background(),
    lantern(960, 160, 2.0),
    finish(),
    title_block(["Who keeps the lights on?"], "Fiat lux", "Everybody, a little."),
]
render(svg_doc(std_defs(), "".join(body), alt="A lantern in the dark."), "slide.png", scale=2)

python scripts/examples.py renders the reference scenes in every colour and variant, and doubles as a self-test.

Troubleshooting

Building from source

Every skill in skills/ is generated from one source, so a fix lands everywhere at once.

src/            the engine (scripts, interface kit, fonts, system.json) and the twelve themes
build/          build.py, themes.py (colour recipes), check.py, release.py, teasers.py, templates/
skills/         the generated skills, one folder each; .claude-plugin/marketplace.json lists each as a plugin
docs/images/    everything on this page
docs/index.html the playground, served by GitHub Pages

pip install -r requirements.txt ruff
python -m playwright install chromium
python build/build.py                 # renders reference images and writes every skill (about ten minutes)
python build/build.py --skip-render   # code and docs only
python build/check.py                 # contrast, names, interface contrast, fonts, translations, engine copies
python -m unittest discover -s tests  # unit tests, no browser needed
python build/readme_images.py         # the images on this page
python build/site.py                  # the playground in docs/ (GitHub Pages, deploy from /docs)
python src/scripts/deck.py all --out dist   # slide templates for a release

Contributing, security and licence

Contributions are welcome, especially new colours and components: see CONTRIBUTING.md. To report a vulnerability, see SECURITY.md. Changes are listed in CHANGELOG.md.

Lantern is licensed under the Apache License 2.0. The bundled fonts (PT Serif, Inter, JetBrains Mono, Space Grotesk, Fraunces and Source Sans 3) keep their own SIL Open Font Licence; see NOTICE.