Brand

Logo studies and the color system. Hex values below are the sRGB colors. OKLCH is the measured color of each hex.

Logo

Pin and star is in the header. It keeps the map pin and the destination star, drops the dotted route, and still reads at favicon size. The other two are studies.

Pin and star

Recommended

A geometric map pin with one coral star. The star stays visible at 16px, so the same drawing works as the favicon and the header mark.

Large, light

Large, dark

32px light

16px light

32px dark

16px dark

Dotted route

The same pin, with three dots cut out so the background reads as a plotted route, ending in a star. Clear when large. The dots disappear at 16px.

Large, light

Large, dark

32px light

16px light

32px dark

16px dark

Monogram route

A geometric P. The bowl is the route, the stem ends in a pin point, and a star sits in the counter. At 16px it reads as a letter before it reads as a place.

Large, light

Large, dark

32px light

16px light

32px dark

16px dark

60 / 30 / 10

Cream and white carry the page. Navy is text, headings, and the pin. Coral is the button, the word Plot, and the star. Teal is only for tags.

Cream 60Navy 30Coral 10

Color

Coral is hue 32.1°. Navy is hue 257.7°, about 226° away, so the pair is a near-complement (a true complement would be 180°, at 212.1°). Teal is hue 182.1°, thirty degrees off that complement, on the side navy does not already occupy. Neutrals use the coral hue at a very low chroma, so the cream is warm. Lightness steps by 0.075 from 0.970 to 0.220. Chroma peaks in the middle so every step stays inside sRGB.

Target lightness: 0.970, 0.895, 0.820, 0.745, 0.670, 0.595, 0.520, 0.445, 0.370, 0.295, 0.220.

Role colors, light and dark, with contrast
RoleLightDarkContrast
Canvas60% field. Page background.#fdf8f7oklch(0.983 0.006 31.1)#02193coklch(0.220 0.074 257.8)Navy ink on light canvas 13.31:1. Cream on dark canvas 16.53:1.
SurfaceCards, search, ghost buttons.#fffdfcoklch(0.995 0.003 48.7)#1d3f70oklch(0.370 0.093 257.8)Ink on light surface 13.82:1. Cream on dark surface 9.99:1.
Ink30% navy. Text, headings, pin.#0c2b57oklch(0.294 0.088 258.0)#fdf8f7oklch(0.983 0.006 31.1)13.31:1 on light canvas. 16.53:1 on dark canvas.
MutedSecondary text.#476a9coklch(0.520 0.089 257.3)#99aeccoklch(0.745 0.049 257.3)5.24:1 on light canvas. 7.69:1 on dark canvas. 4.65:1 on dark surface.
Primary button10% coral, the call to action. Not the brighter hero step.#b43722oklch(0.520 0.165 32.1)#f16046oklch(0.671 0.184 32.3)Cream #fdf8f7 on light button 5.68:1. Navy #02193c on dark button 5.39:1.
Text on primaryLabel on the primary button.#fdf8f7oklch(0.983 0.006 31.1)#02193coklch(0.220 0.074 257.8)See primary button.
Hero coralStar, the word Plot, large color blocks. Large or bold text only in light mode.#f16046oklch(0.671 0.184 32.3)#f16046oklch(0.671 0.184 32.3)3.07:1 on light canvas (AA large text, 20px bold and up). 5.39:1 on dark canvas. 4.34:1 as the star on the navy pin.
Teal tagSparse highlight. Tag fill, with ink or cream text.#b6e8dfoklch(0.894 0.053 182.9)#134a42oklch(0.371 0.058 181.4)Navy on light tag 10.41:1. Teal-100 #b6e8df on dark tag 7.48:1.
BorderInput outline and other UI edges that need 3:1.#857d7boklch(0.596 0.010 34.3)#6180adoklch(0.594 0.078 257.6)3.82:1 on light canvas. 4.31:1 on dark canvas.

Coral

