DOC. AM-OS-2087 · REV. 10 · EN

AMMAR//OS Operator’s Manual

Design tokens · Typography · Components · Effects

← Return to system

1.0 Colour

Semantic tokens live in assets/css/tokens.css. Components only use tokens, so a theme is a single block of variables. --accent-text exists because some accents (vintage orange) fail AA as small text.

1.1 PHOSPHOR

  • --bg#0E0F0C
  • --surface#1A1C17
  • --text#E8E4D3
  • --muted#9A9784
  • --accent (phosphor)#9DFF7A
  • --accent-2 (amber)#FFB547
  • --signal#FF5A36
  • --holo#7AE2FF

1.2 CREAM

  • --bg#E9E2CF
  • --surface#F4EFE1
  • --text (ink)#1E1D1A
  • --muted#5C584C
  • --accent (orange)#D9481C
  • --accent-text#A83611
  • --accent-2 (teal)#2F5D50
  • --signal#B8321A

1.3 A third theme, AMBER, is unlocked with the Konami code.

2.0 Typography

Archivo 800 / 70%

Display — names, titles. Condensed via the variable width axis. Arabic falls back to Noto Kufi Arabic.

JetBrains Mono — interface, terminal, data

UI / mono. Arabic glyphs fall back to IBM Plex Sans Arabic.

VT323 — CLOCK 14:32:07 · BOOT · LABELS

Pixel accents only. Never body copy.

عمّار محمد — مهندس واجهات أمامية أول

IBM Plex Sans Arabic / Noto Kufi Arabic · لا تباعد بين الحروف العربية

11px uppercase label · letter-spacing .16em

3.0 Components

3.1 Keys (buttons)

3.2 Chips & LEDs

Live Shipped Soon Alert Off

3.3 Pixel icons (16×16, theme-coloured)

  • about
  • experience
  • projects
  • lagash
  • skills
  • terminal
  • awards
  • education
  • contact
  • resume
  • trash
  • sysinfo
  • case
  • tape

3.4 Window chrome

security_lab.term
visitor@ammar-os:~$ help
REF.06 / SECURITY_LAB.TERM · 700×460

3.5 Generative plates

4.0 Effects

  • Scanlines — fixed repeating gradient, 3–4% (12% in alert mode).
  • Grain — SVG feTurbulence tile, stepped translate. Off for reduced motion.
  • Dithering — canvases render at ~320px and quantise to the theme palette with a 4×4 Bayer matrix.
  • CRT — windows open from their icon as a horizontal line; close by collapsing to a line.
  • Chromatic split — headings, 1–2px RGB offset on hover only.
  • Reduced motion — boot, glitch, grain, parallax and scroll choreography are skipped; content never waits on animation.