HelloLucia Library

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

White on Black logo wordmark.

Black on White logo wordmark.

Black on Gold logo wordmark.

Gold on Black logo wordmark.

Gold on White logo wordmark.

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"
  },

Get Started

Foundation

System Architecture

Intelligence

Intelligence Architecture

Properties

Evaluation

Guest-Facing Lucia

Project Operating Context

Operations

Infrastructure

Marketing

Roadmap

Decisions

Releases

Templates

Branding and Identity

Lucia Encyclopedia of Knowledge

Lucia Intent Layer Canon Pack

Color System

Lucia’s Primary Color Family

Logo Variants

Usage Notes

Source Markup Pattern

Design Rule

Text and Code Block Tests

​Lucia’s Primary Color Family

​Logo Variants

​Usage Notes

​Source Markup Pattern

​Design Rule

​Text and Code Block Tests

Lucia’s Primary Color Family

Logo Variants

Usage Notes

Source Markup Pattern

Design Rule

Text and Code Block Tests