Wallet Tool Design SystemLegacy format
An internal admin dashboard for Bitkub's wallet operations. Built on Material UI v7 + Tailwind CSS with full light/dark theme support. The aesthetic is professional and data-dense — optimised for operators who live in tables, dialogs, and forms all day.
Color Palette
Primary
Neutral
Sky (Brand Blue)
Green (Success)
Red (Danger)
Orange (Warning)
Yellow
Purple
Deep Purple
Teal (Blue-Green)
Mint
Blue
Indigo
Custom (Sidebar/Nav)
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxAn internal admin dashboard for Bitkub's wallet operations. Built on Material UI v7 + Tailwind CSS with full light/dark theme support. The aesthetic is professional and data-dense — optimised for operators who live in tables, dialogs, and forms all day.
Components
Buttons
Elevation & Depth
Brand
Product: Wallet Tool (Bitkub internal admin)
Brand color: #009EF6 (light) / #3699FF (dark)
Font: Inter, Helvetica, sans-serif
Logo: Bitkub animated logo (Lottie)
---
Buttons
Seven semantic button variants:
| Variant | Background | Text Color | Border |
|---|---|---|---|
| PRIMARY | #009EF6 | #FFFFFF | none |
| SECONDARY | #F5F8FA | #5E6278 | none |
| SECONDARY_BACK_STEP | #E4E6EF | #181C32 | none |
| DANGER | #F1416C | #FFFFFF | none |
| SUCCESS | #50CD89 | #FFFFFF | none |
| OUTLINE_PRIMARY | #FFFFFF | #009EF6 | 1px solid #009EF6 |
| OUTLINE_DANGER | #FFF5F8 | #F1416C | 1px solid #F1416C |
Hover states darken: DANGER → #902740, SUCCESS → #2E855E
---
Component Library
42 shared UI components in src/components/:
Inputs & Forms
• Input, TextField, Select, SelectMultiple, Autocomplete
• Checkbox, Radio, BooleanRadioGroup, ToggleSwitch
• CustomDatePicker, CustomDatePickerRange, DatePicker, CustomTimePicker
• WalletToolImageInput
Feedback & Overlay
• Alert, Snackbar, DialogAlert
• BlockerDialog, RetryDialog, GlobalDialog, LoadingOverlay
• BitkubLoading (Lottie animated)
Navigation & Layout
• Tabs, SelectTab, FormStep
• Card, SelectionCard
Data Display
• TableColumnName, TableNoData, TableSortIcon
• CodeBlock, CustomTimeline, CustomPagination
Controls
• Button, ButtonMenu, MenuItem
• DropdownFilter, DropdownImage
• ParallexParticles, Question
Value Display
• BooleanValue, BooleanValue2
---
Feature Modules
22 domain modules in src/modules/:
• accessControlManagement
• activityLog
• airdrop
• appConfigs
• assetTransfer
• auth
• blacklistWallet
• coinConfig
• coinDetail
• coinListing
• coinRecovery
• data
• diffConfig
• errors
• feeAdjustment
• listingTool
• network
• preFundMonitoring
• requestTicket
• specialBlacklist
• transactionManagement
• withdrawBucketManagement
---
Data Table Styles
Two table density modes:
Default Table
• Head background: #F5F8FA
• Head text: #A1A5B7
• Cell padding: 16px
• Row hover: subtle overlay, 0.15s transition
Dense Table
• Same palette, cell padding: 8px
• Used for high-density data grids
---
Global Styles
• Font smoothing: antialiased
• Custom scrollbar: hidden on .no-scrollbar
• Tailwind directives: @tailwind base / components / utilities
• react-datepicker styles imported globally
---
Tech Stack
| Layer | Tech |
|---|---|
| Framework | Next.js 16 (Pages Router) |
| UI library | Material UI v7 |
| Utility CSS | Tailwind CSS |
| CSS-in-JS | Emotion |
| Module CSS | SCSS Modules |
| State | Redux Toolkit + Redux Saga |
| Data fetching | React Query (TanStack) |
| Forms | React Hook Form + Yup |
| Crypto math | decimal.js / mathjs |
| Date | dayjs (Asia/Bangkok TZ) |
| Auth | next-auth v4 (Okta) |
Use with MCP
Don't have the MCP? Install it here