Native semantics first
Use semantic HTML before inventing classes. A permanent site header can be styled as header; a navigation element does not need a class named after the database concept that produced it. A class is earned when it names an actual presentation mechanism such as .hero, .eyebrow, .card, .list, .brand, .text, .variable, or an honest layout primitive such as .frame.
Arthritis is a source constraint
Source formatting must minimize painful navigation. One-property-per-line formatting creates needless vertical travel; full minification creates horizontal-scroll pain. Prefer compact conceptual blocks: short instruction:value units on the same line, nesting for local deltas, and blank lines between concepts. Optimize for low scrolling, low re-reading and cognitive density.
Variables and ladders
All colors are root variables and use OKLCH. Closely related tones derive mathematically instead of becoming near-duplicate literals. 0 and physical 1px hairlines may remain literal; other repeated dimensions collapse into a small root ladder.
Mobile first
Phone layout is the base CSS. The current shell stays fluid without a breakpoint; wider screens simply receive available space. Desktop is second-tier: mobile does not spend rules undoing a desktop layout.
Shape and reuse
The larger the object, the less rounded it becomes. Shared appearance alone does not prove a shared class; shared presentation mechanism does. Do not create .steps and .events when both are the same list mechanism. Existing semantic state such as [aria-current='page'] should be styled directly instead of renamed into page-specific classes.
Use CSS nesting to keep a mechanism and its local states together. Width classes are useful precisely because width is a reusable presentation mechanism. CSS knows presentation. It does not learn the CMS ontology.