---
name: Monolith Architectural UI
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: '#434847'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f1f1f1'
  outline: '#737878'
  outline-variant: '#c3c7c7'
  surface-tint: '#556160'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#131d1d'
  on-primary-container: '#7a8686'
  inverse-primary: '#bdc9c8'
  secondary: '#5d5f5f'
  on-secondary: '#ffffff'
  secondary-container: '#dfe0e0'
  on-secondary-container: '#616363'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#1b1c1c'
  on-tertiary-container: '#848484'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d9e5e4'
  primary-fixed-dim: '#bdc9c8'
  on-primary-fixed: '#131d1d'
  on-primary-fixed-variant: '#3e4949'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#e4e2e2'
  tertiary-fixed-dim: '#c7c6c6'
  on-tertiary-fixed: '#1b1c1c'
  on-tertiary-fixed-variant: '#464747'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  display-2xl:
    fontFamily: Space Grotesk
    fontSize: 120px
    fontWeight: '700'
    lineHeight: 110px
    letterSpacing: -0.04em
  headline-xl:
    fontFamily: Space Grotesk
    fontSize: 72px
    fontWeight: '700'
    lineHeight: 72px
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: '600'
    lineHeight: 52px
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '300'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '300'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.1em
spacing:
  unit: 8px
  container-max: 1440px
  gutter: 32px
  margin: 64px
  section-gap: 160px
---

## Brand & Style

This design system is built upon the principles of modern architectural minimalism and Swiss Neo-Grotesque movements. It targets a high-end demographic that values structural integrity, precision, and the luxury of space. The brand personality is authoritative yet restrained, eschewing decorative elements in favor of pure typographic form and rigorous spatial geometry. 

The aesthetic is characterized by a "void-first" philosophy, where negative space is treated as a primary design element rather than a vacuum. By utilizing extreme contrast and oversized typography, the UI evokes a sense of permanent, physical presence—similar to stone-carved lettering or museum gallery signage. The emotional response is one of clarity, sophistication, and absolute reliability.

## Colors

The palette is strictly monochromatic to emphasize form and hierarchy over chromatic distraction. 

- **Primary Black (#000505):** A deep, "ink-trap" black used for heavy headlines, primary iconography, and structural borders.
- **Luminous White (#FFFFFF):** The foundational canvas. It must remain expansive to provide the "architectural" air the system requires.
- **Neutral Grey (#707070):** Reserved exclusively for metadata and disabled states, ensuring that the primary black/white contrast remains the focal point.

Color is never used for decorative purposes. Interactivity is signaled through inversion or scale shifts rather than hue changes.

## Typography

The typographic strategy relies on a dramatic scale contrast. 

**Headlines:** Utilize *Space Grotesk* in bold weights. Headlines should feel architectural—massive, tight-leading, and slightly tracked-in to create dense blocks of black text that anchor the page.

**Body & Accents:** Utilize *Inter* set to its light or semi-thin weights (300). This creates an elegant, airy counterpoint to the heavy headlines. For labels and functional accents, use uppercase styling with increased letter spacing to maintain legibility at small scales.

Avoid medium weights; the system thrives on the tension between the very heavy and the very light.

## Layout & Spacing

The layout follows a **Fixed Grid** model within a maximum container width, but employs "over-spacing" to create a high-end editorial feel. 

- **Grid:** A 12-column system with wide 32px gutters.
- **Rhythm:** An 8px base unit governs all dimensions.
- **Sectioning:** Use aggressive vertical padding (Section Gaps) to isolate content modules. Elements should never feel crowded; if in doubt, double the whitespace.
- **Alignment:** Strictly flush-left. Centered text is prohibited to maintain the rigid, architectural alignment of the Neo-Grotesque style.

## Elevation & Depth

This design system rejects traditional shadows and depth metaphors in favor of **Structural Layering** and **Bold Borders**.

- **No Shadows:** Do not use drop shadows or blurs. Depth is flat.
- **Borders:** Use 1px or 2px solid black lines to define sections, especially when components like cards or inputs are required.
- **Inversion:** To show elevation or "active" states (such as a hovered button), invert the colors (background becomes #000505, text becomes #FFFFFF).
- **Z-Axis:** Layers are stacked like sheets of paper. Use 100% opaque backgrounds for all containers to ensure the grid remains legible during overlaps.

## Shapes

The shape language is **Sharp**. 

Every element—buttons, input fields, containers, and images—must have a 0px border radius. This reinforces the architectural and precision-engineered feel of the system. 

The only exception is for circular elements that are functionally required to be round (e.g., radio buttons or user avatars), though even avatars are preferred as squares where possible to maintain the rigid geometric theme.

## Components

**Buttons:** Rectangular with 0px radius. Primary buttons are solid black with white text. Secondary buttons are white with a 1px black border. Hover states trigger a full color inversion.

**Input Fields:** Minimalist 1px bottom-border only, or a full 1px black stroke box. Labels are always placed above the field in uppercase `label-sm` typography.

**Chips:** Small, rectangular boxes with 1px borders. Use them sparingly to avoid cluttering the clean lines of the layout.

**Cards:** Defined by a 1px border or simply by their alignment within the grid. Cards should have generous internal padding (at least 40px) to ensure the content within "breathes."

**Lists:** Separated by thin 1px horizontal rules that span the full width of the container. Use the `body-md` weight for list items with high line-height to ensure a premium feel.

**Navigation:** Minimalist text-based links. Avoid icons unless they are strictly functional and geometric.