A warm color language for long-focus work

Hearth Code

HearthCode is a low-glare color language for code interfaces. It works in Open VSX-compatible editors and VS Code, while keeping the same semantic hierarchy across dark and light variants.

Install in VSX Editors Install in VS Code View on GitHub

Start with Open VSX for VSX-compatible editors. Same palette language, same semantics.

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>

What You Get

One color language. Four tuned variants.

HearthCode keeps role mapping stable while tuning contrast and texture for different lighting environments.

VSX ecosystem ready

works in Open VSX-compatible editors and VS Code

4 variants

Dark, Dark Soft, Light, Light Soft

Stable semantics

same token roles across all variants

Hearth Dark

Default daily driver with warm contrast and strong token hierarchy.

Hearth Dark Soft

Lower contrast pressure for late-night and dim-room sessions.

Hearth Light

Paper-toned light mode tuned for docs and daylight coding.

Hearth Light Soft

Softer light contrast for calmer daytime focus and long reading flow.

Implementation Status

Shipped where you can use it today

HearthCode is positioned as a reusable color language. VS Code and Open VSX are implementation surfaces, not the product boundary.

Available

Open VSX Ecosystem

Install from Open VSX and use it in compatible editors.

Available

VS Code Marketplace

First-party distribution for VS Code users.

In Planning

Next Surfaces

Web theme surfaces and more editor targets.

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.

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

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

bg · dark-soft #2b2926 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 #c26f59 Keywords — ember red for control flow anchors 4.4:1 dec

function #d7ad70 Functions — brass amber for callable targets 7.8:1 AAA

string #8fb87d Strings — moss green with warm base 7.2:1 AAA

type #5d98a4 Types — mineral teal + italic for structural symbols 5.0:1 AA

number #ba846d Numbers — terracotta red for constants 5.1:1 AA

comment #6b5f4d Comments — intentionally dim, eye skips naturally 2.6:1 dec

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

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

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

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

Next Step

Start where your editor already lives.

HearthCode is a color-language product first: shipped for Open VSX and VS Code today, extendable to more editors and web themes next.

Install in VSX Editors Install in VS Code View on GitHub

Open-source (MIT) 4 Variants · Open VSX + VS Code Current release v1.0.17