Getting started

Theming.

Every color, radius and shadow is a CSS variable. Components only use the variables, so changing one changes everything that uses it.

Lantern is dark by design. The theme sets the same values for light and dark mode, so it looks the same either way. The variable names follow shadcn/ui, with a few additions for Lantern.

Surfaces#

Page, panels and floating layers.

--background

#111614

--foreground

#eeeade

--card

#1a211e

--popover

#161d1a

--secondary

#202823

--muted

#1a211e

--muted-foreground

#96a399

--accent

#263b30

Accents and states#

One orange for action, green for eyebrows and good news.

--primary

#f5a665

--primary-foreground

#1b241b

--success

#9bba86

--warning

#e8c98a

--info

#8fb3c9

--destructive

#e0715f

--ring

#f5a665

Lines#

Hairline dividers and control borders.

--border

#303b34

--input

#495347

--grid-line

rgba(174, 196, 165, 0.05)

Terminal#

The in-game window and the block shadow behind it.

--terminal

#101b17

--terminal-bar

#354832

--terminal-border

#687357

--terminal-foreground

#c6d4b8

--block-shadow

#1e271c

Typography#

Display

Space Grotesk, tight tracking

Body

DM Sans

Mono

System mono, for labels and code

Utilities#

bg-gridThe faint 20px grid behind card art and previews.

shadow-blockA hard 12px by 14px offset shadow, no blur.

shadow-block-smA smaller offset shadow for menus and popovers.

animate-lantern-pulseThe slow fade used by status dots.

animate-lantern-blinkThe terminal cursor blink.

font-displaySpace Grotesk, for headings and numbers.

Customizing#

Override variables after the theme in your global CSS.

app/globals.css

:root {
  --primary: #9bba86;      /* swap the orange for green */
  --radius: 0.5rem;        /* rounder corners */
}