---
name: Ego-Brutalism v2
colors:
  surface: '#131313'
  surface-dim: '#131313'
  surface-bright: '#393939'
  surface-container-lowest: '#0e0e0e'
  surface-container-low: '#1b1c1c'
  surface-container: '#1f2020'
  surface-container-high: '#2a2a2a'
  surface-container-highest: '#353535'
  on-surface: '#e4e2e1'
  on-surface-variant: '#d0c6ab'
  inverse-surface: '#e4e2e1'
  inverse-on-surface: '#303030'
  outline: '#999077'
  outline-variant: '#4d4732'
  surface-tint: '#e9c400'
  primary: '#fff6df'
  on-primary: '#3a3000'
  primary-container: '#ffd700'
  on-primary-container: '#705e00'
  inverse-primary: '#705d00'
  secondary: '#c6c6c7'
  on-secondary: '#2f3131'
  secondary-container: '#454747'
  on-secondary-container: '#b4b5b5'
  tertiary: '#f9f5f5'
  on-tertiary: '#313030'
  tertiary-container: '#dcd9d8'
  on-tertiary-container: '#605f5e'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#ffe16d'
  primary-fixed-dim: '#e9c400'
  on-primary-fixed: '#221b00'
  on-primary-fixed-variant: '#544600'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#e5e2e1'
  tertiary-fixed-dim: '#c8c6c5'
  on-tertiary-fixed: '#1c1b1b'
  on-tertiary-fixed-variant: '#474646'
  background: '#131313'
  on-background: '#e4e2e1'
  surface-variant: '#353535'
typography:
  display-xl:
    fontFamily: Epilogue
    fontSize: 120px
    fontWeight: '900'
    lineHeight: 100px
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Epilogue
    fontSize: 64px
    fontWeight: '800'
    lineHeight: 60px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Epilogue
    fontSize: 32px
    fontWeight: '800'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  mono-data:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '500'
    lineHeight: 24px
    letterSpacing: 0.05em
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
spacing:
  grid-margin: 48px
  grid-gutter: 24px
  border-width: 4px
  unit: 8px
---

## Brand & Style

This design system is built on the principles of raw structural integrity, industrial dominance, and uncompromising clarity. It targets high-performance environments where technical precision meets an aggressive, confident aesthetic. The emotional response is one of authority and power, achieved through "Ego-Brutalism"—a style that rejects soft affordances in favor of heavy strokes, massive scale, and a rigid architectural backbone. It is unapologetically loud, prioritizing functional visibility over decorative subtlety.

## Colors

The palette is restricted to a high-contrast, industrial triad. The foundation is a deep Charcoal (#111111) which provides a void-like depth for the interface. Stark White is used for primary readability and borders, creating a monochromatic base. Alert Yellow (#FFD700) is the sole high-visibility accent, reserved for critical data, primary actions, and warnings. Neutral grays are used sparingly for secondary structural elements to maintain the system's "harsh" visual impact.

## Typography

Typography is used as a structural element. Massive, condensed headings utilize Epilogue to create a sense of overwhelming scale. These are often set with tight line-heights and negative letter-spacing to appear as solid blocks of text. Technical data and labels transition to Space Grotesk, providing a monospaced, futuristic aesthetic that ensures legibility for complex values. Body text remains utilitarian and neutral using Inter to ensure long-form content is readable against the aggressive surrounding elements.

## Layout & Spacing

This design system utilizes a rigid 12-column fixed grid. Every element must snap to the grid lines, emphasizing a "built" feel rather than a "flowed" one. Spacing is strictly based on an 8px modular scale. High-density layouts are encouraged, using the 4px border width as a separator for every module. Margins are wide to frame the content, while gutters remain tight to force a sense of compact power.

## Elevation & Depth

Depth is not achieved through light and shadow, but through "Hard Shadows" and "Layer Stacking." Surfaces are flat. Elevation is signaled by 4px black drop shadows with 100% opacity, offset by 4px or 8px. This "Neo-Brutalist" approach gives components a physical, cut-out appearance. There are no blurs; every shadow is a sharp geometric duplicate of the element it supports.

## Shapes

The shape language is strictly orthogonal. A roundedness value of 0 is applied across the entire system. Every button, input, card, and container must have sharp 90-degree corners. This reinforces the industrial, uncompromising nature of the aesthetic and ensures that the 4px borders align perfectly at every intersection without distortion.

## Components

### Buttons
Primary buttons are Alert Yellow with a 4px black border and a 4px black hard shadow. Hover states should remove the shadow and "depress" the button by translating it 4px down and right. Labels are uppercase Space Grotesk.

### Cards & Containers
Containers use the Deep Charcoal background with a 4px Stark White border. For high-priority modules, the border switches to Alert Yellow. Headers within cards should be separated by a 4px horizontal rule.

### Input Fields
Inputs are Stark White with a 4px black border. When focused, the background shifts to Alert Yellow. The caret should be a thick block rather than a thin line.

### Lists & Data Tables
Lists use heavy dividers (4px). Every second row uses a slightly lighter charcoal (#1A1A1A) for zebra-striping. Data points must use the `mono-data` type style.

### Labels & Status Chips
Chips are rectangular blocks with no rounding. Statuses are indicated by solid fills: Alert Yellow for warnings, Stark White for active, and a 4px border-only style for inactive states.

### Additional Components: "The Terminal"
A specialized container for technical logs featuring high-contrast monospaced text and a flickering vertical cursor, designed to mimic a command-line interface within the grid.