A portable CSS system

Hamm follows form.

One stylesheet. Zero dependencies. A complete vocabulary of tokens, type, and components with poster-grade presence — and the discipline to run a real product. Theme it by changing variables, not rewriting CSS.

Try the live playground See components

0: Runtime deps
40+: Components
100%: Pure CSS

01 / Manifesto

A stylesheet should have opinions.

Hammhaus is built on four convictions. They show up in every token and every component.

Hierarchy first

Big type, honest contrast, decisive alignment. Structure carries the message before color does.

Tokens over overrides

Everything traces back to a custom property. Re-theme by changing variables, never by fighting specificity.

States are first-class

Hover, focus, success, warning, error, disabled, selected — designed up front, not bolted on.

Portable by default

A single namespaced file with system-ui fallbacks. Drop it into anything and adopt gradually.

02 / Tokens

Colors that know their job.

Six core hues plus paper and ink. Tap any swatch to copy its custom property.

Beyond color

A token for every decision.

Spacing, radius, shadows, motion, type and tracking are all variables. Override one at the :root or scope it to a single section.

--hh-space-1…9 --hh-radius --hh-shadow-hard --hh-ease

:root {
  --hh-accent: var(--hh-red);
  --hh-radius: 8px;
  --hh-shadow-hard: 8px 10px 0 var(--hh-ink);
  --hh-space-6: 2rem;
  --hh-tracking-display: -0.035em;
}

03 / Playground

Change a variable. Watch it re-skin.

This is the whole pitch in one panel: the components never change — only the tokens do.

theme-press v1.3

Accent

Surface

Headline tracking -0.035em The same lever we tuned for Archivo — live.

Corner radius 8px

Poster shadow 8px

Your theme — copy & ship

Live preview

Build with paper, ink, and guts.

Every element below reads from the same tokens. Move the controls and the whole composition responds at once.

Badge Chip

A card

Reads every token in the room and dresses accordingly.

Inverse card

Same tokens, opposite mood. The accent stays loud.

Action

tokens in, theme out

Heads up. Alerts, focus rings and form states all retheme too.

04 / Type

A scale with range and an accent.

Archivo for display and body, JetBrains Mono for code and labels. Display tiers carry negative tracking so big type reads tight and intentional.

Hero Form

Display Hammhaus builds rhythm.

Title Sharp for launches, calm for dashboards.

Section A section header that knows why it’s here.

Subhead Quietly emphatic supporting text.

Lede Readable body copy keeps the theater useful — range without losing the accent.

Mono 1 stylesheet, 0 dependencies, 40+ components — the math checks out.

Type tester — edit me

Hamm follows form.

05 / Components

Everything you need to ship a page.

Forty-plus components, every one a plain HTML element with an hh- class.

Buttons

.hh-button

Form Fields

.hh-field

Choices

check · radio · switch

Cards

.hh-card

Featured

Card with media

A masthead drawn in pure gradients — no image files, full poster energy.

Inverse card

Turns to ink when a quiet section needs one loud thing.

Badges + Chips

.hh-badge

Default Red Blue

Redline Review Live Draft

Alerts

.hh-alert

Info. Something worth knowing.

Success. That worked.

Warning. This has consequences.

Danger. Stop and confirm.

Progress + Stats

.hh-progress

Ink coverage82%

40+Components

7Core colors

Tabs + Segmented

interactive

Accordion

Does it need JavaScript?

No. The stylesheet is pure CSS; this page only adds JS for optional flourishes.

How do I customize it?

Override --hh-* tokens globally or per section, then keep the same classes.

Can I adopt it gradually?

Yes — every class is namespaced, so it won't collide with existing styles.

Timeline

.hh-timeline

Step 01
Install
Link the stylesheet.
Step 02
Compose
Use sections, grids, and components.
Step 03
Theme
Override tokens to taste.

Wayfinding

new in 1.2

Divider with a label

Press ⌘ K to search.

People + Waiting

new in 1.2

Bauhaus spinner — conic, quartered

Voice

new in 1.2

Constraints are the kindest thing a system can give a team.
— the Hammhaus manifesto

