Internal Tool
Design System Overview
A rendering of all current UI tokens, components, and styles for consistency checks.
1. Typography
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body & Text
Body Default: The quick brown fox jumps over the lazy dog. shelf_v2 is designed for clarity and speed. Asset management requires precise data entry and clear legibility.
Muted Text: Used for secondary information, descriptions, and metadata. It should recede visually but remain legible.
Small Medium Text
Small Muted Text
2. Colors & Semantic Tokens
Background
bg-background
Foreground
bg-foreground
Card
bg-card
Muted
bg-muted
Primary
bg-primary
Secondary
bg-secondary
Destructive
bg-destructive
Border
border-border
4. Badges
Default
Secondary
Outline
Destructive
Custom Color
5. Cards
Simple Card
Just the basics.
This is standard card content. It sits inside a contained block.
With Footer
New
Card with actions.
Useful for dashboard widgets or pricing tiers.
Hoverable
Interactive state.
Clicking this entire card could trigger an action or navigation.
6. Tables
| Asset Tag | Category | Status | Value |
|---|---|---|---|
| AST-001 | Electronics | Available | $1,200 |
| AST-002 | Furniture | In Use | $450 |
| AST-003 | IT Equipment | Maintenance | $2,100 |
7. Icons & Tooltips
Default
Primary
Muted
Tooltip