Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Pixel & Bitmap

Visible pixel grids, limited colors, and compact windows make digital constraints the visual language.

Bit Garden3 items
plants / collection
16 × 16 px

A small collection of growing things.

Collection cardBit Garden
Specimen 001

Fern

Forest floor

Soft light. Keep the soil damp.

How it works

Color

PaperInkSageGreenGold

Typography

Courier New
Arial
Characteristics

Visible grid

Every icon is drawn from whole cells in a fixed matrix.

Limited palette

A small shared palette keeps unrelated objects visually coherent.

Window structure

Title bars, file lists, and status areas give the composition a familiar hierarchy.

Crisp scaling

Scale artwork by whole multiples where possible; keep long text in a readable font.

Use it

Figma
Pixel file browser
  1. Create a 16 by 16 grid and draw one icon using filled cells.
  2. Duplicate the grid for related icons; preserve the palette and baseline.
  3. Scale the icon in whole multiples and place it in a plain framed window.
  4. Add a selected row, clear focus state, and live detail area.
Starting points
  1. Draw a small icon on a fixed grid using a handful of colors.
  2. Build a window around one real task, such as choosing a file.
  3. Keep text selectable, controls keyboard-accessible, and focus visible.
Research notes & sources

A current gap with a clear historical foundation. MoMA’s Susan Kare sketchbook documents icons planned on graph paper for early Macintosh interfaces. Canva’s 2026 forecast reports interest in retro-tech and early-computing aesthetics; this is platform-specific evidence, not a measure of the entire industry. Pixel & Bitmap is our narrower library category for visible grids and constrained icon drawing. It differs from Retro-Futurism’s imagined futures and Skeuomorphism’s simulated physical materials.

1980s roots; contemporary retro-computing revival

Early computer interfaces and low-resolution graphics

Bitmap displays, interface icons, games

Pixel art, Bitmap graphics, Retro computing, Lo-fi UI

Related styles

  • Retro-FuturismDigital memory instead of a speculative future.
  • SkeuomorphismA visible pixel grid rather than a simulated physical material.
  1. Susan Kare. Apple Macintosh OS icon sketchbook. 1982The Museum of Modern Art
  2. The visual design trends set to define 2026Canva