Style Guide
Living reference for site design tokens and components (v2.2 aesthetics).
Source: data/theme.json → emitted as CSS vars in
theme-vars.html and Tailwind utilities (light compile).
Dark-mode accent, link, and
text_color.inline fall back to default when
empty or omitted. Elevated surfaces use theme_light per mode
(bg-theme-light / dark:bg-darkmode-theme-light).
Canvas & surfaces
body
colors.default.theme_color.body
Light #F5F2F0
· Dark #211C1F
Page canvas — bg-body / dark:bg-darkmode-body.
theme_light
colors.default.theme_color.theme_light
Light #FFFFFF
· Dark #433A3F
Elevated panels, inline code background, popovers — bg-theme-light / dark:bg-darkmode-theme-light, --color-theme-light.
theme_dark
colors.default.theme_color.theme_dark
Secondary surface token — bg-theme-dark / dark:bg-darkmode-theme-dark, --color-theme-dark. Reserved; empty in both modes today.
Unused on site — kept for HugoPlate parity and future contrast layers.
border
colors.default.theme_color.border
Light #E0D8DC
· Dark #5A4F55
Panel borders, copy icons, graph edges — border-border, --g-link.
Brand & actions
primary
colors.default.theme_color.primary
Buttons, nav links, blockquote border, share chips — btn-primary, text-primary.
secondary
colors.default.theme_color.secondary
Secondary brand tone — text-secondary, --color-secondary.
Text
text
colors.default.text_color.default
Light #3D3539
· Dark #C8C2C6
Body copy — text-text, --color-text.
Body paragraph in prose and popovers.
text dark
colors.default.text_color.dark
Light #211C1F
· Dark #F2EEF0
Headings — text-dark, --color-text-dark, graph labels (--g-text).
Section heading
text light
colors.default.text_color.light
Light #7A7076
· Dark #9A9298
Muted meta — text-text-light / dark:text-darkmode-text-light, dates, captions.
Published 10 Jul 2026 · 5 min read
inline
colors.default.text_color.inline
Light #211C1F
· Dark #F2EEF0
Inline code in prose — --color-text-inline. Background uses theme_light via --color-theme-light.
Run just install then just sync on a fresh clone.
Accents
Shared across modes when darkmode.accent is empty. Tailwind
accent-1…5 compile from default; dark uses CSS
vars.
accent-1
colors.default.accent.1
Light #118AB2
Notes graph nodes — --accent-1, --g-node-notes.
accent-2
colors.default.accent.2
Light #FFD166
Blog graph nodes, copy/expand hover border — --accent-2, --g-node-blog.
accent-3
colors.default.accent.3
Light #06D6A0
Copy-to-clipboard success — --accent-3.
accent-4
colors.default.accent.4
Light #073B4C
Reserved for homepage cards (#87) — --accent-4.
accent-5
colors.default.accent.5
Light #EF476F
Current page graph node — --accent-5, --g-node-active. Required field markers on contact form.
Prose links
Underline colours for wikilinks in notes/blog prose and hover popovers — mapped to accent tokens.
internal
colors.default.accent.1
Light #118AB2
Generic wikilink underline — --accent-1; notes/blog use --g-node-notes / --g-node-blog.
Internal note link (notes, blog, backlinks)
external
colors.default.accent.3
Light #06D6A0
External URL underline in prose — --accent-3, class external-link.
https://example.com (http(s) links)
Graph (derived)
Mapped in theme-vars.html — not separate keys in
theme.json.
--g-node
From text_color.default
Light #3D3539
· Dark #C8C2C6
Default graph node fill.
--g-node-notes
From accent.1
Light #118AB2
Note nodes; hover glow.
--g-node-blog
From accent.2
Light #FFD166
Blog post nodes; hover glow.
--g-node-active
From accent.5
Light #EF476F
Current page node fill and glow.
--g-node-inactive
From theme_color.border
Light #E0D8DC
· Dark #5A4F55
Dimmed nodes on hover.
--g-link
From theme_color.border
Light #E0D8DC
· Dark #5A4F55
Default edge stroke.
--g-link-active
From text_color.light / text_color.default
Light #7A7076
· Dark #C8C2C6
Highlighted edges on hover.
--g-text
From text_color.dark
Light #211C1F
· Dark #F2EEF0
Node label text.
Panel surface
partial "components/panel" — default padding, optional
Hover for cards.
Accent border variant
Panel with border-accent-2 left stripe — style guide
sample; homepage cards (#87) will use similar treatment.
Post footer
partial "content/footer" — as on blog and note singles
(graph, author bio, share, comments, jedi).
#mtfbwy
Comments