Sin ornamento.
Con función.

Esta página documenta el sistema de diseño de BORR. Tipografía, color, espacio y voz. Cada elemento que ves acá es ejemplo de lo que documenta. No es un PDF. No es una lista. Es el sistema demostrándose a sí mismo.

BORR Design System v0.1 Abril 2026

Lo que no cambia.

Para qué existe BORR

BORR existe para traducir.

Ideas confusas en mensajes claros. Negocios desordenados en presentaciones más sólidas. Valor real en una presencia visual y digital que lo comunique bien.

No partimos de "¿cómo hacemos algo lindo?". Partimos de "¿qué tiene que decir esto, a quién, y cómo?". El diseño llega después de esa pregunta, no antes.

Hay una dimensión más personal en el trabajo que hacemos. Muchos de los que llegan a BORR sienten que lo que tienen no los representa. Que construyeron algo real pero no pueden mostrarlo con la confianza que eso merece. No buscamos rescatarlos; buscamos guiarlos. Somos el criterio que les faltaba, no el héroe que los salva.

Este campo puede ser muy confuso si se entra sin mapa. Hay demasiadas herramientas, demasiado ruido y muy poco criterio sobre qué conviene a cada negocio. En ese terreno, BORR actúa como guía: alguien que conoce el camino, que ya lo recorrió muchas veces y puede ayudarte a no perderte.

A dónde apunta BORR

BORR es, y quiere seguir siendo, un estudio boutique. No una agencia. No una fábrica. Un estudio con criterio, en el que cada proyecto recibe atención real.

El norte es ser el referente de diseño con criterio en San José y en Uruguay. No por volumen, no por cantidad de clientes, sino por la consistencia de lo que produce y la honestidad con la que trabaja. Que cuando alguien en el medio piense "quién hace bien esto acá", BORR aparezca.

La escala no es el objetivo. La calidad y el criterio, sí. Si el estudio crece a 2 o 3 personas que comparten esa mirada, bien. Pero no a costa de diluir lo que lo hace funcionar.

El mercado principal es Uruguay. Algún proyecto internacional puede aparecer, pero no es lo que se persigue. El foco está cerca, donde la relación directa y la presencia real todavía tienen peso.

Lo que no se negocia

  • Honestidad radical.

    Si algo no funciona, se dice. Si una decisión del cliente va contra el trabajo, se menciona. La relación con cada cliente se sostiene sobre la verdad, no sobre lo que se quiere escuchar. El espejo no se distorsiona para quedar bien.

  • Claridad antes que espectáculo.

    El trabajo tiene que entenderse. Primero eso, después todo lo demás. Una pieza hermosa que no comunica nada es un fracaso, aunque sea técnicamente impecable.

  • Criterio antes que tendencia.

    Lo que está de moda cambia. Lo que funciona, no. BORR no diseña para seguir una corriente; diseña para que el resultado siga siendo válido cuando la corriente cambie.

  • Función antes que adorno.

    Todo elemento tiene que justificarse. Si no aporta comunicación, orden o claridad, sobra. No hay decoración por la decoración. Esta filosofía tiene un linaje claro: Loos, Mies, Corbusier. No como cita de moda, sino como convicción de trabajo.

  • Coherencia antes que exceso.

    Más no es mejor. La identidad, el mensaje y la presencia web de un negocio tienen que hablar el mismo idioma. Lo que no suma a esa coherencia, distrae.

  • Presencia sin ruido.

    BORR no necesita gritar para existir. No compite por atención mediante volumen. La firmeza está en la consistencia, no en la intensidad.

Cómo es BORR en el trato

Directo. Calculador. Implacable cuando hay algo que defender.

Eso en la práctica significa: no damos vueltas innecesarias, pensamos antes de hablar y, cuando tenemos convicción sobre algo, no la abandonamos por presión social. El criterio no se negocia con insistencia.

Al mismo tiempo, el trabajo es humano. No hay distancia corporativa, no hay jerga de agencia, no hay condescendencia. La relación con los clientes es de igual a igual: vos sabés de tu negocio, nosotros sabemos de diseño y comunicación. El trabajo bien hecho nace de esa combinación.

La calidez está, pero no es condescendiente. La firmeza está, pero no es arrogancia. BORR puede agarrar el timón cuando hace falta, con claridad y sin drama, y después devolvérselo al cliente porque el camino es de él.

