jdsadminllc 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:
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