01 — CSS Variables
Core Application Design Tokens
All software projects built under Vylex must include these CSS custom properties in the root style file:
/* Vylex Product UI CSS Variables */
:root {
--navy: #051B38; /* Primary dark surface & app background */
--orange: #FBA919; /* Accent & primary active elements */
--lnavy: #0A2E5C; /* Secondary dark surface / hover states */
--slate: #E2E8F0; /* Input outlines & table borders */
--sdark: #64748B; /* Muted secondary body text */
--green: #10B981; /* Success badges & online status */
--red: #EF4444; /* Error states & destructive actions */
--r: 18px; /* Standard card border-radius */
}
02 — UI Library
Standard Application Components
1. Button System
2. Status Badges
System Live
In Progress
Draft
Build Failed
Beta v2.4
3. Application Alerts
Scheduled Maintenance: Server maintenance scheduled for Sunday at 02:00 SAST.
Deployment Complete: Software build #4092 is live on AWS SA-East.
Quota Warning: API consumption reached 85% of monthly allocation.
Connection Timeout: Failed to communicate with payment gateway endpoint.
4. Form Inputs & Validation
Must begin with https://
03 — Motion System
Transitions & Micro-Animations
All transitions must feel crisp, intentional, and performant. Never use bouncy or distracting animations in production software tools.
Default State Change
200ms ease
Button hovers, toggle switches, link highlights.
Modal / Drawer Enter
300ms ease-out
Slide-over panels and modal dialog appearances.
Dismiss / Exit
150ms ease-in
Closing notifications, removing rows.
Card Lift Interaction
translateY(-4px)
Interactive dashboard metric card hover.