---
version: alpha
name: "Apartamento"
description: "Warm parchment editorial — an everyday-life interiors magazine rendered in Futura, Times, and an unhurried ochre accent that reads like afternoon light on uncoated paper"

colors:
  # Surface / canvas
  background: "#f8f4ec"              # warm cream — the brand's most important token; lifted from logo context
  surface: "#ffffff"                  # white used for shop cards, modal overlays, shop backgrounds
  surface-dark: "#000000"             # black footer and inverted hero zones

  # Ink / text
  ink: "#000000"                      # primary text — pure black on cream
  ink-secondary: "#333333"            # estimated secondary text /* estimated */
  on-dark: "#ffffff"                  # white text on dark/inverted surfaces

  # Brand accent
  primary: "#ffee42"                  # the single chromatic moment — vivid ochre/yellow; "Add to basket" buttons, accents
  on-primary: "#000000"               # black on the ochre accent
  primary-hover: "#d9ca38"            # extracted hover tone of primary

  # Borders
  border: "#000000"                   # 1px solid black — the structural language
  border-muted: "#cbcbcb"             # focus/input border, softer divider

  # State / interaction
  text-hover: "#ffffff"               # links invert to white on hover (dark zone behavior)
  focus-ring: "#2e9935"               # extracted from WooCommerce focus shadow (non-brand, functional) /* estimated functional */

  # Semantic
  error: "#ff0000"                    # extracted; used for link states in some zones
  link-accent: "#134097"              # extracted blue; WP admin / promo zone only — not a brand color

  # Shadow tints
  shadow-soft: "#232323"              # was rgba(35,35,35,0.1) — Google format requires hex /* estimated */

typography:
  display-hero:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 63px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: 1px
  display:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.32
    letterSpacing: 1px
  heading-editorial:
    fontFamily: "Times, 'Times New Roman', Georgia, serif"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: 0px
  heading-section:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.6px
  heading-sub:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.32
    letterSpacing: 0.6px
  heading-minor:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: 0.63px
  body-large:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 1.2px
  body:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.6px
  nav-link:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.47
    letterSpacing: 0.6px
  label-times:
    fontFamily: "Times, 'Times New Roman', Georgia, serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.2px
  caption:
    fontFamily: "futura-pt, 'Futura', 'Century Gothic', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.6px

spacing:
  xs: 5px
  sm: 10px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 48px
  3xl: 80px

rounded:
  none: 0px
  sm: 5px
  pill: 99px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
    borderColor: "{colors.border}"
  button-outline-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  nav-item-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 0px
---

# Apartamento Design System

## Overview

Apartamento's digital face is an extension of what the magazine has always argued: that the most interesting interiors are the ones people actually live in. The site opens on a specific warm cream (`{colors.background}`) — not the blank white of a luxury fashion house, not the cold grey of a design portal, but a tone that reads like uncoated paper held at a kitchen table. Against this ground, the typographic system operates with a confidence born of restraint. Futura PT carries almost everything — navigation, headings, product copy, captions — in weights 400 and 500, set with a gentle positive letter-spacing (`0.6px`–`1.2px`) that keeps the geometric sans from compressing into digital rigidity. The one deliberate counterpoint is a serif: Times appears at large sizes for select editorial moments, its bracketed strokes landing on the cream surface like a typewritten annotation.

The brand's single chromatic gesture is a vivid ochre-yellow (`{colors.primary}`). Applied exclusively to the "Add to basket" call-to-action buttons, it is almost absurdly bright against the muted cream canvas — the visual equivalent of a Post-it note left on a manuscript. Everything else is black on cream: navigation, section headers, editorial copy, dividers. The yellow exists to make commerce unmistakable. The contrast between the editorial's careful monochromatism and that one saturated moment captures exactly what Apartamento does in print: it takes the everyday seriously, but it also sells you things.

