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.

Explore Color System Install in VSX Editors Install in VS Code Get Obsidian Theme View on GitHub

Start from the color system, then install on your current surface.

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_000

Hearth Dark Soft

// 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_000

Hearth Light

// 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_000

Hearth Light Soft

// 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_000

Hearth Dark

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Dark Soft

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Light

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Light Soft

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Dark

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Dark Soft

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Light

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Light Soft

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Dark

// typed parser with Result and Option
use std::collections::HashMap;

#[derive(Debug, Clone)]
struct Config {
    host: String,
    port: u16,
}

fn load_config(env: &HashMap<String, String>) -> Result<Config, String> {
    let host = env.get("HOST").cloned().unwrap_or_else(|| "127.0.0.1".into());
    let port = env
        .get("PORT")
        .and_then(|v| v.parse::<u16>().ok())
        .unwrap_or(8080);
    Ok(Config { host, port })
}

Hearth Dark Soft

// typed parser with Result and Option
use std::collections::HashMap;

#[derive(Debug, Clone)]
struct Config {
    host: String,
    port: u16,
}

fn load_config(env: &HashMap<String, String>) -> Result<Config, String> {
    let host = env.get("HOST").cloned().unwrap_or_else(|| "127.0.0.1".into());
    let port = env
        .get("PORT")
        .and_then(|v| v.parse::<u16>().ok())
        .unwrap_or(8080);
    Ok(Config { host, port })
}

Hearth Light

// typed parser with Result and Option
use std::collections::HashMap;

#[derive(Debug, Clone)]
struct Config {
    host: String,
    port: u16,
}

fn load_config(env: &HashMap<String, String>) -> Result<Config, String> {
    let host = env.get("HOST").cloned().unwrap_or_else(|| "127.0.0.1".into());
    let port = env
        .get("PORT")
        .and_then(|v| v.parse::<u16>().ok())
        .unwrap_or(8080);
    Ok(Config { host, port })
}

Hearth Light Soft

// typed parser with Result and Option
use std::collections::HashMap;

#[derive(Debug, Clone)]
struct Config {
    host: String,
    port: u16,
}

fn load_config(env: &HashMap<String, String>) -> Result<Config, String> {
    let host = env.get("HOST").cloned().unwrap_or_else(|| "127.0.0.1".into());
    let port = env
        .get("PORT")
        .and_then(|v| v.parse::<u16>().ok())
        .unwrap_or(8080);
    Ok(Config { host, port })
}

Hearth Dark

// immutable service model with records
import java.time.Duration;
import java.util.List;

public final class HearthService {
  private final String endpoint;
  private final Duration timeout;

  public HearthService(String endpoint) {
    this.endpoint = endpoint;
    this.timeout = Duration.ofSeconds(5);
  }

  public record Result<T>(T data, int status) {}
}

Hearth Dark Soft

// immutable service model with records
import java.time.Duration;
import java.util.List;

public final class HearthService {
  private final String endpoint;
  private final Duration timeout;

  public HearthService(String endpoint) {
    this.endpoint = endpoint;
    this.timeout = Duration.ofSeconds(5);
  }

  public record Result<T>(T data, int status) {}
}

Hearth Light

// immutable service model with records
import java.time.Duration;
import java.util.List;

public final class HearthService {
  private final String endpoint;
  private final Duration timeout;

  public HearthService(String endpoint) {
    this.endpoint = endpoint;
    this.timeout = Duration.ofSeconds(5);
  }

  public record Result<T>(T data, int status) {}
}

Hearth Light Soft

// immutable service model with records
import java.time.Duration;
import java.util.List;

public final class HearthService {
  private final String endpoint;
  private final Duration timeout;

  public HearthService(String endpoint) {
    this.endpoint = endpoint;
    this.timeout = Duration.ofSeconds(5);
  }

  public record Result<T>(T data, int status) {}
}

Hearth Dark

#!/usr/bin/env bash
set -euo pipefail

APP_NAME="hearth"
BUILD_DIR="./dist"

echo "[${APP_NAME}] cleaning old build"
rm -rf "${BUILD_DIR}"

echo "[${APP_NAME}] building site"
npm run build

Hearth Dark Soft

#!/usr/bin/env bash
set -euo pipefail

APP_NAME="hearth"
BUILD_DIR="./dist"

echo "[${APP_NAME}] cleaning old build"
rm -rf "${BUILD_DIR}"

echo "[${APP_NAME}] building site"
npm run build

