customize your site's appearance with colors and menus. use the dashboard UI or set values directly in your index.md frontmatter.
two ways to customize
1. dashboard UI
- go to your site on tinydot.com
- click settings (gear icon)
- click "customize"
- use color pickers and menu editors
- save changes
2. frontmatter in index.md
add customization directly in your site's index.md file:
---
color:
background: "#ffffff"
text: "#1a1a1a"
border: "#e5e5e5"
muted: "#666666"
header_menu:
- title: home
url: /
- title: about
url: /about
footer_menu:
- title: rss
url: /rss.xml
---
frontmatter customization is useful when you edit files locally or want version-controlled settings.
colors
available color properties:
| property | description | css variable |
|---|---|---|
| background | page background | --color-bg |
| text | main text color | --color-text |
| border | borders and dividers | --color-border |
| muted | secondary text | --color-text-muted |
| hover | hover state (finder) | --color-hover |
| list | list item background (finder) | --color-list |
| link | link color (future, romi, human) | --color-link |
color examples
minimal light theme:
color:
background: "#ffffff"
text: "#000000"
border: "#eeeeee"
muted: "#888888"
dark theme:
color:
background: "#1a1a1a"
text: "#ffffff"
border: "#333333"
muted: "#888888"
menus
three menu areas available:
- header_menu - top navigation
- footer_menu - bottom links
- sidebar_menu - sidebar navigation (template-dependent)
menu example
header_menu:
- title: home
url: /
- title: blog
url: /blog
- title: about
url: /about
footer_menu:
- title: rss
url: /rss.xml
- title: contact
url: mailto:[email protected]
sidebar_menu:
- title: projects
url: /projects
- title: notes
url: /notes
each menu item needs:
- title - display text
- url - link destination (relative or absolute)
spacing
control content width:
spacing:
content_max_width: "800px"
templates
each template has its own style:
- finder - file browser aesthetic, supports hover and list colors
- future - retro web style, supports link colors
- romi - minimal design, supports link colors
- human - readable, supports font size via
typography.baseFontSize
human template example
typography:
baseFontSize: 14
font size range: 10-16px.
full example
complete index.md with all customization:
---
title: my site
date: 2026-01-01
color:
background: "#fafafa"
text: "#1a1a1a"
border: "#e0e0e0"
muted: "#666666"
link: "#0066cc"
spacing:
content_max_width: "720px"
header_menu:
- title: home
url: /
- title: blog
url: /blog
- title: about
url: /about
footer_menu:
- title: rss
url: /rss.xml
- title: source
url: https://github.com/username/site
---
# welcome
this is my site.