Juli Living — Showcase

Colour tokens

Primitive OKLCH scales. Mode-agnostic — they do not change between light and dark themes (ADR 0003). Semantic mappings live in semantic.css.

teal

  1. 50 oklch(0.99 0.01 195) #f5fefe rgb(245, 254, 254)
  2. 100 oklch(0.97 0.05 195) #cfffff rgb(207, 255, 255)
  3. 200 oklch(0.96 0.08 195) #b1ffff rgb(177, 255, 255)
  4. 300 oklch(0.93 0.13 195) #68ffff rgb(104, 255, 255)
  5. 400 oklch(0.85 0.19 195) #00f2f4 rgb(0, 242, 244)
  6. 500 oklch(0.68 0.15 195) #00b3b5 rgb(0, 179, 181)
  7. 600 oklch(0.55 0.13 195) #008889 rgb(0, 136, 137)
  8. 700 oklch(0.38 0.09 195) #005051 rgb(0, 80, 81)
  9. 800 oklch(0.27 0.06 195) #002f2f rgb(0, 47, 47)
  10. 900 oklch(0.18 0.04 195) #001717 rgb(0, 23, 23)
  11. 950 oklch(0.11 0.02 195) #000606 rgb(0, 6, 6)

green

  1. 50 oklch(0.99 0.01 146) #f8fef8 rgb(248, 254, 248)
  2. 100 oklch(0.97 0.05 146) #e1ffe1 rgb(225, 255, 225)
  3. 200 oklch(0.96 0.08 146) #d0ffd2 rgb(208, 255, 210)
  4. 300 oklch(0.93 0.13 146) #aeffb3 rgb(174, 255, 179)
  5. 400 oklch(0.86 0.19 146) #72f181 rgb(114, 241, 129)
  6. 500 oklch(0.68 0.15 146) #51b05c rgb(81, 176, 92)
  7. 600 oklch(0.56 0.13 146) #388842 rgb(56, 136, 66)
  8. 700 oklch(0.38 0.09 146) #1c4f23 rgb(28, 79, 35)
  9. 800 oklch(0.28 0.06 146) #123116 rgb(18, 49, 22)
  10. 900 oklch(0.19 0.04 146) #071808 rgb(7, 24, 8)
  11. 950 oklch(0.11 0.02 146) #020602 rgb(2, 6, 2)

yellow

  1. 50 oklch(0.99 0.01 105) #fdfcf5 rgb(253, 252, 245)
  2. 100 oklch(0.98 0.05 105) #fdfbd4 rgb(253, 251, 212)
  3. 200 oklch(0.96 0.08 105) #f9f6b7 rgb(249, 246, 183)
  4. 300 oklch(0.94 0.13 105) #f8f085 rgb(248, 240, 133)
  5. 400 oklch(0.87 0.19 105) #e8d900 rgb(232, 217, 0)
  6. 500 oklch(0.7 0.15 105) #ada200 rgb(173, 162, 0)
  7. 600 oklch(0.57 0.13 105) #837a00 rgb(131, 122, 0)
  8. 700 oklch(0.39 0.09 105) #4d4700 rgb(77, 71, 0)
  9. 800 oklch(0.28 0.06 105) #2d2a00 rgb(45, 42, 0)
  10. 900 oklch(0.19 0.04 105) #171500 rgb(23, 21, 0)
  11. 950 oklch(0.11 0.02 105) #050500 rgb(5, 5, 0)

neutral

  1. 50 oklch(0.99 0.005 90) #fdfcf8 rgb(253, 252, 248)
  2. 100 oklch(0.97 0.008 90) #f7f5ef rgb(247, 245, 239)
  3. 200 oklch(0.95 0.01 90) #f1eee7 rgb(241, 238, 231)
  4. 300 oklch(0.9 0.012 90) #e1ded5 rgb(225, 222, 213)
  5. 400 oklch(0.8 0.014 90) #c1bdb4 rgb(193, 189, 180)
  6. 500 oklch(0.65 0.012 90) #928f87 rgb(146, 143, 135)
  7. 600 oklch(0.5 0.01 90) #65635d rgb(101, 99, 93)
  8. 700 oklch(0.38 0.008 90) #44423e rgb(68, 66, 62)
  9. 800 oklch(0.28 0.006 90) #2a2926 rgb(42, 41, 38)
  10. 900 oklch(0.1913 0 0) #141414 rgb(20, 20, 20)
  11. 950 oklch(0.1 0 90) #030303 rgb(3, 3, 3)

