PolymathLeonardo da Vinci
Data display
Showing information: tables, metrics, lists, and the small pieces that label them.
Table
A grid of rows and columns with a sortable header. Use it to compare structured records side by side.
| Name | Discipline | Era | Status |
|---|---|---|---|
| Leonardo da Vinci | Polymath | 1452-1519 | Active |
 Nikola Tesla | Inventor | 1856-1943 | In review |
 Albert Einstein | Physicist | 1879-1955 | Active |
 Isaac Newton | Physicist | 1643-1727 | Archived |
Metrics
A tile showing one number and its change. Use it to headline a key metric on a dashboard.
Components
40
+22 this week
Weekly downloads
1,240
+18%
Test coverage
92%
-3%
Contributors
8
+2
Static data
A read-only list of labels and values. Use it to show details that cannot be edited.
NameLeonardo da Vinci
DisciplinePolymath
BornVinci, Italy
Years1452 - 1519
Row
A list item with an avatar, title, subtitle, and trailing action. Use it to build scannable lists.
Isaac Newton
Physicist · Principia Mathematica
Editor
Galileo Galilei
Astronomer · Sidereus Nuncius
Owner
Badge
A small status label in the semantic colors. Use it to mark state like active, pending, or failed.
Soft
Primary
Success
Warning
Error
Neutral
Solid
Primary
Success
Warning
Error
Chips
A compact, removable tag. Use it for selections, filters, and entered values.
Renaissance
Physics
Invention
Avatar
A round portrait for a person or entity. Use it to show who owns or authored something.
Sizes
Square
Active ring
Group
+5
+5
Card
A container that groups related content and media. Use it to present an item as a self-contained unit.
PhysicistAlbert Einstein
PhysicistIsaac Newton
InventorNikola Tesla
Kanban board
Columns of cards organized by status. Use it to track work as it moves through a pipeline.
To do 2
Audit color contrast across the dark theme
SAV-142
Write the token migration guide
SAV-136
In progress 1
Custom select keyboard navigation
SAV-148
Done 1
Animated progress bar
SAV-131
Feed post
A single social timeline entry with author and engagement actions. Use it to build a feed.
Albert Einstein@relativity · 2h
Design systems are like physics. The rules must be consistent across every frame of reference, or the whole model falls apart.
1841.2K9.4K240K
Scrollbar
A styled track and thumb for overflowing content. Use it to keep scrolling on-brand.
Savant uses a token layer as the single source of truth. Change a value once and it flows through every component.
The neutral scale is dark-first, from a mid grey at 100 down to near-black at 900, so every surface sits on the same ground.
Purple leads as the primary. Teal carries the secondary accent, and green, amber, and red carry status.
Scroll to see the styled track and thumb, drawn from the same greys as the rest of the system.