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 marketplace

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);
}

colors

surface

bg

surface

raised

border

subtle

text

secondary

muted

faint

semantic

accent

error

warning

success

info

syntax

keyword

string

function

constant

comment

parameter

components

buttons

badges

default error warning success info

inputs

cards

surface card

a basic card using the surface background with subtle border.

raised card

elevated variant with a slightly lighter surface.

interactive card

hover to see the subtle transition effect.

alerts

info: monochrome is the default. color is opt-in.

success: token applied successfully.

warning: saturated colors break the system.

error: pure #ff0000 is never acceptable.

code

const theme = 'min-mono';

function getToken(name) {
  // Resolve a design token at runtime
  return getComputedStyle(document.documentElement)
    .getPropertyValue(`--${name}`);
}