---
name: Vibrant Kinetic
colors:
  surface: '#f9f9f9'
  surface-dim: '#dadada'
  surface-bright: '#f9f9f9'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3f4'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e2e2e2'
  on-surface: '#1a1c1c'
  on-surface-variant: '#434656'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f0f1f1'
  outline: '#747688'
  outline-variant: '#c4c5d9'
  surface-tint: '#124af0'
  primary: '#0040e0'
  on-primary: '#ffffff'
  primary-container: '#2e5bff'
  on-primary-container: '#efefff'
  inverse-primary: '#b8c3ff'
  secondary: '#4c6700'
  on-secondary: '#ffffff'
  secondary-container: '#b7f300'
  on-secondary-container: '#4f6c00'
  tertiary: '#555555'
  on-tertiary: '#ffffff'
  tertiary-container: '#6d6d6d'
  on-tertiary-container: '#f0f0f0'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dde1ff'
  primary-fixed-dim: '#b8c3ff'
  on-primary-fixed: '#001356'
  on-primary-fixed-variant: '#0035be'
  secondary-fixed: '#b9f600'
  secondary-fixed-dim: '#a2d800'
  on-secondary-fixed: '#141f00'
  on-secondary-fixed-variant: '#384e00'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c6c6c6'
  on-tertiary-fixed: '#1b1b1b'
  on-tertiary-fixed-variant: '#474747'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  display-xl:
    fontFamily: Space Grotesk
    fontSize: 80px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: '500'
    lineHeight: '1.5'
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '500'
    lineHeight: '1.5'
  label-bold:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1.2'
spacing:
  base: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 16px
  margin-mobile: 20px
---

## Brand & Style

The design system is engineered for high-velocity engagement and uncompromising visual presence. It targets a digital-native audience that values speed, clarity, and bold self-expression. By merging **Neo-Brutalism** with a high-energy kinetic aesthetic, the UI demands attention through raw, unrefined structural elements and jarringly vibrant color pairings.

The stylistic direction is defined by:
- **Aggressive Contrast:** High-saturation hues against stark backgrounds to ensure immediate visual processing.
- **Structural Rawness:** Utilizing thick, visible strokes and solid color blocks to create a sense of physical permanence in a digital space.
- **Motion-Centricity:** Every transition is treated as a kinetic event, using staccato-style easing to reinforce the "fast-paced" brand narrative.

## Colors

The palette is built on extreme tension. **Bright Cobalt** acts as the primary driver for action and brand identity, while **Acid Green** serves as a high-frequency accent for notifications, highlights, and "success" states that need to vibrate against the background.

**Stark White** provides the canvas, but it is never "soft"—it is a bright, clinical white designed to make the primary colors pop. **Black (#000000)** is used extensively for heavy borders and "hard shadows" to ground the vibrant elements. Avoid gradients; use only flat, solid fills to maintain the neo-brutalist integrity.

## Typography

The design system utilizes **Space Grotesk** exclusively to leverage its technical, geometric quirks and futuristic undertones. The scaling is aggressive, intended to create a clear hierarchy that feels "loud."

- **Headlines:** Use Extra-bold (700) weights with tight letter-spacing for a heavy, block-like appearance.
- **Body:** Maintain Medium (500) weights to ensure legibility against high-saturation backgrounds.
- **Labels:** Always uppercase with increased tracking for functional clarity in fast-paced navigation.

## Layout & Spacing

This design system employs a **fluid, mobile-first grid** that prioritizes vertical momentum. The spacing rhythm is based on a 4px/8px incremental scale, but it is applied with a "tight" philosophy to keep elements feeling packed and energetic.

- **Grid:** A 4-column layout for mobile, moving to a 12-column layout for tablet and desktop.
- **Margins:** Generous 20px outer margins to contain the heavy borders of internal components.
- **Gutters:** Standard 16px gutters to ensure that even with thick 3px borders, elements do not visually bleed into one another.

## Elevation & Depth

Depth is conveyed through **Bold Borders** and **Offset Hard Shadows** rather than Z-axis blurs or tonal gradients. This system rejects the concept of "ambient" lighting.

- **Borders:** All primary containers must feature a solid black border (minimum 3px).
- **Hard Shadows:** Use a solid, 100% opacity black offset (typically 4px or 8px down and right) to lift elements off the background.
- **Stacking:** Elements do not "float"; they are "slapped" onto the canvas. Higher priority items use larger offset shadows to indicate importance.

## Shapes

The shape language of the design system is strictly **Sharp (0px)**. All containers, buttons, and input fields must feature 90-degree angles. This reinforces the raw, brutalist aesthetic and ensures that the heavy borders maintain a crisp, architectural look. Avoid any softening of corners, as it dilutes the aggressive, fast-paced nature of the brand.

## Components

### Buttons
Primary buttons use a **Bright Cobalt** fill with a 3px black border and a 4px black hard shadow. On hover or active states, the shadow disappears (the button "depresses" into the canvas) and the fill may swap to **Acid Green**.

### Cards
Cards are stark white blocks with heavy borders. Headers within cards should be separated by a solid 2px horizontal rule. Use the **Acid Green** as a "tag" or "kinetic indicator" on the top right of cards to indicate new or active content.

### Inputs
Input fields feature a 2px black border. When focused, the border weight increases to 4px and a subtle **Bright Cobalt** inner glow or hard shadow is applied. Labels sit strictly above the input in the **Label-Bold** style.

### Kinetic Indicators
Use small, solid geometric shapes (triangles or chevrons) in **Acid Green** to indicate direction and movement. These should have a slight "pulse" animation to draw the eye to interactive paths.

### Lists
List items are separated by heavy lines. Each item should have a high-contrast hover state where the background flips to **Bright Cobalt** and the text flips to **Stark White** instantaneously.