Estudio en Buenos Aires Tomando proyectos · Julio 2026
Est. 2024 · Boutique
Diseño web e identidad · Buenos Aires

Diseñamos webs
e identidad para PyMEs
que quieren verse en serio.

atrio es un estudio boutique de identidad y diseño web para marcas argentinas que entienden que la primera impresión digital es arquitectura, no decoración.

Ver casos por rubro ↓
(i)

Diseñamos la entrada,
no la fachada.

Filosofía

Hacemos webs que cargan rápido, comunican claro y te traen clientes. La metáfora viene después: un atrio es ese espacio luminoso que recibe a quien entra a un edificio — abierto, deliberado, sin gritos. Diseñamos las marcas y sus presencias digitales bajo la misma lógica: confianza silenciosa antes que ruido.

Trabajamos con un cliente a la vez. Cada proyecto pasa por nuestras manos de principio a fin, sin intermediarios ni equipos rotativos. Esa cercanía es lo que nos permite cuidar el detalle a una escala que las agencias grandes simplemente no pueden.

Creemos en marcas que envejecen bien. En tipografía bien resuelta. En interfaces que no necesitan explicarse. En websites que cargan rápido porque alguien pensó cada kilobyte.

Nuestros sitios pesan en promedio 180 KB y cargan en menos de 1.2 s en 4G. Eso no es marketing, es ingeniería.

(ii)

Tres disciplinas,
una mesa de trabajo.

01 Identidad

Identidad de marca

Estrategia, naming, sistema visual y guidelines listas para imprenta y pantalla.

Desde USD 4.800 6 – 8 semanas
02 Diseño web

Diseño y desarrollo web

Sitios single-page, e-commerce y micrositios. Diseñados y codeados por nosotros.

Desde USD 3.200 3 – 6 semanas
03 Dirección

Dirección de arte

Para marcas con equipo interno que necesitan una mirada externa y disciplinada.

Desde USD 1.800/mes Mensual, mín. 3 meses
(iii)

Nuestro proceso de trabajo.

Cuatro etapas para llevar una idea a un sitio en vivo. Deslizá las tarjetas para recorrerlas.

01 / 04
01

Diseño UX/UI

Es pensar cómo se va a ver la página y cómo la va a usar la gente. Se arman bocetos de cada pantalla, se eligen colores, tipografías y se define el recorrido que hace el visitante. El objetivo es que encuentre lo que busca rápido y sin complicarse.

02

Maquetado visual (Frontend)

Es construir todo lo que el usuario ve en la pantalla: botones, imágenes, menús, animaciones. Acá se toma el diseño y se lo convierte en una página real que funciona en la compu y en el celular.

03

Programación interna (Backend)

Es la parte que no se ve, pero hace que todo funcione: guardar los datos de un formulario, que un usuario pueda iniciar sesión, mostrar productos desde una base de datos. Sería como el motor del auto: no lo ves, pero sin eso no arranca.

04

Pruebas y publicación

Antes de mostrarla al mundo, se revisa que todo ande bien: que cargue rápido, que se vea bien en cualquier dispositivo y que no tenga errores. Una vez que está todo ok, se publica online para que cualquiera pueda entrar.

(iv)

Proyectos por rubro.

Ejercicios de dirección visual: cómo se vería un sitio atrio en cada rubro. No son clientes reales — son proyectos que diseñamos para mostrar nuestro criterio. Entrá y miralos como entrarías al sitio del cliente.

(v)

Hablemos de tu proyecto,
sin apuro.

Contanos qué tenés en mente y te volvemos con una idea de alcance, tiempos y presupuesto. Sin vueltas, sin compromiso.

hola@atrio.studio WhatsApp
¿Qué necesitás?
Presupuesto estimado

Respondemos en menos de 24 hs.

i

Sistema de logo

Tres versiones para tres contextos. El wordmark cuando hay espacio y formalidad; el monograma cuando el formato es chico o exige reconocimiento rápido; el símbolo cuando trabajamos sobre fondos oscuros o materiales aplicados.

Wordmark atro

