NovaSpark Design SystemLegacy format
Ignite Your Ideas
Color Palette
Primary Colors
Accent Colors
Neutral Colors
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxIgnite Your Ideas
Components
Buttons
Inputs
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
badges
Default
Primary
Success
Warning
Danger
navigation
Sidebar Expanded
Active Item
Elevation & Depth
Do's & Don'ts
Do
Icons
LucideLibrary: Lucide · Size: 20px
Brand Identity
Brand Name: NovaSpark
Tagline: Ignite Your Ideas
Industry: SaaS / Productivity
---
Motion & Animation
| Token | Duration | Easing | Usage |
|-------|----------|--------|-------|
| anim-fast | 100ms | ease-out | Hover states |
| anim-base | 200ms | ease-in-out | Transitions |
| anim-slow | 350ms | ease-in-out | Modals, drawers |
| anim-spring | 400ms | cubic-bezier(0.34,1.56,0.64,1) | Scale-in effects |
---
Grid & Layout
• Max content width: 1280px
• Gutter: 24px
• Columns: 12
• Breakpoints:
| Name | Width |
|------|-------|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
---
Dark Mode
| Light Token | Dark Equivalent |
|-------------|-----------------|
| #FFFFFF background | #0F172A |
| #F3F4F6 subtle bg | #1E293B |
| #111827 text | #F1F5F9 |
| #4B5563 muted text | #94A3B8 |
| #E5E7EB border | #334155 |
---
Accessibility
• Minimum contrast ratio: 4.5:1 for body text, 3:1 for large text
• All interactive elements have visible focus rings
• Touch targets minimum: 44x44px
• All icons paired with aria-labels or visible text
• Keyboard navigable: Tab, Enter, Escape, Arrow keys supported
Use with MCP
Don't have the MCP? Install it here