---
name: Kinetic Neo-Brutalist
colors:
  surface: '#f9f9f9'
  surface-dim: '#dadada'
  surface-bright: '#f9f9f9'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3f3'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e2e2e2'
  on-surface: '#1a1c1c'
  on-surface-variant: '#454656'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f1f1f1'
  outline: '#757687'
  outline-variant: '#c5c5d8'
  surface-tint: '#3647ea'
  primary: '#001bcd'
  on-primary: '#ffffff'
  primary-container: '#2d3fe3'
  on-primary-container: '#c6caff'
  inverse-primary: '#bdc2ff'
  secondary: '#5e5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e2e2e2'
  on-secondary-container: '#646464'
  tertiary: '#3f4141'
  on-tertiary: '#ffffff'
  tertiary-container: '#565858'
  on-tertiary-container: '#cecece'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dfe0ff'
  primary-fixed-dim: '#bdc2ff'
  on-primary-fixed: '#000866'
  on-primary-fixed-variant: '#1126d3'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c6'
  on-secondary-fixed: '#1b1b1b'
  on-secondary-fixed-variant: '#474747'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c6c6c7'
  on-tertiary-fixed: '#1a1c1c'
  on-tertiary-fixed-variant: '#454747'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  headline-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: '400'
    lineHeight: '1.6'
  label-bold:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1.0'
  label-sm:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.0'
spacing:
  unit: 4px
  gutter: 24px
  margin: 32px
  container-max: 1440px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## Brand & Style
This design system is built on the principles of **Neo-Brutalism**, optimized for high-energy tech environments. It rejects the softness of modern SaaS aesthetics in favor of raw, architectural honesty and aggressive visual hierarchy. The brand personality is unapologetic, technical, and fast-paced. 

The aesthetic is defined by "Hard UI" principles: heavy 3px strokes, zero-radius corners, and high-contrast color blocking. It targets power users who value clarity, speed, and a distinctive digital presence that feels engineered rather than "decorated."

## Colors
The palette is restricted to a high-tension triad:
- **Cobalt Blue (#2D3FE3):** The primary kinetic engine. Used for actions, highlights, and critical data points.
- **Stark White (#FFFFFF):** The structural base. Used for high-contrast background surfaces to ensure the black borders pop.
- **Deep Black (#000000):** The framing element. Used for all borders, typography, and heavy "hard-shadow" accents.

Avoid gradients or mid-tone grays. Use the Cobalt Blue at 100% opacity for maximum impact; transparency is only permitted for hover states on secondary actions.

## Typography
**Space Grotesk** is used across all levels to maintain a technical, geometric consistency. 
- **Headlines:** Set with tight tracking and aggressive weights. Large headlines should utilize "ink-trap" aesthetics, feeling dense and structural.
- **Body:** Maintains readability through generous line heights but stays "on-grid."
- **Interactive Labels:** Always uppercase when used in buttons or navigation headers to reinforce the industrial tone.

## Layout & Spacing
The layout philosophy is a **fixed-fluid hybrid grid** that encourages experimental asymmetry. 
- Use a 12-column grid for standard content, but allow elements to "break" the grid by overlapping or extending into margins.
- Spacing follows a strict 4px base unit. 
- Layouts should feel "packed" rather than airy; use borders instead of whitespace to separate distinct functional areas. 
- Sidebar and header sections must be locked with 3px solid black borders, creating a clear "mainframe" feel.

## Elevation & Depth
This system rejects Z-axis depth (shadows/blur). Elevation is communicated through **displacement and hard offsets**:
- **Hard Shadows:** Instead of soft blurs, use solid black blocks offset by 4px or 8px (e.g., a button "lifted" above a surface).
- **Overlaps:** Layering elements directly on top of one another with 3px borders creating the separation.
- **Active States:** When an element is pressed, it should physically shift 4px down and to the right, "filling" the space of its hard shadow to simulate mechanical movement.

## Shapes
All UI elements have **0px roundedness**. This applies to buttons, input fields, cards, and even state indicators. The sharp corners reinforce the aggressive, tech-forward nature of the design system. Icons should similarly follow a sharp, geometric construction with a consistent 2px or 3px stroke weight to match the UI borders.

## Components
- **Buttons:** Rectangular with 3px black borders. Primary buttons use a Cobalt Blue background with White text. Use a hard 4px black offset shadow that disappears on "active" (press) states.
- **Inputs:** White background, 3px black border. On focus, the border remains black but the background shifts to a very faint 5% Cobalt tint. Labels sit outside the box in `label-bold`.
- **Cards:** White or Cobalt background. Use them to group related data. Every card must have a 3px black border. 
- **Chips/Tags:** Small rectangles with black borders. No padding-left/right "pill" logic—maintain rigid box proportions.
- **Checkboxes/Radios:** Square (even for radios) to maintain the brutalist aesthetic. Use a heavy 'X' mark for selected states instead of a checkmark.
- **Data Tables:** Horizontal and vertical 3px lines must be visible, creating a literal grid or "cage" for information.