Vibrant aurora-like color meshes, organic blob shapes, and fluid gradients. A design system inspired by modern SaaS aesthetics and the beauty of interpolated color.
01 / Palette
A vibrant spectrum anchored in purple, blue, and cyan with warm accents. Colors are designed to blend and overlap, creating rich mesh gradients.
02 / Typography
Plus Jakarta Sans is a contemporary geometric sans-serif with excellent readability and a warm, modern feel. Tight tracking on large headings, generous line-height on body text.
03 / Spacing
A 4px base unit with ten increments provides fine-grained control. Each step is chosen for practical layout needs, from tight icon gaps to generous section padding.
04 / Buttons
Four button variants cover primary actions, secondary options, subtle interactions, and warm-toned accents. All feature mesh-inspired gradient motion on hover.
05 / Forms
Clean, minimal input styling with gradient focus rings that echo the mesh palette. High contrast placeholders and clear focus states ensure accessibility.
06 / Cards
Four card variants provide different levels of visual weight, from subtle surfaces to full mesh backgrounds, for building layered interfaces.
A subtle surface card with internal mesh gradients that reveal on hover. Ideal for content grids and feature lists.
An animated gradient border wraps the card edge, drawing the eye without overwhelming the content inside.
A radial glow follows the cursor on hover, creating an organic spotlight effect that responds to interaction.
This card variant uses layered radial gradients to create a full mesh color field as its background. It works best as a hero or featured content container where you want maximum visual impact.
When multiple gradient color fields overlap and animate independently, they create organic, aurora-like color blends that feel alive and dynamic.
07 / Data
Clean tabular data presentation with subtle hover states and status indicators. Designed for dashboards and data-heavy interfaces.
| Project | Status | Members | Budget | Updated |
|---|---|---|---|---|
| Aurora Dashboard | Active | 8 | $24,500 | 2 hours ago |
| Mesh Editor | Active | 12 | $48,200 | 5 hours ago |
| Gradient Studio | Review | 5 | $12,800 | 1 day ago |
| Blob Generator | Review | 3 | $8,400 | 3 days ago |
| Color Field v1 | Archived | 6 | $31,000 | 2 weeks ago |
08 / Badges & Tags
Compact status indicators and categorical tags for labeling, filtering, and communicating state. Available in mesh gradient and semantic color variants.
09 / Alerts
Contextual feedback messages in semantic colors plus a mesh-gradient variant for branded messaging. Each includes an icon, title, and description.
10 / Philosophy
The guiding ideas behind the Gradient Mesh system. Every decision, from color choice to animation timing, maps back to these core tenets.