An authored practice for the web
Show how the thing works, give the content room to speak, and attach one restrained moment of joy to something useful.
This is Sergio's working language for pairing editorial warmth with technical precision. It is a practice to interpret, not a framework every project must install.
01 / Principles in use
Use them to test a choice: does it make the work clearer, more useful, easier to use, or more memorable?
A line, edge, or gap belongs when it clarifies hierarchy, exposes an action, or makes behavior easier to understand.
Show where important information came from, what state it is in, and how an action changed it. The work should be traceable, not merely confident.
Joy belongs when it makes something clearer, easier to remember, or more comfortable to use.
Let the reading voice be warm and the factual voice be exact. They should support each other without pretending to be the same.
A delight is a useful surprise. Give it room to land; when everything is unexpected, surprise becomes the house style and stops feeling surprising.
Animation should make an explanation easier to grasp or an interaction easier to follow. The words and structure still carry the meaning without it.
Carry the same intent into each medium, then adapt the form to what that medium does well. Agreement matters more than imitation.
Design for different bodies, devices, connections, and ways of interacting from the start. Access is part of the work, not a fallback.
02 / Portable foundations
Color, type, rules, and paper depth come from named roles. The browser consumes generated values rather than a second hand-edited palette.
Color / choose one family
Preview the deployment colorway
Choose a card to change the whole specimen. Terra is the default; Sage and Sky carry the same roles in a different voice.
Terra colorway active
surface.pagesurface.papersurface.quiettext.primaryaccent.fieldaccent.defaultaccent.strongTypography / role before family
Reading should feel warm, calm, and unhurried.
MEASURE / PROVENANCE / STATUS
Source Serif 4 carries the editorial voice. IBM Plex Mono makes compact evidence align and scan.
Shape / depth / movement
Rules stay at one or two pixels, paper corners stay nearly square, and explanatory motion resolves to zero when reduced motion is set.
03 / Browser study
Contextual Marginalia keeps short explanations beside the paragraph they belong to. Hover, focus, or follow a marked term to read its note.
FIELD NOTE · READING ON THE WEB
Calm does not come from removing information. It comes from giving each idea a clear place to land.
A comfortable reading measure01, annotation 1 helps the eye return to the next line. A deliberate pause02, annotation 2 marks a real change in subject without turning every thought into a card.
The structure is visible, but the paragraph remains the thing you came to read.
Hover or focus a marked term. On narrow screens, both notes follow the article in reading order.
04 / Practice in motion
A design choice should agree in its meaning, materials, composition, and behavior. Each view tests whether the idea survives beyond a single screen.
Begin by naming what a choice should help someone understand or do. Then test whether that intent remains clear in the principles, the visual materials, the composition of the page, and the behavior of the interaction.