grid_view Admin Design System Showcase

1. Colors

High-contrast interface with single brand accent.

Brand & Semantic

Primary (#FDDB00)

Key actions and highlights

Success (#008442)

Completed state, positive trend

Error (#F13131)

Destructive actions, failed state

Neutral Scale

Grey 100
Grey 150
Grey 300
Grey 600
Black

2. Typography

Pretendard for UI copy and numeric data.

Typography.Hero-Display (64px/700)

Hero Title

Typography.Number-Display (40px/700)

1,240,500.00

Typography.Body-MD (14px/400)

Keep body text compact to support information density. Separation comes from surfaces, borders, and type contrast.

3. Components

Standardized interactive elements and status indicators.

Buttons (rounded.md 6px)

Status Chips (rounded.sm 4px)

check_circle SUCCESS error ERROR info INFO

4. Layout & Data

Operational dashboard density and structured spacing.

Total Revenue

payments

$124,000

trending_up +14.2%

Network Traffic

System Activity

more_horiz
Timestamp Action Status Node
2026-05-04 02:40 Database Backup OK us-east-1
2026-05-04 02:35 User Login INFO eu-west-2