FOUNDATIONS

Order you can feel.

Paper for the content, berry for the emphasis, a sparkle only where it belongs. Semantic tokens keep those small decisions familiar across pages and themes.

Color

Semantic color

Components consume purpose, not guessed values. Toggle the theme in the header and watch each role preserve its relationships.

Background--moe-color-background

Strong surface--moe-color-surface-strong

Text--moe-color-text

Soft text--moe-color-text-soft

Accent--moe-color-accent

Accent wash--moe-color-accent-wash

Success--moe-color-success

Border--moe-color-border

Rhythm

Spacing and typography

A limited spacing scale creates rhythm; readable line length matters more than filling every pixel.

space-14px
space-28px
space-312px
space-416px
space-624px
space-832px

Typography strategy

Headings use a local serif stack; body text, controls, and annotations use the system sans-serif stack. Code uses self-hosted JetBrains Mono and formulas use KaTeX typography, with fallback fonts while assets load.

Tokens

Tokens in three forms

CSS custom properties

For web pages and cross-framework use.

@import "@moesegfault/style/tokens.css";

.panel {
  color: var(--moe-color-text);
  border-radius: var(--moe-radius-lg);
}

TypeScript

For charts, Canvas, and runtime code that needs concrete values.

import { tokens } from "@moesegfault/style";

const accent = tokens.color.accent;

JSON / DTCG

For design tools and generation pipelines; DTCG is the Design Tokens Community Group format.

import tokens from "@moesegfault/style/tokens.json";
// or fetch /v0.1.2/tokens/tokens.dtcg.json

Dark theme

The root-element attribute controls the theme, while the first visit respects the system preference.

<html data-moe-theme="dark">
  …
</html>