Notoric Design Language

Use it

Link the stylesheet, or import it at the top of your own CSS:

<link rel="stylesheet" href="https://ndl.notoric.dev/ndl.css">

@import url("https://ndl.notoric.dev/ndl.css");

Then use the tokens:

.button {
  background: var(--ndl-color-primary);
  color: var(--ndl-color-on-primary);
  height: var(--ndl-size-md);
  padding: 0 var(--ndl-space-4);
  border-radius: var(--ndl-radius-2);
  font: var(--ndl-weight-semibold) var(--ndl-text-md) var(--ndl-font-text);
  transition: background var(--ndl-duration-fast) var(--ndl-ease-enter);
}
.button:hover { background: var(--ndl-color-primary-hover); }

ndl.css bundles its fonts (Noto Sans, Noto Sans Display, Noto Sans Mono), so it is large, about 150 KB. Serve it with long-lived caching.

Themes

Dark is the default look. A first visit follows the system setting and falls back to dark. Force a theme on the root element:

<html data-theme="dark">   <!-- or "light" -->

The button at the top right of this page switches between dark and light.

Remapping a role

Point a role at a different palette colour in one line:

:root { --ndl-color-primary: var(--ndl-red-pink-500); }

Hover and pressed are separate roles, so remap them as well (--ndl-color-primary-hover and --ndl-color-primary-pressed).

Examples

Five pages built only from the tokens, with made-up content.

Documentation