dsgn.systems — CSS design system with guaranteed contrast

Colour pairs that pass WCAG

226 / 226

checked for every hue on every build

CSS, minified and gzipped

19 kB

plus 5 kB of optional JavaScript

Figma variables

264

in 10 collections with modes

Build steps in your project

0

plain HTML, CSS and data attributes

Why dsgn

The hard parts are already in the stylesheet.

You compose pages from components and layout primitives. dsgn takes care of what usually goes wrong late in a project.

Contrast is guaranteed

OKLCH palettes keep lightness fixed per step and change only hue and chroma. Pick any brand colour and every text, border and focus pair still passes.

Plain HTML, any stack

dsgn styles native elements with classes and data attributes. It works in React, a CMS template or a static page, with no build step in your project.

Your CSS always wins

Everything ships in cascade layers, so one plain rule in your stylesheet overrides it. No !important, no specificity fights.

Accessible by default

WCAG 2.2 AA is checked with axe, keyboard and forced-colours tests on every build. Focus rings, target sizes and reduced motion come built in.

Mirrored 1:1 in Figma

The same tokens, components and version number in code and in the Figma library. Each component carries its markup in the description.

Ready for AI agents

The package ships a skill that teaches coding agents to build with dsgn, including accessibility, SEO, form security and a definition of done.

The scale

One scale, from a hairline to a block.

The logo is drawn from the same spacing tokens as every gap and padding in dsgn: 2, 4, 6, 8, 12, 16, 24 and 32. Thin lines at the top, solid mass at the bottom, all from one unit.

Every size on a 2 px grid
Snapped at any browser font size, so nothing lands on half pixels.
Sizes come from type
Control height = line height + 2 × padding, in every density.
Touch screens get room
Without a density set, touch devices switch to L with 44 px controls.

2
4
6
8
12
16
24
32

Modes

Every mode is one attribute.

Light or dark, dense or roomy, square or pill. Set it on <html> for the whole page or on any section. Try it on the panel below.

<section data-theme="light" data-density="m" data-radius="sharp" data-elevation="flat">

Invoice 2026-114

Paid

Client: Studio Kolo s.r.o.
Issued: 28 Oct 2026
Total: CZK 24 200

Notifications

E-mail for receipts

Overdue reminders

Figma

The same system on the canvas.

Designers switch the same modes as developers do, through Figma variable modes. One version number covers the npm package and the library, so a design never points at a component that the code does not have.

Code in every component
Dev Mode shows the markup and how each property maps to an attribute.
Your brand as a mode
npx dsgn theme writes the CSS and the Figma mode from one config.
Responsive frames
Switch the Layout mode and a page reflows to mobile, tablet or desktop.

Figma theme plugin

Figma variable collections in dsgn 0.15
Collection	Modes	Variables
Color	Light, Dark	63
Accent	Default, Strong, Stronger, Monochrome	38
Density	S, M, L	17
Radius	Sharp, Default, Rounded, Pill	7
Elevation	Flat, Soft	6
Material	Solid, Glass	3
Lines	On, Minimal, None	2
Layout	Mobile, Tablet, Desktop	11
Typography	—	18
Primitives	—	99

Showcase

One system, any brand.

Real screens built only from dsgn components. Give them your colour, corners and density, and copy the theme when it looks right.

All demos

Billing app

App shell, stats, tabs and a table of invoices with statuses.

Shop product page

Gallery, ratings, option cards, a cart toast and reviews.

Get started

Three steps to your first page.

01

Install

Add the package. It brings the CSS, the optional script and the dsgn command line tool.
```
npm i dsgn.systems
```

Link it

On a static site, copy the minified files into the folder you deploy and link them.

npx dsgn copy public/vendor/dsgn

<link rel="stylesheet" href="vendor/dsgn/dsgn.css">
<script src="vendor/dsgn/dsgn.js" defer></script>

03

Make it yours

Set your brand colour, corners and density. The contrast check runs before anything is written.
```
npx dsgn theme --init
npx dsgn theme
```
Or try colours in the theme customizer first.

Prototyping? Use the CDN.

Link https://cdn.jsdelivr.net/npm/dsgn.systems@0.15/dist/dsgn.min.css and you are done. Pin the minor version.

Questions

Do I need React, Vue or Tailwind?

No. dsgn is CSS with an optional small script, and it styles semantic HTML, so it works in any framework, CMS template or static page. If a project already uses Tailwind, keep it for layout utilities and put its preflight in a cascade layer below dsgn.

How do I use my brand colour?

Run npx dsgn theme --init, set your brand hex in dsgn.theme.mjs and run npx dsgn theme. It checks every colour pair and writes dsgn.theme.css plus a matching Figma mode. The theme customizer does the same in the browser.

What does dsgn.js do?

It adds keyboard support and behaviour that CSS cannot provide: tabs, menus, combobox, tooltips, toasts, drag-and-drop upload, slider and number steps, and the header scroll states. Everything else is CSS only, so you load the script only when a page needs it.

How do I change a component?

Use its attributes first (data-variant, data-intent, data-size), then a project theme. For anything else, write a plain rule with dsgn tokens: it wins over the cascade layers without !important. npx dsgn lint checks that your CSS sticks to the tokens.

Is it free to use?

Yes. The package is released under the MIT licence by Novama, for personal and commercial projects.

Start with one stylesheet.

Install the package, link the CSS and build your first page with real components today.

Get started Read the docs

Menu

Accessible UI from plain HTML.