Design System Documentation

This site uses a blueprint/engineering drawing metaphor for its visual language and information architecture.

Site Frame

The outer frame mimics an architectural drawing sheet with a title block containing metadata:

Field	Description	Format
PROJECT	Site domain	`machineaid.inc`, `tamssokari.com`
SHEET	Page identifier	Section prefix + number (see below)
SCALE	Always `1:1`	Fixed value
REV	Last modified date	`YYYY-MM-DD` or `—` if never modified

Sheet Numbering Convention

Following architectural drawing standards (A=Architectural, S=Structural, M=Mechanical, etc.), sheets are prefixed by section.

Core Sections

Prefix	Section	Use Case
G	General	Home, About, Contact, 404
J	Journal	Blog posts, Articles
S	Studies	Case studies, Portfolio, Projects
P	Products	Services, Offers, Pricing
N	Newsletter	Issues, Editions, Mailings
D	Documentation	SOPs, Guides, Specs, Help
L	Legal	Terms, Privacy, Agreements
T	Taxonomy	Tags, Categories, Topics
R	Records	Archive, Historical content

Numbering

Index pages use 000: J-000 (Journal index), L-000 (Legal index)
Content pages start at 001 and increment
Journal posts are numbered chronologically (oldest = 001)

Legal Pages Reference

Sheet	Document
L-001	Terms of Service
L-002	Privacy Policy
L-003	Cookie Policy
L-004	Data Processing Agreement (DPA)
L-005	Master Services Agreement (MSA)
L-006	Acceptable Use Policy
L-007	Service Level Agreement (SLA)
L-008	Non-Disclosure Agreement (NDA)

Documentation Pages Reference

Sheet	Document
D-001	Standard Operating Procedures
D-002	Style Guide
D-003	Brand Guidelines
D-004	API Documentation
D-005	User Manual

Examples by Site Type

Personal Site:

G-001 Home, G-002 About, G-003 Contact
J-001...J-038 Blog posts
S-001...S-005 Portfolio projects
R-001 Archive

Business Site:

G-001 Home, G-002 About, G-003 Contact, G-004 Team
S-001...S-010 Case studies
P-001 Services, P-002 Pricing
L-001 Terms, L-002 Privacy, L-004 DPA
D-001 SOPs, D-002 Documentation

Post Title Block

Each post has a title block with:

Field	Description
Title	Post headline
Subtitle	Optional tagline
Description	Full excerpt (supports markdown)
Date	Original publish date (`YYYY-MM-DD`)
Rev	Last modified date, or `—` if unchanged
Author	Author short code (e.g., `TS`, `MA`)
Sheet	Journal number (e.g., `J-037`)

Revision Convention

Unlike traditional engineering drawings which use revision letters (A, B, C...), we use dates:

— (em-dash): Original, never modified
YYYY-MM-DD: Date of last modification

This provides more meaningful information to readers than arbitrary letters.

Authors

Authors are defined in src/_data/authors.js with:

'tams': {
  name: 'Tams Sokari',      // Full name (shown in footer)
  shortName: 'TS',          // Short code (shown in title block)
  url: 'https://...',       // Link
  type: 'Person'            // Schema.org type
}

Default author per site is set in src/_data/site.js via defaultAuthor.

CSS Architecture

Follows CUBE CSS methodology:

tokens.css — Design tokens (colors, spacing, typography)
primitives.css — Layout primitives (stack, cluster, sidebar, grid, etc.)
blocks.css — Component styles (title-block, post-card, button, etc.)

Key Patterns

No media queries — Uses intrinsic sizing (flex-wrap, auto-fit, clamp)
Logical properties — inline-size not width, block-start not top
Outline for borders — Uses outline with negative outline-offset (doesn't affect box model)

Themes

Theme	Site	Description
`machine-aid`	machineaid.inc	Blueprint dark (business)
`tamssokari`	tamssokari.com	Warm sepia (personal)

Each theme has light/dark mode variants. System preference is respected by default, with user override saved to localStorage.