---
name: Editorial Brutalist System
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: '#4c4546'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f1f1f1'
  outline: '#7e7576'
  outline-variant: '#cfc4c5'
  surface-tint: '#5e5e5e'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#1b1b1b'
  on-primary-container: '#848484'
  inverse-primary: '#c6c6c6'
  secondary: '#5d5f5f'
  on-secondary: '#ffffff'
  secondary-container: '#dfe0e0'
  on-secondary-container: '#616363'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#3a0b00'
  on-tertiary-container: '#ee4900'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e2e2e2'
  primary-fixed-dim: '#c6c6c6'
  on-primary-fixed: '#1b1b1b'
  on-primary-fixed-variant: '#474747'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#ffdbd0'
  tertiary-fixed-dim: '#ffb59e'
  on-tertiary-fixed: '#3a0b00'
  on-tertiary-fixed-variant: '#842500'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  display-xl:
    fontFamily: Newsreader
    fontSize: 180px
    fontWeight: '800'
    lineHeight: 160px
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Newsreader
    fontSize: 96px
    fontWeight: '700'
    lineHeight: 100px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 64px
    fontWeight: '700'
    lineHeight: 64px
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: '400'
    lineHeight: 32px
    letterSpacing: 0em
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.1em
spacing:
  border-thick: 4px
  border-heavy: 12px
  gutter: 0px
  margin-edge: 40px
  unit: 8px
---

## Brand & Style

The design system is an unapologetic expression of structural authority and high-fashion avant-garde. It rejects the softness of modern consumer web design in favor of a "Raw Luxury" aesthetic, blending the intellectual rigor of architectural blueprints with the aggressive layouts of mid-century editorial manifestos.

The personality is sophisticated yet confrontational. It treats digital space as a physical canvas, utilizing rigid asymmetry and massive structural elements to command attention. This system is designed for high-end audiences who value "the work" over "the user experience," prioritizing a distinctive, unforgettable brand presence that feels both permanent and radical.

## Colors

The palette is strictly high-contrast to emphasize form and hierarchy. 

- **Pure Black (#000000):** Used for all structural borders, primary headlines, and heavy fills. It represents the "ink" of the system.
- **Stark White (#FFFFFF):** The primary background color, acting as a clean, clinical negative space.
- **International Orange (#FF4F00):** The "signal" color. It is used sparingly for critical call-to-actions, active states, and technical annotations. It should feel like a spray-painted mark on a concrete wall—urgent and functional.
- **Soft Neutral (#F2F2F2):** Reserved exclusively for large texture blocks or subtle secondary backgrounds to prevent total ocular fatigue without sacrificing the monochromatic edge.

## Typography

Typography is the primary visual driver of the design system. It relies on the friction between the intellectual, traditional **Newsreader** (Serif) and the technical, geometric **Space Grotesk** (Sans-serif).

- **Scale Extremes:** Headlines should be either massive (Display XL) or intentionally small (Label Caps), avoiding "middle-ground" sizing.
- **Overlapping:** Large display serif type should frequently be overlapped by smaller sans-serif technical labels or high-contrast imagery to create a sense of layered depth.
- **Weight Contrast:** Pair the heaviest weights of Newsreader with the regular weights of Space Grotesk.
- **Vertical Orientation:** Use Space Grotesk labels rotated 90 degrees to accentuate the architectural verticality of the layouts.

## Layout & Spacing

This design system utilizes a **Rigid Asymmetrical Grid**. Unlike standard fluid grids, the layout is governed by heavy 4px and 12px black borders that physically divide the screen into non-uniform quadrants.

- **Zero Gutters:** Elements are often flush against one another, separated only by a heavy border line.
- **Asymmetry:** Content should rarely be centered. Align primary text to the far left or far right, leaving large blocks of "dead space" to emphasize the structural frame.
- **Bleed:** Images should bleed to the edge of their grid containers, maintaining a "boxed-in" architectural feel.
- **Annotation Space:** Use the 40px outer margins for technical data, page numbers, or breadcrumbs in the "Label-caps" style.

## Elevation & Depth

There is no simulated light or shadow in this design system. Depth is achieved through **Structural Layering** and **Color Blocking**:

- **Hard Borders:** Elevation is communicated by stacking containers with heavy 4px borders.
- **High-Contrast Overlays:** When an element (like a modal or menu) appears, it should use a solid #FFFFFF or #000000 fill with no transparency or blur, completely obscuring the layer beneath it.
- **Texture:** Use grain and unpolished paper textures in the background to provide a tactile, physical quality that breaks the digital perfection of the screen.
- **Z-Axis Typography:** Place text behind and in front of image subjects to create a 3D editorial space without using drop shadows.

## Shapes

The shape language is strictly **Sharp (0px)**. 

Every element—buttons, input fields, images, and containers—must have perfectly square 90-degree corners. This reinforces the brutalist architectural influence and ensures the UI feels like a constructed object. Circles or rounded corners are strictly prohibited as they soften the authoritative tone of the design system.

## Components

### Buttons
Primary buttons are solid #000000 blocks with #FFFFFF Space Grotesk text in bold caps. On hover, they "flash" to International Orange (#FF4F00). They do not use shadows; they utilize a simple 1px inset border on active click to simulate a physical press.

### Inputs & Fields
Fields are defined by a bottom border of 4px. Labels are placed inside the field in 10px bold caps. When focused, the bottom border changes to International Orange, and the background shifts to a very subtle light gray.

### Cards
Cards are not decorative; they are structural. They must be encased in a 4px black border on all sides. Titles should be in Newsreader, while metadata and descriptions are in Space Grotesk.

### Navigation
The navigation should feel like a sidebar menu in a gallery. It uses 12px heavy borders to separate it from the main content. Menu items should have large, sequential numbers (e.g., 01, 02) to emphasize order and authority.

### Technical Annotations
Floating labels in the "Label-caps" style should be used to describe the "specs" of the product or page, often placed near borders or in the corners of images, acting as a brutalist meta-commentary on the UI itself.