Square bullets, accent-colored
Wraps cleanly across multiple lines without losing alignment
Zero markup beyond a class

Table

.hh-table

Class	Role	Tokens it reads	Status
`.hh-button`	Actions & commands	accent, radius, ease	Ready
`.hh-card`	Grouped content	bg, line, accent	Stable
`.hh-field`	Forms & validation	accent, red, green	Visible
`.hh-alert`	System messages	accent per variant	Ready

06 / Surfaces

Six section moods, one set of classes.

Each surface resets background, foreground and accent — so the same button knows what to do in every context.

Paper

Default

White

Calm

Ink

Contrast

Blue

Institutional

Red

Attention

Yellow

Signal

07 / Patterns

Built with nothing but Hammhaus.

Real page furniture, composed only from the classes above.

StudioPopular

$0 / forever

Every component, no velvet rope
The full token vocabulary
MIT licensed — take it home

Download

The print run

+24%

Posters shipped

On track

Essay · 6 min

Why a system needs a spine

Constraints are what make a design language portable. When every choice traces back to a token, a stylesheet stops being decoration and starts being infrastructure — something a team can build on without negotiating the basics every time.

08 / Start

Three steps. No build tools.

Link it

Add the stylesheet (and the two fonts) to your <head>.

Compose

Wrap content in sections and containers, then drop in components.

Theme

Override --hh-* tokens globally or per section. Dark mode follows the OS — or force it with <html data-hh-theme="dark">.

<link rel="stylesheet" href="hammhaus.css">

<section class="hh-section hh-section--paper">
  <div class="hh-container hh-stack">
    <span class="hh-kicker">New project</span>
    <h1 class="hh-display">Hamm follows form.</h1>
    <p class="hh-lede">Build with paper, ink, and guts.</p>
    <a class="hh-button hh-button--primary" href="#">Start</a>
  </div>
</section>

/* Re-theme without touching components */
:root {
  --hh-accent: var(--hh-blue);
  --hh-container: 1280px;
}

.launch-section {
  --hh-bg: var(--hh-ink);
  --hh-fg: var(--hh-paper);
  --hh-accent: var(--hh-yellow);
}

09 / For Your AI Only

Hand it to a coding agent.

Building with an AI? Point it at one hosted file and a machine-readable guide — it'll know the whole vocabulary.

1 · Drop in the CDN link

No install, no build. One <link> and every hh- class works.

2 · Give it the guide

Point the agent at llms.txt — a concise spec of tokens, classes, and rules of thumb written for LLMs.

View llms.txt MIT — no attribution required

Paste this to your AI

Use the Hammhaus CSS system for styling.

Add to <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/g3hamm/hammhaus@v1.3.0/hammhaus.css">

Full guide (tokens, classes, examples):
https://cdn.jsdelivr.net/gh/g3hamm/hammhaus@v1.3.0/llms.txt

Rules: style with hh- classes; theme by overriding --hh-* tokens; it's pure CSS, no JS.

Free, and staying that way

Hammhaus is free. Tip only if it earned it.

No paywall, no sign-up, MIT licensed — download it and ship. If it saved you an afternoon and you feel like chipping in, it helps keep the project maintained.

Sponsor the project 100% optional · one-off or monthly · cancel anytime

A stylesheet should have opinions.

Hierarchy first

Tokens over overrides

States are first-class

Portable by default

Colors that know their job.

A token for every decision.

Change a variable. Watch it re-skin.

Build with paper, ink, and guts.

A card

Inverse card

A scale with range and an accent.

Everything you need to ship a page.

Buttons

Form Fields

Choices

Cards

Card with media

Inverse card

Badges + Chips

Alerts

Progress + Stats

Tabs + Segmented

Accordion

Timeline

Wayfinding

People + Waiting

Voice

Table

Six section moods, one set of classes.

Built with nothing but Hammhaus.

Sign in

Why a system needs a spine

From blank file to launch in an afternoon.

Three steps. No build tools.

Link it

Compose

Theme

Hand it to a coding agent.

Hammhaus is free. Tip only if it earned it.