Introduction

pix is a pixel art design system for the web. It ships design tokens and themes as plain CSS variables, so it works with any framework or with none.

Install

npm install @halleyfante/pix

Set up

Import the tokens and at least one theme, once, at the entry of your application.

import '@halleyfante/pix/tokens.css';
import '@halleyfante/pix/themes/sakura.css';

Then choose the theme on the root element. Nothing is colored until a theme is chosen.

<html data-theme="sakura">

Fonts

The fonts are optional and are not installed with the library. To use the default ones, install them and import fonts.css.

npm install @fontsource/press-start-2p @fontsource/vt323

import '@halleyfante/pix/fonts.css';

To use your own, skip both steps, load your fonts and set the two font variables.

:root {
  --pix-font-display: 'Your Display Font', monospace;
  --pix-font-body: 'Your Text Font', monospace;
}

Use

Every value is a CSS variable prefixed with --pix-.

.card {
  padding: var(--pix-space-4);
  background: var(--pix-color-surface);
  color: var(--pix-color-text);
  font-family: var(--pix-font-body);
}

What is inside