This page puts two things side by side: a piece of code and what the browser makes from it. It is a practical guide for designers and frontend developers.
The Preview theme control lets you choose System, Light or Dark. Light and Dark override the browser preference; System restores it. Code examples and rendered previews follow the same choice.
In the newer parts of the system, we do not use classes to tell CSS “this is a card” or “make this text purple”. HTML elements already describe much of the structure. When a specific role needs to be declared, we add a data-* attribute, for example data-layout="home-cover".
The choice began as a way to keep content readable and free of visual instructions: Markdown tells the story, the template shapes the structure, and CSS recognises elements and relationships. The transition is in progress, not complete: older components still use classes. The rule for new code is to avoid adding them when semantics and descriptive attributes are enough.
<h1>Scivolare di nuovo</h1>
<p>Appunti per continuare a pensare.</p>
<p><a href="#">Un collegamento nel testo.</a></p>
<blockquote>Una frase resta in margine.</blockquote>Appunti per continuare a pensare.
Una frase resta in margine.
IM Fell English gives headings their character, Alegreya carries the reading voice, and Oswald handles navigation and metadata. The elements set the hierarchy; the font tokens set the texture.
<figure data-layout="home-cover">
<img src="/assets/illustrations/home-banana-v1.jpg"
alt="Una banana matura.">
</figure>
data-layout names a supported image role. The same figure rule works wherever the image appears; the Markdown stays about the image, not its margins.
<section>
<article>
<h3>Una banana evoca la caduta</h3>
<p>Un’icona, una scena, un significato.</p>
</article>
</section>APPUNTI · LINGUAGGIO
Un’icona, una scena, un significato.
WORK · RICERCA
Un sistema di scelte che diventa leggibile.
The browser sees a section containing articles. A direct-child relationship gives the grid its boundary. No class is needed to make a card-shaped box.
<div data-comments-root>
<div data-comments-bar>
<span data-comments-label>Nota a margine</span>
<button data-comments-toggle>Nascondi le note</button>
</div>
<article data-comment>
<p data-comment-meta>Ada · 4 novembre</p>
<p data-comment-body>La banana è già una storia.</p>
</article>
</div>Ada · 4 November
The banana is already a story.
The data-* names are both styling hooks and JavaScript hooks. This miniature has no API endpoint, so its button is an illustration, not an active control.
:root {
--ink: #241d22;
--bg: #fbfafb;
--link: #790b78;
--red: #b3132b;
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #f1edef;
--bg: #1b1c20;
--link: #e15bd7;
--red: #ff4057;
}
}
The theme swaps shared tokens in response to the device preference. Images keep their original colour and material.
This inventory comes from the rendered blog pages. Each item is a real HTML element; the visual role comes from its meaning, its position and, when needed, a descriptive data-* attribute.
htmlheadtitlemetalinkscriptbodyThese elements define the document and load its metadata, styles and behaviour. Most of them do not appear in the page itself.
headernavmainsectionarticleasidefooterdivSemantic elements describe the job of each region. div groups content when no more specific meaning applies.
h1h2h3pablockquotecitestrongemsmallspanbrtimehrHeadings organise the outline; the other elements mark paragraphs, quotations, emphasis, dates and pauses.
ulolliUse ul for unordered groups, ol for sequences and li for each item.
figurepicturesourceimgiframepicture and source provide responsive image files; figure gives an image a place in the story.
formfieldsetlegendlabelinputtextareabuttonThese elements group related fields, identify them and let a reader send a message or change a view.
svgpathsvg contains scalable drawings; path describes their shapes.
Styles follow three clues:
h1, p, figure, blockquote, article.data-layout, data-post-flow, data-card-kind or another data-* attribute when the element alone is not enough.A data-* attribute should describe a stable role, not a temporary decoration. data-layout="home-cover" names the image’s layout behaviour; data-purple or data-big would describe isolated visual choices better handled in CSS.
The same attributes can connect JavaScript to the markup. In the margin-notes component, for example, data-comments-list identifies the list to update when the API responds. User-submitted text is inserted as plain text, never interpreted as HTML.
Direction 08 uses three typefaces, each with a distinct voice: IM Fell English for headings and accents, Alegreya for reading text and quotations, and Oswald for navigation, labels and metadata. The fonts are served from assets/fonts/, with no external service requests. Their SIL Open Font Licences are included alongside the files.
The tokens at the start of assets/style.css name shared decisions:
--ink, --bg and --behind define text and surfaces;--red marks editorial accents; --link marks links and clickable actions. Purple therefore signals interaction, while red gives emphasis to the content;--display, --reading and --interface assign the three type families;--base-font and --h1-size set fluid scales;--col sets the maximum content measure.The dark theme swaps token colours through prefers-color-scheme. It does not filter images: photographs and illustrations keep the colours and material they were chosen with.
Image layout is declared with data-layout; values and Markdown syntax are documented in requirements/immagini-layout.md. An opening photo keeps its aspect ratio, a gallery follows the story’s sequence, and Work plates retain their original paper.
Margin notes use attributes such as data-comments-root, data-comments-list and data-form-toggle. The template places them in the article’s flow; JavaScript loads and sends notes; assets/xmpp-discussion.css sets rules, typography and controls. Readers can hide the whole notes stream or open the form when they want to contribute.
section without checking every affected section.data-* hooks and document exceptions.assets/style.css still contains historical rules alongside direction 08. A rule’s position in the cascade matters: when a page looks different from what you expect, first find the selector governing it and where that rule comes from. Appending an override without tracing that path makes the code harder to understand next time.
requirements/direzione-visiva.md — editorial principles and composition.requirements/implementazione-direzione-editoriale-commenti.md — templates, CSS and notes flow.requirements/immagini-layout.md — image roles, variants and optimisation.The HTML elements used on the blog section lists the elements found in generated pages: it is an inventory of published markup, not a theoretical list.