Design system 1

A shared foundation

Start with a square. Use it to size a button, place a heading, or give a panel room to breathe.

The grid adapts to the screen. On mobile, the squares scale while the column count stays consistent. The elements follow the same scale, just as they do in Ezo.

Everything lines up

The pastel areas show how a page takes shape. Its title, header, body, and navigation each occupy a place on the same grid.

Your design, ordinary HTML

CLASSless brings the design to native HTML. Headings, buttons, and forms take their appearance from a shared stylesheet.

Adjust the elements in the editor, then copy the CSS into your project. You can try it without an account.

<link rel="stylesheet"
  href="/my-styles.css" />

<h1>Welcome</h1>
<p>Make yourself at home</p>
<button>Get started</button>

Link your stylesheet and write your page. The playground is temporary, so copy your CSS to keep it.

Components when you need them

For interactive controls, use the Web Components with their stylesheet and JavaScript bundle. Themes, translations, and preferences are part of the system too.