---
name: Architectural LatAm Agency
colors:
  surface: '#f6fafa'
  surface-dim: '#d6dbdb'
  surface-bright: '#f6fafa'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f0f4f4'
  surface-container: '#eaefee'
  surface-container-high: '#e5e9e9'
  surface-container-highest: '#dfe3e3'
  on-surface: '#171c1d'
  on-surface-variant: '#434847'
  inverse-surface: '#2c3131'
  inverse-on-surface: '#edf2f1'
  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: '#191c1d'
  on-tertiary-container: '#818485'
  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: '#e1e3e3'
  tertiary-fixed-dim: '#c4c7c7'
  on-tertiary-fixed: '#191c1d'
  on-tertiary-fixed-variant: '#444748'
  background: '#f6fafa'
  on-background: '#171c1d'
  surface-variant: '#dfe3e3'
typography:
  display:
    fontFamily: Plus Jakarta Sans
    fontSize: 80px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: -0.04em
  h1:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '600'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  h2:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  h3:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.3'
    letterSpacing: '0'
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  label-caps:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: 0.1em
spacing:
  unit: 8px
  gutter: 32px
  margin-page: 80px
  section-gap: 160px
  container-max: 1440px
---

## Brand & Style

This design system is built upon the concept of "Architectural Clarity." It is designed for a premium LatAm agency that bridges the gap between raw, visceral energy and refined, international sophistication. The brand personality is authoritative, quiet, and deliberate.

The visual style is **Minimalism** elevated by **High-Contrast** elements. It draws inspiration from modern Brazilian and Mexican brutalist architecture—utilizing heavy mass, sharp lines, and the dramatic interplay between light and shadow. The 0.6 visual temperature ensures the environment feels calm and curated, avoiding the clinical sterility of pure white by introducing a subtle, atmospheric depth.

## Colors

The palette is anchored by a binary relationship between "Absolute Deep" (#000505) and "Brilliant Surface" (#FFFFFF). This extreme contrast is softened only by the "Atmospheric Grey" (#707575) which provides the 0.6 visual temperature—a slight cool-neutral lean that evokes the feel of concrete and polished steel.

- **Primary:** Used for typography, structural borders, and high-impact CTAs.
- **Surface:** The primary canvas. Use generous white space to allow the deep black elements to "weight" the page.
- **Utility:** Use tertiary grays sparingly for background layering and subtle component states.

## Typography

This design system utilizes **Plus Jakarta Sans** exclusively to maintain a cohesive, sophisticated rhythm. The typeface's modern geometry provides the "approachable" counter-balance to the rigid high-contrast color palette.

The typographic hierarchy relies on dramatic scale shifts. Large display sizes should use tight tracking and bold weights to mimic architectural signage. Body copy remains airy with a 1.6 line height to ensure maximum legibility against the brilliant white surfaces. "Label-caps" are used for navigation and metadata to provide a technical, blueprint-like feel.

## Layout & Spacing

The layout philosophy follows a **Fixed Grid** model of 12 columns. Precision is paramount. Negative space is treated as a physical material; it is not "empty" but a structural component that directs the eye.

- **Negative Space:** Use massive vertical gaps (Section Gaps) to separate distinct thoughts or case studies.
- **Rhythm:** All spacing must be a multiple of the 8px base unit. 
- **Alignment:** Content should predominantly align to the left axis to create a strong vertical "spine" throughout the experience.

## Elevation & Depth

To maintain the architectural feel, this design system avoids soft shadows and traditional blurs. Depth is conveyed through **Tonal Layers** and **Crisp Outlines**.

- **Level 0 (Base):** Brilliant White (#FFFFFF).
- **Level 1 (Intervention):** Elements outlined with a 1px solid border of #000505.
- **Level 2 (Overlay):** Solid Black (#000505) blocks that "cut" into the white surface, creating a void effect.
- **The Line:** Use 1px or 2px horizontal rules to separate content, acting as "structural beams" for the UI.

## Shapes

The shape language of this design system is **Sharp (0)**. 

Every element—buttons, cards, input fields, and containers—must feature 90-degree corners. This reinforces the architectural narrative and conveys a sense of precision and premium quality. Circular elements are permitted only for functional icons or specific brand-related photography crops to create a purposeful contrast against the rigid rectangular framework.

## Components

Components in this design system should feel like objects within a gallery.

- **Buttons:** Use a "High-Contrast Toggle" style. Primary buttons are solid #000505 with white text. On hover, they invert to white with a 1px #000505 border.
- **Input Fields:** Minimalist design with only a bottom border (2px solid black). Labels use the "label-caps" typography style positioned 8px above the field.
- **Cards:** No shadows. Cards are defined by 1px black borders or by being placed on a tertiary gray background. Padding within cards should be generous (min 40px).
- **Lists:** Separated by 1px horizontal rules that span the full container width.
- **Navigation:** Top-tier navigation uses "label-caps." Hover states are indicated by a simple 2px underline or a weight shift.
- **Images:** Photography should be high-contrast, often utilizing architectural angles or desaturated tones to match the visual temperature.