ash lumen

a monochromatic design system & vs code theme

hierarchy through luminance, not hue. a minimal system built from the gray spectrum for calm, focused interfaces and coding.

github

philosophy

monochrome first

color is noise. the system lives in the gray spectrum — warm and cool tints create hierarchy without distraction.

semantic color only

color is reserved for meaning: errors, warnings, success, info. never for decoration.

hierarchy through luminance

elements are differentiated by brightness, not hue. important things are brighter, subordinate things fade.

desaturated calm

even diagnostics use muted tones. no screaming reds — the interface stays calm under pressure.

theme preview

typescript

import { readFileSync } from 'node:fs';

interface Token {
  name: string;
  value: string;
}

// Resolve design tokens at runtime
function getTokens(path: string): Token[] {
  const raw = readFileSync(path, 'utf-8');
  return JSON.parse(raw);
}

react

import { useState, useEffect } from 'react';

export function ThemeToggle() {
  const [theme, setTheme] = useState('dark');

  useEffect(() => {
    document.documentElement
      .setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <button onClick={() => setTheme(
      t => t === 'dark' ? 'light' : 'dark'
    )}>
      {theme === 'dark' ? '◐' : '◑'}
    </button>
  );
}

css

:root {
  --color-bg: #161616;
  --color-text: #a0a0a0;
  --color-accent: #b0b0b0;
}

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

reference

the full component reference lives on its own page: colors, foundations, buttons, badges, alerts, inputs, cards, dialogs, code, motion and states, each rendered with the live tokens rather than screenshots.

design system reference →