4 variants
Warm contrast for long coding sessions
Hearth Code
Turn your editor into hearthside parchment and coffee. Warm, low-glare, and semantically steady - so every session feels calmer and more comfortable.
// 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_000Quick Proof
Same code. Clearer hierarchy. Less glare.
HearthCode keeps syntax roles stable across four variants, so your eyes relearn less when your environment changes.
Low glare
Stable semantics
Hearth Dark
Hearth Dark Soft
Hearth Light
Hearth Light Soft
HearthCode Philosophy
Ember, not flame
High-saturation syntax colors burn bright but exhaust your eyes. Hearth keeps all highlight colors at 40–60% saturation — warm like cooling coal, not blinding like fire.
Neither black nor white
Pure black backgrounds cause halation around white text, blurring edges. Hearth Dark (default) uses #23201c, Dark Soft uses #2a2723, Hearth Light uses #efe6d8, and Light Soft uses #ece2d3 for calmer paper-like contrast.
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 entire palette is warm-toned, below 4500K. High blue-light content strains the retina. A warm coding environment is easier on your eyes over long sessions.
Color System
Final Step
Ready to code in HearthCode?
Hearth fire, coffee, and a parchment-like reading feel - so every line of code stays warm and clear.