Frontend & UI
design-skills · Dithered
Dot-pattern shading and a limited palette for retro, high-contrast screens.
What it is
A guideline skill for dithered interfaces that use dot patterns to simulate shades from a limited palette. Open Sans body, Space Grotesk display, IBM Plex Mono, blue and violet accents.
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Why it matters for design
- Dot patterns replace gradients, so shading survives a deliberately restricted color set.
- High-contrast rendering keeps text legible even when surfaces carry heavy pattern texture.
- Rules ban decorative motion, stopping the retro treatment from becoming visual noise.
What it covers
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Required output structure
- Quality gates
How to install
design-skills · Dithered
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/dithered/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Tell Codex the palette limit first, then let it derive pattern-based shading rules.
-
Ask for empty, loading, and error states so patterned surfaces stay readable.
-
Verify hit areas and focus states, which this skill calls out explicitly.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.