Krigsvold

Paper, sea, and ice.

Two ways to settle into your work.
Warm paper by day. Deep navy after dark.

Find your light

Light + Dark88 color roles per themeOpen source · v1.0.0

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.

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 ↓

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 specification on GitHub ↗

A clear horizon.

A clear horizon.

Terminal.app

Twelve starting points. One family.

Analytics cookies