Colour

The LVL Nine colour system. Click any swatch to copy the hex value.

:root {
  /* Surfaces */
  --bg:           #1A1C24;
  --nav-bg:       #1A1C24;
  --page-bg:      #FAFAFA;
  --elevated:     #F4F5F7;

  /* Rules */
  --rule:         rgba(0,0,0,0.10);
  --rule-strong:  rgba(0,0,0,0.18);

  /* Sidebar */
  --nav-text:        #E8E4F2;
  --nav-text-muted:  rgba(232,228,242,0.58);
  --nav-text-group:  rgba(232,228,242,0.58);
  --nav-rule:        rgba(255,255,255,0.10);
  --nav-active-bg:   rgba(155,138,251,0.18);
  --nav-active-text: #B7A8E5;

  /* Text */
  --text-primary:   #110F1C;
  --text-secondary: #3D3555;
  --text-muted:     #6B6080;

  /* Accent */
  --accent:       #4C1D95;
  --accent-pale:  rgba(76,29,149,0.08);
  --accent-rule:  rgba(76,29,149,0.22);

  /* Status */
  --green:        #166534;
  --green-pale:   rgba(22,101,52,0.08);
  --green-rule:   rgba(22,101,52,0.25);
  --amber:        #854D0E;
  --amber-pale:   rgba(133,77,14,0.08);
  --amber-rule:   rgba(133,77,14,0.25);
  --red:          #991B1B;
  --red-pale:     rgba(153,27,27,0.08);
  --red-rule:     rgba(153,27,27,0.25);

  /* Code */
  --code-bg:      #EFEDF3;
  --code-text:    #2A1F4E;
  --code-rule:    rgba(91,33,182,0.14);

  --font: 'Alcyone', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #121420;
    --nav-bg:       #121420;
    --page-bg:      #1B1D29;
    --elevated:     #212330;
    --rule:         rgba(255,255,255,0.10);
    --rule-strong:  rgba(255,255,255,0.18);
    --nav-text:        #E8E4F2;
    --nav-text-muted:  rgba(232,228,242,0.58);
    --nav-text-group:  rgba(232,228,242,0.58);
    --nav-rule:        rgba(255,255,255,0.10);
    --nav-active-bg:   rgba(155,138,251,0.18);
    --nav-active-text: #B7A8E5;
    --text-primary:   #EDE9F8;
    --text-secondary: #B8B0D4;
    --text-muted:     #8E86AC;
    --accent:       #9B8AFB;
    --accent-pale:  rgba(155,138,251,0.12);
    --accent-rule:  rgba(155,138,251,0.32);
    --green:        #6EE7A0;
    --green-pale:   rgba(110,231,160,0.10);
    --green-rule:   rgba(110,231,160,0.28);
    --amber:        #FCD34D;
    --amber-pale:   rgba(252,211,77,0.10);
    --amber-rule:   rgba(252,211,77,0.28);
    --red:          #FCA5A5;
    --red-pale:     rgba(252,165,165,0.10);
    --red-rule:     rgba(252,165,165,0.28);
    --code-bg:      #212330;
    --code-text:    #C5C2E8;
    --code-rule:    rgba(160,124,248,0.20);
  }
}