IndieCraft Design System

IndieCraft Design System mockup preview
Click to expand

IndieCraft is a pixel-art-inspired design system built for indie game studios and pixel-art game launchers. It channels chunky, 8-bit charm through bold greens, vivid purples, and warm yellows while maintaining modern usability. The system pairs the playful display font Righteous with the friendly body font Nunito to create interfaces that feel both retro and approachable.

Color Primary#22C55E
Color Secondary#A855F7
Color Tertiary#FACC15
Surface Base#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Righteous · 40px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Righteous · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Righteous · 24px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Righteous · 20px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyNunito · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallNunito · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsNunito · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

IndieCraft is a pixel-art-inspired design system built for indie game studios and pixel-art game launchers. It channels chunky, 8-bit charm through bold greens, vivid purples, and warm yellows while maintaining modern usability. The system pairs the playful display font Righteous with the friendly body font Nunito to create interfaces that feel both retro and approachable.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

filterstatus-successstatus-warningstatus-error

List Item

default

hover

active

Checkbox

unchecked

checked

Radio Button

unchecked

checked

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-green
shadow-purple

Do's & Don'ts

Do

Use the 8px grid strictly for all spacing and sizing to maintain pixel-aligned layouts.
Pair Righteous headlines with Nunito body copy for a retro-yet-readable contrast.
Use the green primary color for all primary CTAs and active states.
Reserve the tertiary yellow for badges, callouts, and non-critical highlights only.
Keep interactive elements at minimum 44px touch target for accessibility.
Use the purple secondary for accent elements like tags, progress bars, and secondary buttons.

Don't

Mix serif fonts into the system; the design relies on display and sans-serif pairing.
Use gradients; the pixel-art aesthetic demands flat, solid color fills.
Apply shadows to everything; use material elevation intentionally to create hierarchy.
Use thin font weights below 400; readability on chunky UIs requires medium or bold weights.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.5 KB
Downloads 0
bold clean gaming light playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/indiecraft and implement it in my code

Don't have the MCP? Install it here