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 panels per mode
(bg-theme-light / dark:bg-darkmode-theme-light — legacy class names).
Swatches below read hex values directly from theme.json — dark left, light right — and do not follow the theme toggle.
Canvas & surfaces
body
colors.default.theme_color.body
Dark #0B1418
· Light #F5F2F0
Page canvas — bg-body / dark:bg-darkmode-body.
panels
colors.default.theme_color.panels
Dark #0F1A20
· Light #FFFFFF
Elevated panels, cards, popovers — --color-panels (alias --color-theme-light).
code
colors.default.theme_color.code
Dark #0D2A35
· Light #E7E0DB
Fenced and inline code backgrounds — --color-code.
SELECT 1border
colors.default.theme_color.border
Dark #202B31
· Light #E0D8DC
Panel borders, copy icons, graph edges — border-border, --g-link.
Live stack — uses --color-* from theme-vars.html (updates on refresh; no just theme).
code — SELECT 1;Brand & actions
primary
colors.default.theme_color.primary
Light #118AB2
Buttons, nav links, blockquote border, share chips — btn-primary, text-primary.
secondary
colors.default.theme_color.secondary
Light #F77F00
Secondary brand tone — text-secondary, --color-secondary.
Text
text
colors.default.text_color.default
Dark #A3B5BD
· Light #3D3539
Body copy — text-text, --color-text.
Body paragraph in prose and popovers.
text dark
colors.default.text_color.dark
Dark #D1DDE3
· Light #211C1F
Headings — text-dark, --color-text-dark, graph labels (--g-text).
Section heading
text light
colors.default.text_color.light
Dark #758A94
· Light #7A7076
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
Dark #D1DDE3
· Light #211C1F
Inline code text inherits prose colour; background uses code via --color-code.
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
Dark #118AB2
Notes graph nodes — --accent-1, --g-node-notes.
accent-2
colors.default.accent.2
Dark #FFD166
Blog graph nodes, copy/expand hover border — --accent-2, --g-node-blog.
accent-3
colors.default.accent.3
Dark #06D6A0
Copy-to-clipboard success — --accent-3.
accent-4
colors.default.accent.4
Dark #073B4C
Reserved for homepage cards (#87) — --accent-4.
accent-5
colors.default.accent.5
Dark #EF476F
Current page graph node — --accent-5, --g-node-active. Required field markers on contact form.
Prose links
Wikilink underline colours from render-link.html — /notes/ paths blue; all other internal and external URLs green (--accent-3).
note link
colors.default.accent.1
Dark #118AB2
Paths under /notes/ — class internal-link internal-link--note, underline --g-node-notes (accent-1).
Note wikilink → /notes/…
site link
colors.default.accent.3
Dark #06D6A0
All other internal paths (/blog/, /certly, /affiliate, etc.) — class internal-link, underline --accent-3.
Certly page → site paths
external
colors.default.accent.3
Dark #06D6A0
External URL underline — external-link or a[href^="http"] in prose, --accent-3.
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
Dark #A3B5BD
· Light #3D3539
Default graph node fill.
--g-node-notes
From accent.1
Dark #118AB2
Note nodes; hover glow.
--g-node-blog
From accent.2
Dark #FFD166
Blog post nodes; hover glow.
--g-node-active
From accent.5
Dark #EF476F
Current page node fill and glow.
--g-node-inactive
From theme_color.border
Dark #202B31
· Light #E0D8DC
Dimmed nodes on hover.
--g-link
From theme_color.border
Dark #202B31
· Light #E0D8DC
Default edge stroke.
--g-link-active
From text_color.light / text_color.default
Dark #A3B5BD
· Light #7A7076
Highlighted edges on hover.
--g-text
From text_color.dark
Dark #D1DDE3
· Light #211C1F
Node label text.
Buttons
Unified button styles with automatic arrows and variants for different use cases.
Default (Primary/Outline)
Transparent background, blue text, arrow added automatically. Matches signpost card CTAs.
Bordered
Box style with border, centered text, no arrow. Used in author bio and similar contexts.
Panel surface
partial "components/panel" — default padding, optional
Hover for cards.
Panel content example
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