Example is a template for QuartzControl. A template here is a design: colours, typefaces,
spacing, the page grid, the arrangement of the components, the settings of the plugins —
everything that makes a website, except its content. It travels as one file with the extension
.qtpl and is imported into a project of your own in QuartzControl under Templates. After that your
own site looks like this one, with your own notes in it.
The template is meant to be used and to be rebuilt. Nothing about it is hidden: every colour and every measure is a variable you can change in QuartzControl. Every stylesheet — the file in which the look of a component is described — belongs to exactly one component and is named after it.
Why this site exists
A design cannot be looked at in the abstract. An explorer needs folders, a table of contents needs headings, a graph needs links, a table needs rows. This site supplies all of it: it is the template’s handbook and its demonstration at the same time. Every element Obsidian can write appears here at least once — and whoever wants to check an adaptation of their own finds here the page on which the difference shows.
The three decisions
Everything else follows from these three.
1. The width decides the grid
The page grid — called a frame in Quartz — divides the page into twelve equally wide columns and gives the text six of them. How wide a line of text gets is thereby decided, in exactly one place. There is no second limit on the paragraph that could fall out with the first. What that means for tablet and smartphone stands under 6.5 – Page grids.
2. Colours are measured
Contrast is the ratio of brightness between text and ground. The guideline for accessible websites, WCAG, demands at least 4.5:1 for normal text. This template measures 93 colour pairs in light and dark on every run — every text-on-ground combination, the thirteen callout colours, the colours of the code syntax theme — and stops if one of them falls below. Quartz’s own colours do not pass this check: of its thirteen callout types, eleven fail in light mode. That is why they are restated here. More under 6.2 – Colours and contrast.
3. No stylesheet sets a colour or a measure itself
Colours and measures stand in 66 variables, not in the stylesheets. That is not cosmetics: after the import, variables stay editable in QuartzControl under Styles → Variables; a value that stands in a stylesheet file does not. What does stand as a number in a file is named and justified — the callout and syntax colours, because they mean a status and are not a palette; the hairlines; and the breakpoints, because a media query cannot read a variable. More under 6.4 – Variables.
What the template does not contain
No content. The notes of this site do not travel with the template; they live in an Obsidian vault of their own. Whoever imports the template gets the design and writes their own pages into it.
No configuration of somebody else’s. A template package carries the design — stylesheets, typefaces, images, snippets, plugin entries — and leaves standing everything a project has decided for itself. Which part carries what stands under 6.8 – The template package.