Skip to content
Havn edited this page Dec 16, 2023 · 2 revisions

Start page for the Havn themes

Here's some more info on the themes, and links to the specific app themes and details about them.

See the menu on the right to find what you want!

Typefaces

I like to use Neue Montreal (and it's mono sibling) and Writer from Pangram Pangram. And they have a generous selection, for personal use, even without buying the entire familiy. A great app for installing apps on your iOS devices, is Fontcase by The Iconfactoryhttps://iconfactory.com/.

But the themes ofc. works with standard fonts as well! Apple is a bit stingy with it's fonts out-of-the-box for some reason, so it could actually be a good idea to install these files with Fontcase to get some more options in San Francisco and New York.

Colours

The idea behind the colours, is to have a maritime feel with a couple of accents. These are the main colours, but I adapt them to the specific need, so they might not be these exact ones.

Main text colours

The main colours are all shades of the same blue (same hue and saturation, with just differing lightness) - the backgrounds are very light (or very dark) blue, and the text is the opposite. The higher in the hierarcy a header is, the more contrast the text has.

Here's the main text colours. Daggry left, Skumring right (in parentheses):

  • backgroundColour: #fcfcfd (#1a1e30)
  • altBackgroundColour: #f2f3f8 (#121521)
  • h1: #212840 (#eef0f6)
  • h2: #29304e (#eaecf4)
  • h3: #30395c (#e5e7f1)
  • h4: #363f66 (#dde0ed)
  • mainContrast: #3e4a77 (#d7dbea)

Accents

The primary accents are a green and a purple, with a variation. I also set the lightness on the main blue colour in the middle of text/bg some times. For apps that needs them, there's also an orange, red, pink and yellow accent.

  • greenDarker: #386a51 (#40786f)
  • greenLighter: #468666 (#54a094)
  • purpleDarker: #9b73ab (#9f79af)
  • purpleLighter: #a986b6 (#b699c2)
  • blueDarker: #52629e
  • blueLighter: #97a1c8
  • orange: #fd8519
  • red: #e94f2d
  • pink: #da8174
  • yellow: #eec659 (#d09e16)
Clone this wiki locally