Krigsvold

Clear regions. Deliberate decisions.

A design language for purposeful regions, stable alignment, and explicit state. Build reading experiences, services, and active workspaces with components, task patterns, and agent guidance.

Explore the language

Design language · 0.3 previewReact · Astro · MCPOpen source · MIT

A view of your next workspace.

Same colors. Different places to use them.

Krigsvold Light

Warm paper and cool blue.

Survey stationAll changes saved

Illustrative interface · Station 04

A clear horizon.

A quiet surface for the next observation. Keep your notes, review the readings, and pick up where you left off.

palette.mjsJavaScript

// A shared vocabulary for two themes.
export const krigsvold = {
  name: 'Krigsvold',
  mode: 'light',
  colors: 88,
  accent: '#286A9D'
};

paint(krigsvold);

Krigsvold — zshTerminal.app

james@mac ~/krigsvold % ls
src/  site/  LICENSE  README.md

james@mac ~/krigsvold % npm test
✓ Light and dark palettes
✓ Color profiles

james@mac ~/krigsvold %

Download this Terminal.app profile ↓

Krigsvold Dark

Deep navy and glacier blue.

Survey stationAll changes saved

Illustrative interface · Station 04

A clear horizon.

A quiet surface for the next observation. Keep your notes, review the readings, and pick up where you left off.

palette.mjsJavaScript

// A shared vocabulary for two themes.
export const krigsvold = {
  name: 'Krigsvold',
  mode: 'dark',
  colors: 88,
  accent: '#9ED5E6'
};

paint(krigsvold);

Krigsvold — zshTerminal.app

james@mac ~/krigsvold % ls
src/  site/  LICENSE  README.md

james@mac ~/krigsvold % npm test
✓ Light and dark palettes
✓ Color profiles

james@mac ~/krigsvold %

Download this Terminal.app profile ↓

These are working color specimens. Click a swatch to copy its value, or open the Color lab to inspect all 88 roles.

Beyond the palette.

Typography, spacing, shape, and interaction drawn from krigsvold.org.

Roboto Slab

A clear horizon.

Display titles and editorial headings share a family, with separately configurable roles.

Roboto

Room for the next observation.

Body text, navigation, labels, and controls.

Explore the Astro starter

Roboto Mono

const horizon = 'clear';

Code and terminal text, with a public companion to the Roboto family.

Flat editorial cards, restrained corners, visible keyboard focus, and reduced-motion support. Source: the originating design.

Find the right relationship.

Pair two colors, check their contrast, or look up a named role.

Light · 88 roles

Find a tokenShow

88 tokens · Light palette

Token	Value	Copy value
`bg`	`#FBFAF7`
`panel`	`#EEF8FA`
`panel2`	`#D9EEF4`
`text`	`#17202A`
`muted`	`#56616C`
`accent`	`#286A9D`
`accent2`	`#79571F`
`on-accent`	`#FFFFFF`
`accent-hover`	`#1E557F`
`line`	`#D9DEE2`
`control-line`	`#75828D`
`focus`	`#286A9D`
`selection`	`#C6E2EC`
`selection-text`	`#17202A`
`green`	`#35644E`
`danger`	`#9A3542`
`warning`	`#79571F`
`error-bg`	`#F5E6E6`
`error-text`	`#9A3542`
`shadow`	`0 10px 40px #0613251A`
`surface-canvas`	`#FBFAF7`
`surface-subtle`	`#FEFEFC`
`surface-sunken`	`#E4EDF0`
`surface-overlay`	`#FFFFFF`
`text-strong`	`#061325`
`text-subtle`	`#56616C`
`text-disabled`	`#62717B`
`text-inverse`	`#FFFFFF`
`link`	`#286A9D`
`link-hover`	`#123456`
`link-visited`	`#655477`
`border-subtle`	`#D9DEE2`
`border-strong`	`#75828D`
`input-bg`	`#FFFFFF`
`input-text`	`#17202A`
`input-placeholder`	`#62717B`
`input-border`	`#75828D`
`button-secondary-bg`	`#D9EEF4`
`button-secondary-text`	`#17202A`
`button-secondary-hover`	`#C6E2EC`
`disabled-bg`	`#E4EDF0`
`disabled-text`	`#62717B`
`focus-ring`	`#286A9D`
`focus-offset`	`#FBFAF7`
`hover-bg`	`#EEF8FA`
`active-bg`	`#D9EEF4`
`code-bg`	`#EEF8FA`
`code-text`	`#17202A`
`quote-border`	`#286A9D`
`table-stripe`	`#EEF8FA`
`scrollbar-track`	`#EEF8FA`
`scrollbar-thumb`	`#75828D`
`overlay-scrim`	`#061325AA`
`info`	`#286A9D`
`info-bg`	`#E3F1F5`
`info-text`	`#123456`
`success`	`#35644E`
`success-bg`	`#E7F1E9`
`success-text`	`#285039`
`warning-bg`	`#F5ECD9`
`warning-text`	`#79571F`
`danger-bg`	`#F5E6E6`
`danger-text`	`#9A3542`
`chart-1`	`#286A9D`
`chart-2`	`#35644E`
`chart-3`	`#79571F`
`chart-4`	`#9A3542`
`chart-5`	`#655477`
`chart-6`	`#187178`
`chart-7`	`#985238`
`chart-8`	`#56616C`
`chart-grid`	`#D9DEE2`
`chart-axis`	`#56616C`
`syntax-keyword`	`#286A9D`
`syntax-string`	`#35644E`
`syntax-function`	`#123456`
`syntax-type`	`#79571F`
`syntax-variable`	`#17202A`
`syntax-comment`	`#56616C`
`syntax-number`	`#9A3542`
`syntax-operator`	`#56616C`
`syntax-constant`	`#655477`
`syntax-tag`	`#286A9D`
`syntax-attribute`	`#79571F`
`syntax-regexp`	`#35644E`
`syntax-invalid`	`#9A3542`
`syntax-property`	`#123456`
`syntax-decorator`	`#655477`