Spatial decisions are unhurried. Shop grids carry product images full-width within their cells, bordered by `1px solid #000000` rules that feel press-trim precise. Navigation is slim, typographically quiet, lowercase in places — the `text-transform: lowercase` on key nav links is one of the most characteristic micro-choices in the system, a softening that prevents Futura's geometry from feeling corporate. The pill-shaped radius on buttons and search inputs is the interface's only obvious nod to the contemporary; the rest is as flat and square as an open magazine spread.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) — not web white; the specific warmth of an uncoated magazine stock
- Futura PT as the sole workhorse typeface — geometric, mid-weight, set with positive letter-spacing that relaxes the face
- Times serif deployed selectively at large scales — a counterpoint that reads handwritten and human against the Futura geometry
- Ochre yellow (`{colors.primary}`) reserved strictly for commerce CTAs — a single saturated accent in an otherwise achromatic interface
- `text-transform: lowercase` on select navigation links — a softening choice that gives Futura warmth it wouldn't otherwise possess
- Pill-shaped radius (`99px`) on buttons and inputs — the only soft shape in a system of otherwise squared elements
- `1px solid #000000` borders as the structural grammar — press-precise, editorial, never decorative
- Positive letter-spacing throughout (`0.6px`–`1.2px`) — Futura at its most approachable, not its most compressed
- 0.3s `ease-out` transitions universally — link, button, media all share the same unhurried motion rhythm
- Bootstrap grid foundation beneath the editorial surface — responsive, multi-column, Bootstrap container max-widths
- Lowercase link convention signals editorial informality without losing the magazine's authority
- No gradients, no decorative illustration — photography and typography carry all visual expression

## Colors

### Primary Canvas
- **Apartamento Cream** (`{colors.background}`): The defining ground. A warm, slightly amber-tinged off-white that mirrors uncoated magazine stock. Every layout decision is made against this surface. Text, borders, and the ochre accent all calibrate their character from this base.
- **Paper White** (`{colors.surface}`): Clean white used for shop product cards, modal overlays, and e-commerce backgrounds where a neutral ground is needed. The contrast between cream background and white surface creates subtle zone hierarchy without added color.
- **Ink Black** (`{colors.surface-dark}`): Footer, inverted zones, and structural moments that need pure anchoring dark. Not charcoal — actual black.

### Ink
- **Primary Ink** (`{colors.ink}`): The entire text and structural system resolves to black. Navigation, editorial headings, body copy, dividers, button outlines — all the same value. The monochrome commitment is complete outside of the single accent.
- **Secondary Ink** (`{colors.ink-secondary}`): A fractionally lifted near-black for secondary body text and metadata in longer reading contexts. Estimated.
- **On Dark** (`{colors.on-dark}`): White text for inverted surfaces, footer links, and labels on the black background zones.

### Brand Accent
- **Apartamento Ochre** (`{colors.primary}`): The brand's one chromatic decision. Applied to "Add to basket" buttons across the shop. Its saturation level is high enough to register instantly against the cream canvas — a visual alarm that says "this is for sale." On hover, it deepens to `{colors.primary-hover}`.

### Borders and Structure
- **Press Rule** (`{colors.border}`): The `1px solid #000000` border that frames shop product cells, input fields, and structural dividers. Crisp, print-precise.
- **Focus Border** (`{colors.border-muted}`): A softer grey used for input focus states — drawn from the WooCommerce/form component layer.

### Interaction States
- **Link Hover** (`{colors.text-hover}`): Links on dark zones invert to white on hover. On the cream surface, hover states typically involve the ochre background fill (`{colors.primary}`) rather than a text color change.

## Typography

### Font Family
- **Primary Sans**: `futura-pt` (Adobe Fonts / Typekit), with fallbacks: `'Futura'`, `'Century Gothic'`, `Arial`, `sans-serif`
- **Editorial Serif**: `Times`, with fallbacks: `'Times New Roman'`, `Georgia`, `serif`
- **System Fallback**: `Arial` — appears in cookie consent and Bootstrap utility contexts only
- **OpenType Features**: No explicit feature-settings detected; futura-pt served as a static webfont via Adobe Fonts

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Largest hero headings — magazine cover zones, feature section titles; 63px Futura PT medium |
| `display` | Secondary display scale — 56px headline variants, issue callouts |
| `heading-editorial` | Times serif at 45px — the editorial counterpoint; placed where warmth and history are needed |
| `heading-section` | 28px Futura PT medium — section titles, shop categories, primary content headings |
| `heading-sub` | 25px Futura PT regular — sub-section labels and secondary heading tier |
| `heading-minor` | 23px Futura PT medium — card-level headings, product names |
| `body-large` | 21px Futura PT — editorial lede copy, introductory paragraphs; high letter-spacing |
| `body` | 18px Futura PT — primary reading copy, product descriptions, navigation text |
| `nav-link` | 16px Futura PT regular — main navigation and footer links |
| `button-ui` | 18px Futura PT bold — CTA labels; the one use of weight 700 in the system |
| `label-times` | 15px Times medium — small editorial labels and caption contexts where serif is preferred |
| `caption` | 13px Futura PT — metadata, timestamps, fine print |

