design language · dark · purple · terminal

Build in the gloam.

A small, dependency-free CSS design language — dark-first, purple-accented, terminal-flavored. Drop in one stylesheet, or let the bundled Claude Code skill build the page for you.

Get started View on GitHub

↑ Pills are real tabs — click to swap the terminal.

gloam — demo

$ yourtool run .
STATUS   TARGET            NOTES
ok       parse             142 files
ok       analyze           1.2s
warn     3 findings        see report

$ yourtool build --release
STEP     RESULT
compile  done
bundle   done  2.1 MB
built in 4.3s

$ yourtool deploy
TARGET   URL
edge     https://app.example.com
live ✓

the kit

Components, not just colors.

Everything on this page is a gloam component. Copy the markup, keep the classes.

Faux terminal

The signature hero element — a titled window with prompt, columns, and status colors.

Feature grid

Two- or three-up cards with an accent icon chip — like these.

Pills & tabs

Rounded pills that double as tab controls, with a purple selected state.

Code blocks

Bordered panels with comment / keyword / string token colors.

Install snippets

One-line commands with a copy button — see below, they work.

Buttons, nav, footer

Primary/ghost buttons, a sticky blurred nav, and a tidy footer.

Carousel

A scroll-snap track of cards with dots, arrows, and motion-safe autoplay — see below.

motion, with restraint

A carousel for featured cards.

Auto-advances every 6s, pauses on hover or focus, and stops entirely under prefers-reduced-motion. Only the track scrolls — never the page.

One

Slides are ordinary gl-cards — put anything inside them.

Two

Shows three at a time, two on tablets, one on phones.

Three

Dots are generated by gloam.js; leave the container empty.

Four

Without JS it degrades to a plain scrollable row.

Five

Controls are real <button>s with focus rings and labels.

use it

Two ways in.

Link the stylesheet

<!-- one file, no build, no deps -->
<link rel="stylesheet" href="gloam.css">
<script src="gloam.js" defer></script>
<body class="gl"> … </body>

Or let the skill build it

# drop the skill into your project
cp -r skills/gloam .claude/skills/gloam

# then just ask
"build a landing page in gloam"

clonegit clone https://github.com/richardwooding/gloam

css<link rel="stylesheet" href="https://richardwooding.github.io/gloam/gloam.css">

tokens

Themeable by design.

Every color is a --gl-* custom property. Dark is the default; light comes free via prefers-color-scheme, and you can force either with data-theme.

--gl-accent

The purple that carries the brand — buttons, links, selected states, complexity numbers.

--gl-bg

Near-black in dark, white in light. Panels, borders, and text all derive from the same small token set.