Pure Design System
Design systems that generate themselves. Configure once, ship consistent UI everywhere, and start building fast with only actual web standards.
What is PDS?
The essence of PDS in four points.
HTML & CSS First, Progressive Enhancement by default, and Web Components only when the platform truly needs extending. PDS is the de-facto materialized Pure Web Manifesto.
PDS turns a Deterministic Config into a cohesive, light & dark mode supporting, system of color, type, spacing, and motion.
PDS observes the DOM and auto-defines your Web Components when they're actually being used. This makes Custom elements now really work like native HTML tags.
PDS comes with LLM instructions that help your coding agent understand your design system and generate consistent UI. These instructions are automatically added for Cursor and GitHub Copilot Coding Agents.
Signature PDS moments
A quick tour of the experiences teams love: expressive surfaces, intentional motion, and thoughtful UI defaults.
Start with a preset, then customize with your own tokens and surfaces.
Auto-balanced backgrounds, text, and shadows across light and dark.
Stack, grid, and utility patterns that scale from dashboard to landing page. But without turning your project into div-soup with utility classes — explore layout patterns
For a lot of functionality, there's no need for components — just sprinkle in a class name or a data-attribute and let the system handle the rest. see enhancements guide
PDS is not a component library, but it does include a set of thoughtfully designed, accessible, and customizable Web Components for when you need them.
Momentum, engineered
Build a system that feels crafted from day one. PDS turns decisions into a living, searchable design language.
The PDS Project Initializer npm init @pure-ds/app generates boilerplate within seconds.
Accessible defaults keep every surface consistent.
Design decisions you can reuse
Every tweak updates tokens, surfaces, and components in real time.
Why teams love PDS
What teams cite most often when they adopt PDS.
What people say
Early reactions from the community.
“This is one of the coolest and cleanest projects I've seen lately”
“Looks awesome!”
“Great achievement and great vision!”
Rich Content — using only standards
PDS has utility classes, but at a higher semantic level: structural layout primitives, not UI styling micro-controls.
Orbit Desk Lamp
Sculpted aluminum with dimmable glow.Summit Travel Pack
Weather-ready, modular, and carry-on friendly.Aria Studio Monitor
Crystal sound with a warm balanced tone.Mosaic Coffee Set
Hand-finished ceramics with matte glaze.Nimbus Office Chair
Ergonomic support with breathable mesh.HTML Forms with PDS Intelligence
Rich, schema-driven, native HTML forms that bind to your data models and integrate with PDS intelligence.
Need help?
Webinars, consultancy, and component-building to help teams launch PDS with confidence.
Live, team-friendly sessions with Q&A, recordings, and tailored guidance.
Audit your system, align tokens, and plan migration paths that stick.
Ship custom web components and enhancements aligned to PDS patterns.
How we help you
This is how we structure our engagements to set teams up for long-term success with PDS.
Need help launching PDS quickly?
Let us plan a focused engagement and ship the first version together.
Getting started
Give PDS a go right now
$ Resources
Find PDS resources online.