Juli Living Showcase

Colour

The brand colours, and the OKLCH scales they are pinned into. Every step of a scale has one contrast level shared by all four hues, so a step number means the same contrast whatever the hue. The scales are generated from palette.ts by pnpm generate:palette and never edited by hand (ADR 0003). They are mode-agnostic: only the semantic mappings change between light and dark.

A pinned brand colour is the exact hex at its step, and it sets that step's level for the other hues. Anoff-level pin is the exact hex too, but it sits off the shared level. These are the only places the shared-level rule does not hold, and each gives its reason.

Brand colours

As the Frontify brand guide groups them, with the primitive each one is.

Primary colours

Dark green is the primary brand colour. Used for text and drawings.

  • Dark green

    HEX
    #084a4a
    RGB
    rgb(8, 74, 74)
    Token
    --c-juli-teal-700

    Pinned at teal-700.

  • Almost black

    HEX
    #141414
    RGB
    rgb(20, 20, 20)
    Token
    --c-juli-neutral-900

    Pinned at neutral-900.

  • All white

    HEX
    #ffffff
    RGB
    rgb(255, 255, 255)
    Token
    --c-white

    Not a ramp step: it is the white primitive.

Accent colours

Mainly backgrounds and highlighting, to keep the look light and fresh.

  • Spring green

    HEX
    #9cfaa5
    RGB
    rgb(156, 250, 165)
    Token
    --c-juli-green-300

    Pinned at green-300, off-level.

    Lc 91, between 300 (95) and 400 (82). Pinned at 300 so the action colour is the brand green; 300 is where the green ramp's spacing stays even around it.

  • Soft spring green

    HEX
    #c7f9cb
    RGB
    rgb(199, 249, 203)
    Token
    --c-juli-green-200

    Pinned at green-200, off-level.

    Lc 95.8 against step 200's 99.8.

  • Light spring green

    HEX
    #e1fde4
    RGB
    rgb(225, 253, 228)
    Token
    --c-juli-green-100

    Pinned at green-100, off-level.

    Lc 101.7 against step 100's 103.

  • Wildflower yellow

    HEX
    #fffdc2
    RGB
    rgb(255, 253, 194)
    Token
    —

    Not pinned. Nearest step yellow-200, ΔE 2.2.

Additional background colours

Backgrounds only, where a calmer look is needed.

  • Sand

    HEX
    #f1f4eb
    RGB
    rgb(241, 244, 235)
    Token
    --c-juli-neutral-200

    Pinned at neutral-200.

  • Light sand

    HEX
    #f7f9f4
    RGB
    rgb(247, 249, 244)
    Token
    —

    Not pinned. Nearest step neutral-100, ΔE 0.2.

  • Light wildflower

    HEX
    #fffee1
    RGB
    rgb(255, 254, 225)
    Token
    --c-juli-yellow-100

    Pinned at yellow-100, off-level.

    Lc 106.1: a 50 by luminance, but its tint (chroma 0.038 against the 50's 0.010) reads as a 100. Lighter than its peers, the safe direction: dark text on it only gains contrast.

Scales

The sRGB values beside each swatch are gamut-mapped the way a browser maps them on an sRGB display, so the string and the painted chip agree. On a wide-gamut display the chip is the more saturated of the two. A pinned step shows its hex, which is in sRGB by definition.

◆ marks a pinned brand colour; ◇ marks one pinned off-level.

teal

  1. 50oklch(0.99 0.01 195)#f5fefergb(245, 254, 254)
  2. 100oklch(0.973 0.044 195)#d5ffffrgb(213, 255, 255)
  3. 200oklch(0.955 0.076 195)#b3ffffrgb(179, 255, 255)
  4. 300oklch(0.926 0.127 195)#6bffffrgb(107, 255, 255)
  5. 400oklch(0.856 0.19 195)#00f4f6rgb(0, 244, 246)
  6. 500oklch(0.694 0.15 195)#00b8b9rgb(0, 184, 185)
  7. 600oklch(0.555 0.127 195)#00898argb(0, 137, 138)
  8. 700◆ Dark green · pinned#084a4a#084a4argb(8, 74, 74)
  9. 800oklch(0.276 0.06 195)#003131rgb(0, 49, 49)
  10. 900oklch(0.182 0.04 195)#001717rgb(0, 23, 23)
  11. 950oklch(0.109 0.02 195)#000606rgb(0, 6, 6)

green

  1. 50oklch(0.99 0.01 146)#f8fef8rgb(248, 254, 248)
  2. 100◇ Light spring green · off-level#e1fde4#e1fde4rgb(225, 253, 228)
  3. 200◇ Soft spring green · off-level#c7f9cb#c7f9cbrgb(199, 249, 203)
  4. 300◇ Spring green · off-level#9cfaa5#9cfaa5rgb(156, 250, 165)
  5. 400oklch(0.856 0.19 146)#70f07frgb(112, 240, 127)
  6. 500oklch(0.695 0.15 146)#56b561rgb(86, 181, 97)
  7. 600oklch(0.554 0.13 146)#368641rgb(54, 134, 65)
  8. 700oklch(0.371 0.09 146)#194c20rgb(25, 76, 32)
  9. 800oklch(0.278 0.06 146)#123015rgb(18, 48, 21)
  10. 900oklch(0.183 0.04 146)#051707rgb(5, 23, 7)
  11. 950oklch(0.111 0.02 146)#020602rgb(2, 6, 2)

yellow

  1. 50oklch(0.991 0.01 105)#fdfdf5rgb(253, 253, 245)
  2. 100◇ Light wildflower · off-level#fffee1#fffee1rgb(255, 254, 225)
  3. 200oklch(0.96 0.08 105)#f9f6b7rgb(249, 246, 183)
  4. 300oklch(0.936 0.13 105)#f7ef83rgb(247, 239, 131)
  5. 400oklch(0.872 0.19 105)#e8da00rgb(232, 218, 0)
  6. 500oklch(0.707 0.15 105)#afa500rgb(175, 165, 0)
  7. 600oklch(0.566 0.13 105)#827900rgb(130, 121, 0)
  8. 700oklch(0.379 0.09 105)#4a4400rgb(74, 68, 0)
  9. 800oklch(0.284 0.06 105)#2e2b00rgb(46, 43, 0)
  10. 900oklch(0.188 0.04 105)#161400rgb(22, 20, 0)
  11. 950oklch(0.114 0.02 105)#060501rgb(6, 5, 1)

neutral

  1. 50oklch(0.991 0.005 121.7)#fbfdf9rgb(251, 253, 249)
  2. 100oklch(0.977 0.008 121.7)#f6f8f2rgb(246, 248, 242)
  3. 200◆ Sand · pinned#f1f4eb#f1f4ebrgb(241, 244, 235)
  4. 300oklch(0.94 0.012 121.7)#eaede4rgb(234, 237, 228)
  5. 400oklch(0.876 0.014 121.7)#d4d8cergb(212, 216, 206)
  6. 500oklch(0.711 0.012 121.7)#a0a39brgb(160, 163, 155)
  7. 600oklch(0.569 0.01 121.7)#767872rgb(118, 120, 114)
  8. 700oklch(0.382 0.008 121.7)#42443frgb(66, 68, 63)
  9. 800oklch(0.287 0.006 121.7)#2a2b28rgb(42, 43, 40)
  10. 900◆ Almost black · pinned#141414#141414rgb(20, 20, 20)
  11. 950oklch(0.116 0 121.7)#050505rgb(5, 5, 5)