1 semantic system
A color language system for long-focus work
Hearth Code
HearthCode is a low-glare color language system for code interfaces. One semantic hierarchy stays stable while adapters deliver the same language across Open VSX-compatible editors, VS Code, and Obsidian.
// async data fetching with full type safety
import { createContext, useContext } from 'react'
interface ApiResponse<T> {
data: T
status: number
ok: boolean
}
async function request<T>(
url: string,
options?: RequestInit
): Promise<ApiResponse<T>> {
const res = await fetch(url, options)
const data = await res.json() as T
return { data, status: res.status, ok: res.ok }
}
const BASE = 'https://api.hearthcode.dev'
const TIMEOUT = 5_000System Proof
Semantic parity first. Platform delivery second.
The same role contract drives all four variants, then adapters project that system to each surface.
4 tuned variants
3 live surfaces
Choose your variant in 10 seconds
Daily default / mixed lighting
Pick Hearth Dark when you want strong hierarchy with balanced warmth.
Night work / low-stimulus focus
Pick Hearth Dark Soft when you need lower contrast pressure in dim rooms.
Daylight / docs-heavy tasks
Pick Hearth Light for bright environments and document-first workflows.
Long daytime sessions / calmer contrast
Pick Hearth Light Soft when you want gentler light-mode contrast over long sessions.
Hearth Dark
Hearth Dark Soft
Hearth Light
Hearth Light Soft
Surface Parity
One color system, consistent across surfaces
HearthCode treats editors as delivery surfaces. Semantic roles are defined once and projected through adapters.
Core Color System
Semantic roles, variant routing, and tuning live in color-system/* and generate downstream artifacts.
Open VSX Ecosystem
Open VSX-compatible editors consume the same generated role map and palette behavior.
VS Code Marketplace
VS Code package is built from the same semantic source without platform-only color forks.
Obsidian App Theme
Obsidian app-theme inherits the same semantic language through mapped CSS variables.
HearthCode Philosophy
Ember, not flame
High-saturation syntax colors burn bright but exhaust your eyes. Hearth keeps highlights in a moderate saturation range, then tunes them under readability constraints so they stay warm without glare.
Neither black nor white
Pure black backgrounds can create halation around white text and blur edges. Hearth uses warm, non-extreme background tones across all four variants to keep glare down and reading layers stable.
- Hearth Dark
- Dark Soft
- Hearth Light
- Light Soft
Hierarchy as semantics
Brightness maps directly to semantic weight: keywords are brightest, functions next, variables after, and comments deliberately fade into the background.
Color temperature as comfort
The palette stays warm and low-glare by design. Cooler extremes can feel sharp over long sessions; Hearth keeps visual temperature calm to reduce sustained contrast stress.
Color System
Traceability from swatch to source
Next Step
Adopt the system, then choose your delivery surface.
Read the color-system baseline first, then install on Open VSX, VS Code, or Obsidian.