Slate

A flat, system-font tool surface — no animation, no Google Fonts, no atmosphere. Just dark cards in a tight grid.

Used on every interactive visualizer and on the /tutorials/ and /theory/ hubs that index them. The job is to stay out of the way of the math demo it's wrapping.

Card grid

Buttons

Code

// Slate uses Consolas for code, periwinkle for keywords
const palette = {
  bg:     '#0a0a0f',  // flat dark
  card:   '#12121a',
  accent: '#7c8cf8',  // periwinkle
};