# Minimal cálido en papel crema

También llamado: minimalismo cálido, minimal crema, UI beige, minimal acogedor, diseño blanco papel, web de lujo silencioso  
Época: 2021 en adelante (Arc, herramientas cercanas a Notion, SaaS indie, sitios de newsletters)  
Página: https://designforai.dev/es/style/cream-paper-warm-minimal

## Rasgos

- base blanco roto cálida (crema, hueso, lino) en lugar de blanco puro
- texto carbón o negro cálido, nunca un #000 frío
- un acento terroso: terracota, oliva, ocre o azul empolvado
- títulos en serif con cuerpo en sans humanista, o una única sans cálida
- radio suave (10-14px), sombras casi inexistentes o bordes de 1px en gris cálido
- espacio en blanco generoso, jerarquía tranquila, etiquetas píldora pequeñas
- movimiento suave; nada rebota

Paleta: #f7f3ea crema, #1f1d1a negro cálido, #6b665e apagado, #e4ddd0 línea, #c2603e acento terracota, #ede7da superficie sutil

Tipografía: Fraunces, Newsreader o Instrument Serif para títulos (500-600 a 36-56px), DM Sans, Geist o Manrope para el cuerpo a 16-17px; o bien solo la parecida a Söhne "Instrument Sans"

## Haz

- elige la calidez una vez: cada gris debería llevar un toque de amarillo o rojo para que nada se vea frío
- usa bordes de 1px en #e4ddd0 en lugar de sombras; una sombra suave como máximo para un elemento flotante
- mantén el acento por debajo del 5% de la página (enlaces, un botón, una etiqueta)

## Evita

- no metas un acento azul frío en la paleta cálida
- no añadas el modo oscuro como una ocurrencia tardía; si lo necesitas, construye un oscuro cálido (#1c1a17), no uno frío
- no lo abarrotes; el estilo muere sin espacio

Conocido por: Sitio del navegador Arc, Cosmos, Read.cv, temas de Bearblog, Are.na (parcial)

## Semilla CSS

```css
:root{--bg:#f7f3ea; --surface:#ede7da; --fg:#1f1d1a; --muted:#6b665e; --line:#e4ddd0; --accent:#c2603e; --radius:12px; --font:'DM Sans',sans-serif; --font-display:'Fraunces',serif}
```

## Prompt

Construye el sitio en estilo minimal cálido de papel crema. Fondo #f7f3ea, superficie secundaria #ede7da, texto #1f1d1a, apagado #6b665e, bordes #e4ddd0, un solo acento #c2603e. Fuentes: Fraunces 500 para títulos a 52/34/24px con tracking -0.015em y line-height 1.1, DM Sans 400 a 17px para el cuerpo con line-height 1.65, 13px 500 para etiquetas. Layout: max-width 720px para el texto y 1080px para las retículas, padding de página 24px, 112px entre secciones. Las tarjetas son superficie #ede7da con borde 1px #e4ddd0, border-radius 12px, padding 24px, sin sombra. Botón primario: fondo #1f1d1a, texto #f7f3ea, radio 10px, 44px de alto; el secundario es un enlace de texto en #c2603e con subrayado de 1px desplazado 4px. Etiquetas: píldora, #ede7da, 12px en mayúsculas 0.06em. Las imágenes reciben radio 12px y un borde de 1px. Iconos de 20px, trazo de 1.5px, #6b665e. Movimiento: 200ms ease en el color del hover y un fundido de 400ms solo al cargar la página. Sin blanco puro ni negro puro en ningún sitio.