Design system — maintenance and expansion log
Two systems, two different skills. At Aurascape I maintain and extend the design system under the main platform — taking the Untitled UI base and growing its components to carry the product. At Aswaat I founded one from zero: tokens, components, and documentation, built alone.
Extending the Library
The work isn't drawing components from scratch — it's extending the Untitled UI base with the properties and states a real product needs. Take the dropdown. The base ships a plain menu — text and a leading icon:
The base — text and a leading icon.
Extended, that same component becomes a configurable surface. Tap the field to open it, then flip any property to reshape the list live:
Tap the field, then flip any property.
- One list item, twelve live content slots — checkbox, leading icon, status dot, Info badge, logo badge, supporting text, count, Label tag, trailing icon — plus menu-level search, header, and subheader.
- And a full row state set — default, hover, focus, selected, disabled — where the Untitled UI base shipped a single default.
From Zero — The Aswaat System
The other side of the skill: founding a system with nobody to hand it to you — tokens, components, and documentation for a mobile Mushaf app, built alone and configured in Figma to scale past v1.
Rather than screenshot the rest, the pieces below are rendered live from the system's own variables — the semantic color tokens and the Inter type ramp every component inherits:
Brand
Surface
Text
Grey ramp
Those tokens resolve into components. Here is Sidecar, the Qari and Riwaayah selector, rebuilt from the same values — a genuinely hard bit of domain modelling: a qari can carry several riwaayaat, one is the fixed base, and you compare the rest against it, all inside one dark, space-constrained panel.
- Selected qaris carry primary-600 and expand in place, so you can open several at once and compare across them.
- Riwaayaat nest under their qari on a connector line. Hafs is the fixed base layer every reading overlays — its checkbox is locked, which is what Reset to Hafs returns you to.
- Checkbox states carry the meaning: locked base, selected reading, and unselected option — with a colored right-edge accent on the selected riwaayaat.