En estética, hay una influencia que informa todo sin nombrarse en cada pieza: minimalismo funcional, sobriedad, nada que sobre. Formas limpias, tipografía con carácter, color medido. Esto no es una declaración de estilo, es la consecuencia natural de creer que el ornamento que no comunica nada es ruido.

Lo que no es BORR: la validación de todo lo que el cliente quiere, el entusiasmo fingido, el peer design, el "sí sí, como vos digas". Un proyecto donde el cliente dicta las decisiones de diseño no es un proyecto para BORR.

Por qué BORR y no cualquier otro

Todos tienen las mismas herramientas. Figma, Adobe, la IA generativa, Canva. El acceso a herramientas dejó de ser un diferencial hace años.

Lo que diferencia a BORR es el criterio.

La capacidad de entrar a un proyecto, entender qué está fallando, ordenar las prioridades y tomar decisiones con fundamento. No impresiones, no gustos, no lo que "se usa ahora". Fundamento.

Ese criterio viene de un lugar concreto: más de seis años trabajando en software con equipos internacionales, en contacto directo con diseñadores UX y UI, desarrolladores, product managers, QA, CTOs. Ese es el contexto que informa la mirada. No un estudio aislado que hace logos para Instagram.

El método que comunica esto antes que cualquier argumento es el diagnóstico. Antes de proponer, antes de ejecutar, BORR se sienta a entender. Esa decisión sola, de no arrancar sin entender, separa el trabajo de BORR del trabajo de quien cobra por pieza y entrega sin preguntar.

Identidad, mensaje y presencia web no son servicios separados. Son partes del mismo problema. BORR no los divide porque el cliente no los vive divididos.

Con quién trabaja BORR

El cliente que mejor entiende BORR es el que ya intentó resolverlo solo.

Probó con Canva. Probó con la IA. Con alguien que "sabe de computación". Cada intento fue un parche rápido. El resultado no lo convence, no puede explicar bien por qué, pero lo siente. Le da vergüenza mostrar lo que tiene. Siente que no lo representa. Que lo que construyó merece una presentación mejor.

No llega enojado con el mundo del diseño. Llega desde el reconocimiento propio: sé que esto me queda grande, y ya sé que necesito a alguien que se dedique a esto. Reconoció su límite. Eso, en la práctica, hace que el trabajo fluya mejor.

No busca que lo rescaten. Busca criterio. Alguien que entienda su negocio, que le hable claro y que lo ayude a armar algo en lo que pueda confiar.

La geografía principal es San José y Uruguay. El perfil es el emprendedor, el profesional independiente o el negocio chico que quiere crecer con base sólida. No el que quiere un logo para el martes.

Las reglas de trabajo

  1. Claridad antes que espectáculo.
  2. Criterio antes que tendencia.
  3. Coherencia antes que exceso.
  4. Función antes que adorno.
  5. Identidad, mensaje y web nunca se separan.
  6. Nunca vender lo que no hace falta.
  7. Sin tiempo, sin tolerancia, sin respeto: no hay proyecto.

Tokens en uso real.

Ningún componente de BORR usa valores hex directamente. Todo pasa por tokens semánticos.

Cada token es una variable. Cambiás el valor en un lugar y se actualiza en todo el sistema.

--text #1a1a1a · primitivo: --color-ink 15.5:1 · AAA

Texto principal. Cuerpo, títulos, copy de interfaz. El máximo peso visual de la paleta.

--text-secondary rgba(26,26,26,0.80) · primitivo: --color-ink-80 11.5:1 · AAA

Texto de apoyo, párrafos secundarios, descripciones largas. Jerarquía sin perder legibilidad.

--text-muted rgba(26,26,26,0.40) · primitivo: --color-ink-40 4.7:1 · AA

Etiquetas, metadatos, captions, nombres de token. El mínimo que aún pasa AA para texto de 14px+.

--text-on-dark #ffffff · primitivo: --color-white 16.1:1 · AAA

Texto sobre fondos oscuros. Secciones de fondo tinta, footers, overlays de navegación mobile.

--text-accent #ffc5d3 · primitivo: --color-rose 8.2:1 · AAA sobre tinta

Acento sobre fondos oscuros. No como texto pequeño sobre arena.