Hearth Light

#!/usr/bin/env bash
set -euo pipefail

APP_NAME="hearth"
BUILD_DIR="./dist"

echo "[${APP_NAME}] cleaning old build"
rm -rf "${BUILD_DIR}"

echo "[${APP_NAME}] building site"
npm run build

Hearth Light Soft

#!/usr/bin/env bash
set -euo pipefail

APP_NAME="hearth"
BUILD_DIR="./dist"

echo "[${APP_NAME}] cleaning old build"
rm -rf "${BUILD_DIR}"

echo "[${APP_NAME}] building site"
npm run build

Hearth Dark

<!-- Hearth UI component -->
<style>
  :root {
    --HearthCode: var(--hearth-ember);
    --bg: var(--hearth-bg);
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--HearthCode);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>HearthCode</h2>
  <p>Code by Hearthlight</p>
</div>

Hearth Dark Soft

<!-- Hearth UI component -->
<style>
  :root {
    --HearthCode: var(--hearth-ember);
    --bg: var(--hearth-bg);
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--HearthCode);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>HearthCode</h2>
  <p>Code by Hearthlight</p>
</div>

Hearth Light

<!-- Hearth UI component -->
<style>
  :root {
    --HearthCode: var(--hearth-ember);
    --bg: var(--hearth-bg);
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--HearthCode);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>HearthCode</h2>
  <p>Code by Hearthlight</p>
</div>

Hearth Light Soft

<!-- Hearth UI component -->
<style>
  :root {
    --HearthCode: var(--hearth-ember);
    --bg: var(--hearth-bg);
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--HearthCode);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>HearthCode</h2>
  <p>Code by Hearthlight</p>
</div>

System 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.

1 semantic system

single role contract across all outputs

4 tuned variants

Dark / Dark Soft / Light / Light Soft

3 live surfaces

Open VSX-compatible editors, VS Code, Obsidian

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

Warm default with clear hierarchy and restrained denim-blue function anchors.

Hearth Dark Soft

Lower-stimulus dark variant with softened chroma while preserving role separation.

Hearth Light

Paper-toned light mode with warm foundation and controlled cool callable anchors.

Hearth Light Soft

Gentler light contrast for long daytime sessions, with separation gates kept intact.

Surface Parity

One color system, consistent across surfaces

HearthCode treats editors as delivery surfaces. Semantic roles are defined once and projected through adapters.

Source of Truth

Core Color System

Semantic roles, variant routing, and tuning live in color-system/* and generate downstream artifacts.

Available

Open VSX Ecosystem

Open VSX-compatible editors consume the same generated role map and palette behavior.

Available

VS Code Marketplace

VS Code package is built from the same semantic source without platform-only color forks.

Available

Obsidian App Theme

Obsidian app-theme inherits the same semantic language through mapped CSS variables.

HearthCode Philosophy

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.

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.

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.

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

bg · dark #23201c Dark canvas — soot blackboard beside the hearth —

bg · dark-soft #392e1f Dark Soft canvas — warmer gray-black for lower night contrast stress —

fg · dark #d3c9b8 Dark foreground — chalky parchment white for long focus 9.9:1 AAA

keyword #c55d45 Keywords — ember red for control flow anchors 3.9:1 dec

function #7a92a1 Functions — brass amber for callable targets 5.0:1 AA

string #9ca57f Strings — moss green with warm base 6.3:1 AA

type #8c8650 Types — mineral teal + italic for structural symbols 4.4:1 dec

number #ca8351 Numbers — terracotta red for constants 5.3:1 AA

comment #74695a Comments — intentionally dim, eye skips naturally 3.0:1 dec

bg · light #ece2d3 Light background — parchment off-white to reduce glare —

bg · light-soft #e4d8c4 Light Soft background — softer parchment tone for calmer daylight contrast —

fg · light #2a1e0f Light foreground — deep walnut brown for long-form reading 12.7:1 AAA

fg · light-soft #4b3a27 Light Soft foreground — mellow walnut ink to keep contrast pressure low 7.7:1 AAA

Traceability from swatch to source

These rows are derived from the shared token outputs and checked by release gates, so visual intent and shipped artifacts stay aligned.

Open Baseline Open Consistency Report Open Color Sources

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.

Explore Color System Install in VSX Editors Install in VS Code Get Obsidian Theme View on GitHub

Open-source (MIT) 1 System · 4 Variants · 3 Surfaces Current release v1.0.26