CSS names use the prefix --krigsvold-. Shadow and translucent colors are included in the reference.

Put two colors together.

Check a foreground against a background before you use it.

ForegroundBackground

A little room to think.
A clear place to begin.

15.76:1AA and AAA for normal text

WCAG 2 contrast for the selected opaque sRGB colors. A passing pair does not establish accessibility for a whole application.

Take Krigsvold with you.

Use the palette in a website, an editor, or Terminal.app.

Browse the source ↗

Terminal.app

Native profiles for the terminal included with macOS. Background, text, cursor, selection, and all sixteen ANSI colors.

Krigsvold Light ↓ .terminal Krigsvold Dark ↓ .terminal

How to install

Download either profile.
Open Terminal and choose Terminal → Settings → Profiles.
Use the action menu beneath the profiles list to choose Import, then select the downloaded file. You can also drag the file into that list.
Select Krigsvold Light or Krigsvold Dark. Choose Default if you want it for new windows.

Apple’s profile import guide ↗

These profiles have not yet been tested in Terminal.app on a Mac.

CSS variablesScoped Light and Dark themes.css ↓JSON tokensThe complete color specification.json ↓Light CSSLight theme on its own.css ↓Dark CSSDark theme on its own.css ↓VS Code LightStarter color definition.json ↓VS Code DarkStarter color definition.json ↓Terminal Light JSONSixteen ANSI colors.json ↓Terminal Dark JSONSixteen ANSI colors.json ↓

A prompt to match.

A compact single-line prompt in glacier blue or cool blue, with bronze accents and Git state. Both variants show command failures and work with plain Zsh or Oh My Zsh. No special font required.

~/projects [krigsvold +1 ~2 ?1] >

Krigsvold Light ↓ .zsh-themeKrigsvold Dark ↓ .zsh-theme

Install the Zsh prompt

Download a variant that matches your terminal background. Move it into ~/.config/zsh/themes/:

mkdir -p ~/.config/zsh/themes
cp ~/Downloads/krigsvold-dark.zsh-theme ~/.config/zsh/themes/

Add this line at the end of ~/.zshrc, after any shell framework or prompt setup, then open a new shell:

source "$HOME/.config/zsh/themes/krigsvold-dark.zsh-theme"

For Light, replace krigsvold-dark with krigsvold-light. For Oh My Zsh, you can instead put the file in its custom themes directory and set ZSH_THEME="krigsvold-dark" before loading Oh My Zsh.

Git markers: +N staged, ~N unstaged, ?N untracked entries, xN conflicts. A failed command shows its exit code. Set KRIGSVOLD_GIT=0 before sourcing to omit Git inspection. Use Zsh 5.9 or newer. Truecolor terminals use the exact role colors; other terminals use ANSI palette slots, supplied by the matching Terminal.app profile. The prompt sets no terminal background; use the matching Terminal.app profile for that.

For your next web project.

Framework-independent colors, typography, spacing, shape, motion, and optional interface styles. Take the parts your project needs.

@krigsvold/theme · v2.2.1

Core on npm ↗Download npm archive ↓npm source ↗

Use the npm package

Install the published package from npm:

npm install @krigsvold/theme

import '@krigsvold/theme/css';
import { dark } from '@krigsvold/theme';
console.log(dark.tokens.accent);