Semantic tokens

Role-named mappings to primitives. The resolved value below each swatch updates live when you toggle the theme — that is the light/dark behaviour these tokens encode.

  1. --surface-default … … light var(--c-juli-yellow-50) dark var(--c-juli-teal-950)
  2. --surface-elevated … … light var(--c-white) dark var(--c-juli-teal-900)
  3. --text-default … … light var(--c-juli-teal-800) dark var(--c-juli-yellow-50)
  4. --text-strong … … light var(--c-juli-teal-700) dark var(--c-juli-yellow-100)
  5. --text-muted … … light var(--c-juli-green-600) dark var(--c-juli-yellow-400)
  6. --border-subtle … … light var(--c-juli-neutral-200) dark var(--c-juli-neutral-800)
  7. --focus-ring … … light var(--c-juli-teal-700) dark var(--c-juli-green-300)
  8. --surface-action … … light var(--c-juli-teal-700) dark var(--c-juli-green-500)
  9. --text-on-action … … light var(--c-juli-yellow-50) dark var(--c-juli-neutral-950)

Type scale

Fluid type steps from Utopia. Each clamp() interpolates between a 320 px and 1440 px viewport. Sample text is rendered at the live value of each step.

  1. --step--2 The quick brown fox jumps over the lazy dog clamp(0.6944rem, 0.6919rem + 0.0129vw, 0.7035rem)
  2. --step--1 The quick brown fox jumps over the lazy dog clamp(0.8333rem, 0.8035rem + 0.1491vw, 0.9377rem)
  3. --step-0 The quick brown fox jumps over the lazy dog clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  4. --step-1 The quick brown fox jumps over the lazy dog clamp(1.2rem, 1.0668rem + 0.6661vw, 1.6663rem)
  5. --step-2 The quick brown fox jumps over the lazy dog clamp(1.44rem, 1.2168rem + 1.1159vw, 2.2211rem)
  6. --step-3 The quick brown fox jumps over the lazy dog clamp(1.728rem, 1.3758rem + 1.7611vw, 2.9607rem)
  7. --step-4 The quick brown fox jumps over the lazy dog clamp(2.0736rem, 1.5384rem + 2.6758vw, 3.9467rem)
  8. --step-5 The quick brown fox jumps over the lazy dog clamp(2.4883rem, 1.6962rem + 3.9608vw, 5.2609rem)

Spacing scale

Fluid spacing steps from Utopia. Each bar's width is the live value of its token. Pairs (e.g. --space-s-m) interpolate between two base steps over the viewport range.

Base scale

  1. --space-3xs clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem)
  2. --space-2xs clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem)
  3. --space-xs clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem)
  4. --space-s clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)
  5. --space-m clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem)
  6. --space-l clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem)
  7. --space-xl clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem)
  8. --space-2xl clamp(4rem, 3.7143rem + 1.4286vw, 5rem)
  9. --space-3xl clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem)

Pairs

  1. --space-3xs-2xs clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem)
  2. --space-2xs-xs clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem)
  3. --space-xs-s clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem)
  4. --space-s-m clamp(1rem, 0.75rem + 1.25vw, 1.875rem)
  5. --space-s-l clamp(1rem, 0.5714rem + 2.1429vw, 2.5rem)
  6. --space-m-l clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem)
  7. --space-l-xl clamp(2rem, 1.5rem + 2.5vw, 3.75rem)
  8. --space-xl-2xl clamp(3rem, 2.4286rem + 2.8571vw, 5rem)
  9. --space-2xl-3xl clamp(4rem, 3rem + 5vw, 7.5rem)

Primitives

No primitives yet. The v0.1 set (Container, Section, Stack, Cluster, Heading, Text, Button, Link, Image, SkipLink) is added incrementally per ADR 0005's iterative-session workflow.