A production-ready architecture for accessible enterprise products, connecting semantic variables, reusable components, and responsive patterns across iOS, Android, iPad, and desktop web.
Internal Design System · source-of-truth Figma library
49 pages · 2,738 components · 2,010 variables
Version
v1.0
Owner
Vamshi Vanaparthi
Platforms
iOS · Android · iPad · Web
Responsive modes
320px · 672px · Wide · Narrow
Accessibility
WCAG 2.2 AA
System inventory
The file brings foundations, components, and responsive behavior into one governed system, ready for designers to compose and engineers to map into production.
A semantic foundation that separates intent from raw values, allowing product teams to update themes without rebuilding components.
2,010 variables
Reusable, variant-driven patterns for everyday workflows, from simple controls to complex enterprise data interactions.
2,738 components
Breakpoint and grid-mode logic that preserves hierarchy, density, and usability as an experience moves between device classes.
4 platform contexts
Architecture
Tokens separate color values from usage so a single palette can serve light and dark surfaces without duplicating components. Roles describe what a color means, not what it is.
Semantic roles: light theme
text / primary
#1D2021
text / secondary
#434B4F
link / inverse
#78A9FF
button / primary
#0F62FE
button / secondary · hover
#F5F9FB
overlay / background
#FFFFFF
Semantic roles: dark theme
text / primary
Foundation · text · strong
surface / canvas
Foundation · surface · base
button / secondary
Action · secondary · default
link / inverse
Action · link · inverse
Review request
Ready for approval
Color foundations
The Colors collection holds 95 published values across neutral and expressive families. Each step carries a documented hover pair where interaction requires one, so states never get improvised.
Neutral surfaces, text, borders
Secondary neutral theme
Alternate neutral theme
Primary action, links, focus
Informational states
Supporting accent
Success and positive status
Caution and low-severity alerts
Warning states
Error, destructive, danger
Data visualization accent
AI and intelligence surfaces
Absolute values and overlays
How the palette is consumed by components.
65 values shown · Colors collection · single “Value” mode
Cross-platform system
Shared foundations stay recognizable while layout, density, navigation, and interaction patterns respond to each platform’s conventions.
Actions · interaction states
Primary icon buttons documented across default, hover, pressed, focused, and disabled states.
Controls · complete state matrix
Checkboxes, radio buttons, and switches shown across selection, focus, disabled, and compact variants.
Fields · validation states
Text fields with optional leading icons across default, hover, focus, error, and disabled states.
Download the complete Figma library to explore its variables, components, responsive patterns, and documentation. Need help adapting it to your brand or product? Let’s work together.