Nonet Design System
A logic-first, accessibility-driven design system engineered for scale, governance, and long-term product integrity.
System Overview
Nonet was created to address fragmentation across design and engineering teams—where inconsistent UI decisions, inaccessible patterns, and undocumented component logic led to rework and growing technical debt.
- System Type: Figma-based Design System & Component Library
- Scope: Foundations, accessibility tokens, components, interaction states, theming, and governance
- Primary Objective: Create a single, inclusive source of truth that scales safely across teams
- My Role: Senior Product Designer leading system architecture, accessibility strategy, and governance model
Design System Maturity Model
A three-stage strategic roadmap moving from atomic styles to a fully governed product ecosystem.
Phase 01
Foundations
Establishing the "DNA" of the system through technical specifications and inclusive standards.
- Design Tokens: Primitive & Semantic variables.
- Accessibility DNA: WCAG 2.2 contrast defaults.
- Atomic Logic: Grid and typographic scales.
Phase 02
Scale
Expanding into high-logic component libraries that automate consistency across products.
- Modular Components: Patterns with built-in logic.
- Prototyping Logic: Advanced Figma variables.
- Handoff Sync: ARIA and CSS role alignment.
Phase 03
Governance
Managing the system lifecycle through documentation and strict quality control.
- Compliance: Ongoing WCAG 2.2 AA audits.
- Contribution: Defined component request paths.
- Integrity: Strict versioning to prevent drift.
Maturity Goal: Inclusive Integrity at Scale
Design System Maturity Model
Nonet was intentionally designed to mature over time. Each stage—Foundations, Scale, and Governance—builds on the previous one to ensure consistency, inclusivity, and long-term sustainability.
Foundations: Accessible by Default
Primitive Tokens
Raw, design-agnostic values defined as Figma Variables—color ramps and spacing units.
Semantic Tokens
Intent-driven mappings that translate primitives into roles like text and feedback states.
Component Tokens
Tokens bound to Figma components, enforcing accessibility at the instance level.
Foundations were designed with accessibility as a non-negotiable baseline. Inclusive design decisions were embedded directly into tokens, variables, and component logic.
- Three-tier token model: Primitive → Semantic → Component
- Color tokens pre-validated for WCAG AA contrast
- Typography tokens with minimum legibility thresholds
- Focus, hover, and error states defined as required—not optional
Nonet: Accessibility-First Design System
An isometric overview of the Nonet Design System, showcasing the brand identity that form the Elite Nine foundation.
A Figma-based design system that embeds accessibility, consistency, and governance into tokens and components—scaling inclusive design across products.
Centralized Variable Collections for primitives and aliases.
Interactive components with advanced prototyping logic.
Managing hover, press, and focus states via variables.
Scale: Inclusive Logic at System Level
As the system scaled, accessibility and usability logic scaled with it. Components were designed to behave predictably across themes, devices, and assistive technologies.
Logic-Driven Component Architecture
Rather than building endless visual variants, I consolidated UI patterns into high-logic components using Boolean toggles, Instance Swaps, and Text properties. While the architecture is designed to support future multi-mode theming (Light/Dark/High Contrast), the current implementation prioritizes enforcing business rules—such as mandatory icon-text ratios and error-state visibility—directly within the Figma property panel to prevent design drift.
Keyboard Navigation & Focus Order
Focus indicators and tab orders are baked into the component architecture. Every interaction is designed to be 100% navigable without a mouse, satisfying accessibility requirements.
Semantic Engineering
Variable and layer naming conventions are aligned with ARIA roles and HTML5 elements. This creates a shared language between design and engineering, reducing handoff friction.
Governance: Protecting Consistency, Accessibility, and Scale
Nonet enforces strict standards to ensure design decisions remain inclusive and scalable. Below is an overview of our governance logic and WCAG 2.2 compliance framework.
System Governance: What We Rejected
Rejected
Custom Feature Colors
Denied to prevent brand drift and ensure contrast ratios are never compromised by one-off decisions.
Rejected
One-off Variants
Denied in favor of extending logic-based components that inherit existing system properties.
Rejected
Draft Interactions
Undocumented states were rejected to avoid breaking predictable behavior for assistive tech.
WCAG 2.2 Compliance Framework
| Success Criterion | The Problem | System Solution |
|---|---|---|
| SC 3.3.7 Redundant Entry |
Repeated manual data entry causing user fatigue. | Auto-fill + persistent memory logic across sessions. |
| SC 2.5.8 Target Size |
Miss-taps due to crowded mobile interface. | Minimum 24x24px spacing logic for all interactive targets. |
| SC 3.3.1 Error ID |
Users missing critical validation feedback. | Inline validation paired with ARIA live regions. |
| SC 1.3.5 Input Purpose |
Autofill failure on critical forms. | Strict enforcement of HTML autocomplete attributes. |
*Note: This checklist represents a subset of the full WCAG 2.2 AA audit performed on the component library.
Design System Impact
- Accessibility: Inclusive patterns enforced at the system level.
- Consistency: Reduced drift across products.
- Efficiency: Faster delivery with fewer regressions.
Scroll Down