> ## Documentation Index
> Fetch the complete documentation index at: https://helloluciallc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color System

<Note>
  Lucia's working color system. This page also demonstrates the Canon color-swatch rendering pattern.
</Note>

***

## Lucia's Primary Color Family

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FFD100'}} /><span className="hl-chip-name">Lucia Yellow</span><span className="hl-chip-hex">#FFD100</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FFBC17'}} /><span className="hl-chip-name">Lucia Gold</span><span className="hl-chip-hex">#FFBC17</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FEA91A'}} /><span className="hl-chip-name">Lucia Amber</span><span className="hl-chip-hex">#FEA91A</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FF8800'}} /><span className="hl-chip-name">Lucia Orange</span><span className="hl-chip-hex">#FF8800</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FF7D0E'}} /><span className="hl-chip-name">Lucia Deep Orange</span><span className="hl-chip-hex">#FF7D0E</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#FFFFFF'}} /><span className="hl-chip-name">White</span><span className="hl-chip-hex">#FFFFFF</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#0A0A0A'}} /><span className="hl-chip-name">Lucia Ink</span><span className="hl-chip-hex">#0A0A0A</span></div>

<div className="hl-swatch-row"><span className="hl-chip" style={{background:'#000000'}} /><span className="hl-chip-name">Black</span><span className="hl-chip-hex">#000000</span></div>

***

## Logo Variants

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-logo-color-variant-01.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=6ebbafbc9e84cfb9772be1aab668c15e" alt="lucia-logo-color-variant-01" width="1035" height="463" data-path="images/lucia/lucia-logo-color-variant-01.png" />

*White on Black logo wordmark.*

***

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-black-logo.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=e07c3a4caa1ee17f8cdce8751f322a24" alt="lucia-black-logo" width="1035" height="463" data-path="images/lucia/lucia-black-logo.png" />

*Black on White logo wordmark.*

***

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-logo-color-variant-02.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=51c7b555ad9a1bab0515558b37a57ff1" alt="lucia-logo-color-variant-02" width="1035" height="463" data-path="images/lucia/lucia-logo-color-variant-02.png" />

*Black on Gold logo wordmark.*

***

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-logo-color-variant-05.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=026a7f6c21aea74d2a568bab3c37f5f9" alt="lucia-logo-color-variant-05" width="1035" height="463" data-path="images/lucia/lucia-logo-color-variant-05.png" />

*Gold on Black logo wordmark.*

***

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-logo-color-variant-04.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=9bdb6dd5d1c829176b9015e89f5c7abf" alt="lucia-logo-color-variant-04" width="1035" height="463" data-path="images/lucia/lucia-logo-color-variant-04.png" />

*Gold on White logo wordmark.*

***

<img src="https://mintcdn.com/lucia-7204fd1f/iSwf61fx0HoguRx0/images/lucia/lucia-logo-color-variant-03.png?fit=max&auto=format&n=iSwf61fx0HoguRx0&q=85&s=22d3dfd219a4821b50000e4c53c3bd96" alt="lucia-logo-color-variant-03" width="1035" height="463" data-path="images/lucia/lucia-logo-color-variant-03.png" />

*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:

```html theme={"dark"}
<span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span>
```

For labeled rows, use:

```html theme={"dark"}
<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

<div className="hl-flow"><span>Operator Intelligence</span><span>controls</span><span>Guest Intelligence</span></div>

```html theme={"dark"}
<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>
```

```css theme={"dark"}
.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;
}
```

```json theme={"dark"}
{
  "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"
  },
```