Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text styles
Bold text
Italic text
Bold and italic text
Strikethrough text
Highlighted text
inline code
Internal link: Obsidian Theme Visual Reference (Colors, Headings, Checkboxes, Badges)
External link: Google
Text-style colors
| Style | Color | Exact value |
|---|---|---|
| Bold | Cyan | #22D3EE |
| Italic | Green | #4CAF50 |
| Bold + italic | Gold | #FFD700 |
| Strikethrough | Red | #FF5555 (line + text) |
| Highlight | Mid-tone amber background | rgba(233, 196, 106, 0.45) |
| Inline code | normal text on code background | --code-normal = --text-normal |
| Internal link | Teal | #20828E |
| External link | Light purple | #C77DFF |
Colored tags
The colored-tags plugin tints every #tag. Palette = Custom jewel tones, seed 7, solid colors (no gradients), high text contrast for readability. Each tag is hashed to one palette color.
| Color | Hex |
|---|---|
| Teal | #2a8a94 |
| Blue | #4a90d9 |
| Green | #5aa07a |
| Violet | #8f78b0 |
| Rose | #c25b7a |
| Orange | #e08748 |
| Gold | #d9a441 |
| Slate blue-grey | #6c8299 |
| Plum | #9b5a8f |
| Brick red | #c0504d |
Checkboxes
- Standard checkbox
- Done / Checked
- [/] Half-Filled Checkbox
- [-] Cancelled
- [>] Forwarded
- [<] Back Arrow
- [?] Question Mark
- [!] Exclamation Mark
- [*] Star
- ["] Quote
- [l] Location Pin
- [b] Bookmark
- [i] Info
- [S] Speech Bubble
- [I] Lightbulb
- [p] Thumbs Up
- [c] Thumbs Down
- [f] Fire
- [k] Key
- [w] Trophy
- [u] Up Arrow
- [d] Down Arrow
- [1] Empty Heart
- [2] Half Heart
- [3] Full Heart
- [4] Plus Sign
- [5] Minus Sign
- [6] X
- [n] Pin
- [t] Target
- [a] Book
- [$] Dollar Sign
Badges
| Name | ID | Preview | Color |
|---|---|---|---|
| Note | note | [!!note] | Blue |
| Info | info | [!!info] | Blue |
| Todo | todo | [!!todo] | Blue |
| Abstract | abstract | [!!abstract] | Cyan |
| Summary | summary | [!!summary] | Cyan |
| TLDR | tldr | [!!tldr] | Cyan |
| Tip | tip | [!!tip] | Cyan |
| Important | important | [!!important] | Red |
| Success | success | [!!success] | Green |
| Completed | done | [!!done] | Green |
| Question | question | [!!question] | Yellow |
| Warning | warning | [!!warning] | Orange |
| Failure | failure | [!!failure] | Red |
| Danger | danger | [!!danger] | Red |
| Bug | bug | [!!bug] | Red |
| Example | example | [!!example] | Purple |
| Quote | quote | [!!quote] | Grey rgb(180,180,180) |
| Complete | complete | [!!complete] | Per-icon |
| Milestone | milestone | [!!milestone] | Per-icon |
| Process | process | [!!process] | Per-icon |
| Image | image | [!!image] | Per-icon |
| Definition | definition | [!!definition] | Per-icon |
| Mention | mention | [!!mention] | Per-icon |
| Flag | flag | [!!flag] | Per-icon |
| Snippet | snippet | [!!snippet] | Per-icon |
| Highlight | highlight | [!!highlight] | Per-icon |
| Profile | profile | [!!profile] | Per-icon |
| Attachment | attachment | [!!attachment] | Per-icon |
| Lightbulb | lightbulb | [!!lightbulb] | Per-icon |
| Prohibit | prohibit | [!!prohibit] | Per-icon |
| Stop | stop | [!!stop] | Per-icon |
| Home | home | [!!home] | Per-icon |
| Knowledge | knowledge | [!!knowledge] | Per-icon |
| Vault | vault | [!!vault] | Per-icon |
Callouts
Note
A note callout.
Info
An info callout.
To-do
A to-do callout.
Tip
A tip callout.
Success
A success callout.
Question
A question callout.
Warning
A warning callout.
Failure
A failure callout.
Danger
A danger callout.
Bug
A bug callout.
Example
An example callout.
Quote
A quote callout.
Code blocks
// JavaScript
function greet(name) {
return `Hello, ${name}`;
}# Python
def greet(name):
return f"Hello, {name}"/* CSS */
.title { color: #42a5f5; }# Bash
echo "Hello World"Blockquote
A plain blockquote (single
>), for quoted text. It can span multiple lines.
Lists
- Item one
- Item two
- Nested item
- Deeper nested item
- Nested item
- First
- Second
- Nested first
- Nested second
Footnotes
Here is a sentence with a footnote.1
Math (LaTeX)
Inline: $E = mc^2$
$$ \int_0^\infty e^{-x},dx = 1 $$
Colored tags
#example-teal #example-blue #example-green #example-violet #example-rose #example-orange #example-gold #example-slate #example-plum #example-brick
Tables
| Column A | Column B | Column C |
|---|---|---|
| Row 1 | data | data |
| Row 2 | data | data |
Dividers
Reference (explanations)
This is the one master reference for every custom visual element in this vault — theme Baseline plus the enabled CSS snippets and plugins. The showcase above renders everything live; the tables below give the correct names and the exact hex where the CSS hardcodes one.
Sizes
| Element | Size | Font | Set by |
|---|---|---|---|
| Inline title | 1.618em | Instrument Serif | Obsidian default + equal-heading-sizes.css |
| All headings H1–H6 | 1.5em (uniform) | inherits body font | equal-heading-sizes.css → --heading-size |
| Body text | 1em (16px) | body font | Baseline |
Headings are uniform and smaller than the title; retune all six via the single --heading-size value.
Heading colors
| Level | Markdown | Color name | Exact hex |
|---|---|---|---|
| H1 | # | Blue | #42a5f5 |
| H2 | ## | Sage green | #528d76 |
| H3 | ### | Muted violet | #8470A6 |
| H4 | #### | Crimson / magenta-pink | #C2185B |
| H5 | ##### | Carrot orange | #E67E22 |
| H6 | ###### | Bright yellow | #FFD60A |
The inline title is a separate element: color --text-normal (theme off-white), size 1.618em, Instrument Serif — not a heading color.
Checkbox names & colors
Full set from the custom-checkboxes plugin (insert via the editor right-click menu):
< Back Arrow · S Speech Bubble · I Lightbulb · n Pin · t Target · a Book · 1 Empty Heart · 2 Half Heart · 3 Full Heart · 4 Plus Sign · 5 Minus Sign · 6 X · $ Dollar Sign · plus Baseline’s native x / - > ? ! * " l b i p c f k w u d glyphs.
13 are custom-colored by custom-colored-checkboxes.css: < (purple), S (green), I (yellow), n (pink), t (purple), a (blue), 1/2/3 (accent teal), 4 (green), 5 (red), 6 (red), $ (green). The rest use Baseline’s default task-glyph styling.
Colored tags
The colored-tags plugin tints every #tag. Palette = Custom jewel tones, seed 7, solid colors (no gradients), high text contrast for readability. Each tag is hashed to one palette color.
| Color | Hex |
|---|---|
| Teal | #2a8a94 |
| Blue | #4a90d9 |
| Green | #5aa07a |
| Violet | #8f78b0 |
| Rose | #c25b7a |
| Orange | #e08748 |
| Gold | #d9a441 |
| Slate blue-grey | #6c8299 |
| Plum | #9b5a8f |
| Brick red | #c0504d |
Palette string (Colored Tags → Custom palette): 2a8a94-4a90d9-5aa07a-8f78b0-c25b7a-e08748-d9a441-6c8299-9b5a8f-c0504d. Adjust the seed to change how tags map to colors.
Callouts
Native Obsidian block callouts (> [!type]), enhanced by the Admonition plugin. Types: note, info, todo, tip, success, question, warning, failure, danger, bug, example, quote (and their aliases). Add - for collapsed / + for expanded (foldable). Colors and icons are per type, theme/plugin-defined.
Table themes
Four named styles from table-themes.css. Apply via right-click on a table → Add CSS class → table-report, table-dark-pro, table-gradient, or table-minimal. Default (no class) is tt-default.
Calendar day colors
From iridium-to-baseline-port.css: SUN #c78080 · MON #a992d0 · TUE #7aa3c9 · WED #7fb59a · THU #c9c48e · FRI #d19e7d · SAT #c093a6.
Source files
| What | File |
|---|---|
| Heading colors + accent + text-style/link/strike/highlight + calendar colors | .obsidian/snippets/iridium-to-baseline-port.css |
| Heading & inline-title sizes + H6 case fix | .obsidian/snippets/equal-heading-sizes.css |
| Custom checkbox icons/colors | .obsidian/snippets/custom-colored-checkboxes.css |
| Checkbox menu (names/symbols) | .obsidian/plugins/custom-checkboxes/main.js |
| Badge names/colors | .obsidian/plugins/badges/styles.css |
| Colored tags palette | .obsidian/plugins/colored-tags/data.json |
| Callouts | .obsidian/plugins/obsidian-admonition/ |
| Table themes | .obsidian/snippets/table-themes.css |
#tools/obsidian #design #reference #tools/claude #homelab #finance #gaming #health
This is the footnote definition — Obsidian renders it at the bottom of the note. ↩︎
