Design System Preview
URBNIA Blue Noir
A modern design system featuring angular parallelogram shapes, deep noir colors, and vibrant blue accents.
Buttons
Standard and parallelogram button variants
Standard Buttons
Sizes
Parallelogram Buttons
States
Cards
Elevated
Card with shadow elevation
Outlined
Card with border
Filled
Card with muted background
Glass
Card with glass effect
Inputs
Form input components
This is a helpful message
This field is required
Badges
Status and label indicators
Solid
DefaultSuccessWarningErrorInfo
Subtle
DefaultSuccessWarningErrorInfo
Outline
DefaultSuccessWarningErrorInfo
Color Palette
Noir and brand color scales
Noir Scale
Brand Blue Scale
Semantic Colors
Animations & Micro-interactions
Motion system with consistent timing and easing
Hover Effects
Hover Lift
Hover Scale
Hover Glow
Hover Bright
Continuous Animations
Loading Skeletons
Button Micro-interactions
Try clicking and hovering the buttons - notice the lift, press, and glow effects
Link Underline Animation