Joymify Design System
Enterprise multi-platform design tokens specification and production component library built for Quant, JoyCoach, AssetStudio, and JoyQuest.
@joymify/tokens
W3C DTCG tokens with OpenDesign posture integration, GPU spring motion curves, and hairline borders.
@joymify/svelte
Zero-overhead Runes ($state, $props, $derived, $bindable) engineered for real-time order books and high-FPS canvases.
@joymify/react
Strict WAI-ARIA accessible React 19 component library with forwardRef support and zero runtime CSS overhead.
Modern & Utility
Unified Linear/Vercel modern-minimal and Datadog/GitHub tech-utility postures with frosted surfaces & hairline borders.
Design Tokens & Motion Engine
Central source of truth defined in DTCG JSON format, compiled for CSS Variables and Tailwind v4.
Motion & Easing Tokens
| Token Name | CSS Custom Property | Value | Description |
|---|---|---|---|
motion.duration.fast |
--joy-motion-duration-fast |
150ms |
Micro-interactions, button hovers, badge transitions |
motion.duration.normal |
--joy-motion-duration-normal |
250ms |
Dropdown expands, modal pop, drawer slides |
motion.easing.spring |
--joy-motion-easing-spring |
cubic-bezier(0.175, 0.885, 0.32, 1.275) |
Natural organic bounce effect for popovers & dialogs |
Core Brand & Surface Palette
| Token Name | CSS Custom Property | Preview | Value |
|---|---|---|---|
color.brand.primary |
--joy-color-brand-primary |
Primary | #7c3aed |
color.brand.primary-hover |
--joy-color-brand-primary-hover |
Hover | #6d28d9 |
color.status.success |
--joy-color-status-success |
Success | #10b981 |
color.status.danger |
--joy-color-status-danger |
Danger | #ef4444 |
Component Props & API Specification
Complete cross-framework contract specification for all 18 Joymify components across Svelte 5 Runes and React 19 forwardRef.
<Button> Specification
Action Primitive| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'outline' | 'ghost' | 'danger' | 'solid' | Visual hierarchy styling |
| size | 'sm' | 'md' | 'lg' | 'md' | Padding and font size scale |
| disabled | boolean | false | Disables button click and reduces opacity |
| loading | boolean | false | Replaces icon/text with animated loading spinner |
| onclick / onClick | () => void | undefined | Click event handler |
<Table> & Financial Trading Specification
Quant High-Throughput| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Column<T>[] | required | Column definitions ({ key, title, width, sortable, align }) |
| data | T[] | required | Array of tabular row objects |
| density | 'compact' | 'normal' | 'compact' | Spacing density optimized for order books vs general tables |
| sortKey | string | '' | Currently sorted column key |
| sortDirection | 'asc' | 'desc' | 'asc' | Sort direction indicator |
| onsort / onSort | (key, dir) => void | undefined | Callback when a sortable column header is clicked |
<Select>, <Checkbox> & <RadioGroup> Specification
Accessible Form Suite| Component | Key Props | Types | Accessibility Traits |
|---|---|---|---|
| <Select> | options, value, placeholder, disabled | SelectOption[], string | Native select keyboard navigation, styled caret |
| <Checkbox> | checked, label, disabled | boolean, ReactNode / Snippet | role="checkbox", aria-checked, keyboard focus ring |
| <RadioGroup> | name, value, options, direction | string, RadioOption[], 'horizontal' | 'vertical' | role="radiogroup", aria-orientation, arrow key selection |
<Modal>, <Drawer> & <Toast> Specification
Enterprise Overlays| Component | Key Props | Types | Keyboard & Motion Traits |
|---|---|---|---|
| <Modal> | open, title, onclose / onClose | boolean, string, () => void | role="dialog", Escape key to close, backdrop dismiss, spring pop |
| <Drawer> | open, title, placement, onclose | boolean, 'left' | 'right', () => void | role="dialog", Escape key to close, side sheet slide animation |
| <Toast> | open, variant, message, onclose | boolean, 'info' | 'success' | 'warning' | 'danger' | role="status", aria-live="polite", automatic decay |
<Pagination> & <Skeleton> Specification
Navigation & Feedbacks| Component | Key Props | Types | Purpose |
|---|---|---|---|
| <Pagination> | current, pageSize, total, showSizeChanger | number, number, number, boolean | role="navigation", aria-current="page", trade ledger slicing |
| <Skeleton> | variant, width, height, lines | 'text' | 'rect' | 'circle', string, number | role="progressbar", aria-busy="true", GPU shimmer placeholder |
Badge & Status Tag
Visual status indicator with optional indicator dot and semantic status palettes.
Live Interactive Canvas
Input Field
Form text field with error styling, clear outlines, and native keyboard navigation.
Interactive Form Input
| Error State |
Normal (No Error)
|
Switch Component
Accessible toggle switch with keyboard support and custom label positioning.
Interactive Toggle
Alert Component
Contextual notification banners for messaging, validation, and system status.
Alert Variations
MetricTile Component (Quant)
High-density KPI metric display engineered for live trading dashboards and performance cards.
KPI Tiles
Compact Data Table
High-frequency compact tabular data layout optimized for financial transactions and audit logs.
Execution Ledger
| ORDER ID | ASSET | SIDE | PRICE | SIZE | STATUS |
|---|---|---|---|---|---|
#ORD-8921 |
BTC/USDT | BUY | $67,820.50 | 0.45 BTC | FILLED |
#ORD-8922 |
ETH/USDT | SELL | $3,510.20 | 4.20 ETH | FILLED |
Modal / Dialog Component
Accessible modal dialog overlay with backdrop blur, focus trap, and escape key listener.
Interactive Dialog Trigger
Code Usage
<Modal open={isOpen} title="Confirm Order" onclose={() => isOpen = false}>
Are you sure you want to proceed?
</Modal>
Dropdown Menu Component
Action menu with keyboard navigation, danger items, and animated spring popover.
Interactive Dropdown
Tabs Layout Component
Smooth tabbed navigation supporting controlled and uncontrolled active state transitions.
Interactive Tabs
Showing 3 active live limit orders awaiting counter-party match.
Tooltip Overlay Component
Informational micro-popover triggered on hover and keyboard focus with arrow pointer.
Interactive Tooltips
Select Dropdown Component
Accessible single-selection dropdown with custom styled caret and native keyboard accessibility.
Order Execution Routing
Checkbox Control
High-contrast binary state control with custom checkmark vector and keyboard focus outline.
Execution Constraints
Radio Group Component
Accessible single-choice selection group with WAI-ARIA radiogroup traits.
Time In Force (TIF)
Drawer / Slide-out Sheet
Heavyweight off-canvas inspection panel for deep financial telemetry, analytics, and detail workflows.
Drawer Placement Triggers
Toast Notification System
Non-blocking live notification system for market fills, margin calls, and system events.
Trigger Notification
Enterprise Financial Orderbook & Trading Table
High-throughput sortable market tape with real-time green/red ticker flash animations and client-side filtering.
Live Quant Market Feeds
| Pair | Price (USDT) | 24h Change | 24h Vol (USDT) | Execution Status |
|---|
Pagination Controls
Accessible ARIA navigation bar with quick page stepping, custom page sizes, and total count metadata.
Trade Ledger Pagination
Skeleton Loading States
High-performance GPU gradient shimmer placeholders preventing layout shift during async order book fetches.