---
name: Apartamento
description: "Worth including as a prime example of blending classic print magazine sensibilities with bold, modern web UI accents."
version: alpha

colors:
  background: "#F8F4EC"
  primary: "#000000"
  tertiary: "#FFEE42"
  neutral: "#767676"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 42px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "-0.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.6px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A lifestyle magazine site blending classic editorial typography with bold, high-contrast graphic accents.

*A sophisticated print magazine adapted for the web with a bold, distinctive pop.*

## Colors

Muted, warm neutrals dominate the canvas, punctuated by a single, intense high-chroma yellow for critical interactive elements.

- **Background (`#F8F4EC`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FFEE42`)** — uses `accent` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use a high-contrast transitional serif for major headings to evoke print magazine prestige.
- Use a geometric humanist sans-serif for UI elements, navigation, and body text for clean legibility.
- Apply wide letter-spacing to sans-serif text to enhance its modern, airy feel.

## Layout

Classic magazine grid with a dominant, full-width hero image and a structured column layout for article cards.

*Rhythm:* generous padding and whitespace to support the editorial layout and let images breathe

## Elevation & Depth

- Borders: minimal, using thin black borders for inputs and navigation underlines

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal text-based buttons with pill-shaped rounded borders.
- **card:** Content cards featuring large editorial photography, serif titles, and sans-serif metadata.
- **chip:** Simple text links or tag-like elements.
- **input:** High-contrast rounded pill inputs with black borders on a vibrant yellow background.
- **hero:** Full-viewport photographic hero with a central, striking graphic modal overlay.

## Do's and Don'ts

**Don't:**
- don't use a stark white background — screenshot shows a warm off-white (#F8F4EC) base
- don't make every button bright yellow — screenshot shows yellow is strictly reserved for the modal overlay
- don't use a sans-serif for major headings — screenshot shows a high-contrast transitional serif for 'Latest stories'
- don't use heavily rounded squares for inputs — screenshot shows extreme pill-shape rounding
- don't clutter the layout with dense UI patterns — screenshot shows a clean, breathing editorial grid
- don't add complex drop shadows to UI cards — screenshot shows completely flat, shadowless components

---

## System Prompt (paste into AI agent)

```
Design a sophisticated editorial website inspired by Apartamento Magazine. Use a warm off-white background (#F8F4EC) and black (#000000) ink. Typography should feature a transitional serif for major headlines and a geometric humanist sans-serif for navigation and body text. Use a bold, vibrant yellow (#FFEE42) sparingly as a high-contrast accent for critical overlays like newsletter modals, but keep the rest of the interface restrained and elegant. The layout should be an airy editorial grid with generous whitespace. Never use drop shadows, loud gradients, or aggressive marketing language. Maintain a calm, cultured, and premium feel throughout.
```