---
name: Kinetic Neo-Brutalist System
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: '#454656'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f0f1f1'
  outline: '#757687'
  outline-variant: '#c5c5d8'
  surface-tint: '#3647ea'
  primary: '#001bcd'
  on-primary: '#ffffff'
  primary-container: '#2d3fe3'
  on-primary-container: '#c6caff'
  inverse-primary: '#bdc2ff'
  secondary: '#516600'
  on-secondary: '#ffffff'
  secondary-container: '#c3f000'
  on-secondary-container: '#556a00'
  tertiary: '#414141'
  on-tertiary: '#ffffff'
  tertiary-container: '#585858'
  on-tertiary-container: '#cfcfcf'
  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: '#c5f300'
  secondary-fixed-dim: '#add500'
  on-secondary-fixed: '#171e00'
  on-secondary-fixed-variant: '#3d4d00'
  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:
  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'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 18px
    fontWeight: '500'
    lineHeight: '1.5'
    letterSpacing: 0em
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
    letterSpacing: 0em
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: 0.1em
spacing:
  base: 8px
  xs: 4px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 128px
  border-width: 3px
  grid-gutter: 24px
---

## Brand & Style

This design system is engineered for high-velocity digital environments where impact and clarity are paramount. It draws heavily from the **Neo-Brutalist** movement, rejecting traditional gradients and soft shadows in favor of raw, structural honesty and aggressive visual hierarchy. 

The brand personality is unapologetic, technical, and high-energy. It targets a digitally native audience that values performance over "polish" and transparency over decoration. The emotional response is one of urgency and precision—a "digital-first" aesthetic that feels constantly in motion.

## Colors

The palette is built on high-voltage contrast to ensure maximum legibility and "vibration" on screen. 

- **Primary (Cobalt Blue):** Used for primary actions, structural accents, and key brand moments. It represents the "kinetic" engine of the system.
- **Secondary (Acid Green):** A high-visibility signal color used sparingly for highlights, success states, and interactive feedback.
- **Neutrals:** The system relies on a absolute black (#000000) and white (#FFFFFF) foundation. Use black for all structural borders and typography to maintain the brutalist weight.

## Typography

**Space Grotesk** is the sole typeface, utilized across all levels to reinforce a technical, geometric identity. 

Headlines must be set with tight leading and negative letter-spacing to create "blocks" of text that feel like architectural elements. Use the `headline-xl` sparingly for high-impact hero moments. Body text maintains a medium weight to ensure it isn't overpowered by the thick structural borders of the layout. All labels and secondary metadata should be set in `label-caps` to evoke a utilitarian, industrial feel.

## Layout & Spacing

This design system utilizes a **rigid fluid grid** modeled after architectural blueprints. The layout philosophy is "visible structure": gutters and margins are often explicitly defined by thick black borders.

- **Grid:** A 12-column system where every module is enclosed in a `3px` black border.
- **Rhythm:** All spacing is derived from a strict 8px base unit. 
- **Kinetic Movement:** Elements should not feel static. Use asymmetrical compositions and offset containers (e.g., a card "breaking" out of its grid cell) to suggest motion.

## Elevation & Depth

Depth in this design system is achieved through **stacking and translation**, not shadows or blurs. 

- **Hard Offsets:** Instead of soft shadows, use "hard" shadows created by a solid black rectangle offset by 4px or 8px behind the primary element.
- **Bold Borders:** Every interactive surface or container must be bounded by a `3px` solid black border. 
- **Layering:** Use Cobalt Blue and Acid Green backgrounds to denote priority levels. A secondary "active" layer might shift its position by a few pixels on hover to simulate physical movement within a flat plane.

## Shapes

The shape language is strictly **geometric and sharp**. All containers, buttons, and input fields feature 0px border radii. This reinforces the "grid-first" nature of the design and maintains the aggressive, high-impact aesthetic. 

When elements overlap, they should maintain 90-degree angles. Any sense of "softness" is intentionally avoided to preserve the digital-first, technical energy of the system.

## Components

### Buttons
Primary buttons are Cobalt Blue with a `3px` black border and white `headline-md` text. On hover, the button should "pop" using a hard Acid Green offset shadow. Secondary buttons are white with a black border, shifting to Acid Green on hover.

### Cards
Cards are defined by their `3px` black stroke. Headers within cards should be separated by a horizontal stroke of the same weight. Use Acid Green for card "tags" or status indicators to draw the eye immediately.

### Input Fields
Inputs are rectangular blocks with thick borders. Focus states are indicated by the border color changing from Black to Cobalt Blue, with the label shifting to a bold Acid Green.

### Dynamic Lists
Lists should resemble a terminal or ledger. Each list item is separated by a `3px` border. Hovering over a list item should fill the background with Acid Green, turning the typography black.

### Additional Elements
- **Marquees:** Use scrolling text marquees for "kinetic" announcements.
- **Visible Grid Lines:** Occasionally allow the background grid lines to be visible behind content to emphasize the Neo-Brutalist structure.