The design system behind erikakers.com

Install

npm install @erikakers/slate @erikakers/typography

Both packages are reachable only through their exports sass condition. A bare load-path import fails:

// Fails: resolves via the filesystem, never sees "exports"
@use '@erikakers/slate';

Dart Sass's NodePackageImporter is the only importer that reads a package's exports field. Wire it into your build, then @use 'pkg:@erikakers/slate/global' resolves:

import { NodePackageImporter } from 'sass';

css: {
  preprocessorOptions: {
    scss: { importers: [new NodePackageImporter()] },
  },
}

The five faces do not load themselves. Sass compiles a url() in a dependency's stylesheet verbatim, so nothing rewrites it to your build's output directory. Three steps:

1. The .woff2 files ship in the tarball at fonts/.
2. $slate-font-path is the URL they are served from, defaulting to /fonts/.
3. You copy them: node_modules/@erikakers/slate/fonts/*.woff2 into wherever $slate-font-path resolves to in your own build.

Full detail on overriding $slate-font-path and self-hosting from your own pipeline with $slate-emit-fonts: false is on the base layer page.

Vendor-neutral where typography already is: every custom property is --slate-*, and the three classes the component layer ships name things HTML has no element for. A consumer includes what it needs through @use 'pkg:@erikakers/slate/global' and gets the reset, both token layers, the delegated type layer and the component layer in one pass.

Settings

The inputs: fonts (settings/_fonts.scss), the seven values handed to typography (settings/_type.scss), the palette (settings/_palette.scss), the code theme (settings/_code.scss) and the invariant space/radius tokens (settings/_space.scss). The token pages render each one as what it is rather than describing it: the colour swatches, the code theme, space and radius drawn, the delegated type inputs, and the four theme blocks, live.

Tools

The mixins that turn settings into CSS: the theme emitter (tools/_theme.scss), the WCAG 2 contrast functions (tools/_contrast.scss) and slate-tokens(tools/_tokens.scss), the one mixin a consumer includes directly. The theme model page demonstrates the first of the three live; dedicated reference pages for the tools are not filed yet.

Base

The half of a reset typography declines, the five self-hosted @font-face rules (base/_fonts.scss) and the keyboard focus ring (base/_reset.scss). Readthe base layer for the ownership split, the font-copy step Sass cannot perform, and why the focus ring is its own mixin.

Components

Native-element rules with no wrapper markup and no required class names: <dialog>,<details>, <table> and the form controls: plus the generic components a design system draws that HTML has no tag for: button, tag, pill, callout, meta, spec list, pager, skip link, code block and the three-highlighter syntax layer. A live, keyboard-operable page for each one.

Utilities

Three layout primitives and nothing else: .slate-page, .slate-stack-* and.slate-row (src/utilities/_layout.scss): the smallest set a consumer needs to place the components above. A full reference page lands alongside#28.