Design System · Fintech
GEM Design System
One set of parts for every chart, table, and page.
GEM’s investor portal presents allocation, risk, liquidity, and private credit data across many views. To keep them consistent, I defined a shared system alongside the product design.
It rests on a restrained palette built around GEM’s deep green, a Roboto type scale sized for dense financial tables, and reusable components: KPI tiles, tabs and filters, data tables, and chart cards. Every piece shown here is taken from the shipped portal screens.
Color
- #173530 Primary. Headers and text
- #4B7D47 Accent text and indicators
- #75A570 Primary data series
- #C8DBC6 Total rows, group headers
- #E3EDE2 Selected state, chart fill
- #C4BD97 Secondary accent
- #6D6E71 Neutral data series
- #F2F2F2 Row striping
Typography
- $122,384,476 Key figures · Roboto Bold 35
- Relationship Summary Section titles · Roboto Bold 18
- Annualized Performance Table headers · Roboto Bold 15
- Endowment Fund (est.) $18,357,671 Body and table cells · Roboto Regular 15
- All figures are shown as of 03/20/2025. Captions · Roboto Regular 12
Page titles are set in Noe Display Bold 24.
Original design files
GEM · Design system
Components cropped from the shipped portal screens, with two full pages for context.
