Skip to main content
The Lucia Canon uses Obsidian styling through the existing .obsidian folder and custom CSS snippets.

​
Important

Do not replace: 
.obsidian/
That folder controls: 
theme
snippets
plugins
workspace behavior
publish configuration

​
Primary CSS Class

Most Canon notes use: 
cssclasses:
  - lucia-note

​
Active Snippets

.obsidian/snippets/Lucia Canon - Primary Friendly.css
.obsidian/snippets/color-swatches.css
Lucia Canon - Primary Friendly.css controls the overall Canon styling. color-swatches.css controls reusable visual color swatches for brand/color notes.

​
Color Swatch Markup

Use this pattern inside Markdown notes when a color needs to be displayed visually: 
<span class="color-swatch" style="--swatch:#FFD100;"></span> <span class="color-hex">&#35;FFD100</span>
Use this labeled-row pattern when documenting palettes: 
<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>

​
Publish CSS Rule

The color-swatch CSS is also mirrored into: 
publish.css
This keeps the swatches rendering correctly on Obsidian Publish, not just inside the local vault.

​
Maintenance Rule

New Canon files should preserve: 
cssclasses:
  - lucia-note
unless a specific different presentation is required.