Design System
A compact reference for the visual rules used across Software Practices. The system borrows the clarity of an older reference manual without turning the site into a terminal interface.
Color
Hue identifies a content family. Every family uses the same solid, heading, and field roles.
Typography
Serif names things. Sans explains them. Mono carries metadata and compact controls.
Reader locality
Keep the facts a reader needs close to the code or decision they affect.
A heading names the idea; an inline link keeps a persistent interaction cue.
Spacing and lines
Spacing follows a short scale. Thin rules separate peers; a thicker rule marks family context.
10.25rem20.5rem30.75rem41rem51.5rem62rem73rem84remIcons
Icons identify artifact type. Color carries the larger family and hierarchy.
Controls
Metadata is quiet, navigation is tinted, and actions use a filled field.
Layout
A stable label column orients the reader; the content column carries the reading flow.
Content structures
Contained fields are reserved for artifacts; explanatory prose remains on the page.
Prefer the smallest coherent change.Use a left rule for a quotation or callout, not another floating card.
| Structure | Primary cue |
|---|---|
| Code | Raised field |
| Callout | Accent rule |
Page families
Shared alignments carry through four information levels and collapse by fit condition.
Motion and access
Movement confirms an action; it never carries information that cannot be paused or read statically.
Arrow: 0.2rem confirmation movement on hover or keyboard focus.
Editorial word: stable accessible heading, reserved width, and a pause control.
Reduced motion: freeze editorial changes and collapse ordinary feedback transitions.
Focus: 3px visible ring that survives tinted fields and forced colors.