Design systems · Figma

Aster: Building accessibility and behavior into the system

Aster is a design system built around semantic tokens, clear interaction states, and native Figma component properties. The goal is not a bigger component library. It is to make common design decisions repeatable, visible, and harder to misuse.

Domain: Design systems · Accessibility
Role: Solo product designer
Platform: Figma · UI system
Year: 2026
Scope: Foundations · Tokens · Components · States
Reading time: 4 min

30 Second Summary

OWNERSHIP

I defined the foundation rules, semantic color structure, typography and spacing scales, component anatomy, variant properties, interaction states, and applied component behavior.

CORE DECISION

Make intent, density, state, selection, and feedback explicit component properties instead of rebuilding styles by hand.

EVIDENCE

Two system boards and three native Figma recordings show foundations, component matrices, and property driven behavior.

LIMITATION

This portfolio project demonstrates system architecture and component behavior. It does not claim organization wide adoption, measured delivery speed, or production usage.

Foundations carry meaning, not just values.

Primitive values feed semantic collections, with separate light and dark semantics, a constrained type hierarchy, spacing scale, and radius system.

Aster Foundations board showing primitive and semantic color tokens, typography, spacing, and radius scales.

Variants should behave like a system, not a screenshot inventory.

Buttons, fields, selection controls, feedback, tabs, and selects expose explicit properties that affect meaning and behavior.

Aster Components board showing button, text field, selection, feedback, tab, and select component matrices.

The proof is in the properties panel.

Three native Figma recordings show property driven Button, Text Field, and Selection Controls behavior.

Accessibility is encoded as visible state logic.

Aster models focus visibility, semantic feedback, error, disabled, read only, selected, and indeterminate states as explicit component behavior. This is accessibility intent, not a claim of formal WCAG certification.

AI sped up repetitive construction. I made the system decisions.

AI helped with repetitive construction and variant generation. I defined the semantic architecture, component properties, accessibility requirements, content hierarchy, visual review, and final quality bar.