Uso general · headers, firmas, embalaje, mail.

Monograma

Favicon, avatar, watermark, marcas pequeñas.

Símbolo

Versión arquitectónica. Fondos oscuros, packaging, papelería sobre materiales.

ii

Paleta de color

Cream como fondo, ink como tipografía y trazos, sage como acento vivo. Una paleta corta — siete tokens — suficiente para vestir nueve rubros distintos sin perder identidad.

Cream #F4F1EB Fondo principal
Cream 2 #EFEBE3 Secciones alternas, sutil contraste
Ink #1A1A1A Tipografía, trazos, botones
Ink 2 #4A4A48 Texto secundario
Ink 3 #8A8A86 Captions, eyebrows, líneas finas
Sage #8FA689 Acento · activos, hover, dots
Sage Deep #6B8466 Hover sobre acento, estados activos
iii

Tipografía

Un sistema dual. Una sans-serif geométrica para el cuerpo y los headlines; una serif itálica para los acentos. Sin una tercera fuente, sin pesos sueltos sumados por capricho.

Aa
General Sans Sans-serif primaria · UI, body, headlines ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!?¿¡—
Regular 400 Medium 500 Semibold 600
Aa
Instrument Serif Serif itálica · acentos, énfasis, números ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,;:!?¿¡—
Italic 400 — único peso
iv

Voz y tono

Escribimos como un lugar que no necesita seducir a nadie. La seriedad sale de la información concreta, no de declaraciones sobre lo serios que somos. Intentar seducir de más muestra carencias que se intentan tapar con chamuyo.

Decimos

"Estudio contable matriculado. CABA. Atención por contador asignado."

Evitamos

"Tus impuestos, en orden y sin sobresaltos."Dice lo obvio: ¿qué contador prometería lo contrario?

Decimos

"Vivienda unifamiliar y obra patrimonial. Buenos Aires y la región pampeana."

Evitamos

"No nos interesa la arquitectura que grita."Te ubica a discutir contra un horizonte bajo y te baja al nivel del que comparás.

  • Rioplatense. Hablamos en vos, no en tú. "Tenés", no "tienes".
  • Sin aforismo de agencia. Nada de "X, no Y" como muletilla retórica, ni palabras resaltadas en color cada dos frases.
  • Sin autopiropo por escasez. No decimos "pocos clientes" ni "una sola mano por pieza". Si el portfolio es bueno, la selectividad se ve sola.
  • Sin adjetivos vacíos. "Sobrio", "luminoso", "tranquilo" — si lo sos, se nota. Decirlo no te hace serlo.
  • Sin promesas que cualquier competidor decente cumpliría. "Hasta la entrega", "siempre la misma persona" — son la línea base, no la propuesta.
v

Espaciado y grilla

Escala base de 4 px, con saltos chicos cerca del componente y saltos grandes entre secciones. El aire es deliberado: no rellenamos, no apretamos.

4 · micro · gaps internos de pills, iconos chicos
8 · tight · entre label y campo, dots
14 · default · padding interno de componentes
24 · comfortable · gap entre cards en grilla
48 · entre bloques · separación de subsecciones
96 · entre secciones · respiro vertical mayor
140 · section padding · padding vertical de cada sección

Ancho máximo de contenedor: 1240 px. Padding lateral mínimo: 28 px. Grilla principal: 12 columnas con gutter de 24 px. Mobile breakpoint: 760 px.

vi

Iconografía

Iconos lineales en stroke de 1.5 px, con caps y joins redondeados, sin relleno. Set derivado de Lucide para coherencia. No inventamos iconos propios para conceptos universales.

vii

Aplicaciones

Cómo se ve la identidad cuando aterriza en formatos reales. Firma de mail, tarjeta personal, avatar para redes — los tres formatos que más viaja una marca chica.

Firma de mail
atro

Demián Vico · Diseño + dirección

demian@atrio.studio · +54 9 11 5550-0000

Honduras 5500, Palermo

Tarjeta personal
atro

Estudio boutique de identidad y diseño web · Buenos Aires

Avatar Instagram