# Dithered

> Pixel-dither texture with retro-computing 1-bit aesthetic

- Skill: `jdsadminllc/dithered` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/dithered`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/dithered/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/dithered

---

# Dithered
## Mission
Celebrate the texture of early computing — pixel-dither patterns, 1-bit color depth, and the warm imperfection of retro digital art.
## Brand
### 🎨 Colors
- `#1A1A1A` — Primary background (dark pixel canvas)
- `#E8E3D9` — Primary text / light surface (warm paper)
- `#4A4A4A` — Mid-tone (50% dither gray)
- `#8B8B8B` — Light tone (25% dither gray)
- `#2D2D2D` — Dark tone (75% dither gray)
- `#C4B998` — Warm accent (amber terminal)
### 🔤 Typography
- Heading font: VT323 (Google Fonts — terminal monospace)
- Body font: IBM Plex Mono (Google Fonts)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.5rem / 2xl 2rem / 3xl 2.5rem
### 📐 Spacing
- Grid: 8px baseline grid (pixel-perfect alignment)
- Section padding: 4rem top/bottom
- Card gap: 1rem (multiple of 8px)
### 🧩 Components
- Buttons: Sharp 0px corners, 2px solid border, dither-pattern fill on hover, monospace text
- Cards: Solid border (2px), no shadows, dither-pattern background stripes, 0px radius
- Nav: Minimal, pixel-art logo or plain monospace text, 2px bottom border
- Hero: Large pixel-art or dithered image, monospace heading, scanline overlay effect
- Footer: Thin rule (2px), monospace links, "RETURN TO TOP" with ASCII arrow
### ♿ Accessibility
- All text passes 4.5:1 contrast (monochrome palette makes this straightforward)
- Focus rings: 2px solid border in amber accent, 0px offset (retro terminal style)
- Reduced motion: disable scanline animations and blinking cursors
- Minimum font size 0.75rem
### ✍️ Writing Tone
- Retro-computing vernacular — "LOADING...", "EXECUTE", "READ MORE >"
- Terse, terminal-like microcopy
- Labels in uppercase monospace; use angle brackets for actions: <SUBMIT>
## Do / Don't
### ✅ Do
- Apply dither-pattern textures to backgrounds, image treatments, and hover states
- Use 1-bit image treatments — convert photos to dithered B&W using Bayer or Floyd-Steinberg patterns
- Maintain pixel-perfect alignment to an 8px grid
- Add scanline overlays (CSS repeating-linear-gradient) for CRT authenticity
- Use ASCII art or pixel-art icons as decorative elements
### ❌ Don't
- Use anti-aliased fonts — monospace pixel fonts only
- Apply border-radius anywhere — everything is sharp-cornered
- Add gradients — dither patterns replace smooth transitions
- Use shadows — depth comes from dither density, not elevation
- Mix in modern design tropes (glassmorphism, soft shadows, rounded corners)
## Quality Gates
- All element dimensions are multiples of 8px
- No border-radius used anywhere on the page
- At least one dither-pattern texture applied (background, image, or hover)
- All text passes 4.5:1 contrast
- Page respects prefers-reduced-motion (disable scanlines and blinks)
- No anti-aliased fonts — all fonts are pixel/monospace family