PACO.IO

Obsidian Vault Portal v2.0
guest@paco.io:~$cat "vault/retro-design.md"

Retro Design & Fonts

The aesthetics of paco.io are inspired by 1980s personal computer terminals, BBS interfaces, and classical CRT monitors, combined with a clean and modern digital garden hierarchy.

The Typography

This site loads classic system and BIOS raster fonts from the DOS and retro PC era, with modern high-contrast fallbacks:

1. Oldschool PC Fonts

  • Green Screen Regular (greenscr): A thick, glowing phosphor-style monospace font used for terminal headers.
  • Pixelmix Regular (pixelmix): A 6px-style pixel font used for compact system statistics, buttons, and system labels.
  • VT323: A classic CRT terminal font loaded as a fallback for headings.

2. Modern Reading Fallbacks

  • IBM Plex Mono: An elegant, highly-readable monospace font developed by IBM, used for body reading text. It preserves the classic programmer aesthetic while being comfortable on the eyes for longer articles.

[!INFO] Font Index References You can find more classic hardware BIOS fonts, clone computer typography, and retro console styles at INT10h Oldschool PC Fonts.

Screen Effects (CRT Simulation)

When browsing in green, amber, or cyberpunk modes, the site applies styling layers to mimic hardware cathode-ray tube characteristics:

  1. Scanlines: A repeating horizontal linear gradient that simulates grid scanlines on old computer monitors.
  2. Glass Vignette: A deep, inset radial shadow representing the darkened corners and curvature of glass monitor bezels.
  3. Phosphor Glow: Subtle text-shadows and borders rendering the light emission of old phosphors.
  4. Flicker Animation: A micro-flicker loop running in the background to simulate slight voltage fluctuations.

[!TIP] Pure Reading Mode If the scanlines or text glow tire your eyes, select the “Print Paper” theme in the top header. It disables the CRT effects entirely, rendering crisp, dark ink-style monospace text on a clean sepia-white background. Alternatively, click the “CRT: ON/OFF” button to toggle the visual simulation.

Vault Navigation

This page is linked inside the digital garden tree. To learn how to add your own pages or configure Obsidian, check the Getting Started guide!