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



Light mode and dark mode variants for form inputs

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

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

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

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