The Point is a CSS design system whose base classes are already built from design tokens, and native CSS @layer rules make overriding them safe. Point Claude Code, Cursor, or Copilot at llm.md and it has the whole system in one file — no dozens of utility classes to reassemble from memory, no specificity fights when you rebrand.
Built by Robert Evans.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/revans/the-point@master/assets/index.css">
3 to 20+ classes, chosen fresh on every element, every session — with no guarantee session six matches session one.
Utility-first CSS asks an AI assistant to choose and combine 3 to 20+ classes for every element, every time it builds something — padding, radius, shadow, hover state, focus ring, each picked independently. There's no single class that means "primary button." There's a recipe, assembled from scratch each session.
Ask it to build page six and it either re-reads page one's markup, if you're lucky, or reconstructs the recipe by memory, if you're not. The class list isn't stored anywhere but the conversation — and separate AI sessions don't share memory.
Same button, two AI sessions, two different class recipes.
px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm transition-colors focus:ring-2 focus:ring-blue-500
11 classes
inline-flex items-center px-3.5 py-2 bg-blue-700 hover:bg-blue-800 text-white font-semibold rounded-md shadow transition focus:outline-none focus:ring focus:ring-blue-400
14 classes
Same intent, same component, no shared source of truth between the two sessions.
Nearly every design decision in The Point's base classes — color, spacing, radius, shadow, type — already resolves to a variable. Four native @layer rules decide who wins when you override one.
Every bp- class ships with its values already resolved from design tokens — --color-primary, --space-4, --radius-md — instead of hard-coded hex codes and pixel values. Change a token once, in one file, and every component built from it updates. No hunting through markup for the forty places a color got pasted in.
740 of 742 audited design declarations use a token — measured directly against the codebase, not rounded up.
Load order is specificity order — declare later, win by default.
The Point's building blocks: four cascade layers that decide override order (blueprint, brand-base, brand-seasonal, brand-state — above), a library of bp- prefixed component classes (bp-card, bp-btn, bp-alert, and the rest) that already ship the design, and llm.md — the one file that documents all of it for an AI to read once.
Same visual result, same four elements — one column assembled from 31 hand-picked utility classes, the other from 8 that already carry the design.
Give every project its own space — files, comments, and history in one place.
wrapper: rounded-xl border border-gray-200 bg-white
p-6 shadow-sm hover:shadow-md
transition-shadow duration-200
title: text-lg font-semibold text-gray-900 mb-2
desc: text-sm text-gray-600 leading-relaxed mb-4
button: inline-flex items-center gap-1.5 rounded-lg
bg-blue-600 px-4 py-2 text-sm font-medium
text-white hover:bg-blue-700 focus:ring-2
focus:ring-blue-500 transition-colors
Give every project its own space — files, comments, and history in one place.
wrapper: bp-card bp-card-hover bp-card-feature title: bp-card-title desc: bp-card-description button: bp-btn bp-btn-primary bp-btn-sm
Every value in the right-hand column already traces back to a token. Nothing here was hand-tuned per instance.
The Point vs. utility-first CSS (Tailwind and similar)
| Utility-first CSS | The Point | |
|---|---|---|
| Classes per component | 3 to 20+, hand-picked and reassembled every session | 2 to 3 reusable component classes |
| Token coverage | Values mostly hard-coded per utility class | 99.7% of base design declarations resolve to a token |
| Rebranding a component | Hunt through markup, risk specificity fights | One override layer (brand-state) — every component updates |
| Same card, this page's example | 31 classes | 8 classes |
The blueprint aesthetic is The Point's built-in default visual style — every bp- component ships already styled, not blank — so content and layout come first and branding becomes a deliberate, one-time second pass, not a decision made over and over on every element.
Point the AI at llm.md and let it build. Every bp- component already carries a real, considered look — the blueprint aesthetic — so the first pass is about what the page does, not what color the button should be.
Write your palette, type, and spacing overrides into one brand-state file. Every component the AI already built — buttons, cards, alerts, every page — picks up the new brand the next time the stylesheet loads. Nothing gets touched twice.
Every component in this frame — including the ones on this page — is stock. No color token below has been touched.
llm.md once, reuse forever.No color override in brand.css touched anything above — this is the stock blueprint palette.
It's MIT licensed. No account, no config step between you and a working stylesheet.