Set data-krigsvold="light" or data-krigsvold="dark" on the element to theme. Read colors using var(--krigsvold-accent). CommonJS is supported. For highlight.js, import @krigsvold/theme/highlight-dark.css or its Light equivalent.

Build with Astro.

Layouts, containers, headings, cards, and buttons using the same core definitions. Start with the neutral starter or add components to your existing site.

@krigsvold/astro · v1.2.1

Astro on npm ↗Setup and starter guide ↗Design system specification ↗

Use the Astro package

npm install @krigsvold/theme @krigsvold/astro

---
import { Layout, Container, Card } from '@krigsvold/astro';
---
<Layout title="Your website">
  <Container><Card><p>Your own content.</p></Card></Container>
</Layout>

Astro 5.14+, 6, or 7. The core is a peer dependency, so install both packages. The starter is included in the published Astro package.

Vim & Neovim.

Syntax, editor surfaces, diffs, and diagnostics, with truecolor and 256-color support.

Download colorschemes ↓Vim source ↗

Install the Vim colorscheme

Extract the archive and copy the files in colors/ into ~/.vim/colors/ for Vim or ~/.config/nvim/colors/ for Neovim. Then add:

set termguicolors
set background=dark
colorscheme krigsvold

Set background=light for Light. Explicit names krigsvold-light and krigsvold-dark also work. The source repository supports native packages and plugin managers.

Emacs.

Light and Dark themes for font-lock, Org, diffs, completion, and the editor interface.

Download Emacs themes ↓Emacs source ↗

Install the Emacs theme

Copy the two -theme.el files into ~/.emacs.d/themes/. Add to your init file:

(add-to-list 'custom-theme-load-path
             (expand-file-name "themes/" user-emacs-directory))
(load-theme 'krigsvold-dark t)

Use krigsvold-light for Light. Disable another active theme before switching. The final t skips the source approval prompt; use it after reviewing the files. Emacs 27.1 or newer. MELPA publication is pending.

A browser to match.

Colors for tabs, toolbars, and new-tab surfaces. Firefox follows light/dark appearance; Chrome has separate variants.

Chrome Light ↓Chrome Dark ↓Firefox ↓

Chrome source ↗Firefox source ↗

Try the browser themes

These are source packages prepared for marketplace submission. Store publication and Firefox signing are pending.

For Chrome, extract one archive. Open chrome://extensions, enable Developer mode, choose Load unpacked, and select the extracted folder containing manifest.json.

For Firefox, extract the archive. Open about:debugging#/runtime/this-firefox, choose Load Temporary Add-on, and select manifest.json. It lasts until Firefox restarts. Firefox 142 or newer.

These packages contain no scripts or browsing permissions. They color browser UI; website content keeps its own styling.

ChatGPT / Codex desktop.

Copy a theme string and paste it into the desktop app’s theme import control in Settings → Appearance.

Light import string ↓Dark import string ↓

Setting	Light	Dark
Background
Foreground
Accent

Light settings ↓Dark settings ↓

Import strings use the codex-theme-v1 format from a desktop app export. They include diff and skill colors, default fonts, and opaque windows. Manual settings remain available above. Clients offering only preset accent colors cannot reproduce the full palette.

Use Krigsvold on a website

Load the CSS, then set data-krigsvold to light or dark on the element you want to theme.

<link rel="stylesheet" href="krigsvold.css">
<main data-krigsvold="dark">
  <article class="panel">Hello, Krigsvold.</article>
</main>

.panel {
  background: var(--krigsvold-panel);
  color: var(--krigsvold-text);
}

Light and Dark can also live in separate parts of the same page, as they do here. The VS Code files are starter color definitions; they are not packaged extensions.

About these colors

Twelve starting points. One family.

The owner-supplied Krigsvold stylesheet starts with three deep navies, clear blue, three ice shades, warm paper, ink, muted gray, a pale rule, and bronze. Those original values form the twelve-color ribbon above. Select any band to copy its value.

Light places ink on paper, with blue for links and controls. Dark brings glacier blue forward against the deepest navy. Bronze stays a supporting accent; darker relatives of pale source colors keep small text readable.

Roboto Slab and Roboto carry over from that stylesheet. The interface roles, syntax colors, and terminal profiles are generated together. The faceted ice crystal is original artwork for this theme.

Read the design system specification ↗

A clear horizon.

A clear horizon.

Roboto Slab

Roboto

Roboto Mono

Terminal.app

A prompt to match.

For your next web project.

Build with Astro.

Vim & Neovim.

Emacs.

A browser to match.

ChatGPT / Codex desktop.

Twelve starting points. One family.

Analytics cookies