Lodestar
Open-source design infrastructure
A design system written
for humans & machines.
89 WCAG AAA primitives. Two-tier token architecture. Native MCP server. Your AI assistant builds verified, token-pure UI.
$ npx @shavin/cli init
Next.js & Vite · Tailwind v3/v4 · React 19
0Primitives
0MCP Tools
0%WCAG AAA
0+Blocks
Explore the system
Nine entry points, one contract.
Every capability has a dedicated surface. Jump straight to the feature you need — primitives, MCP tools, the brain file, skills, blocks, kits, or live inspection.
What is @shavin/ui
A design system where the spec is the code.
@shavin/ui is design infrastructure built around a strict two-tier token architecture. Foundation tokens define the raw palette, while semantic tokens — bg-surface, text-fg, and border-hairline — are the only values components reference.
Dark mode, live themes, and scaling propagate everywhere instantly. AI agents cannot drift off-spec because every constraint is enforced directly in the design tokens.
01
Tokens, not hex
Every color, radius, and shadow resolves through semantic tokens. Zero raw values in component code — by construction, not convention.
02
Accessible by default
89 primitives built on Radix, keyboard-navigable, focus-visible, ARIA-complete, and contrast-verified to WCAG 2.1 AAA.
03
AI-native
The MCP server exposes component specs, token rules, and validation to your AI assistant. It generates compliant code because it can't see anything non-compliant.
Interactive Theme Engine
89 primitives, live-themed in real time.
Calibrate tokens on the left — watch real React primitives adapt instantly on the right with strict two-tier token purity and concentric geometry.
Configure Theme
Theme
Accent Color
Custom
Gray Family
Appearance
Radius
Scaling
Panel Style
Heading Font
Body Font
Scoped CSS tokenstokens.json
New
⌘K
Active
WCAG AAA
New
⌘K
Active
WCAG AAA
New
⌘K
Active
WCAG AAA
Built with Shavin
Real products, live. Start from one, not a blank page.
6 complete Next.js websites and apps, running live. Typed data, every state designed, zero raw colours, and yours to start from.
Shavin Studio
Assemble full screens, visually.
Drag token-compliant blocks onto a live canvas. Export clean JSX straight into your repository.
studio.shavin.cc
Shavin Studio
Three ways to design in Studio.
Whether you drag blocks yourself, fork a community design, or let your AI agent compose — the output is always the same clean, token-compliant JSX.
AI Cognition Layer
Teach your AI agent to think in design tokens.
A persistent project brain file that keeps AI assistants aligned to your design system across every conversation — no re-prompting, no context drift, no UI slop.
SHAVIN.mdroot
# SHAVIN.md — auto-created by npx @shavin/cli init
## Project Context
- Framework: Next.js 15 App Router (React 19)
- Tokens: @shavin/ui two-tier (foundation → semantic)
- Accent: Grass · Radius: Large · Scaling: 95%
- Density: Compact · Panel: Translucent
## AI Agent Invariants
- Never use raw hex/rgb() colors — use semantic tokens only
- Respect concentric radius: R_inner = max(floor, R_outer - P)
- Container surfaces use rounded-[var(--radius-panel)]
- Controls/buttons use rounded-[var(--radius-lg)]
- Floating surfaces MUST include data-panel attribute
## Agent Knowledge
- Skills: .agents/skills/ (9 skills, load on demand)
- MCP: 29 ground-truth tools via npx @shavin/mcp01Persistent project memory
SHAVIN.md grounds your agent in your exact tokens, radii, and framework — no re-prompting, no context drift.
02Token invariants, enforced
Your agent generates semantic tokens and concentric radius math by construction — the rules travel with the file.
03Nine skills, on demand
Typography, motion, and anti-slop rules deploy to .agents/skills/ and load the moment a task matches.
Creative Display Engine
Make every screen look and feel alive.
Hardware-accelerated visual primitives built with fluid WebGL shaders, particle physics, and retro ordered dithering.
The Token Engine
Three tiers. One source of truth.
Palette feeds semantics; semantics paint the interface. Hover a semantic token — its sources light up on the left, every surface it colors lights up on the right.
Foundations
n-0
n-100
n-200
n-400
n-700
n-900
n-1000
Semantics
Sample UI
On-spec by construction
Every property on this card resolves through one semantic token — nothing is hard-coded.
v2.0Read the docs
No branches, no overrides — every property on every component resolves through the same two-tier pipeline. Restyle the palette and the whole interface follows.
See it in action
Dark theme & responsive reflow. By default.
Every Shavin block is theme-ready and responsive from the first line. No dark stylesheet to maintain, no breakpoint overrides to chase.
LightDark
>npx @shavin/cli add pricing-three-tier
Pricing
Simple plans for every household
Start free and upgrade when you need more. Every plan includes read-only bank connections and two-factor sign-in.
Free
For one person getting organised.
$0
forever
2 linked accounts
10 budget categories
Bill reminders
Web and mobile apps
Plus
For individuals who want the full picture.
$7.99
per month
Unlimited linked accounts
Unlimited budgets and goals
50 receipt scans per month
75 AI questions per month
CSV and PDF export
Household
Most popularFor couples and families sharing money.
$13.99
per month
Everything in Plus
Up to 6 household members
Owner, Editor and Viewer roles
150 receipt scans per month
200 AI questions per month
Prices in USD. Taxes may apply.
Less code. Same design.
The same profile card, written two ways. Shavin handles dark mode, tokens, and accessibility — so you don't repeat yourself.
import { Avatar, Button, Card, Flex, Heading, Text } from "@shavin/ui";
const stats = [["248", "Posts"], ["12.4k", "Followers"], ["391", "Following"]];
export function ProfileCard() {
return (
<Card padding="lg" className="w-full max-w-xs">
<Flex direction="column" gap="5">
<Flex align="center" gap="4">
<Avatar size="lg" src="/avatar.jpg" alt="Priya Raman" />
<Flex direction="column" gap="0">
<Heading as="h3" size="sm">priya.raman</Heading>
<Text size="sm" color="subtle">Product designer</Text>
</Flex>
</Flex>
<Flex justify="between">
{stats.map(([value, label]) => (
<Flex key={label} direction="column" align="center" gap="0">
<Text weight="semibold">{value}</Text>
<Text size="xs" color="subtle">{label}</Text>
</Flex>
))}
</Flex>
<Flex gap="2">
<Button className="flex-1">Follow</Button>
<Button variant="outline" className="flex-1">Message</Button>
</Flex>
</Flex>
</Card>
);
}priya.raman
Product designer
248
Posts
12.4k
Followers
391
Following
Shavin: 31 lines
Vanilla: 46 lines
−33%less code
Core capabilities
A cohesive architecture, from tokens to tooling.
Six foundational pillars working as one contract — built for developers and the AI agents collaborating with them.
Strict Two-Tier Token Engine
One token swap re-themes every component — dark mode, accents, density — without touching component source.
Concentric Radius Geometry
Nested corners stay mathematically concentric. R_inner = max(floor, R_outer − P) holds on every surface, every theme.
WCAG 2.1 AAA Accessibility
Focus traps, keyboard nav, and ARIA wiring ship inside every primitive — accessible by default, not by audit.
Design in Studio
Compose sections on the Studio canvas, fork community blocks, and export token-pure JSX straight into your repo.
Class Variance Authority Primitives
Every primitive is cva-based and merged via cn() — predictable variants, clean className overrides.
Zero-Hallucination MCP Server
30 ground-truth tools feed real specs to Cursor, VS Code, and Claude Code — generated code is accurate by construction.
How it works
From zero to on-spec in three moves.
- 01Init
One command, fully wired
Auto-detects framework and Tailwind version — v3 or v4 — then wires tokens, ThemeProvider, and agent skills.
npx @shavin/cli init - 02Compose
Build from real primitives
89 token-pure Radix primitives — or fork community blocks. They land as readable TSX in your repo.
npx @shavin/cli add @sarah/pricing-card - 03Verify
Audit the live DOM
Dev Inspector checks token purity, concentric radius, and contrast at :7428. MCP tools lint JSX in real time.
npm run bridge
What you install
Three packages. One design contract.
$ npx @shavin/cli init
@shavin/ui89 WCAG AAA primitives, ThemeProvider, Dev Inspector, and the full token engine. The core library you install.
@shavin/cliOne-command scaffolding: init wires your project (Tailwind v3 or v4, auto-detected), check verifies token discipline and config compliance.
@shavin/mcp30 MCP tools exposing tokens, components, validation, and synthesis to Cursor, Claude, Windsurf, and Copilot. Optional — for AI-assisted development.
All packages are open-source, MIT licensed, and published to npm
FAQ
Questions, answered
The essentials about the system, framework compatibility, and AI integration.
Zero setup overhead
Discover the full design system.
Browse 89 accessible primitives, compose production-ready blocks, and let your AI assistant generate verified, token-pure UI.
React 19+ · Next.js & Vite · Tailwind v3/v4 · MIT licensed
Read our story →