Skip to main content
Lucia’s working color system. This page also demonstrates the Canon color-swatch rendering pattern.

​
Lucia’s Primary Color Family

Lucia Yellow#FFD100
Lucia Gold#FFBC17
Lucia Amber#FEA91A
Lucia Orange#FF8800
Lucia Deep Orange#FF7D0E
White#FFFFFF
Lucia Ink#0A0A0A
Black#000000

​
Logo Variants

lucia-logo-color-variant-01 White on Black logo wordmark.
lucia-black-logo Black on White logo wordmark.
lucia-logo-color-variant-02 Black on Gold logo wordmark.
lucia-logo-color-variant-05 Gold on Black logo wordmark.
lucia-logo-color-variant-04 Gold on White logo wordmark.
lucia-logo-color-variant-03 White on Gold logo wordmark.

​
Usage Notes

  • #FFD100 — Primary energy, attention, warmth.
  • #FFBC17 — Warm highlight and secondary emphasis.
  • #FEA91A — Transition tone between yellow and orange.
  • #FF8800 — Action warmth and stronger emphasis.
  • #FF7D0E — High-warmth accent, used carefully.
  • #FFFFFF — Light surface and negative space.
  • #0A0A0A — Primary text, structure, and contrast.
  • #000000 — Maximum contrast, used sparingly.

​
Source Markup Pattern

Use this pattern inside Markdown notes when a color needs to be shown visually: 
<span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span>
For labeled rows, use: 
<div class="color-family-row"><span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span> <span class="color-name">Lucia Yellow</span></div>

​
Design Rule

Lucia’s color system should create warmth and focus without creating visual noise. Yellow/orange should guide attention. Ink/white should do most of the structural work. —

​
Text and Code Block Tests

Operator IntelligencecontrolsGuest Intelligence
<div class="color-family-row"><span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span> <span class="color-name">Lucia Yellow</span></div>

.published-container pre:has(code.language-text) code,
.published-container pre.language-text code,
.markdown-rendered pre:has(code.language-text) code,
.markdown-rendered pre.language-text code,
.markdown-preview-view pre:has(code.language-text) code,
.markdown-preview-view pre.language-text code,
.lucia-note pre:has(code.language-text) code,
.lucia-note pre.language-text code {
  background: transparent !important;
  color: #2f2300 !important;
  font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}

{
  "format": "lucia-eval-lab-session/v0.3",
  "exportedAt": "2026-04-29T19:33:10.000Z",
  "exportedBy": {
    "clerkUserId": "user_3D2BItLYUO1uqJOqzlZTvHZNgsF",
    "email": "aviv@hellolucia.ai",
    "name": "Aviv Hadar"
  },