### Principles
- **Futura PT as the house voice**: The geometric sans is the system's primary instrument. Its low-contrast strokes and circular forms give Apartamento's interface a clarity that reads as confident without being cold. The consistent positive letter-spacing (`0.6px`) relaxes it further — this is not Futura at corporate attention, but Futura at ease.
- **Times as editorial counterpoint**: The serif appears selectively at large sizes — 45px headings — where its bracketed strokes, taller x-height, and historical warmth read against the geometric primary. It is a deliberate interruption, like a handwritten note in a typeset book.
- **Weight 700 for commerce only**: Bold Futura PT appears in `button-ui` — CTA labels — and nowhere else. Hierarchy is expressed through size and letter-spacing, not weight amplification.
- **Lowercase as softener**: `text-transform: lowercase` on navigation links is a signature micro-decision. Futura in uppercase would read institutional; lowercase reads human.
- **Positive tracking throughout**: Where many editorial systems use negative letter-spacing at large sizes to pack headlines tight, Apartamento opens them with positive tracking. This gives the interface a relaxed, unhurried quality that mirrors the magazine's editorial position.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px.

The spacing system is functional rather than expressive — section padding and component gaps follow Bootstrap's grid logic rather than an editorial override. The `30px` and `48px` values handle the majority of section rhythm; `80px` appears at major structural transitions between editorial zones. Compact by the standards of Kinfolk or Cereal, but not dense — the cream canvas does the breathing.

### Grid & Container
- Bootstrap container system: `1440px` max container, `1320px` inner width, `1200px` at tablet-large, stepping down through standard Bootstrap breakpoints
- Shop grid: 2-column or 3-column product card layout within the Bootstrap grid
- Editorial sections: full-width container, centered content column
- Header: wordmark centered or left, navigation links inline, lightweight horizontal bar

### Whitespace Philosophy
- **Cream as breathing room**: The background tone reduces the visual weight of tight spacing. On white, the same gaps would read compressed; on cream they read calm.
- **Borders over shadows for separation**: Product cards are delineated by `1px solid {colors.border}` rather than lifted surfaces with drop shadows. The shop grid reads like a page of stamp illustrations, each item crisply bounded.
- **Navigation compactness as editorial signal**: Tight navigation padding is a curatorial choice — the editorial interface does not celebrate its own chrome.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All content elements, navigation, editorial cards |
| Ambient (Level 1) | `rgba(35,35,35,0.1) 0px 0px 30px 0px` | Subtle ambient haze on select modal or overlapping elements |
| Focus Ring | `{colors.border-muted}` 1px border | Input focus state from WooCommerce form layer |

**Shadow Philosophy**: Apartamento's interface is nearly flat. The single ambient shadow value (`rgba(35,35,35,0.1) 0px 0px 30px 0px`) appears once in the extracted data — likely on a modal or flyout — and at 0.1 opacity is barely perceptible. No product cards lift. No navigation bars gain elevation on scroll. The `1px solid {colors.border}` press rule is the elevation system: it creates separation through precision, not depth. This is consistent with the editorial identity: an interiors magazine that trusts beautiful images over decorative surface effects.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All editorial content — image cells, article cards, structural containers |
| `sm` | 5px | Cookie consent and modal UI (third-party layer) |
| `pill` | 99px | Buttons ("Add to basket", outline CTAs) and search input fields |

The system is binary at the brand level: sharp (`{rounded.none}`) for all editorial and content elements, pill (`{rounded.pill}`) for interactive controls. Product images sit square in their grid cells; buttons are fully rounded. This pairing is immediately readable — the rounded shapes signal "action," the square shapes signal "content." The gap between these two values is absolute; there is no intermediate rounding in the brand proper.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — ochre (`{colors.primary}`) fill, black text, pill-shaped, bold Futura PT. The commerce call-to-action. Used exclusively for "Add to basket" and purchase-flow actions. Its saturation is the system's single chromatic declaration.
- **`button-outline`** — white fill, black ink, black `1px solid` border, pill-shaped. Secondary actions, newsletter subscriptions, modal confirmations. Inverts to black-fill on hover.
- **`button-outline-hover`** — black-filled inversion state: `{colors.ink}` background, `{colors.on-dark}` text. The hover communicates availability through full reversal.

### Cards

Shop product cards sit on white (`{colors.surface}`) within the cream canvas, bounded by `1px solid {colors.border}`. No shadow, no radius on the card container itself. Each card: full-width product image (square or portrait crop), then product name in `{typography.heading-minor}`, price and action below. The card border does all separation work.

### Inputs

