Liminal Salt Theme

• 07 March 2026

Liminal Salt is an LLM frontend for OpenRouter that I built in Python and Django, but it also spawned a color theme that I've been using for various projects. The overall aesthetic is inspired by greige, kind of a beige/sage/stone milieu. I've tried to make it accessible and comfortable for reading.

Liminal Salt has an earthy vibe that I really enjoy. I'm transitioning all my tools to use it. Check out the theme on GitHub: liminal-salt

It's still evolving, but here's the current palette:

Dark Theme

Base

The default page background and primary text colors. Foreground Secondary is for supporting text like subtitles and metadata.

Muted

A subdued surface for secondary UI like disabled states, chips, and sidebars. Muted Foreground is for placeholder text and de-emphasized labels.

Card

An elevated surface for cards, dialogs, popovers, and panels that sit above the background.

Accent

The primary action color for buttons, links, and interactive highlights. Accent Foreground is the text color on accent-colored surfaces.

Destructive

For destructive actions and error states — delete buttons, form validation errors, error toasts, and danger alerts.

Success

For confirmations and positive states — saved indicators, valid form fields, success toasts, and completion badges.

Warning

For caution states — warnings, deprecation notices, and attention-needed indicators that aren't errors.

Borders & Focus

Structural and interactive borders. Ring is the focus indicator for keyboard navigation. Input is the default border for form fields. Border is for layout dividers and container edges.

Syntax

Colors for code highlighting — keywords, strings, types, and other language constructs.

Editor

Colors for editor chrome — cursor, selection, line highlighting, gutter, and diff backgrounds. These are the tinted surfaces used in code editors and IDEs.

Light Theme

Base

Muted

Card

Accent

Destructive

Success

Warning

Borders & Focus

Syntax

Editor

Accessibility

All foreground/background pairings meet WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text). Many primary pairings exceed AAA (7:1).

Dark Theme

On surfaces

Contrast ratios for text and UI elements on the three surface tokens.

Paired foregrounds

Contrast ratios for foreground tokens measured against their own surface.

Syntax on surfaces

Contrast ratios for syntax highlighting tokens on the three surface tokens.

Editor chrome

Contrast ratios for editor text elements on background, and foreground text readability on tinted highlight surfaces.

Light Theme

On surfaces

Paired foregrounds

Syntax on surfaces

Editor chrome

Examples

Here's how the theme looks applied to common UI elements. Toggle light/dark mode to see both variants.

Buttons

Form Fields

Code Blocks

from dataclasses import dataclass

# Minimum contrast for WCAG AA compliance
CONTRAST_AA = 4.5

@dataclass
class Color:
    """A named color primitive."""
    name: str
    value: str
    luminance: float = 0.0

    def meets_aa(self, other: "Color") -> bool:
        ratio = self.contrast(other)
        return ratio >= CONTRAST_AA

palette = {"sage": "#8fac98", "amber": "#c9a86c"}
total = len(palette)
is_valid = total > 0 and True
print(f"Colors: {total}, valid={is_valid}")

<div class="swatch" data-color="#8fac98">
  <span>Sage</span>
  <code>#8fac98</code>
</div>

const HEX = /^#([a-f\d]{2}){3}$/i

function parseHex(value) {
  if (!HEX.test(value)) {
    throw new Error(`Invalid: ${value}`)
  }
  return [1, 3, 5].map(
    (i) => parseInt(value.slice(i, i + 2), 16)
  )
}

Blockquote

The Liminal Salt palette draws from natural, earthy tones — muted sage greens and warm beiges that feel grounded without being heavy.

Inline Code & Links

Here's some inline code alongside a link to the repository. The theme's --accent variable drives both the link color and the code highlight, keeping everything visually cohesive across light and dark modes.