Hue 32.1°. Primary hue. 400 is the hero coral (large type and the star). 600 is the light-mode button, dark enough for cream text.

  1. 50#fff2efoklch(0.971 0.015 33.1)
  2. 100#ffd0c6oklch(0.896 0.055 32.1)
  3. 200#ffac9boklch(0.821 0.101 32.1)
  4. 300#ff836boklch(0.745 0.156 32.3)
  5. 400#f16046oklch(0.671 0.184 32.3)
  6. 500#d5472foklch(0.594 0.182 32.1)
  7. 600#b43722oklch(0.520 0.165 32.1)
  8. 700#912d1coklch(0.446 0.138 32.1)
  9. 800#6d2518oklch(0.371 0.105 32.4)
  10. 900#4b1c13oklch(0.296 0.074 32.6)
  11. 950#2d110coklch(0.220 0.048 31.6)

Navy

Hue 257.7°. Ink hue. 900 is body text on cream. 950 is the dark canvas. 226° from coral, near the 180° complement.

  1. 50#eff6ffoklch(0.970 0.014 254.6)
  2. 100#d3ddecoklch(0.894 0.023 258.4)
  3. 200#b6c5dboklch(0.819 0.035 257.9)
  4. 300#99aeccoklch(0.745 0.049 257.3)
  5. 400#7d97bdoklch(0.670 0.064 257.8)
  6. 500#6180adoklch(0.594 0.078 257.6)
  7. 600#476a9coklch(0.520 0.089 257.3)
  8. 700#305488oklch(0.445 0.096 257.6)
  9. 800#1d3f70oklch(0.370 0.093 257.8)
  10. 900#0c2b57oklch(0.294 0.088 258.0)
  11. 950#02193coklch(0.220 0.074 257.8)

Warm neutral

Hue 32.1°. Same hue as coral, at a very low chroma, so cream stays warm instead of turning gray.

  1. 50#fcf3f1oklch(0.971 0.010 32.5)
  2. 100#e3dad8oklch(0.895 0.010 32.5)
  3. 200#cbc2c0oklch(0.821 0.011 32.5)
  4. 300#b3aaa8oklch(0.745 0.011 32.5)
  5. 400#9c9391oklch(0.670 0.011 32.5)
  6. 500#857d7boklch(0.596 0.010 34.3)
  7. 600#6e6765oklch(0.520 0.009 36.5)
  8. 700#595251oklch(0.445 0.009 27.3)
  9. 800#443e3doklch(0.370 0.008 28.9)
  10. 900#302b2aoklch(0.294 0.008 31.1)
  11. 950#1d1a19oklch(0.221 0.005 39.4)

Teal

Hue 182.1°. Split-complement of coral. The complement of 32.1° is 212.1°; this sits 30° off that, on the side navy does not already fill. Tags and highlights only.

  1. 50#d9fef7oklch(0.969 0.039 182.8)
  2. 100#b6e8dfoklch(0.894 0.053 182.9)
  3. 200#94d3c7oklch(0.821 0.066 181.4)
  4. 300#72bdb0oklch(0.746 0.078 181.8)
  5. 400#53a699oklch(0.669 0.084 182.2)
  6. 500#398f83oklch(0.595 0.084 182.7)
  7. 600#26786coklch(0.520 0.080 181.5)
  8. 700#196057oklch(0.444 0.070 182.9)
  9. 800#134a42oklch(0.371 0.058 181.4)
  10. 900#0d342eoklch(0.296 0.045 181.1)
  11. 950#071f1coklch(0.219 0.031 184.2)

Beehiiv tokens

Light-mode values for the publication. Plus Jakarta Sans is on Google Fonts. Primary is coral 600 so button text clears AA. Accent is the brighter hero coral, for large type only.

Beehiiv brand tokens
Background#fdf8f7
Text on background#0c2b57
Primary#b43722
Text on primary#fdf8f7
Border#857d7b
Accent#f16046
Highlight#196057
Heading fontPlus Jakarta Sans
Body fontPlus Jakarta Sans
Button fontPlus Jakarta Sans

Type

Plus Jakarta Sans, self-hosted, OFL-1.1. Rounded geometric, close to a Cereal-style sans, with heavy display weights. Figtree is softer at the same size. Manrope is cooler. One family is used for headings, body, and buttons.