Fog Design System

Project Overview

Context

I started Fog as a personal project to contribute to a more fun, more accessible, slightly-more-goth web. It’s an accessible design system that meets WCAG 2.0 standards (and keeps accessible development patterns in mind), and features two great open-source resources: Radix Colors and Apfel Grotezk.

Involvement

  • Product design
  • Design system

Date

In Progress

A cover image showing a dark, blurred, semi-transparent card with the title 'Fog Design System - Version 0.0.2' in big, bold letters. The card overlaps a bird's-eye photograph of the ocean waves on a beach.
A collage of light-mode UI elements, including a multi-select dropdown, a single-select dropdown with icon and description, and a card with title, image, tags, and buttons.
Examples of form elements in light mode and dark mode
Caption

Light mode and dark mode variants for form inputs

Dark mode UI elements with blurred, semi-transparent backgrounds overlaid on top of bright images of the ocean
Caption

Dark mode using “Fog” background on UI elements and tables

Figma component states for the dropdown component, showing different selection types for single select, checkboxes, and toggle buttons
Caption

Example dropdown component, with different variants for selection types and action bar

Figma components for slider inputs, loading elements, and other progress-related components
Caption

Progress-related components, including sliders, spinners, and progress bars

Figma component for a standard input, showing variants for amount and phone number inputs, as well as documenting input error states
Caption

Defining input groups, input field variants, and their error/disabled states