:root {
/* superficies: solo dos, y la diferencia es del 2% */
--color-canvas: #FAFAFA;
--color-surface: #FFFFFF;
--color-surface-alt: #F2F2F2;
--color-surface-sunk: #EBEBEB;
/* texto */
--color-ink-strong: #000000; /* titulares */
--color-ink: #171717; /* gray-900 · rol "primary" */
--color-foreground: #262626;
--color-text-secondary: #5C5C5C; /* gray-600 · TODOS los párrafos */
--color-text-quiet: #737373; /* gray-500 */
--color-text-tertiary: #A0A0A0; /* gray-350 · SOLO glifos */
/* acción: uno, y solo uno */
--color-primary: #11A8FF; /* blue-500 */
--color-primary-hover: #218FCD; /* blue-600 */
--color-primary-light: #41BAFF; /* blue-400 */
--color-primary-soft: #CFEEFF; /* blue-100 */
--color-primary-deep: #2C76A0; /* blue-700 */
/* el marcador */
--color-marker-gold: rgba(255, 215, 0, 0.30);
--color-marker-gold-ink: #D48F00;
--color-marker-blue: #CFEEFF;
--color-marker-blue-ink: #2C76A0;
--color-marker-gray: #EBEBEB;
--color-marker-gray-ink: #737373;
/* la paleta (vive dentro del producto, no en la landing) */
--color-accent: #FD2B38;
--color-amie-pink: #F6A6A6;
--color-green: #01CA45;
--color-orange: #FE6600;
--color-purple: #A050FF;
--color-pink: #FF329A;
--color-yellow: #F4AF00;
/* estados (derivados) */
--color-success: #01CA45;
--color-success-bg: #CCF4DA;
--color-info: #11A8FF;
--color-info-bg: #CFEEFF;
--color-error: #FD2B38;
--color-error-bg: #FFD5D7;
--color-warning: #F4AF00;
--color-warning-bg: #FDEFCC;
/* hairlines: negro con alpha, nunca un gris sólido */
--color-hair: rgba(0, 0, 0, 0.04);
--color-ring: rgba(0, 0, 0, 0.05);
--color-hair-strong: rgba(0, 0, 0, 0.10);
--font-display: "Inter";
--font-body: "Inter";
--font-quirk: "Averia Serif Libre";
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--radius-xs: 4px; /* el marcador */
--radius-sm: 6px;
--radius-md: 8px; /* controles de 32px */
--radius-lg: 12px; /* tarjetas y botones de 50px */
--radius-xl: 16px;
--radius-full: 9999px;
/* ===== LA FIRMA ===== */
--shadow-natural:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
--shadow-natural-lg:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 1px 1px -0.5px rgba(0, 0, 0, 0.06),
0 3px 3px -1.5px rgba(0, 0, 0, 0.06),
0 6px 6px -3px rgba(0, 0, 0, 0.06),
0 12px 12px -6px rgba(0, 0, 0, 0.04),
0 24px 24px -12px rgba(0, 0, 0, 0.04),
0 24px 24px 2px rgba(0, 0, 0, 0.10);
--shadow-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
--shadow-ring-strong: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
--space-xxs: 4px;
--space-sm: 8px; /* el gap por defecto */
--space-md: 12px;
--space-base: 16px;
--space-lg: 20px; /* padding de tarjeta */
--space-2xl: 28px; /* el módulo de la baseline */
--space-3xl: 32px; /* entre bloques */
--space-5xl: 48px;
--leading-base: 28px; /* body(16), lead(18) y title(20) lo comparten */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 150ms;
}
{
"colors": {
"canvas": "#FAFAFA",
"surface": "#FFFFFF",
"surface-alt": "#F2F2F2",
"surface-sunk": "#EBEBEB",
"ink-strong": "#000000",
"ink": "#171717",
"foreground": "#262626",
"text-secondary": "#5C5C5C",
"text-quiet": "#737373",
"text-tertiary": "#A0A0A0",
"primary": "#11A8FF",
"primary-hover": "#218FCD",
"primary-light": "#41BAFF",
"primary-soft": "#CFEEFF",
"primary-deep": "#2C76A0",
"secondary": "#FFD700",
"secondary-ink": "#D48F00",
"accent": "#FD2B38",
"amie-pink": "#F6A6A6",
"green": "#01CA45",
"orange": "#FE6600",
"purple": "#A050FF",
"pink": "#FF329A",
"yellow": "#F4AF00",
"success": "#01CA45",
"success-bg": "#CCF4DA",
"info": "#11A8FF",
"info-bg": "#CFEEFF",
"error": "#FD2B38",
"error-bg": "#FFD5D7",
"warning": "#F4AF00",
"warning-bg": "#FDEFCC",
"hair": "rgba(0, 0, 0, 0.04)",
"ring": "rgba(0, 0, 0, 0.05)",
"hair-strong": "rgba(0, 0, 0, 0.10)"
},
"grayscale": {
"950": "#0F0F0F", "900": "#171717", "885": "#191919", "870": "#1B1B1B",
"850": "#222222", "800": "#2E2E2E", "750": "#3A3A3A", "740": "#313131",
"700": "#454545", "650": "#515151", "600": "#5C5C5C", "550": "#686868",
"500": "#737373", "450": "#828282", "400": "#919191", "350": "#A0A0A0",
"300": "#AFAFAF", "250": "#BEBEBE", "200": "#CDCDCD", "150": "#DCDCDC",
"100": "#EBEBEB", "75": "#F2F2F2", "50": "#FAFAFA"
},
"gradient": {
"band": {
"value": "linear-gradient(to right top, #CFEEFF, #41BAFF)",
"note": "el único gradiente visible del sitio"
}
},
"typography": {
"display": {
"fontFamily": "Inter",
"fontSize": "56px",
"fontWeight": 700,
"lineHeight": "64px",
"letterSpacing": "-0.0125em"
},
"headline": {
"fontFamily": "Inter",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "54.4px",
"letterSpacing": "-0.0125em"
},
"title": {
"fontFamily": "Inter",
"fontSize": "20px",
"fontWeight": 600,
"lineHeight": "28px",
"letterSpacing": "-0.025em"
},
"lead": {
"fontFamily": "Inter",
"fontSize": "18px",
"fontWeight": 500,
"lineHeight": "28px",
"letterSpacing": "-0.003px"
},
"body": {
"fontFamily": "Inter",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": "28px",
"letterSpacing": "-0.003px"
},
"ui": {
"fontFamily": "Inter",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": "20px",
"letterSpacing": "-0.003px"
},
"caption": {
"fontFamily": "Inter",
"fontSize": "12px",
"fontWeight": 500,
"lineHeight": "15.84px",
"letterSpacing": "-0.003px"
}
},
"rounded": {
"xs": "4px",
"sm": "6px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"full": "9999px"
},
"shadow": {
"natural": "0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px -0.5px rgba(0,0,0,0.06), 0 3px 3px -1.5px rgba(0,0,0,0.06)",
"natural-lg": "0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px -0.5px rgba(0,0,0,0.06), 0 3px 3px -1.5px rgba(0,0,0,0.06), 0 6px 6px -3px rgba(0,0,0,0.06), 0 12px 12px -6px rgba(0,0,0,0.04), 0 24px 24px -12px rgba(0,0,0,0.04), 0 24px 24px 2px rgba(0,0,0,0.10)",
"ring": "inset 0 0 0 1px rgba(0,0,0,0.05)",
"ring-strong": "inset 0 0 0 1px rgba(0,0,0,0.10)",
"sm": "0 1px 2px 0 rgba(0,0,0,0.05)"
},
"spacing": {
"micro": "2px",
"xxs": "4px",
"xs": "6px",
"sm": "8px",
"md": "12px",
"base": "16px",
"lg": "20px",
"xl": "24px",
"2xl": "28px",
"3xl": "32px",
"4xl": "40px",
"5xl": "48px"
},
"components": {
"button-primary": {
"backgroundColor": "{colors.primary}",
"textColor": "#FFFFFF",
"rounded": "{rounded.lg}",
"padding": "12px 28px",
"height": "49.6px",
"boxShadow": "none",
"hover": "background-color: {colors.primary-hover}"
},
"button-secondary": {
"backgroundColor": "{colors.surface}",
"textColor": "{colors.text-secondary}",
"rounded": "{rounded.lg}",
"padding": "12px 28px",
"height": "49.6px",
"gap": "8px",
"boxShadow": "{shadow.natural}",
"hover": "background-color: {colors.canvas}"
},
"card": {
"backgroundColor": "{colors.surface}",
"rounded": "{rounded.lg}",
"padding": "20px",
"gap": "8px",
"boxShadow": "{shadow.natural}",
"border": "none"
},
"marker": {
"backgroundColor": "rgba(255, 215, 0, 0.30)",
"textColor": "{colors.secondary-ink}",
"rounded": "{rounded.xs}",
"padding": "0 4px"
},
"pill": {
"backgroundColor": "{colors.text-quiet}",
"textColor": "#FFFFFF",
"rounded": "{rounded.full}",
"padding": "12px 24px",
"height": "44px"
}
},
"motion": {
"ease": "cubic-bezier(0.4, 0, 0.2, 1)",
"duration": "150ms",
"properties": ["color", "background-color"]
}
}
---
version: "1.0"
name: "Amie"
description: "Sistema visual de Amie: calendario y note-taker de IA construido sobre un casi-blanco
(#FAFAFA) que nunca llega a ser blanco, y un azul cielo (#11A8FF) que es el único color de acción.
Su firma no es el color: es la SOMBRA. Una rampa de siete capas con spread negativo que dobla en
cada escalón (1->3->6->12->24), que produce una elevación tan suave que parece luz real y no CSS.
Segunda firma: el marcador de rotulador, un span con fondo de color al 30% y radio 4px que resalta
media frase dentro de un titular de 56px. Escala de grises de 21 pasos, radios de 4/8/12, hairlines
de negro al 4%, y una única Inter variable. Light mode, silencioso, de precisión."
---
# DESIGN.md - Amie
## 1. Tema Visual y Atmósfera
Amie es un calendario que graba tus reuniones y las convierte en notas. Podría haberse vestido de
dashboard. En cambio se viste de papel.
El lienzo es #FAFAFA, y ese detalle importa: NO es blanco. Es gray-50, el primer escalón de una
rampa de 21 grises, y sobre él las tarjetas sí son #FFFFFF. Esa diferencia de dos puntos de
luminancia es toda la profundidad que el sistema necesita. Nada más.
Bueno, casi nada más. Porque la firma real de Amie no es un color: es la sombra.
box-shadow:
0 0 0 1px rgba(0,0,0,0.06),
0 1px 1px -0.5px rgba(0,0,0,0.06),
0 3px 3px -1.5px rgba(0,0,0,0.06),
0 6px 6px -3px rgba(0,0,0,0.06),
0 12px 12px -6px rgba(0,0,0,0.04),
0 24px 24px -12px rgba(0,0,0,0.04),
0 24px 24px 2px rgba(0,0,0,0.10);
Siete capas. El desenfoque dobla (1, 3, 6, 12, 24) y el spread negativo dobla con él (-0.5, -1.5,
-3, -6, -12). Cada capa recorta a la anterior por los lados, y lo que queda es una caída de opacidad
casi continua en lugar de un borrón gris. El ojo lo lee como LUZ, no como box-shadow. La versión de
tres capas es la que llevan todas las tarjetas y el botón secundario; la de siete, solo el marco.
La segunda firma es un truco de papelería: el marcador de rotulador. Media frase dentro de un
titular de 56px va envuelta en un span con fondo al 30%, radio 4px y padding 0 4px.
"AI Note Taker [without a bot]". Tres variantes reales: oro, azul y gris.
El azul #11A8FF es el único color de acción. Ningún otro elemento clicable tiene color.
Palabras clave: silencioso, preciso, de papel, tipográfico, sin ruido, íntimo
Modo preferido: claro (la rampa invertible está preparada, pero no activa en la home)
## 2. Paleta de Colores
primary #11A8FF blue-500 · EL único color de acción
primary-hover #218FCD blue-600 · medido en vivo
primary-soft #CFEEFF blue-100 · fondo del marcador azul
primary-deep #2C76A0 blue-700 · tinta del marcador azul
canvas #FAFAFA gray-50 · NO es blanco
surface #FFFFFF las tarjetas
ink-strong #000000 titulares (un escalón por encima del rol "primary")
ink #171717 gray-900 · rol --color-primary
text-secondary #5C5C5C gray-600 · TODOS los párrafos · 6.41:1 AA
text-tertiary #A0A0A0 gray-350 · 2.51:1 · SOLO glifos, nunca texto
accent #FD2B38 red-500 · declarado como --color-accent
CONTRASTE CRÍTICO: blanco sobre #11A8FF da 2.60:1. FALLA AA sin excepción posible.
El botón primario de Amie NO es accesible. Corrección: usa blue-600 (#218FCD) de
reposo y blue-700 (#2C76A0, 4.78:1) de hover.
El :root declara los colores como TRIPLETES RGB (--color-gray-600: 92, 92, 92) para
componer opacidades con Tailwind. 21 pasos de gris + 13 rampas de 9 = 138 tokens.
Encima hay roles semánticos (--color-primary, --secondary, --tertiary, --accent,
--background, --separator) y los componentes usan EL ROL, nunca la rampa.
## 3. Tipografía
Original: Inter -> HTML: Inter. NO HACE FALTA SUSTITUIR NADA: las dos familias que
Amie carga (Inter y Averia Serif Libre) están en Google Fonts. Averia está cargada
pero sin uso visible en la home.
display 56/700/64px/-0.0125em · headline 40/700/54.4 · title 20/600/28/-0.025em
lead 18/500/28 · body 16/400/28 · ui 14/500/20 · caption 12/500/15.84
LA REJILLA BASELINE: body(16), lead(18) y title(20) comparten line-height: 28px.
Puedes mezclarlos en la misma columna y las líneas base siguen alineando.
El body a 1.75 de interlínea es un valor editorial, no de producto.
Pesos: 700 (h1/h4) · 600 (títulos y botones) · 500 (UI) · 400 (párrafos).
Tracking: solo los titulares se comprimen. El texto va a tracking natural de Inter.
## 4. Componentes
BOTÓN PRIMARIO: bg #11A8FF · blanco · px 28 py 12 · radius 12 · SIN SOMBRA
hover: bg #218FCD · transition 150ms cubic-bezier(.4,0,.2,1)
BOTÓN SECUNDARIO: bg #FFF · texto #5C5C5C · px 28 py 12 · radius 12 · CON shadow-natural
hover: bg #FAFAFA · icono en #A0A0A0
Los dos tienen el mismo padding, radio, altura y peso. La única diferencia:
COLOR SIN SOMBRA / SOMBRA SIN COLOR. Esa simetría es el sistema.
NAV: 32px de alto, radius 8px. El radio escala con el control (1:4).
CARD: #FFF · radius 12 · padding 20 · gap 8 · shadow-natural · SIN border
(el borde es la capa 1 de la sombra)
MARCO: radius 12 · shadow-natural-lg (7 capas) + anillo en un ::after por encima
MARCADOR: bg de color al 30% · radius 4 · padding 0 4px · una vez por titular
PILLS: gris, NO azul. Activo #737373, inactivo #CDCDCD. Amie reserva el azul.
INPUT: anillo interior (inset 0 0 0 1px), no border: no cambia de tamaño al enfocar.
## 5. Espaciado
Base 4, uso concentrado: 8px por dentro (53 nodos), 32px por fuera (18 nodos).
Padding de tarjeta 20px. Contenido a 976px. Tarjeta de detalle 600px.
Aire vertical en el texto (1.75), densidad en la interfaz (gap 8).
## 6. Elevación
0 · lienzo -> nada
1 · anillo -> inset 0 0 0 1px rgba(0,0,0,.05)
2 · tarjeta y botón 2º -> shadow-natural (3 capas)
4 · marco -> shadow-natural-lg (7 capas)
— · botón primario -> NINGUNA (el color ES la elevación)
Radios: 12px (28 nodos) · 8px (22) · 9999 (17) · 4px (14) · 6px (6) · 16px (1).
La regla implícita: el radio escala con la altura del control, en torno a 1:4.
## 7. Lo que Sí y lo que No
SÍ: la rampa de 7 capas · el borde falso como capa 1 · lienzo #FAFAFA + tarjeta #FFF ·
un solo color de acción · color-sin-sombra / sombra-sin-color · el marcador una vez
por titular · line-height 28px · el radio escala con el control · hairlines de negro con alpha.
NO: sombra al botón primario · blanco 16px sobre #11A8FF · el marcador a 16px ·
#A0A0A0 como texto · colapsar el 1.75 · azul en pestañas · una sola capa de sombra ·
gradientes de fondo · border en las tarjetas.
## 8. Motion
easing: cubic-bezier(0.4, 0, 0.2, 1) duración: 150ms
Amie SOLO anima color. No hay transform, no hay translateY, no hay scale en la interfaz.
Con prefers-reduced-motion no hay nada que desactivar, porque no hay nada que se mueva.
Ese es el mejor cumplido que se le puede hacer a un sistema de motion.
## Anexo: Stack técnico detectado
- Next.js + Tailwind. Las utilidades hover:bg-blue-600, shadow-natural, ring-1 ring-inset
ring-black/10, tracking-[-0.0125em] y rounded-xl aparecen literalmente en el DOM.
- Inter var vía next/font con fallback métrico. Averia Serif Libre cargada sin uso.
- 138 tokens de color como tripletes RGB + una capa de roles semánticos.
- Tokens del producto filtrados a la landing: --nav-width: 74px, --inbox-width: 200px,
--grid-row-height: 60px, --grid-timezone-width: 42px.
- Un solo gradiente visible: linear-gradient(to right top, #CFEEFF, #41BAFF).
- La tinta del marcador de oro se declara en color(display-p3 .792 .573 .188); #D48F00 es
su mapeo a sRGB.
- (no detectado): modo oscuro activo, formularios, banners de estado, tipografía mono,
motion de layout.
