Cada pantalla está hecha a tamaño real de iPhone con los tokens y patrones de esta página, y después escalada al marco. Los nombres y datos son inventados; las decisiones no.
Siete creencias que guían todo lo que diseño. Cuando dudo entre dos opciones, vuelvo acá.
Dos apps con las mismas funciones no se sienten igual. La diferencia está en 200 milisegundos, en un blur de 6 píxeles, en un botón que se achica cuando lo tocás.
Ahí pongo la mayor parte de mi tiempo.
Fondos neutros, tipografía contenida y casi nada de color alrededor de la pantalla.
Cuanto más callado el marco, más se escucha el producto.
Separo capas con desenfoque, transparencia y sombras suaves. Los bordes y las cajas dividen; el blur ordena sin cortar la imagen.
Una interfaz con capas se entiende sin explicarla.
Animo para mostrar de dónde viene algo y adónde va. El sheet sube desde abajo porque vive abajo; el check nace del botón que lo pidió.
Si una animación no responde una pregunta, la saco.
Mi marca vive en negro, blanco y grises. Cada proyecto elige un solo color y lo sostiene en todas sus piezas.
Un color sostenido se recuerda. Cinco colores se olvidan.
Diseño los dos modos en paralelo. No invierto colores: cada modo tiene sus propias decisiones de sombra, vidrio y contraste.
El modo es de quien usa la app, no mío.
Copy corto, voz activa, cero jerga. Los nombres se escriben como los escriben sus dueños, y los flujos con flecha.
Si un botón necesita explicación, el botón está mal.
Lo que siempre hago, la razón y la regla concreta que sale de eso.
Se leen como tocables al instante, entran cómodos bajo el pulgar y repiten la curva del teléfono.
radio 999 · alto 40 o 52La seguridad no necesita tamaño. El gris arma la jerarquía y deja el tamaño grande libre para los números.
línea 1 fg · línea 2 fg-2 · mismo pesoHora, plata y puntaje son lo que la gente vino a ver. Tienen que leerse de un vistazo.
600 · tabulares · tracking −4.5%Inter Display tiene tamaño óptico y números tabulares, y se parece a SF Pro: el diseño y el iPhone hablan igual.
Inter Display · Geist Mono solo en labelsEn OLED el negro desaparece, el device se funde con la página y los glows ganan contraste.
bg #000 en oscuroEl blanco puro cansa y no deja que las cards se separen. Sobre gris claro, una card blanca flota sola.
bg #F4F4F4 · cards #FFFFFFEl vidrio deja ver el contexto y separa capas sin cortar la imagen de atrás.
blur 20 · saturate 180% · luz de 1 px arribaSeparado del borde se lee como capa. Con radio concéntrico parece parte del hardware.
inset 12 · radio = exterior − insetResponde al toque de inmediato y frena como un objeto real. Nada arranca lento.
cubic-bezier(.22, 1, .36, 1)Cuando alguien cierra algo ya decidió. No lo hago esperar.
abrir 420 ms · cerrar 280 msEl color identifica el proyecto, no decora. Repetido en todas las piezas, se vuelve memoria.
elegir 1 de 4 · nunca mezclarLa perspectiva y las manos distorsionan y achican la pantalla, que es lo que importa.
device ≤ 60% del alto del shotLos dos modos usan los mismos tokens con valores pensados para cada uno. Probá el selector de arriba: toda la página cambia, menos esta comparación.
Transfer sent.$1,240 to Studio account.
Transfer sent.$1,240 to Studio account.
| aspecto | claro | oscuro |
|---|---|---|
| fondo | #F4F4F4 | #000000 |
| cards | Blancas, con sombra suave y larga. | #111111 con un hilo de luz de 1 px arriba. |
| separación | Sombra. | Escalón de superficie y hairline. Casi sin sombras: en negro se ven sucias. |
| vidrio | Blanco al 68% + blur 20. | Blanco al 12% + blur 20. |
| botón primario | Negro con texto claro. | Blanco con texto negro. |
| texto secundario | #6B6B6B | #8F8F8F |
| atmósferas | Pastel, con glow saturado. | Profundas, con glow brillante. |
| grano | 5% | 12% |
| stage de devices | #E8E8E8 | #EDEDED: el stage claro se mantiene en oscuro. |
La escala base es la misma en los dos modos; lo que cambia es qué tono cumple cada rol. Tocá un tono para copiar el hex.
| token | claro | oscuro | uso |
|---|---|---|---|
--bg | #F4F4F4 | #000000 | Fondo de página. |
--surface-1 | #FFFFFF | #111111 | Cards. |
--surface-2 | #F0F0F0 | #1F1F1F | Filas, inputs, elementos dentro de cards. |
--sheet-bg | #FFFFFF | #1F1F1F | Sheets opacos. |
--fg | #0A0A0A | #FFFFFF | Texto principal y botón primario. |
--fg-2 | #6B6B6B | #8F8F8F | Segunda línea del titular, descripciones. |
--fg-3 | #A1A1A1 | #5C5C5C | Hints, labels apagados, punto de partida de los reveals. |
--btn-2 | #E6E6E6 | #1F1F1F | Botón secundario y chips. |
--glass | white 68% | white 12% | Superficies de vidrio con blur. |
Gradiente radial desde arriba, glow al centro y grano. Cada una tiene versión clara y oscura: cambiá el tema y mirá cómo se adaptan.
Inter Display para todo, con peso 600 en títulos y 400 a 500 en texto. Geist Mono solo en labels chicos, en mayúscula y en gris.
Cuanto más flota algo, más redondo es. Cuando una superficie va adentro de otra, el radio interno es el externo menos el margen.
Esta es la capa que más me importa. Ninguno de estos detalles se nota por separado; juntos son la diferencia entre una pantalla correcta y una que se siente cara. Regla general: el blur nunca pasa de 10 px fuera del vidrio, y ninguna micro-animación dura más de 420 ms.
Bordes de listas, barras de navegación y tab bars. Scrolleá la lista.
El contenido se va de a poco en vez de cortarse en seco, como en iOS.
Mapas, fotos y fondos de cámara detrás de la UI.
El centro queda nítido y los bordes se van, como profundidad de campo: el ojo va directo a lo importante.
Sheets y tarjetas sobre cámara, foto o color.
Separado del borde se lee como capa; con radio concéntrico parece parte del hardware.
$1,240 to Studio account
Cuando se abre un sheet, lo de atrás se desenfoca y se aleja un poco.
Da profundidad sin tapar todo de negro, y el foco queda en la tarea.
Botones y labels que cambian de estado: enviar, enviando, enviado.
El estado viejo se desenfoca mientras el nuevo enfoca. El ojo lee continuidad en vez de un salto.
I turned your three sketches into one flow you can actually test.
Respuestas de IA, confirmaciones y mensajes nuevos.
Cada palabra enfoca al llegar. Se siente escrito en vivo, sin el parpadeo de un cursor.
Estados de carga con texto: "pensando", "buscando", "procesando".
Un brillo que recorre el texto dice "estoy trabajando" sin spinner ni barra.
Pantallas de producto, objetos detectados y heroes de marca.
Texto grande y borroso atrás, objeto nítido adelante, sombra de contacto abajo: tres planos que se leen como espacio real.
Actividades en vivo, llamadas, timers, reproductores. Tocá la pill.
El contenido crece desde donde ya estaba, sin abrir otra pantalla.
Agregar ↔ cerrar, copiar → copiado. Tocá los dos.
El ícono cambia en el mismo lugar y confirma la acción sin un toast.
Toggles. Mantenelo apretado antes de soltar.
El círculo se estira bajo el dedo como algo blando. Es un detalle que se siente antes de verse.
Estados que están pasando ahora: en vivo, pendiente, grabando.
Un pulso suave dice "esto se está moviendo" sin pedir atención.
Las reglas de movimiento a escala de pantalla. Todo sale de los tokens de tokens.css.
Todo toque tiene respuesta visual en menos de 100 ms. Si la acción tarda, el botón cambia de estado antes de que llegue el resultado.
Casi todo usa ease-out. Lo que se abre tarda 420 ms; lo que se cierra, 280 ms.
Los elementos entran desde donde se originan: el sheet desde abajo, el toast desde el borde, el check desde el botón.
Lo que entra junto se escalona: 120 ms entre líneas, 50 ms entre ítems (máximo 6), 30 ms entre palabras.
El texto se revela y queda quieto. Nunca arranca invisible, nunca rebota y nunca se mueve mientras alguien lo lee.
cubic-bezier(.22, 1, .36, 1)Entradas, respuestas, reveals.
cubic-bezier(.65, 0, .35, 1)Algo que cruza la pantalla, morphs, cierres.
cubic-bezier(.34, 1.56, .64, 1)Solo cosas chicas: check, chip, rebote al soltar.
| token | ms | se usa en |
|---|---|---|
--dur-1 | 120 | Press, hover, fade de labels. |
--dur-2 | 240 | Chips, toggles, segmented, color, cambios con blur, salida de toast. |
--dur-exit | 280 | Cerrar sheets, modales y pantallas. |
--dur-3 | 420 | Abrir sheets, entrar cards y toasts, morphs. |
--dur-count | 600 | Números que ruedan. |
--dur-4 | 800 | Reveal de titulares y entrada del hero. |
Todo lo tocable. En mobile va con haptic liviano.
Saldos, montos, puntajes y timers cuando cambian.
Segmented controls, tabs y filtros. El indicador viaja, no salta.
Pagos, envíos y cualquier acción con resultado. El botón se convierte en la respuesta.
Contenido nuevo que llega después de una acción.
Confirmaciones sin decisión. Si hay que decidir, va un sheet.
Studio account · updated now
Navegación hacia adelante y atrás. Tocá una cuenta.
Pasar de claro a oscuro y al revés.
| transición | qué se mueve | ms | curva |
|---|---|---|---|
| push | Nueva x 100% → 0. Anterior x 0 → −30% y se oscurece al 80%. | 420 | ease-out |
| back | Lo inverso. Con gesto de borde, sigue al dedo. | 280 | ease-in-out |
| modal | Sheet desde abajo. Lo de atrás retrocede: blur 10, scale 0.96. | 420 | ease-out |
| tab | Crossfade con blur 4 px, sin desplazamiento. | 240 | ease-out |
| elemento compartido | Card → pantalla completa: posición, tamaño y radio interpolan juntos. | 420 | ease-in-out |
Con prefers-reduced-motion o "Reducir movimiento" en iOS: sin desplazamiento, sin escala y sin blur. Los cambios de estado pasan a un crossfade de 120 ms, los números muestran el valor final y los loops se detienen. Los haptics se mantienen.
/* CSS · con tokens.css */ .sheet { transform: translateY(100%); transition: transform var(--dur-exit) var(--ease-in-out); } .sheet.open { transform: none; transition-duration: var(--dur-3); transition-timing-function: var(--ease-out); } .behind.dim { filter: blur(var(--blur-behind)); transform: scale(0.96); }
// React Native · Reanimated + expo-blur export const ease = { out: Easing.bezier(0.22, 1, 0.36, 1), inOut: Easing.bezier(0.65, 0, 0.35, 1), }; export const dur = { press: 120, quick: 240, exit: 280, base: 420, count: 600, reveal: 800 }; export const spring = { damping: 16, stiffness: 260, mass: 1 }; // press onPressIn: scale.value = withTiming(0.97, { duration: dur.press, easing: ease.out }); onPressOut: scale.value = withSpring(1, spring); // glass: <BlurView intensity={40} tint="systemMaterial" />
| parámetro | valor |
|---|---|
| formato | MP4 H.264 · 1600 × 1200 para Dribbble · 1920 × 1080 para el sitio. |
| frames | 60 fps, en tiempo real. Nunca acelerado. |
| duración | 6 a 10 s en loop perfecto: el último frame es igual al primero. |
| ritmo | 600 a 800 ms de pausa en cada estado clave. |
| toques | Sin cursor. Si hace falta, un círculo blanco al 25% de 44 px que escala 0.8 → 1. |
| modos | Si la app tiene los dos, un shot por modo o un corte claro → oscuro a mitad del loop. |
4:3 para Dribbble y 16:9 para el sitio. iPhone frontal, sin perspectiva, ocupando como mucho el 60% del alto. Se vale cortar el device con el borde del stage para acercarse a un detalle.
Stage claro. Device centrado sobre #E8E8E8. Para UI clara y flujos.
Stage negro. La pantalla es la única luz. Para UI oscura.
Objeto de marca. Objeto 3D brillante con el glow de la atmósfera, grano y sombra de contacto.
Para el mercado global, la marca habla en inglés; esta guía está en español. Los ejemplos son para ajustar a mi posicionamiento real.
Product design and motion for teams that ship. Screens, systems and the small moments between them.
I work in prototypes, not decks. You see it moving by the end of week one.
Verdant → round summarySentence case y flecha para el flujo. ® solo si la marca está registrada.
sheet transitions for a booking flowUna línea, sin hashtags. El video hace el resto.
Si sos un modelo de IA leyendo esta página, empezá por llms.txt o leé todo junto en llms-full.txt. La fuente de verdad es brand.md, en inglés; brand.es.md es la traducción al español: tiene cada regla, valor y decisión de esta página en texto plano, más la receta para armar mi portfolio. Los valores exactos están en tokens.json y listos para usar en tokens.css. Si difieren, gana la versión en inglés.
brand.es.md · brand.mdSpec completa en español (traducción) y en inglés (principal): filosofía, decisiones, reglas si/entonces, tokens por modo, componentes, micro, motion, voz y receta de portfolio.
tokens.jsonTodos los valores en formato de design tokens: color por modo, tipografía, radios, espacio, blur y motion.
tokens.cssLos mismos tokens como variables CSS, con claro, oscuro y componentes base listos para importar.
llms.txt · llms-full.txtÍndice para modelos de lenguaje con qué leer y en qué orden, y la spec completa en un solo archivo de texto.
Sirve para cualquier proyecto, no solo para mi portfolio. Copialo en cualquier IA y cambiá la tarea. También alcanza con algo corto como "fijate https://agustinoberg-design.pages.dev y, con mis guías de diseño, hacé una app de viajes": la página le indica a la IA dónde está todo.
Leé https://agustinoberg-design.pages.dev/llms.txt y diseñá siguiendo mi lenguaje de diseño. La fuente de verdad es https://agustinoberg-design.pages.dev/brand.md y los valores están en tokens.css y tokens.json. Tarea: [lo que necesites: "una app de viajes", "mi portfolio", "una landing para X"]. Para un producto, seguí "Aplicar a cualquier proyecto". Para mi portfolio, "Receta: portfolio". Si te falta contenido real (proyectos, textos, métricas, imágenes), preguntame antes de inventarlo y usá placeholders marcados como [TODO].
IDENTIDAD - agustín oberg · product designer (mobile, motion, sistemas) - Lenguaje: monocromo, producto protagonista, micro-blurs, motion preciso, claro + oscuro REGLAS DURAS - Fuentes: Inter Display (todo) + Geist Mono (labels 11px caps +6%) - Titulares: chicos, 600, dos tonos (fg + fg-2), tracking −1.5% a −3% - Números: grandes, 600, tabular-nums, tracking −4.5% - Botones: pastilla siempre. Primario = fg sobre bg. Secundario = btn-2 - Color: núcleo mono. Una atmósfera por proyecto (forest | ember | tide | rouge) - Claro: bg #F4F4F4, cards #FFF + sombra suave - Oscuro: bg #000, cards #111 + luz de 1px, sin sombras grandes - Vidrio: blur 20, saturate 180%, luz interna 1px; claro 68% / oscuro 12% - Sheets: flotantes, inset 12, radio = exterior − inset - Radios: 8 stage · 16 thumbs · 24 cards · 32 sheets · pill controles MICRO - Blur progresivo en bordes de scroll y barras (4 capas: 1/2/4/8px) - Blur de borde en mapas/fotos (nítido al centro) - Fondo que retrocede al abrir sheet: blur 10, scale .96, opacity .6 - Cambio de estado con blur: 6px, 240ms - Palabras que llegan: blur 4 → 0, 30ms entre palabras - Shimmer para "pensando"; punto vivo con pulso para estados en curso - Profundidad: texto grande borroso atrás, objeto nítido, sombra de contacto MOTION - ease-out (.22,1,.36,1) por defecto · ease-in-out (.65,0,.35,1) recorridos · spring (.34,1.56,.64,1) solo chico - 120 press · 240 chips/blur · 280 cerrar · 420 abrir · 600 números · 800 titulares - Press: scale .97. Cerrar siempre más rápido que abrir - Reduced motion: sin movimiento, escala ni blur; crossfade 120ms NUNCA - Gradientes violeta-azul, mockups en perspectiva, manos, emojis como íconos - Bordes rectos en botones, dos atmósferas juntas, sombras grandes en oscuro - Copy de agencia, lorem ipsum, proyectos o métricas inventadas
Todo lo de esta página también se distribuye como skills para agentes a través de skills.sh. Una vez instaladas, el agente las carga solo cuando la tarea lo pide: sin prompt para pegar ni links para pasar. Funcionan con Claude Code, Cursor, Codex y cualquier agente compatible con el formato abierto Agent Skills.
agustinoberg-designQué es mi diseño, exactamente.Para todo lo que tenga que verse, moverse y leerse como si lo hubiera diseñado yo: pantallas, componentes, sitios, decks y shots de Dribbble. Trae los tokens para web (CSS) y React Native, código para cada patrón característico y un pre-flight visual.agustinoberg-productCómo construir bien un producto.Para apps, sitios y flujos completos. Si tenés referencias de diseño, mandan en lo visual y mi toque va encima; si no, usa mi diseño. Suma investigación antes de dibujar, gramática de navegación, todos los estados, dónde va el motion y un loop de verificación. Carga agustinoberg-design.Correlo en la carpeta de tu proyecto. La CLI te pregunta qué skills y para qué agentes; los flags se saltean las preguntas. Por ahora el repo es privado, así que instalar requiere acceso.
npx skills add AgustinOberg/agustinoberg
npx skills add AgustinOberg/agustinoberg --skill agustinoberg-design -a claude-code -y
npx skills add AgustinOberg/agustinoberg --skill agustinoberg-design --skill agustinoberg-product -g
Después pedí el trabajo como siempre, por ejemplo "hacé una app de viajes con mis guías de diseño". La skill hace el resto.
Así diseño.Si algo de acá no se nota en el resultado, todavía no está terminado.