--surface #f0ede6 · borr-sand · superficie principal Superficie base de la interfaz

El fondo que define todo lo demás. Cálido, sin ser crema puro. Da carácter a la paleta sin interferir con el contenido.

--surface-alt #e8e4db · borr-wet-sand · superficie secundaria Superficie de contraste sutil

Para cards, campos de formulario, áreas que necesitan diferenciarse del fondo sin romper la coherencia cromática.

--surface-dark #1a1a1a · primitivo: --color-ink · superficie oscura Footer, secciones de énfasis, overlays

Contraste máximo. Crea pausas en el ritmo de scroll. No se usa de forma continua, sino como acento estructural.

Combos prohibidos

Estos cinco pares de tokens no pueden usarse juntos. El error en cada caso es visible porque el texto de ejemplo se renderiza con los valores reales del combo.

Texto sobre fondo incorrecto
--text-accent sobre --surface #ffc5d3 sobre #f0ede6 ~1.44:1 · Falla

El rosa acento sobre arena casi no genera contraste. El acento funciona sobre tinta, no sobre claro.

Texto sobre fondo incorrecto
--text-on-dark-muted sobre --surface rgba(255,255,255,0.55) sobre #f0ede6 ~1.45:1 · Falla

Este token existe solo para contextos oscuros. Sobre arena produce un texto fantasma que nadie puede leer.

Texto sobre fondo incorrecto
--text-muted sobre --surface-dark rgba(26,26,26,0.70) sobre #1a1a1a ~1.1:1 · Falla

--text-muted es un token de contexto claro. Sobre superficie oscura se vuelve invisible porque ambos son derivados del mismo primitivo tinta.

Texto sobre fondo incorrecto
--color-white sobre --color-rose #ffffff sobre #ffc5d3 ~1.68:1 · Falla

El rosa acento es claro por definición. Sobre él va tinta, no blanco. El error aparece cuando se asume que el acento es oscuro porque es saturado.

Texto sobre fondo incorrecto
--surface-alt como texto sobre --surface #e8e4db sobre #f0ede6 ~1.16:1 · Falla

--surface-alt es una superficie, no un color de texto. Usarlo en color: no es un problema de contraste, es una confusión de rol en el sistema de tokens.

Aplicación en contextos reales

El logo en materiales y superficies reales. currentColor hace el trabajo.

Tres familias. Un sistema.

Cada familia tiene un rol. Ninguna reemplaza a la otra. Mezclarlas sin criterio es el error más común en identidades de estudio.

Bricolage Grotesque --font-display Display / Títulos / Números grandes
200 Diseño que empieza por entender
300 Identidad visual con criterio
400 Sin humo, con criterio
500 Una persona. Con criterio.
600 No decoramos. Resolvemos.
700 BORR Estudio boutique
800 Sin ornamento.
DM Sans --font-sans Body / UI / Funcional
Body — 1rem / weight 400

Diseño que empieza por entender el negocio, no por decorarlo. Una mirada externa que ordena el mensaje antes de elegir el color.

UI label — 0.6875rem / weight 700 / tracking 0.2em

Servicios · Identidad visual · Landing

Precio / énfasis — 1.125rem / weight 700

USD 500 · 3 a 4 semanas

Caption / secondary — 0.875rem / weight 400

No incluye e-commerce ni sitios multipágina. Te llevás una landing lista para publicar.

Lora --font-serif Editorial / Carácter / Citas

El problema no son las herramientas. Es que nadie se sentó antes a entender tu negocio. Canva, la IA, el sobrino que sabe de diseño: todos usan las mismas herramientas. La diferencia no está en el acceso. Está en el criterio.

"Un buen diseño no se nota. Hace que todo lo demás se entienda."

Escala tipográfica — 7 pasos
--fs-2xs 10px · decorativo
BORR ESTUDIO
--fs-xs 11px · etiquetas / nav
Identidad visual · Landing page
--fs-sm 12px · texto secundario
No incluye e-commerce ni sitios multipágina.
--fs-caption 14px · bullets / captions
Logo y variantes, paleta, tipografías y kit de arranque.
--fs-base 16px · cuerpo principal
Diseño que empieza por entender, no por decorar. Sin humo. Con criterio.
--fs-md 18px · énfasis / precios
USD 650 a 800 · 5 a 7 semanas
--fs-2xl 32px · pull quote
Acá empezamos por ahí.
Interlineado por nivel

