---
name: Cyber-Growth Kinetic
colors:
  surface: '#051424'
  surface-dim: '#051424'
  surface-bright: '#2c3a4c'
  surface-container-lowest: '#010f1f'
  surface-container-low: '#0d1c2d'
  surface-container: '#122131'
  surface-container-high: '#1c2b3c'
  surface-container-highest: '#273647'
  on-surface: '#d4e4fa'
  on-surface-variant: '#b9cacb'
  inverse-surface: '#d4e4fa'
  inverse-on-surface: '#233143'
  outline: '#849495'
  outline-variant: '#3a494b'
  surface-tint: '#00dce6'
  primary: '#e0fdff'
  on-primary: '#00373a'
  primary-container: '#00f2fe'
  on-primary-container: '#006a70'
  inverse-primary: '#00696f'
  secondary: '#ffb1c3'
  on-secondary: '#66002c'
  secondary-container: '#ff4b88'
  on-secondary-container: '#590026'
  tertiary: '#fcf5ff'
  on-tertiary: '#3c0091'
  tertiary-container: '#e2d4ff'
  on-tertiary-container: '#6e3cd8'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#6ff6ff'
  primary-fixed-dim: '#00dce6'
  on-primary-fixed: '#002022'
  on-primary-fixed-variant: '#004f53'
  secondary-fixed: '#ffd9e0'
  secondary-fixed-dim: '#ffb1c3'
  on-secondary-fixed: '#3f0019'
  on-secondary-fixed-variant: '#8f0041'
  tertiary-fixed: '#e9ddff'
  tertiary-fixed-dim: '#d0bcff'
  on-tertiary-fixed: '#23005c'
  on-tertiary-fixed-variant: '#5516be'
  background: '#051424'
  on-background: '#d4e4fa'
  surface-variant: '#273647'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '800'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  title-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.05em
  mono-data:
    fontFamily: monospace
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 48px
  container-max: 1280px
---

## Brand & Style

The design system is engineered for high-performance automation and social growth. It targets a tech-savvy audience looking for speed, reliability, and "pro-level" tools. The brand personality is futuristic, energetic, and precise.

The visual style is **Cyber-Glassmorphism**. It combines an OLED-black foundation with translucent, glass-like layers and high-intensity neon accents. This creates a sense of depth and technical sophistication, while the neon colors drive high conversion by drawing immediate attention to growth metrics and call-to-action triggers.

**Key visual principles:**
- **Kinetic Energy:** Use of vibrant gradients and glows to suggest movement.
- **Precision:** Clean lines and monospaced-adjacent layouts for a "hacker" or "analyst" aesthetic.
- **Depth:** Multi-layered glass surfaces to separate automation controls from background data.

## Colors

The palette is optimized for OLED displays to maximize contrast and reduce eye strain during long-form data monitoring.

- **Background (#0B0E14):** A deep, ink-black that provides the perfect canvas for neon glows.
- **Surface (#161B26):** Used for cards and containers, always applied with a backdrop-blur (12px-20px) and a low-opacity border.
- **Primary - Neon Cyan (#00F2FE):** Represents "Active" states, automation running, and successful growth metrics.
- **Secondary - Magenta (#FE0979):** Used for critical actions, "Stop" commands, and premium upgrade prompts.
- **Functional Accents:** Violet (#8B5CF6) is used for secondary data visualizations or "scheduled" states.

## Typography

This design system uses **Inter** exclusively to maintain a systematic, utilitarian feel that ensures high legibility against dark backgrounds. 

- **Display & Headlines:** Use heavy weights (700-800) with tight letter spacing to feel impactful and modern.
- **Body Text:** Use White (#FFFFFF) for primary content and Muted Grey (#94A3B8) for descriptions and meta-data.
- **Data Display:** For numerical growth (followers, likes, views), use a monospaced font or the tabular figures feature of Inter to ensure alignment in dashboards.
- **Indonesian Context:** Ensure line-heights are generous enough to handle slightly longer Indonesian words (e.g., "Selengkapnya", "Pengaturan") without feeling cramped.

## Layout & Spacing

The layout follows a **fluid grid** system based on a 4px baseline.

- **Grid:** 12-column grid for desktop, 4-column for mobile.
- **Margins:** 48px on desktop to provide breathing room for glassmorphic blurs; 16px on mobile to maximize content real estate.
- **Sectioning:** Content is grouped into high-contrast glass "modules." Vertical rhythm should be strictly maintained using 8px/16px/32px/64px increments to ensure a structured, professional appearance.

## Elevation & Depth

Depth is not created with traditional shadows, but through **Tonal Stacking and Light Emittance**.

1.  **Level 0 (Base):** OLED Black (#0B0E14).
2.  **Level 1 (Surfaces):** Glassmorphism. Background: #161B26 at 60% opacity. Backdrop-blur: 16px. Border: 1px solid rgba(255, 255, 255, 0.1).
3.  **Level 2 (Active/Hover):** Glass with a "Cyan Glow." The border-color increases in opacity, and a soft outer glow (drop-shadow: 0 0 15px rgba(0, 242, 254, 0.3)) is applied.

**Transitions:** All elevation changes must use a 300ms ease-out curve to mimic a premium software experience.

## Shapes

The design system uses a **Rounded** shape language to balance the "sharpness" of the neon colors.

- **Primary Containers:** 0.5rem (8px) corner radius for a standard, modern feel.
- **Interactive Elements:** Buttons and Input fields use 0.5rem (8px).
- **Status Indicators:** Pills and small chips use `rounded-full` (pill-shaped) to distinguish them from functional buttons.
- **Dividers:** Horizontal rules should be 1px wide with a gradient fade (Transparent -> rgba(255,255,255,0.1) -> Transparent).

## Components

### Buttons
- **Primary (Growth):** Background: Neon Cyan (#00F2FE), Text: #0B0E14 (Black). On hover, add a 20px Cyan outer glow.
- **Secondary (Action):** Ghost style. Border: 1px Cyan, Text: Cyan. 
- **Destructive:** Background: Magenta (#FE0979), Text: White.

### Glassmorphic Cards
Cards must have a 1px top-left highlight border (`rgba(255,255,255,0.15)`) and a subtle bottom-right dark border to simulate 3D depth in a dark environment.

### Inputs (Fields & Selects)
- **State:** Resting state is semi-transparent black. 
- **Focus State:** Border changes to Neon Cyan with a 4px inner glow. Label moves to a floating position above the input.
- **Language:** Labels should be concise (e.g., "Nama Pengguna", "Jumlah Follower").

### Progress & Status
- **Progress Bars:** Use a gradient from Magenta to Cyan to represent automation completion.
- **Active Glow:** Any "Live" automation should have a pulsing 8px Cyan dot next to the label ("Sedang Berjalan").

### Lists & Tables
Data rows should have a hover state that slightly brightens the background to #1C2331. Use "Inter Mono" for all numerical data points to ensure vertical alignment of digits.