Sistema
visual.
Un documento vivo. Si trabajas en algo que tiene que parecer Maubrews — una pieza de Instagram, una factura, un email transaccional, una carta impresa — esto es la referencia.
Wordmark, monograma, superficies.
El logo se compone en Fraunces directamente. El cuerpo en la tinta de la superficie; el punto siempre en rojo de marca, con la variante adecuada según el fondo.
m. como sello
El monograma vive también como PNG cuadrado para favicons y apple-touch-icon, sobre el papel cálido.
El punto siempre va en marca
En positivo, --color-mark. En negativo, --color-mark-quiet. Nunca en gris ni en blanco.
Margen de respiro
Mantén la x-height del propio logo como aire libre alrededor. No lo aprietes contra otros elementos.
Sin distorsionar
No estirar, no rotar, no aplicar sombras ni efectos. Ni cambiar la tipografía del cuerpo.
Paleta en OKLCH.
Diez tokens, tintados todos hacia el rojo de marca con chroma muy baja en los neutros. Nada de blancos ni negros puros: el papel siempre se siente impreso cerca de la marca.
paper
oklch(0.965 0.008 60)
≈ #F4EFE7
Fondo principal.
paper-deep
oklch(0.94 0.012 55)
≈ #EBE4D7
Fondo alterno cálido.
surface
oklch(0.985 0.004 70)
≈ #FCFAF6
Paneles elevados, formularios.
ink
oklch(0.185 0.018 30)
≈ #1E1612
Texto principal. Fondo negativo.
ink-soft
oklch(0.42 0.018 35)
≈ #594C42
Texto secundario.
ink-mute
oklch(0.62 0.013 45)
≈ #988B7E
Texto terciario, metadatos.
mark
oklch(0.52 0.165 27)
≈ #A42325
Acento Dosis. Sólo en momentos puntuales.
mark-deep
oklch(0.40 0.165 25)
≈ #7D0E14
Estado pressed / hover.
mark-quiet
oklch(0.78 0.06 30)
≈ #D6A09E
Acento sobre fondos oscuros.
hairline
oklch(0.86 0.013 55)
≈ #D9CFC0
Divisores y bordes sutiles.
Dos familias. Sin terceros.
Fraunces para titulares y momentos editoriales. Inter para todo lo demás: cuerpo, UI, captions, eyebrows. La misma Inter que usa Dosis Café — kinship sin disonancia.
Fraunces
Serif variable. Ejes opsz (9 a 144) y SOFT (0 a 100). Peso 380 a 560.
var(--font-display)
Aa Bb Cc
Lo que delegas en mí.
Display
.display
Hero del sitio. clamp(3rem, 8vw, 7rem)
Abre tu cafetería.
H1
.h1
Cabecera de sección. clamp(2.25rem, 5vw, 4rem)
Lo que delegas en mí.
H2
.h2
Sub-cabecera. clamp(1.75rem, 3vw, 2.5rem)
Equipamiento.
H3
.h3
Título de bloque. clamp(1.25rem, 1.8vw, 1.5rem)
Selección de maquinaria
Inter
Sans neutra. Pesos 400 y 500. Numerales tabulares vía tabular-nums. Features: ss01, cv11.
var(--font-sans)
Aa Bb Cc 0123
Lead
.lead
Seis frentes donde un consultor con barra propia te ahorra meses de prueba y error caros.
Body
base · 1rem / 1.625
Soy Mauricio De Luca. Fundé Dosis Café en Chamberí hace casi cuatro años y desde entonces hemos crecido hasta tostar nuestro propio café.
Small
0.875rem
Recibido el 17 de mayo de 2026, 22:30 (hora de Madrid).
Eyebrow
.eyebrow
Maubrews · Consultoría
El drumbeat editorial.
El section-index, el eyebrow con punto rojo y los hairlines son los tres mecanismos que dan ritmo a la página. Repetidos sin esfuerzo, comunican que esto tiene autor.
<SectionIndex num="02" label="Servicios" />
<SectionIndex num="04" label="Productos" tone="dark" />
Punto en --color-mark + label en .eyebrow. Marca el primer aliento del hero.
--color-hairline. Divisores entre items, no contornos rodeando cards.
Botones, enlaces, formularios.
.dot · 6px default
Sin caja. Sólo línea base. El foco mueve el borde a --color-ink, no a la marca (demasiado ruidoso para un input).
Línea fina, stroke 1.5.
lucide-react para todo lo neutro, SVG inline en icons.tsx para marca (lucide v1 ya no trae iconos de redes). Stroke uniforme a 1.5px, sin rellenos sólidos.
Cálida, honesta.
Imágenes reales del local y de Maubrews. No usamos stock de baristas genéricos ni de "manos sostienen taza". Si la foto puede aparecer en cualquier otra web, no es nuestra.
Portrait · Mauricio
Hero · About
Fachada · Dosis Chamberí
Dosis section
Luz natural
Día, ventana grande, sin flash. La cafetería tiene su propia paleta cálida; respétala.
Retratos en perfil o tres cuartos
Evitamos la mirada directa a cámara. La foto debe sentirse cogida en mitad del oficio, no posada.
Detalle sobre escenografía
Mejor un primer plano de la jarra que un plano abierto del local entero. Lo específico vende.
Cercano, no corporativo.
Tuteamos. Frases cortas. Hechos concretos en lugar de adjetivos. La confianza viene de haber estado en la barra, no de decirlo en bonito.
- Lo aprendí montando Dosis.
- Tú firmas con uno solo.
- Si dudas si te puedo vender humo, visítame.
- La barra es la cocina del café.
- Somos apasionados del café.
- Tu socio estratégico de confianza.
- Vivimos para servirte la mejor experiencia.
- Nuestro equipo experto te acompaña en tu viaje.
·Tutea sin servilismo
·Frases cortas, párrafos cortos
·Hechos antes que adjetivos
·Cero jerga de hospitalidad
Lo que no hacemos.
Estos son los reflejos del diseño AI-genérico. Si te descubres a punto de hacer uno, reescribe el elemento con otra estructura.
- / 01
Gradient text
Nada de background-clip:text combinado con un gradiente. El acento se hace con una sola tinta sólida (--color-mark).
- / 02
Glassmorphism
Sin blurs ni cards de cristal por defecto. Las superficies son opacas y tintadas hacia la marca.
- / 03
Card grids idénticos
Tres cards iguales con icono + título + texto está prohibido. Si hay paralelismo, lo resolvemos con tipografía y hairlines.
- / 04
Emojis decorativos
Iconografía lucide-react a stroke 1.5, o SVG inline. Nunca emojis en la UI.
- / 05
Blancos y negros puros
Ni #FFFFFF ni #000000. Todo se tinta hacia el rojo de marca con chroma 0.005 a 0.018.
- / 06
Animaciones bouncy
Easing siempre ease-out-quart o ease-out-quint. Sin spring, sin elastic, sin overshoot.
- / 07
Em dashes en micro-copy
Para texto breve preferimos comas, dos puntos o paréntesis. La raya queda para citas o copy editorial largo.