El tamaño del texto no determina solo la escala visual, determina cuánto aire necesita para respirar. A mayor tamaño, menos interlineado. A menor tamaño en cuerpo corrido, más. Estos son los pares correctos.

Font size Line height Nota
--fs-2xs (10px) --lh-base · 1.5 Decorativo, uppercase, nunca en cuerpo corrido.
--fs-xs (11px) --lh-base · 1.5 Labels, nav items, badges. Rara vez wrappea.
--fs-sm (12px) --lh-base · 1.5 en UI --lh-relaxed · 1.6 en texto corrido Si es etiqueta, usás --lh-base. Si es párrafo, --lh-relaxed.
--fs-caption (14px) --lh-relaxed · 1.6 Captions, bullets, notas al pie de componente.
--fs-base (16px) --lh-relaxed · 1.6 Cuerpo principal. El par más usado del sistema.
--fs-md (18px) --lh-snug · 1.3 Énfasis puntual, precios. No en bloques largos.
--fs-2xl (32px) --lh-snug · 1.3 Pull quote con Lora. Solo eso.
Display headings (clamp, Bricolage) --lh-tight · 1.1 H1 y títulos grandes de sección.
Cómo se aplica el sistema, web vs. documento

El sistema tipográfico vive en dos entornos distintos. Las reglas no son las mismas porque las herramientas no son las mismas. Lo que sí se mantiene igual es el criterio: dos familias por pieza, Lora fuera de la UI funcional, Bricolage fuera del cuerpo de texto.

Web HTML/CSS, landing, interfaces
  • Usás los tokens CSS siempre: var(--font-display), var(--font-sans), var(--font-serif), var(--fs-base), etc. Nunca un valor raw.
  • Los headings de sección usan clamp() con --font-display (Bricolage Grotesque).
  • --font-sans (DM Sans) es el default del body. No lo cambiés a menos que sea intencional.
  • --font-serif (Lora) solo en citas, pull quotes o bloques editoriales. No en UI funcional.
  • Bricolage no va en cuerpo de texto. A 16px la legibilidad baja.
  • Lora no va en botones, labels, campos de formulario ni nav.
Documento Propuestas, presentaciones, PDFs para clientes
  • Bricolage Grotesque no está en Google Docs ni PowerPoint. La reemplazás con DM Sans Bold o Helvetica Neue Bold para títulos.
  • Lora sí funciona en Google Docs. Podés usarla para citas o bloques editoriales.
  • Nunca mezclés más de dos familias en la misma pieza.
  • En presentaciones, DM Sans hace los tres roles: títulos en Bold, cuerpo en Regular, etiquetas en Medium con tracking.
  • Lora no va en CTAs, labels de tabla ni pies de página funcionales.

Múltiplos de 4.

Todo el espaciado de la interfaz es múltiplo de 4px. Los pasos más usados son múltiplos de 8px. Esto no es arbitrario: hace que cualquier par de valores combinados tenga armonía visual automática.

Escala de espaciado
4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
80px
96px
120px
Border radius
--radius-1 · 4px
--radius-2 · 8px
--radius-3 · 12px
--radius-4 · 16px
--radius-full · 100px

Tres niveles. Un criterio.

Las sombras no son decorativas. Comunican altura: qué flota, qué descansa, qué emerge sobre el contenido. Usadas con exceso, pierden significado.

Sutil --shadow-subtle Cards en reposo, contenedores pasivos.
Media --shadow-medium Elementos flotantes, tooltips, dropdowns.
Pronunciada --shadow-pronounced Modales, paneles que emergen sobre el contenido.

Cómo habla BORR.

La voz no es un tono de marca. Es la consecuencia de tener un punto de vista claro. Cálido y directo. Sin corporativo, sin elogio falso, sin ornamento verbal.

