---
name: Skeleton Monolith
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: '#5e5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e3e2e2'
  on-secondary-container: '#646464'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#1b1b1b'
  on-tertiary-container: '#848484'
  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: '#e3e2e2'
  secondary-fixed-dim: '#c7c6c6'
  on-secondary-fixed: '#1b1c1c'
  on-secondary-fixed-variant: '#464747'
  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-display:
    fontFamily: Noto Serif
    fontSize: 64px
    fontWeight: '400'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Serif
    fontSize: 40px
    fontWeight: '400'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Noto Serif
    fontSize: 24px
    fontWeight: '400'
    lineHeight: '1.3'
    letterSpacing: '0'
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '300'
    lineHeight: '1.6'
    letterSpacing: 0.01em
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: '300'
    lineHeight: '1.6'
    letterSpacing: 0.01em
  label-caps:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.15em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '300'
    lineHeight: '1.4'
    letterSpacing: '0'
spacing:
  unit: 4px
  gutter: 1px
  margin-page: 64px
  container-max: 1440px
  stack-sm: 16px
  stack-md: 32px
  stack-lg: 80px
---

## Brand & Style

This design system is a study in restraint, treating the digital interface as a physical monolith carved from stone. It centers on the "skeleton" of the information—prioritizing raw structural beauty over decorative artifice. The aesthetic is ultra-minimalist and architectural, stripping away all non-essential elements to reveal the underlying logic of the content. 

The target audience consists of design-literate users, architects, and researchers who value clarity and intellectual rigor. The emotional response should be one of quiet authority, permanence, and absolute focus. By utilizing a monochromatic palette and a rigid grid, the design system transforms the browser into a high-end editorial gallery or an architectural blueprint.

## Colors

The color strategy is strictly monochromatic. Pure white (#FFFFFF) serves as the primary canvas, representing the "physical" surface of the monolith. Deep black (#000000) is reserved for structural lines, primary headlines, and high-priority interactions. 

Secondary information and UI decorators utilize a scale of neutral greys to create depth without introducing hue. Contrast is the primary tool for hierarchy; color is never used to convey meaning. The focus remains on the interplay of light and shadow, or more accurately, ink and void.

## Typography

The typographic pairing is a dialogue between the traditional and the functional. **Noto Serif** provides a refined, authoritative voice for headlines, echoing the permanence of chiseled stone. It should be set with tight leading to emphasize its structural mass.

**Inter** is utilized for all body and utility text, specifically in its semi-thin (300) weight to create a light, airy texture that contrasts against the heavier serif headers. Label text is always set in uppercase with generous letter spacing to serve as a rhythmic anchor for the grid.

## Layout & Spacing

This design system employs a rigid, fixed grid system that treats the viewport as a physical object. The layout is governed by a 12-column grid where the "gutters" are not empty space, but hairline strokes of 1px. This creates a "skeleton" effect where every module is visually boxed or separated by precise coordinates.

Margins are generous and fixed, forcing the content into a centered monolith. Spacing follows a strict geometric progression (base 4px), ensuring that the distance between elements feels intentional and rhythmic. Vertical rhythm is just as important as horizontal alignment; all elements must snap to a baseline grid.

## Elevation & Depth

Depth is not achieved through shadows or blurs, but through **tonal layering and hairlines**. The "monolith" approach rejects the concept of floating elements. Instead, components are either etched into the surface or stacked as distinct, flat planes.

1.  **Low-Contrast Outlines:** All containers are defined by 1px solid borders (#E5E5E5 or #000000). 
2.  **Inset Surfaces:** Subtle grey backgrounds (#F5F5F5) are used to indicate interactive regions or nested content.
3.  **Strict Flatness:** No box-shadows are permitted. Z-axis hierarchy is communicated solely through line weight and the density of the grid.

## Shapes

The shape language is strictly **Sharp (0)**. There are no rounded corners in this design system. Every button, input field, and container must have 90-degree angles to maintain the architectural, monolithic feel. This mathematical precision reinforces the "skeleton" metaphor, suggesting a structure that is built rather than grown.

## Components

### Buttons
Buttons are rectangular blocks with 1px borders. Primary buttons use a solid black fill with white text; secondary buttons use a white fill with a black border. Transitions between states should be instantaneous—avoiding soft fades to maintain the rigid feel.

### Input Fields
Fields are represented as simple horizontal lines or fully enclosed boxes with no internal padding on the left/right to align text perfectly with the grid's vertical axes. The label sits above the field in the `label-caps` style.

### Cards & Modules
Cards are not treated as "floating" objects but as "cells" within the grid. They are separated by 1px dividers. Content within cards should follow the same strict margins as the rest of the page.

### Navigation
The navigation is a horizontal bar at the top or a vertical spine at the left, separated by a single 1px line. It functions as a structural frame for the page content.

### Data Lists
Lists use 1px horizontal dividers between items. The text is aligned to the grid columns, creating a table-like appearance even for simple lists. Use the `label-caps` style for headers.