Skip to content
Arwa Manzoor Arwa Manzoor Dubai, UAE
Back to home

Case studyDesign systems

One system. Every product, every screen.

The Xymbia design system: tokens, components and documentation shared across products, from phone to large screen, in light and dark. This page is the system itself, so every control below runs on values measured from the Figma file.

Illustration: a designer and a developer at a bright desk compare the same component on their screens.
My role
Design System Lead
Where it's used
Across Xymbia's products, on web and mobile
My part
  • Design tokens
  • Component library
  • Interaction patterns
  • Documentation
The playground

Move the tokens, and watch real components recompose.

This isn't a picture of the design system. The context palettes, screen tiers, radius, spacing, elevation and control height were all read out of the Figma file. Change one, and the screen and every component below rebuild against it.

Context Work
Real. The file's Readme: "Context styles are controlled via default, work, life, and play appearance settings."
Breakpoint HD
1600×1200 – 1920×1080 · 12 col · 64 gutter
Radius Pill
Measured from the file: most components use the full pill.
Spacing step 12px
Measured padding steps: 4 · 8 · 12 · 16.
Elevation Level 2
Each level is two shadows — 20% down-right, 10% up-left.
Appearance Light
Overlay
Show the tokens
Xymbia · Work context · HD 48px controls · pill radius
This week

Availability

72%
of the team has set hours this week

Collaborators

AM
MH
WC
+9
12 people across 3 workspaces

Up next

Design system reviewConfirmed
Component audit — buttonsIn review
Handover notesOverdue
Next case studyAgriculture CGIAR AI Hub

Science programs, turned into products worth building.

Read case study
← Back to all work