SPE Nova – MAMS Design SystemLegacy format

> Auto-generated from Figma master components · File: `e6FOouf5aJEr2xSRIl8VZ5`

Do's & Don'ts

Do

Use Button - Solid for main CTA with 'Primary' variant for most important actions.
Pair Input Field with _Label and _Caption for consistent form elements.
Use Stepper-Horizontal for flows with ≤5 steps and Stepper-Vertical for wizard-style forms.

Don't

Use 'Ghost' variant for destructive actions unless paired with visual warnings.
Place more than 6 items in Tabs containers without user testing.
Combine DataTable/RowActionsCell with multiple actions exceeding 3 without using the More variant.
Component Index

| # | Component | Type | Variants |

|---|-----------|------|----------|

| 1 | Button - Solid | Component Set | 200 |

| 2 | Button - Outline | Component Set | — |

| 3 | Input Field | Component Set | 15 |

| 4 | Select | Component Set | 15 |

| 5 | RichText | Component Set | 4 |

| 6 | TextControl | Component Set | 3 |

| 7 | Upload File | Component Set | 4 |

| 8 | Date Picker | Component Set | 6 |

| 9 | Chips | Component Set | 20 |

| 10 | Chips-Outline | Component Set | 20 |

| 11 | Chips-Topic | Component Set | 20 |

| 12 | Tab | Component Set | 2 |

| 13 | @Tabs | Component Set | 5 |

| 14 | Tab-2 | Component Set | 3 |

| 15 | @Filter Tabs | Component Set | 2 |

| 16 | Snackbar | Component Set | 5 |

| 17 | Spinner | Component Set | 3 |

| 18 | Progress Bar | Component Set | 5 |

| 19 | Notification Badge | Component Set | 3 |

| 20 | Counter Label | Component Set | 2 |

| 21 | Avatar | Component Set | 16 |

| 22 | AvatarStack | Component Set | 4 |

| 23 | AvatarPair | Component Set | 2 |

| 24 | TooltipPopover | Component Set | 8 |

| 25 | Link | Component Set | 8 |

| 26 | Breadcrumbs | Component Set | 5 |

| 27 | Pagination | Component Set | 2 |

| 28 | MenuExpand | Component Set | 8 |

| 29 | MenuCollapse | Component Set | 8 |

| 30 | DataTable/ColumnHeaderCell | Component Set | 8 |

| 31 | DataTable/TextCell | Component Set | 15 |

| 32 | DataTable/RowActionsCell | Component Set | 4 |

| 33 | Stepper-Horizontal | Component Set | 3 |

| 34 | Stepper-Vertical | Component Set | 3 |

| 35 | Matrics | Component Set | 2 |

| 36 | Modal | Component | — |

---
Download .md
mrizkiasptr mrizkiasptr @mrizkiasptr
License MIT
Uploaded 6 days ago
Version v1
File size 12.0 KB
Downloads 10
Copies 2
accessible component-library responsive saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/mrizkiasptr/spe-nova-mams-design-system and implement it in my code

Don't have the MCP? Install it here