Newsletter email inputs and search fields use pill-shaped borders (`{rounded.pill}`) with `1px solid {colors.border}`. Focus state transitions the border to `{colors.border-muted}` with a soft focus-shadow from the WooCommerce layer. Text in `{typography.body}`, background white.

### Badges

The ochre `{colors.primary}` also appears as badge/tag background in promotional contexts — issue number callouts, "new" labels. Black text on ochre, pill-shaped, caption-scale type.

### Navigation

Slim horizontal bar: Apartamento wordmark (SVG, ~205px wide), navigation links in `{typography.nav-link}` with `text-transform: lowercase` on select items. `0.3s ease-out` hover transitions. Nav hover states shift link background to `{colors.primary}` or text to white depending on zone. No sticky shadow on scroll — the bar stays visually flat throughout.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the canvas — the warm cream is Apartamento's most recognizable single visual decision; replacing it with `#ffffff` would immediately read as a different magazine
- Apply `{colors.primary}` exclusively to commerce CTAs ("Add to basket", purchase actions) — its saturation earns attention only because it appears nowhere else
- Set navigation and body text in `futura-pt` with positive letter-spacing (`0.6px`) — the openness is part of the brand's warmth; compressed Futura reads cold
- Use `text-transform: lowercase` on primary navigation links — it is a micro-decision with outsized brand character
- Apply `{rounded.pill}` to all interactive controls (buttons, inputs) and `{rounded.none}` to all content containers — the binary contrast is the shape language
- Use `1px solid {colors.border}` for all structural separation — card borders, section dividers, input outlines all share this single line weight
- Deploy Times serif at large scales (`heading-editorial`) for select editorial moments — it provides warmth and history that Futura alone cannot
- Keep motion at `0.3s ease-out` — unhurried, consistent, never rushed

### Don't
- Don't introduce a second chromatic accent — the ochre exists precisely because it is alone; a second saturated color would collapse the editorial/commerce distinction
- Don't use negative letter-spacing at display sizes — Apartamento's Futura is positively tracked; the tightened-headline convention from fashion or luxury brands is the wrong register here
- Don't apply border-radius to image containers or editorial cards — the `{rounded.none}` on content is non-negotiable; rounded images would read generic lifestyle, not Apartamento editorial
- Don't make navigation uppercase — `text-transform: lowercase` (or mixed-case) is the character; all-caps Futura would shift the tone toward institutional
- Don't add drop-shadows to product cards or content containers — the `1px solid {colors.border}` press rule is the depth vocabulary; shadows would introduce a lift inconsistent with the flat, print-referencing surface
- Don't use the WP admin blue (`{colors.link-accent}`) or WooCommerce green (`{colors.focus-ring}`) outside their functional UI contexts — they are third-party framework values, not brand colors
- Don't increase body weight above 500 except in button labels — weight 700 is for CTAs; editorial copy in bold breaks the reading register

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, logo and hamburger only, body text at 16px |
| Mobile | 375–480px | Single column, stacked shop grid, nav collapsed |
| Mobile Large | 480–640px | Single column maintained, shop grid 1-up |
| Tablet Small | 640–768px | 2-column shop grid begins, nav expands partially |
| Tablet | 768–992px | 2-column grids, editorial sections at full width |
| Desktop Small | 992–1200px | 3-column shop grids, full editorial layout |
| Desktop | 1200–1440px | Bootstrap container at 1200px, multi-column |
| Large Desktop | >1440px | 1320px inner container, generous margins, full editorial layout |

### Touch Targets
- "Add to basket" buttons: pill shape with `10px 24px` padding — comfortable touch height
- Navigation links: 16px type with `10px` vertical padding — adequate at mobile
- Newsletter inputs: pill-shaped with sufficient interior padding for thumb typing
- Product image cells: full-cell tap target wrapping anchor element

### Collapsing Strategy
- **Navigation**: Full horizontal nav collapses to hamburger at tablet breakpoints; wordmark remains visible
- **Shop grid**: 3-column → 2-column → 1-column across breakpoints; card chrome unchanged at each size
- **Editorial sections**: Single-column article flow maintained; text size scales fractionally (estimated ~10–15% compression from desktop to mobile)
- **Hero headings**: Futura display sizes compress: 63px → 45px → approximately 32px; letter-spacing maintained proportionally
- **Typography face selection**: No face changes across breakpoints — Futura PT and Times remain in use at all sizes

