0. Design Vision
The Dezzit Design System aims to produce a "Royal" user experience that feels solid, premium, and mathematically precise. Every pixel is accounted for, leveraging Tonal Elevation and a rigid rhythm to create a workspace that is as productive as it is beautiful.
Tactical Depth
Hierarchy is communicated through three primary surface layers rather than heavy drop shadows alone.
The Matte Rule
No physical scaling or bouncing. Precision is signaled through tonal transitions and border shifts.
The 12/8/4 Rule
Mathematical harmony via strict radius nesting:
(Parent 12px → Padding 4px → Child 8px).
Unified Objects
Related components are treated as a single tactile object inside a shared surface container.
1. Page Architecture
Layout Primitives
Standardized containers for consistent spacing and width guardrails.
3. Data Display
Royal Tables
Standardized row behavior for Bin and List views.
| Name | Status | Last Updated | Action |
|---|---|---|---|
| Q4 Strategy Doc | Active | 2h ago | |
| User Feedback Log | Draft | Yesterday |
DataList (CSS Grid)
Precision table alternative with flexible columns and ContextMenu integration.
Royal Cards
Used for grid-based overviews and board items.
Standard Card
Surface 2 with 12px radius.
Hoverable Card
Elevates to Surface 3 on hover.
Note Tints (V133)
8 specialized tints for quick categorization.
Specialized Resource Cards
Tailored structures for different data types.
Weekly Standup
- Finalize V133 release
- Update design docs
4. Unified Form System
3-tier architecture: Field wrapper → Label/Desc → Headless Control.
Enter your display name as it will appear to others.
Select the current state of the project.
5. UI Components
Button System
Square icon-only buttons for secondary actions.
BaseUI-powered checkbox with design system styling.
Status System
6. Interactive Popups
Context Awareness
Right-click interactions on realistic targets.
Dropdowns & Overlays
Type / to trigger the menu.
7. Feedback & Testing
Toast Notifications
Skeletons
Masonry Layout Pattern
Dynamic multi-column grid for varied content heights.
Global Orchestration
8. System Specifications
Sizing Scale (Rem-based)
Generic sizing tokens for heights, widths, and avatars.
Radius Scale (12/8/4 Rule)
Strict nesting logic: Parent (12px) → Padding (4px) → Child (8px).
Height Standards
9. World View
Design Philosophy
Tactical Depth
Uses tonal elevation (Surface 1-3) instead of heavy shadows.
The Matte Rule
No physical scaling or bouncing. High-end precision through tonal shifts.