---
name: Lumina Finance
colors:
  surface: '#faf9fb'
  surface-dim: '#dbd9dc'
  surface-bright: '#faf9fb'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f5f3f6'
  surface-container: '#efedf0'
  surface-container-high: '#e9e8ea'
  surface-container-highest: '#e3e2e5'
  on-surface: '#1b1c1e'
  on-surface-variant: '#43474d'
  inverse-surface: '#2f3033'
  inverse-on-surface: '#f2f0f3'
  outline: '#74777e'
  outline-variant: '#c4c6ce'
  surface-tint: '#49607e'
  primary: '#000f22'
  on-primary: '#ffffff'
  primary-container: '#0a2540'
  on-primary-container: '#768dad'
  inverse-primary: '#b0c8eb'
  secondary: '#006688'
  on-secondary: '#ffffff'
  secondary-container: '#00c1fd'
  on-secondary-container: '#004b65'
  tertiary: '#060045'
  on-tertiary: '#ffffff'
  tertiary-container: '#150082'
  on-tertiary-container: '#7f7bff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d2e4ff'
  primary-fixed-dim: '#b0c8eb'
  on-primary-fixed: '#001c37'
  on-primary-fixed-variant: '#314865'
  secondary-fixed: '#c2e8ff'
  secondary-fixed-dim: '#75d1ff'
  on-secondary-fixed: '#001e2b'
  on-secondary-fixed-variant: '#004d67'
  tertiary-fixed: '#e2dfff'
  tertiary-fixed-dim: '#c3c0ff'
  on-tertiary-fixed: '#0f0069'
  on-tertiary-fixed-variant: '#321ed2'
  background: '#faf9fb'
  on-background: '#1b1c1e'
  surface-variant: '#e3e2e5'
typography:
  h1:
    fontFamily: Manrope
    fontSize: 48px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  h2:
    fontFamily: Manrope
    fontSize: 36px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  h3:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 80px
  grid_columns: '12'
  grid_gutter: 32px
  max_width: 1280px
---

## Brand & Style

The design system is engineered to evoke feelings of institutional stability blended with cutting-edge technological agility. The brand personality is "The Sophisticated Architect"—precise, reliable, and forward-thinking. It targets high-growth enterprises and digital-native professionals who demand financial tools that feel as advanced as their own products.

The visual style is **Corporate Modern with Glassmorphism**. It utilizes a "layered atmospheric" approach, where the UI is built upon a solid foundation of Minimalism but elevated through translucent surfaces, high-end blurs, and subtle radial gradients. This creates a sense of physical depth and digital premiumness reminiscent of top-tier fintech industry leaders.

## Colors

This design system utilizes a high-contrast palette to drive hierarchy. The **Primary Color (#0A2540)** acts as the anchor for typography and structural navigation, providing the weight of a traditional financial institution. The **Accent Color (#00C2FF)** is used sparingly for high-intent actions, progress indicators, and interactive highlights to maintain a vibrant, "electric" energy.

Backgrounds primarily use a "Clean Canvas" strategy: pure white for primary surfaces and a light grey/cool slate for section differentiation. Subtle mesh gradients incorporating the primary and secondary colors should be used behind glassmorphic cards to create the necessary refraction effects.

## Typography

The system employs a dual-font strategy. **Manrope** is used for headings to provide a refined, modern geometric feel that communicates precision. **Inter** is used for all body text and UI labels to ensure maximum legibility and a systematic, functional aesthetic. 

A strong vertical rhythm is established by generous line heights for body copy and tight, impactful leading for headlines. Tracking is slightly tightened on larger headings to create a "compact" premium look.

## Layout & Spacing

This design system follows a **Fixed-Fluid Hybrid Grid**. The content is housed within a 12-column grid with a maximum width of 1280px to maintain readability on wide displays. 

The spacing philosophy uses an 8px base unit. Generous white space (the "XL" spacing token) is used between major sections to allow the glassmorphic elements to breathe. Content density should remain low to medium to preserve the high-end, "uncluttered" feel of the interface.

## Elevation & Depth

Depth is the defining characteristic of this design system. It is achieved through **Tonal Layers and Ambient Shadows**.

1.  **Level 0 (Base):** The #F6F9FC background.
2.  **Level 1 (Cards):** White surfaces with a very soft, highly diffused 10% opacity shadow (0px 4px 20px).
3.  **Level 2 (Glassmorphic Floating Elements):** Semi-transparent white (opacity 70%) with a 20px backdrop blur and a 1px solid white inner border (20% opacity) to simulate a glass edge.
4.  **Level 3 (Modals/Overlays):** Deep shadows with a 15% opacity primary color tint to ground the element in the brand's space.

## Shapes

The shape language is consistently **Rounded**, reflecting a modern and accessible professional tool. Standard UI components (Inputs, Buttons, Cards) use a 0.5rem (8px) corner radius. For larger containers and featured marketing sections, "rounded-xl" (1.5rem / 24px) is utilized to emphasize the soft, premium feel of the glassmorphic panels.

## Components

### Buttons
Primary buttons use a solid #0A2540 fill. On hover, they transition to a subtle gradient of #0A2540 to #00C2FF with a 4px upward shift. Secondary buttons are "ghost" style with a 1px slate-100 border that fills with a light grey on hover.

### Glassmorphic Cards
Cards must feature a `backdrop-filter: blur(12px)` and a background color of `rgba(255, 255, 255, 0.7)`. They are outlined with a subtle 1px border of `rgba(255, 255, 255, 0.5)`.

### Inputs
Input fields use a subtle #F6F9FC fill with no initial border. Upon focus, they animate a 2px border in #00C2FF and a soft outer glow in the same color.

### Responsive Navigation
The desktop navigation uses a "Floating Island" approach—a glassmorphic bar that sits at the top of the viewport with a blur effect that reveals the content scrolling beneath it. Mobile navigation utilizes a full-screen blurred overlay with large-format typography.

### Data Visualization
Charts should use the Accent #00C2FF with soft gradients (fading to transparent) and avoids harsh lines. Use rounded caps on all stroke-based data points.