Clean. Neutral. Reusable. Design-system ready.
Generalized UI / UX Elements
- Global Visual Language
High-whitespace layouts
Light-mode primary aesthetic
Monochrome color palette (black/white/grays)
Neon or accent hues used sparingly and solely for emphasis
Sharp, squared geometry with minimal border radius
Thin sans-serif typography
Linear, gradient-border surfaces
Light glassmorphism for panel structures
Minimalist iconography with monochrome weight
- Layout & Structure
Top-Level App Shell
Persistent top bar with title, search, and action buttons
Left-aligned sidebar for navigation
Large, open content canvas with heavy spacing
Virtualized scroll for item-heavy views
Responsive grid and list patterns
Navigation Sidebar
Vertical nav with square active states
Monochrome icons with darker shade on active
User identity section at bottom (pill or capsule)
Neutral dividers for grouping
- Panels & Cards
Square cards with:
Header region
Supplemental metadata section
Optional preview area
Action bar (iconic actions)
Hover reveals secondary metadata
Consistent spacing rhythm (8/16/24 etc.)
Glass or lightly frosted backgrounds
Flat monochrome icons inside content views
- Modal System
Square-edge modals
Generous padding, reduced visual density
Layered glass surfaces with subtle shadow depth
Editable fields with inline validation
Drag-and-drop upload zones when relevant
Status feedback animations (loading, success, error)
Multi-Step Modals
Progress indicators (dots or bar)
Animated transitions between steps
Lottie-compatible illustration areas
Skip / Back / Next / Done button set
- Search, Filters, Sorting
Instant-search input with inline results
Filter chip components (square, monochrome)
Left sidebar optional for advanced filters
Sort dropdown with simplified hierarchy
Sticky filter bars when scrolling
- Animations & Motion Principles
Fade-in page transitions
Staggered entrance animations for lists or grids
Micro-interactions on hover (scale 1–3%)
Lottie-compatible animation slots for:
Tutorials
Loading states
Empty states
Light shimmer/loading skeletons
Subtle action confirmations (toast, checkmark, glow)
- Empty States & Feedback
Empty States
Simple geometric illustrations
Optional animated or lottie-based icons
One primary action button
Feedback
Minimal monochrome toast notifications
“Undo” snackbars for destructive actions
Error states using layout rather than color coding
- Form Design
Square text inputs with faint borders
Spacious field spacing
Minimal placeholder usage; rely on labels
Toggle switches with monochrome styling
Dropdowns with square edges and high-contrast separators
- Content Organization Patterns
Tag chips (square, monochrome)
Expandable metadata drawers
Drag-and-drop sorting
Bulk selection checkboxes (square)
Fixed toolbars for batch operations
- Data Visualization
Minimal line and bar charts with:
Thin strokes
Light neon accents allowed
No patterned backgrounds
Monochrome grids and axes
Animated chart transitions
Tooltip overlays with soft fade
- Calendar & Timeline Structures
Square grid calendar
Hover previews
Smooth switching between list and calendar view
Minimal month/day selector bar
- Documentation / Help Patterns
High-whitespace text layout
Left-aligned table of contents
Square content sections
Optionally animated instructional components
- Microinteractions
Button press animations (10–20ms depress effect)
Hover lift (2–4px) on cards
Slide-up confirmations
Soft-edge shadows for depth
Contextual quick-action bars on item hover