Klarhimmel UI
Klarhimmel ↗

Colour

Warm paper surfaces, near-black ink and one sky-blue accent. Seven tokens per mode; every shade is derived from them.

Both modes, side by side

Every pair a block uses, with its contrast ratio worked out from the tokens now. Body text needs 4.5:1; large text and borders 3:1.

light

  • Canvas#faf9f7
  • Surface#ffffff
  • Ink#17171a
  • Muted#6b6b75
  • Line#e8e6e1
  • Accent#1c6ee0
  • Accent text#ffffff
  • AaInk on canvas17.0:1AAA
  • AaMuted on canvas5.0:1AA
  • AaAccent on canvas4.6:1AA
  • AaAccent text on accent4.8:1AA
  • AaDanger on canvas6.2:1AA

dark

  • Canvas#0b0b0d
  • Surface#1a1a1f
  • Ink#f2f1ee
  • Muted#8f8f9a
  • Line#383842
  • Accent#5b9bf5
  • Accent text#0b1a2c
  • AaInk on canvas17.4:1AAA
  • AaMuted on canvas6.1:1AA
  • AaAccent on canvas7.0:1AA
  • AaAccent text on accent6.2:1AA
  • AaDanger on canvas8.6:1AAA

Palette

The brand palette, light mode. The dark values are in the table below.

  • Canvas

    #faf9f7
    --kh-p-canvas

  • Surface

    #ffffff
    --kh-p-surface

  • Ink

    #17171a
    --kh-p-ink

  • Muted

    #6b6b75
    --kh-p-muted

  • Line

    #e8e6e1
    --kh-p-line

  • Accent

    #1c6ee0
    --kh-p-accent

  • Accent text

    #ffffff
    --kh-p-accent-fg

Tokens

Components read the surface tokens (--kh-*), mapped from these and re-mapped per tone.

TokenLightDarkUse for
--kh-p-canvas#faf9f7#0b0b0dPage background
--kh-p-surface#ffffff#1a1a1fCards, inputs, panels
--kh-p-ink#17171a#f2f1eeText and the primary button
--kh-p-muted#6b6b75#8f8f9aSecondary text, 4.5:1 or more
--kh-p-line#e8e6e1#383842Hairline borders
--kh-p-accent#1c6ee0#5b9bf5Links, focus, one emphasis per view
--kh-p-accent-fg#ffffff#0b1a2cText on the accent
--kh-p-danger#b42318#ff8a7dError text and invalid borders

Rules

When to use what.

Accent

Links, focus and the one primary emphasis in a view. Never a whole card.

Shades are derived

surface-2, surface-3, line-strong, ink-2 and the accent hover and soft fill are mixed in CSS from the seven tokens, so a tone or a style change re-derives them.

Danger

Only for errors and invalid fields. It is not part of a style, so it stays readable on every canvas.

Do and don't

Side-by-side examples.

    • Do. Use the accent for the one action that moves the work forward.

    • Don’t. Colour a whole card to make it stand out. Use a badge.