SHILIAIWEI
Guideline Design DNA Skill
Color System Tokens (8 of 8)
The color layer of a design system — defining a closed palette that is purposeful, accessible, themeable, and expressed as tokens rather than raw values.
Emerald Primary
Main brand color, solid CTA buttons, active states, key interactive surfaces.
Emerald Dark
3D button depth extrusion, active press states, deep contrast typography.
Eager Green
High-energy CTA fills, progress badges, and energetic status accents.
Spark Blue
Interactive secondary links, outlined tactile buttons, curiosity tags.
Accent Cyan
Technical accent, release tags, code tokens, secondary focus chips.
Accent Crimson
High-priority alerts, hot badges, critical notification states.
Canvas White
Master crisp light canvas background and frosted glass surface foundation.
Slate-900 Typography
Master high-contrast text, solid borders, and slate accents (16.8:1 AAA contrast).
Core UI Elements Architecture
Radio
Single-choice selection control with checked, unchecked, and disabled states.
Searchbar
Dedicated query input with leading icon, clear action, and shortcut pill.
Tooltip
Contextual floating micro-label appearing on hover or keyboard focus.
Modal Overlay
Focused dialog overlay trapping focus with frosted backdrop scrim for critical workflows.
Apply 14 database schema migrations to production cluster?
Loading
Spinners, skeleton shimmer lines, and linear progress meters.
Toggle Switch
Instant binary switch for toggling settings, live alerts, or preferences.
Input Field
Single-line text input with label, placeholder, helper text, and error validation.
Code & Tag Chip
High-contrast monospace code tokens, semantic status labels, and key badges.
Table
Structured relational data presentation with headers, status chips, and actions.
| Module | Status | Latency |
|---|---|---|
| POS Sync | Active | 18ms |
| Auth API | Ready | 24ms |
Card Container
Liquid glass content container with 16px blur, specular edge, and internal padding.
High-availability relational database cluster with zero-loss ACID replication and automatic failover.
Button
Primary CTA, Shiliaiwei tactile sticker, spark ghost outline, and glass buttons.
Badge
Compact status pill with color semantics, dot indicators, and count numbers.
Avatar & Identity
User photo, initials fallback, active status dot, and stacked team group.
Dropdown Menu
Floating selection panel with menu items, separators, icons, and shortcuts.
Web App Architecture & Application Suite
Production-ready interactive flows for authentication, 2FA security, billing, management, and workspace collaboration.
Two-Factor Authentication (2FA)
Enter the 6-digit verification code generated by your Authenticator app (Google Authenticator, Authy, or 1Password).
JBSWY3DPEHPK3PXP
Admin Panel & User Management
Manage organization members, assign RBAC access roles, and invite collaborators.
| Member | Role | 2FA Status | Actions |
|---|---|---|---|
| shiliaiwei@dev.kh | OWNER | ENABLED | |
| admin.chan@vibrand.dev | ADMIN | ENABLED | |
| developer.guest@org.io | MEMBER | PENDING |
Billing & Subscription Tiers
Manage your organization subscription plan, payment methods, and invoice history.
Pro Tier
Unlimited edge deployments, custom domains, and automated 2FA enforcement.
Enterprise
Dedicated worker clusters, 99.99% SLA, and custom SSO integration.
API Keys & Security Audit Log
Generate secret tokens for programmatic API access and review real-time security events.
sk_live_vibrand_89f4b23190e4
Recent Security Events
| Event | Actor IP | Status | Timestamp |
|---|---|---|---|
| 2FA_VERIFY_SUCCESS | 192.168.1.14 |
SUCCESS | Just now |
| API_KEY_CREATED | 10.0.4.88 |
CREATED | 5 mins ago |
| CONFIG_PURGE_CACHE | 172.16.0.5 |
PURGED | 1 hour ago |
Kanban Board & Sprint Timeline
Track sprint roadmap milestones and deliver design tokens with 0 latency.
Live Chat & Team Discussion
Real-time channel messaging for team review and instant coordination.
Multi-Step Onboarding Wizard
Guided multi-stage registration with validation and automated setup.
Analytics & Help Center
Real-time traffic health metrics, search checklists, and common FAQs.