Brand guide
Lantern Home is warm light for a busy household: a teal lantern with an amber flame, plain words, and the app's own colours and type. Everything on this page is read from the app at build, so it always matches what families see.
The name
- Lantern Home on first mention, on this site, in the app stores, and anywhere it stands alone.
- Lantern after that, and in the app itself, which calls itself Lantern.
- The tagline is The self-hosted family hub.
- Two words, each capitalised. Not LANTERN HOME, lantern home, LanternHome, or Lantern-Home, and not "the Lantern Home app". The name stays in English in every language.
Voice and tone
Lantern talks like a calm member of the household: warm, to people rather than users; plain, in everyday words that say what happened and what to do next; and brief, one idea to a sentence. Titles and buttons are in sentence case, and a button says what it does. Celebrate a finished chore, not an ordinary save.
Write: Nothing planned
Not: Oops! You haven't planned anything yet.
Write: That code isn't valid any more; ask the display for a new one.
Not: Error 422: invalid pairing code.
Write: Your phones couldn't be loaded. Check the connection and try again.
Not: Something went wrong.
Write: Made it
Not: Mark recipe as completed
The mark
A lantern with an amber flame in a warm window, drawn on a 64-unit grid. The classic mark is for 32 px and up; the rounded one, whose few large parts still read at favicon sizes, is for 32 px and below. Its colours are fixed: no household's accent or colour theme recolours it.
The lockup
The mark at one and a half times the wordmark's size, a quarter of the mark's width apart. The wordmark is Figtree ExtraBold, drawn a little tight.
Clear space and sizes
Don't
Colour
Warm paper and ink, the brand's teal and amber, and twelve colours that tell the family's members apart. Each has a light and a dark value, and every text pair passes WCAG AA.
The brand
#0F766E--lantern · light#F59E0B--lantern-flame · light#FFF7E8--lantern-window · lightrgb(251 191 36 / 0.22)--lantern-glow · light#2DD4BF--lantern · dark#FBBF24--lantern-flame · dark#2A2420--lantern-window · darkrgb(251 191 36 / 0.12)--lantern-glow · darkPaper and ink
Light
#F7F6F2--bg#FFFFFF--surface#EFEDE7--surface-muted#1F2328--text · 14.6:1 on the page#5B616B--text-muted · 5.7:1 on the pageDark
#15171A--bg#1E2126--surface#2A2E34--surface-muted#E6E8EB--text · 14.6:1 on the page#A6ADB7--text-muted · 7.9:1 on the pageAccents
The app's buttons and links take the household's accent, teal unless an admin picks another. The mark never does.
#0F766E--accent · 5.4:1 text#1D4ED8--accent · 6.7:1 text#6D28D9--accent · 7.1:1 text#BE123C--accent · 6.2:1 text#C0400C--accent · 5.2:1 text#147C3B--accent · 5.2:1 textMember colours
Each member has one: a fill for their cards, an ink for text on it, and an accent for rings and dots.
| Colour | Light: fill, ink, accent | Dark: fill, ink, accent |
|---|---|---|
| Coral | 6.2:1#FFE1DC #9A2B1B #F0624D | 4.5:1#4c2f2f #ca9188 #F0624D |
| Tangerine | 6.1:1#FFE8CC #8A4300 #F28C28 | 4.5:1#4d3926 #c5a180 #F28C28 |
| Sunflower | 5.7:1#FFF3BF #7A5A00 #E8B500 | 4.5:1#4a421e #bdad80 #E8B500 |
| Lime | 5.9:1#E9F5C9 #4B6300 #8DB600 | 4.5:1#36421e #a1ae7a #8DB600 |
| Mint | 5.5:1#D3F4E4 #0B6B45 #2EB67D | 4.6:1#224239 #80b29e #2EB67D |
| Teal | 5.8:1#CFF1F1 #0A6363 #14A3A3 | 4.5:1#1c3e42 #7babab #14A3A3 |
| Sky | 6.9:1#D8ECFF #0B4F8A #2F8FE5 | 4.7:1#223950 #85a7c5 #2F8FE5 |
| Periwinkle | 6.9:1#E1E4FF #3640A3 #5C6BE0 | 4.5:1#2c314f #9298cd #5C6BE0 |
| Lavender | 7.0:1#ECE1FF #5B2DA6 #8B5CF6 | 4.6:1#362e54 #aa92d1 #8B5CF6 |
| Orchid | 6.3:1#F8DDF4 #862A7B #C04FB5 | 4.5:1#422b45 #be8cb8 #C04FB5 |
| Rose | 6.2:1#FFDDE8 #9B1F4F #E2487A | 4.6:1#492a38 #cb8ba3 #E2487A |
| Slate | 8.3:1#E3E8EE #364152 #64748B | 4.6:1#2d333c #969ca5 #64748B |
Colour themes
A household or a display can swap the paper and ink for a theme, or follow the seasons.
Type
Figtree, a friendly geometric sans, in every size, self-hosted so no page asks another site for it. Headings are ExtraBold and drawn a little tight; chips and buttons are SemiBold. On a wall display, everything scales up from these sizes.
Icons
Lucide's icons, as the app draws them: a two-pixel stroke with round ends, 16 px beside the words in buttons, menus, and the sidebar, in the colour of the text beside them. Each area of the app keeps its own icon, here and on the site.
- Home
- Calendar
- Chores
- Rewards
- Meals
- Lists
- To-dos
- Photos
- Displays
- Settings
Buddies
Twelve original drawings a member can have instead of a photo, each in their colour: the face in the member's fill on their accent. They're friendly, simple, and drawn for small circles, so they stay readable at the size of a chip.
- Fox
- Cat
- Bear
- Bunny
- Owl
- Panda
- Frog
- Penguin
- Lion
- Mouse
- Robot
- Dino
Motion
Warm and alive, never busy. Things move to show what changed: a checked chore pops and bursts into stars, a row that's done settles out of its list, and the screensaver crossfades with a slow pan. On this site the lantern's flame flickers and sections rise in as they scroll into view. Every movement eases out, and everything holds still for anyone whose device asks for reduced motion.
| Timing | Length | For |
|---|---|---|
| Fast | 150ms, ease-out | A press, a check, a toggle. |
| Base | 200ms, ease-out | Menus, sheets, and rows moving. |
| Slow | 250ms, ease-out | Larger panels and dialogs. |
| Celebration | 1500ms, ease-out | Confetti, stars, or fireworks, at the most. |
Screenshots
- Only the demo household: Alex, Sam, Maya, Leo, and Grandma Rose. Never a real family's calendar, names, or photos.
- Light and dark, both from the same moment, so a pair can sit side by side.
- At the sizes people use, unretouched: what's on screen is what the app shows. Crop, don't edit.
- On a plain ground with the app's own corner radius. No fake devices or reflections.
- Desktop1440 by 900 px
- Phone390 by 844 px
- Wall display, landscape1920 by 1080 px
- Wall display, portrait1080 by 1920 px
Downloads
The mark, the lockup, and the tile, drawn from the app's own files when this site is built. The lockup's letters are outlines, so it looks the same where Figtree isn't installed. Keep the clear space, and pick the file for the ground it sits on.
The markOn light grounds, from 32 px up.SVG: The markPNG, 512 px wide: The mark
The mark, for dark groundsThe lighter teal and amber, from 32 px up.SVG: The mark, for dark groundsPNG, 512 px wide: The mark, for dark grounds
The rounded markAt 32 px and below: favicons and small badges.SVG: The rounded markPNG, 256 px wide: The rounded mark
The lockupThe mark and the name, on light grounds.SVG: The lockupPNG, 1600 px wide: The lockup
The lockup, for dark groundsThe mark and the name, on dark grounds.SVG: The lockup, for dark groundsPNG, 1600 px wide: The lockup, for dark grounds
The tileThe app icon, wherever it stands for the app.SVG: The tilePNG, 1024 px wide: The tile
