---
name: Andean Modernism
colors:
  surface: '#fcf9f8'
  surface-dim: '#dcd9d9'
  surface-bright: '#fcf9f8'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f2'
  surface-container: '#f0eded'
  surface-container-high: '#eae7e7'
  surface-container-highest: '#e5e2e1'
  on-surface: '#1c1b1b'
  on-surface-variant: '#564338'
  inverse-surface: '#313030'
  inverse-on-surface: '#f3f0ef'
  outline: '#8a7266'
  outline-variant: '#ddc1b3'
  surface-tint: '#9a4600'
  primary: '#974400'
  on-primary: '#ffffff'
  primary-container: '#bb5808'
  on-primary-container: '#fffbff'
  inverse-primary: '#ffb68d'
  secondary: '#446464'
  on-secondary: '#ffffff'
  secondary-container: '#c6e9e9'
  on-secondary-container: '#4a6a6a'
  tertiary: '#605c50'
  on-tertiary: '#ffffff'
  tertiary-container: '#797468'
  on-tertiary-container: '#fffbff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffdbc9'
  primary-fixed-dim: '#ffb68d'
  on-primary-fixed: '#321200'
  on-primary-fixed-variant: '#763400'
  secondary-fixed: '#c6e9e9'
  secondary-fixed-dim: '#abcdcd'
  on-secondary-fixed: '#002020'
  on-secondary-fixed-variant: '#2c4c4c'
  tertiary-fixed: '#e9e2d3'
  tertiary-fixed-dim: '#cdc6b8'
  on-tertiary-fixed: '#1e1b13'
  on-tertiary-fixed-variant: '#4b463c'
  background: '#fcf9f8'
  on-background: '#1c1b1b'
  surface-variant: '#e5e2e1'
typography:
  display:
    fontFamily: Noto Serif
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  h1:
    fontFamily: Noto Serif
    fontSize: 34px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  h2:
    fontFamily: Noto Serif
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.0'
    letterSpacing: 0.1em
  technical:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.2'
    letterSpacing: 0.02em
spacing:
  base: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 16px
  margin-mobile: 20px
---

## Brand & Style
This design system fuses the ancestral weight of Andean architecture with the precision of contemporary modernism. The brand personality is grounded, architectural, and high-end, targeting an audience that values craftsmanship, heritage, and technical clarity. 

The aesthetic direction is a hybrid of **Minimalism** and **Brutalism**, leaning into raw structural integrity rather than decorative softness. It evokes an emotional response of "permanent sophistication"—as if the interface were carved from stone and framed by engineering. Key visual drivers include geometric rigidness, mathematical grids, and the use of technical line-work to define spatial boundaries.

## Colors
The palette is rooted in the earth but refined through a modern lens. 

*   **Terracotta (#D2691E):** The primary brand color. Used for key actions, brand moments, and critical structural accents. It represents the warmth of clay and historic masonry.
*   **Slate Gray (#2F4F4F):** The secondary color, used for technical elements, secondary buttons, and deep background layers to provide a cool contrast to the warmth of the palette.
*   **Warm Cream (#FDF5E6):** The foundational surface color. It replaces pure white to provide a "raw linen" or "limestone" feel, reducing eye strain while maintaining a premium editorial look.
*   **Technical Black (#1A1A1A):** Used for typography and sharp borders to ensure high legibility and a sense of architectural permanence.

## Typography
The typographic strategy relies on a tension between the classic and the technical. 

**Noto Serif** is used for all headings and editorial moments to ground the design in tradition and timelessness. It should be typeset with tight leading to mimic architectural blocks.

**Space Grotesk** provides the functional counterpoint. Its geometric, slightly idiosyncratic terminals give the body copy and data a technical, engineered feel. Use the all-caps `label-caps` style for navigation, metadata, and overlines to reinforce the "blueprinted" aesthetic.

## Layout & Spacing
This design system utilizes a **Fixed Grid** model within a mobile-first framework. The layout is governed by an 8pt grid system, but visually emphasizes a 4-column mobile structure.

Margins are generous (20px) to evoke an editorial, gallery-like feel. Content blocks are separated by significant vertical white space (`xl` or `lg`) to allow each "architectural" element to breathe. Use 1px Technical Black or Slate Gray dividers to separate logical sections, mimicking a blueprint or technical drawing.

## Elevation & Depth
In alignment with the structural theme, the design system avoids ambient shadows and soft blurs. Depth is achieved through **Tonal Layering** and **Bold Borders**.

*   **Tiers:** The lowest layer is the Warm Cream surface. Elevated elements (like cards) sit on a slightly darker "Stone" tint or are defined solely by a 1.5pt solid black border.
*   **The "Carved" Look:** Instead of shadows, use "inset" line-work to indicate depth.
*   **Technical Line-work:** Use 1px lines in Slate Gray to create hair-line dividers that suggest a structural skeleton underneath the UI.

## Shapes
The shape language is strictly **Sharp (0)**. There are no radii in the design system. Every button, card, input field, and image container must have 90-degree corners. This reinforces the "Modernism" aspect of the system, suggesting the precision of cut stone and steel beams. 

Avoid circles even for profile avatars; use squares or octagons if a secondary shape is required for variety.

## Components
*   **Buttons:** Rectangular with 0px border-radius. Primary buttons use a Terracotta fill with white text. Secondary buttons use a 1.5pt Slate Gray border with no fill.
*   **Inputs:** Bottom-border only or full-framed with 1px Technical Black borders. Labels sit above in the `label-caps` typography style.
*   **Cards:** Defined by a 1px Slate Gray border. No box-shadows. Headers within cards should be separated by a 1px horizontal rule.
*   **Chips/Tags:** Small rectangular boxes with a light Slate Gray background and the `technical` font style.
*   **Progress Indicators:** Use sharp, stepped blocks rather than smooth continuous bars to maintain the geometric theme.
*   **Navigation:** A minimalist bottom bar for mobile with icons built from consistent stroke weights (1.5pt) and no fills.