### Image Behavior
- Product photography: `object-fit: cover` within square or portrait aspect-ratio cells; no radius added at any size
- Magazine cover images: portrait format maintained, centered within container
- Editorial photography: full-width within content column; no decorative treatment added at any breakpoint
- The cream background is the frame — at mobile, generous margins compress but the surface character is unchanged

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#f8f4ec` — warm cream, not white)
- Text: `{colors.ink}` (`#000000`)
- Brand accent (commerce only): `{colors.primary}` (`#ffee42`)
- Secondary text: `{colors.ink-secondary}` (estimated `#333333`)
- Border: `{colors.border}` — `1px solid #000000`
- CTA fill: `{colors.primary}`
- CTA text: `{colors.on-primary}` (`#000000`)
- On dark: `{colors.on-dark}` (`#ffffff`)

### Example Component Prompts

- "Create an Apartamento magazine shop card on `{colors.background}`. Container: white (`{colors.surface}`) background, `1px solid {colors.border}` border, `{rounded.none}` radius, `16px` padding. Full-width product image (no radius, no shadow). Below: product title in futura-pt 23px weight 500 letter-spacing 0.63px color `{colors.ink}`, then price in futura-pt 18px weight 400. At bottom: 'Add to basket' button — background `{colors.primary}` (#ffee42), text `{colors.on-primary}` (#000000), futura-pt 18px weight 700, padding 10px 24px, border-radius 99px. No shadow anywhere."

- "Build an Apartamento-style editorial hero section on `{colors.background}` (#f8f4ec). Large heading in futura-pt 63px weight 500 line-height 1.32 letter-spacing 1px color `{colors.ink}`. Subheading in Times 45px weight 400 line-height 1.32 color `{colors.ink}`. Body paragraph in futura-pt 21px weight 400 line-height 1.19 letter-spacing 1.2px. All text left-aligned. No background fills, no shadows, no border-radius on containers."

- "Design an Apartamento navigation bar on `{colors.background}`. Centered wordmark in futura-pt 18px weight 500 letter-spacing 0.6px color `{colors.ink}`. Horizontal nav links to each side in futura-pt 16px weight 400 letter-spacing 0.6px color `{colors.ink}` with text-transform lowercase. On hover, links transition background to `{colors.primary}` (#ffee42) and text to `{colors.on-primary}` (#000000) at 0.3s ease-out. `1px solid {colors.border}` bottom rule below the bar. No box-shadow."

- "Create an Apartamento email subscribe input row on `{colors.background}`. Input field: background `{colors.surface}` (#ffffff), text `{colors.ink}`, border `1px solid {colors.border}`, border-radius 99px, padding 6px 12px, futura-pt 18px weight 400. Adjacent submit button: background `{colors.primary}` (#ffee42), text `{colors.on-primary}` (#000000), futura-pt 18px weight 700, padding 10px 24px, border-radius 99px. Input focus: border transitions to `{colors.border-muted}` (#cbcbcb) at 0.15s ease-in-out."

- "Build an Apartamento-style issue badge/tag: background `{colors.primary}` (#ffee42), text `{colors.on-primary}` (#000000), futura-pt 13px weight 400 letter-spacing 0.6px, padding 4px 12px, border-radius 99px. No shadow, no border. Used for issue number callouts, 'New' labels, promotional tags against `{colors.background}` surface."

- "Design an Apartamento editorial section divider: a single `1px solid {colors.border}` horizontal rule. Above: section label in futura-pt 16px weight 400 uppercase letter-spacing 1px color `{colors.ink}`. No decorative rule weight, no color fill, no margin beyond 20–30px vertical rhythm. The hairline is the sole separator — keep it."

### Iteration Guide

1. Start with `{colors.background}` (#f8f4ec) — the warm cream is the entire tone of the brand; everything reads differently on white
2. Ochre (`{colors.primary}`) is for commerce only — if you are building editorial UI, there is no accent color; all text, borders, and structural marks resolve to `{colors.ink}`
3. Use Futura PT with positive letter-spacing — `0.6px` at body scale, `1px`–`1.2px` at display; never compress it with negative tracking
4. Reach for Times serif (`{typography.heading-editorial}`) when an element needs warmth or history — issue-editorial headers, pull quotes, large callouts
5. Apply `{rounded.pill}` to every interactive control and `{rounded.none}` to every content container — the contrast is the shape system
6. Separate with `1px solid {colors.border}` rules, not shadows or background bands — the press-trim line is the editorial grammar
7. Motion is universally `0.3s ease-out` — keep it there; faster reads urgent, slower reads sluggish, both break the editorial register

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Apartamento. Brand names and trademarks belong to their respective owners.