Open-source design system · CSS and React · 2026
Greda: a design system built to be used
I created a practical system that connects foundations, tokens, components, patterns, and implementation guidance for designers, developers, and software agents.
- Role
- Creator, Design System Designer, and Developer
- Release
- 2026
- Scope
- Foundations, design tokens, components, patterns, documentation, accessibility, and agent guidance
Overview
A shared foundation for interface work
Greda is an open design system for building precise, accessible interfaces without a required build step.
It provides reusable CSS foundations, semantic tokens, components, interaction states, responsive rules, and implementation guidance in one small system.
Problem
Product decisions were getting lost
Examples and component inventories were not enough to keep design and implementation aligned. Teams also needed a stable vocabulary, accessible behavior, and public tokens that could survive each handoff.
Work
Connect guidance directly to code
I defined the foundations, token model, component states, responsive behavior, accessibility rules, documentation, and versioned CSS delivery.
The same public rules are readable by designers, developers, and coding agents. This portfolio uses Greda as a real implementation, not as a separate demonstration.
Outcome
A compact system in active use
This portfolio is a live Greda use case. Its themes, navigation, controls, layout tokens, and accessibility behavior use the system.
Next project
Whale Igniter
Versioned project intelligence for coding agents.
Read next case study