Lottielab

# Lottielab — Style Reference
> White canvas, violet spark
Theme: light

Lottielab employs a crisp, bright aesthetic with ample negative space. It combines straightforward typography with a vibrant violet accent for primary actions, creating a focused, inviting user experience. Surfaces are predominantly clean white, complemented by subtle background neutrals to delineate content areas. The overall impression is one of clarity and approachable functionality, emphasizing content and interaction without visual clutter.

## Colors
| Name | Value | Role |
|------|-------|------|
| Stormy Indigo | `#2f2b4a` | Primary text, prominent headings, strong links, and icon fills—a deep, muted violet for essential information |
| Midnight Charcoal | `#1c1a2c` | Secondary text, background for certain structural elements, and a darker shade for higher contrast text |
| Electric Violet | `#7270ff` | Primary action button backgrounds, button borders, and highlighted text; signifies interactive elements and brand presence |
| Deep Sea Blue | `#1560fb` | Decorative icon fills, subtle background accents for links, adding dynamic blue to interactive content |
| Soft Gray | `#4b5563` | Muted helper text, secondary information, and less prominent body copy |
| Bright White | `#ffffff` | Card backgrounds, primary page background, button text, and icon fills |
| Ash Gray | `#e5e7eb` | Subtle borders, dividers, and ghost button borders, providing gentle visual separation |
| Light Mist | `#f3f4f6` | Secondary page background, adding a very light neutral contrast to primary white surfaces |
| Stone Gray | `#9ca3af` | Icon colors, secondary text, and subtle link colors, providing visual lightness |
| Pale Silver | `#d9dbda` | Subtle background accents, borders, and light icon fills |
| Snow Drift | `#f9fafb` | Tertiary background color for subtle elevation or differentiation, lighter than Light Mist |
| Sunny Gradient | `#facc15` | Decorative gradient for accent elements or callouts, evoking warmth and energy |
| Sunset Gradient | `#ec4899` | Decorative gradient for accent elements or callouts, providing a vibrant, modern touch |
| Midnight Black | `#000000` | High-contrast text, icon fills, and foundational strokes |
| Sky Blue | `#3585ff` | Decorative strokes and subtle highlights, adding an energetic blue to graphic elements |

## Typography
| Family | Role |
|--------|------|
| Plus Jakarta Sans | Primary typeface for all text content, including headings, body, and UI elements. Its clean, geometric sans-serif nature underpins the modern, crisp feel of the interface. |
| Google Sans Code | Used for code snippets or specific technical contexts, providing a distinct monospace visual for functional information. |