╔═══════════════════════════════════════════╗
║               TAG CHEAT SHEET             ║
╠═══════════════════╦═══════════════════════╣
║ MAIN TAGS         ║ DETAIL TAGS           ║
╠═══════════════════╬═══════════════════════╣
║ developing        ║ essay                 ║
║ writing           ║ documentation         ║
║ computing         ║ notes                 ║
║ gaming            ║ list                  ║
║ illustration      ║ research              ║
║ philosophy        ║ experiment            ║
║ profile           ║ code                  ║
║                   ║ wip                   ║
║                   ║ hardware              ║
║                   ║ software              ║
║                   ║ tools                 ║
║                   ║ media                 ║
║                   ║ retro                 ║
╚═══════════════════╩═══════════════════════╝

LIB — general essays, reading material, reference.

PRJ — active projects and development work (more dynamic than INV).

INV — inventories and personal collections.

ROM — gaming / ROM content.

SITE: Generated, software, donts, colorschemes

LIB  Library        [writing, essay, documentation, notes]
PRJ  Projects       [developing, code, experiment, wip, systems]
INV  Inventory      [hardware, software, tools, media, retro]
ROM  ROM / Games    [gaming, retro, media]

1. Design Lint Rules

“Wat mag hier wel, wat liever niet”

Dit zijn geen regels om creativiteit te doden, maar om de toon consistent te houden.

1.1 Algemene principes

Deze site is:

• text-first
• grid-based
• monospace-aware
• low-noise
• retro-functioneel, niet nostalgisch-decoratief

Vermijd:

• gradients
• drop shadows
• animaties langer dan ~200ms
• rounded corners zonder functionele reden
• icon fonts

1.2 Kleurgebruik

Regels

• Maximaal 1 accentkleur per component
• Achtergrond altijd rustig, contrast komt uit typografie
• Highlight ≠ accent ≠ linkkleur

Toegestaan

• --c-high voor selectie, markering, focus
• --c-theme alleen voor betekenisvolle nadruk (links, calls)
• gedempte textkleuren voor metadata

Niet doen

• accentkleur gebruiken voor decoratie
• meerdere accentkleuren in één view

1.3 Layout

• Alles staat op een grid, ook als het “los” oogt

• Full-width alleen voor:

  • banners
  • tabellen
  • figuren met caption

• Geen centering tenzij het functioneel is

Whitespace is informatie. Niet opvullen.

1.4 Beweging

• Hover = feedback, niet entertainment
• Geen easing curves die “zacht” aanvoelen (denk: hardware, niet animatie)

1.5 Iconografie

• ASCII of Unicode glyphs
• Altijd monospace
• Nooit groter dan tekst

Voorbeelden:

>
*
#
^
+
[]
::

2. Typografische Cheatsheet

“Welke stem gebruik je waar”

Denk typografie als rollen, niet als styles.

2.1 Fonts

2.2 Headers

h1

Gebruik

• Pagina-titel
• Max 1 per pagina

Karakter

• zwaar
• compact
• geen decoratie

h2

Gebruik

• Hoofdsecties
• Navigatiepunten binnen een pagina

h3

Gebruik

• Subsecties
• Artikels binnen een lijst

h4

Gebruik

• Tabellen
• Cards
• Meta-secties

h5 / dt / .hs

Gebruik

• Labels
• Context
• “Wat is dit?”-headers

Denk:

< NOW >
< SYSTEM >
< NOTES >

2.3 Tekstsoorten

.hi (intro)

• 1x per pagina
• Samenvatting of toonzetting
• Lichter van kleur

p

• Lange tekst
• Max 68ex
• Geen gimmicks

small / sup / time

• Metadata
• Nooit hoofdinhoud
• Licht en terughoudend

code / pre

• Functioneel
• ASCII moet intact blijven
• Nooit cursief

2.4 Links

3. DOS UI Component Guide

“Hoe zien dingen eruit in deze wereld”

Dit is waar de sfeer echt landt.

3.1 Cards (.m_card)

Mentale metafoor

Een scherm met data, niet een ‘kaartje’

Structuur

<article class="m_card">
  <img>
  <div class="m_card__body">
    <span class="hs">SECTION</span>
    <h2>Title</h2>
    <p class="hi">Intro</p>
  </div>
  <footer>Meta</footer>
</article>

Regels

• Altijd grid
• Geen afgeronde hoeken
• Beeld is functioneel, niet decoratief

3.2 Buttons (.btn)

Visueel idee

[ READ ]
[ OPEN ]
[ EXEC ]

Gedrag

• Inline
• Klik voelt als een toets
• Geen schaduw

Gebruik

• Actie
• Navigatie
• Nooit decoratie

3.3 Labels / Metadata

Gebruik .hs, time, small

Voorbeeld:

< NOW >
@ 17:45
^ 1736293453

Altijd:

• uppercase
• monospace
• rustig van kleur

3.4 Lists

Bullets

• ASCII-achtig
• Geen standaard •

Voorbeelden:

⁖ item
> item
+ item

Gebruik consistent per lijst.

3.5 Info blocks (zoals site-info)

Metafoor

Server status / system readout

Layout

• Grid
• Labels links
• Data rechts
• Dunne lijnen

Voorbeeld:

TIME    | 17:45
UPTIME  | 3 days
WEATHER | CLOUDY

3.6 Externe links

Altijd gemarkeerd.

Voorbeeld:

Wikipedia^
Github>>

Nooit onzichtbaar extern maken.

Uitstekende keuze. Dan laten we de manpage-SYNOPSIS schoon en gebruiken we de inhoudswoorden als tags: functioneel, herbruikbaar, niet poëtisch. Alsof ze uit een index komen die ooit met vi is onderhouden.

Hier is een geconsolideerde taglist, gegroepeerd maar zonder hiërarchie af te dwingen. Alles is bewust kort, zelfstandig en tag-proof.

Core object tags

(concrete dingen)

• hardware
• software
• media
• tools
• code
• systems

Process & state tags

(hoe iets bestaat of gemaakt wordt)

• experiments
• work-in-progress
• drafts
• notes
• research
• archives

Content type tags

(wat voor soort tekst of materiaal)

• articles
• manuals
• essays
• excerpts
• references
• documentation
• lists

Domain & theme tags

(waar het over gaat)

• retro
• retro-computing
• games
• gaming
• design
• typography
• philosophy
• systems-thinking

Optional utility tags

(voor filtering en latere groei)

• personal
• unfinished
• canonical
• index
• overview

Minimal “approved” subset (aanrader)

Als je het streng wilt houden, zou ik starten met deze kernset:

hardware
software
media
tools
code
systems
retro
articles
manuals
essays
notes
experiments
work-in-progress

Alles daarbuiten voeg je pas toe als je jezelf betrapt op herhaling.