1 semantic system
A color language system for long-focus work
Hearth Code
HearthCode is a warm-dominant, low-glare color language for code interfaces. One semantic hierarchy stays stable, then restrained cool anchors keep function-level separation clear across Open VSX-compatible editors, VS Code, and Obsidian.
Hearth Dark
// 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.
One role contract drives all four variants. Separation thresholds are enforced first, then soft variants reduce stimulation without collapsing role distinction.
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
01
Ember, not flame
Hearth keeps highlight colors in a controlled saturation band first, then enforces role separation thresholds so syntax remains readable before style polish.
02
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
03
Hierarchy as semantics
Hierarchy is semantic and measurable: role contrast and deltaE gates are enforced so keywords, functions, methods, and variables stay distinguishable in long sessions.
04
Color temperature as comfort
The system stays warm by default. Cool hues are used as small structural anchors (mainly callable roles), not as a global temperature shift.
Color System
Dark family
Warm night canvas
Charcoal surfaces stay calm and focused while the syntax accents still feel alive.
Canvas pair
Dark canvas — soot blackboard beside the hearth
Dark Soft canvas — warmer gray-black for lower night contrast stress
Signature syntax anchors
Keywords — ember red for control flow anchors
4.1:1 dec
Functions — brass amber for callable targets
5.3:1 AA
Strings — moss green with warm base
6.7:1 AA
Types — mineral teal + italic for structural symbols
5.3:1 AA
Numbers — terracotta red for constants
5.6:1 AA
Comments — intentionally dim, eye skips naturally
3.1:1 dec
Light family
Paper tones for long reading
Parchment backgrounds keep the bright side gentle, readable, and still clearly structured.
Canvas pair
Light background — parchment off-white to reduce glare
Light Soft background — softer parchment tone for calmer daylight contrast
Signature syntax anchors
Keywords — ember red for control flow anchors
4.0:1 dec
Functions — brass amber for callable targets
3.9:1 dec
Strings — moss green with warm base
3.1:1 dec
Types — mineral teal + italic for structural symbols
3.7:1 dec
Numbers — terracotta red for constants
2.8:1 dec
Comments — intentionally dim, eye skips naturally
3.1:1 dec
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.