Lo que BORR dice
Diseño que empieza por entender, no por decorar. Directo. Posiciona sin inflar.
Una mirada externa que te dice qué tenés, qué falta y qué hacer primero. Beneficio concreto, sin promesas vacías.
No es una fábrica de logos. Es un estudio que entiende qué hay que comunicar. Define por oposición. Honesto.
Te respondo en 24h. Charlamos 20 minutos. Te digo si puedo ayudarte y cómo. Específico, sin solemnidad.
Lo que BORR no dice
Transformamos tu marca con soluciones creativas disruptivas. Sin humo corporativo.
Somos apasionados del diseño y la innovación. Sin elogio falso ni autoproclamación.
Llevamos tu negocio al siguiente nivel con branding estratégico. Sin promesas vagas ni jerga inflada.
Nuestra metodología centrada en el usuario garantiza resultados. Sin tecnoburocracia ni garantías vacías.
Vocabulario que no usamos
  • disruptivo
  • innovación
  • ecosistema de marca
  • storytelling
  • propósito de marca
  • apasionados
  • potenciamos
  • transformamos
  • siguiente nivel
  • soluciones creativas
  • garantizamos
  • empoderamos
  • co-creación
  • full-service
  • deliverables
  • assets
Cálido

Trata al cliente como a alguien inteligente. Sin condescendencia, sin distancia de agencia.

Directo

Dice lo que piensa. No rodea el tema. Si algo tiene un problema, lo nombra.

Sin humo

Nada que no pueda respaldar. Ninguna promesa que no pueda cumplir. Nada que suene bien pero no signifique nada.

Rioplatense

Español uruguayo, no neutro. "Te", "vos", "charlar". No es regional por capricho, es honesto sobre de dónde viene el estudio.

Tono por contexto
Primera conversación

Curioso, sin apuro. El prospecto no sabe bien lo que necesita y no tiene que saberlo todavía. BORR escucha antes de proponer. No vende en la primera charla, entiende.

"Contame un poco más de tu negocio. No hace falta que tengás todo claro ahora, para eso charlamos."

Propuesta y presupuesto

Claro y fundamentado, sin enfriar la relación. Explica el por qué de cada decisión sin sobre-justificarse. La propuesta es una posición, no una súplica.

"Esto es lo que veo que necesitás y por qué lo encaré de esta forma. Si hay algo que no cierra, lo hablamos."

En medio del proyecto

Transparente y concreto. Informa el estado real, no el optimista. Si hay una decisión pendiente del cliente, la nombra sin rodeos y con contexto para que pueda decidir.

"Avancé hasta acá. Necesito que me confirmes la paleta antes de seguir, porque lo que sigue depende de eso."

Cuando algo no funciona

Directo pero sin dramatismo. Nombra el problema, explica por qué importa y propone el siguiente paso. No suaviza la verdad, pero tampoco la convierte en juicio.

"Eso que pedís no va a funcionar como esperás, y te explico por qué. Lo que sí podemos hacer es esto."

Elevator pitch canónico

La respuesta cuando alguien pregunta "¿qué hacés?". Tiene que sonar como habla Ramiro, no como copy de landing.

Corta · 1 oración

Diseño visual y web para negocios que necesitan verse como lo que ya son.

Larga · 3-4 oraciones

Trabajo en diseño hace más de seis años, con experiencia en equipos internacionales de software. Ese criterio lo aplico a negocios locales: identidad, web, claridad de mensaje. Muchos llegan con algo que funciona pero no se ve así, o con una presencia que no los representa. BORR les da forma a eso.

Boilerplate

Texto estándar para fichas, directorios y perfiles. No editar salvo cambio estratégico validado.

BORR es un estudio de diseño con base en San José, Uruguay. Trabaja con emprendedores y negocios pequeños que necesitan identidad visual, web y claridad de mensaje. Su diferencial es el criterio: años de experiencia en diseño digital aplicados a negocios que probaron hacerlo solos y saben que necesitan algo mejor.

CTAs estándar

Los llamados a la acción que BORR usa. Específicos, sin solemnidad.

Landing · principal Contame tu proyecto Invita sin presionar. No dice "comprá" ni "agendá una llamada". Es la puerta, no el cierre.
Servicios Ver qué incluye Para quien quiere entender antes de decidir. Respeta el ritmo del prospecto.
Contacto por mail Escribime a contactoborr@gmail.com Directo. Sin formulario de 6 campos. Se responde en 24h.
Nurturing · todavía no está listo Guardá esto para cuando sea el momento Para quien está mirando pero no va a contratar hoy. No lo apura. Normaliza que "todavía no" es válido.