Packaging, mascot and flavor palettes build a tactile world that feels like coffee, paper, spice and shelf presence.
Sistema de identidad para una marca de cafe artesanal donde el producto, la ilustracion de personaje y el empaque cuentan la misma historia. La marca se siente rica, tactil y emocional, con una mezcla clara entre nostalgia, sabor y coleccionabilidad.
Warm dark surface, creamy type and editorial rhythm for flavor notes, campaign copy and collectible product families.
:root {
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-xl: 34px;
--radius-full: 999px;
--space-xs: 6px;
--space-sm: 10px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
}@theme {
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-xl: 34px;
--radius-full: 999px;
--spacing-xs: 6px;
--spacing-sm: 10px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
}{
"colors": {},
"typography": {
"display": {
"family": "Custom Arabic display and warm editorial serif observed",
"role": "Titulares de marca, secciones principales, logotipo y mensajes de caracter",
"weight": "700",
"size": "64px",
"lineHeight": "0.94",
"letterSpacing": "-0.04em",
"htmlFamily": "Fraunces",
"htmlNote": "Original: custom Arabic display plus warm editorial serif observed -> HTML: Fraunces (Google substitute)"
},
"body": {
"family": "Warm editorial serif observed",
"role": "Body copy, descripciones, storytelling y notas de producto",
"weight": "400",
"size": "16px",
"lineHeight": "1.72",
"letterSpacing": "-0.01em",
"htmlFamily": "Newsreader",
"htmlNote": "Original: warm editorial serif observed -> HTML: Newsreader (Google substitute)"
},
"label": {
"family": "Compact logo sans observed",
"role": "Labels, captions, chips, nombres de sabores y microcopy",
"weight": "600",
"size": "12px",
"lineHeight": "1.3",
"letterSpacing": "0.16em",
"htmlFamily": "Instrument Sans",
"htmlNote": "Original: compact sans observed -> HTML: Instrument Sans (Google substitute)"
}
},
"rounded": {
"sm": "10px",
"md": "18px",
"lg": "26px",
"xl": "34px",
"full": "999px"
},
"spacing": {
"xs": "6px",
"sm": "10px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"xxl": "48px"
}
}---
name: Baroilla
description: Sistema de identidad para una marca de cafe con tono artesanal, nostalgico y jugueton, construido con vino especiado, crema tostada, oliva, indigo profundo y una combinacion de display ornamental con lectura editorial calida.
mode: dark
atmosphere:
- artisanal
- warm
- nostalgic
- playful
- flavorful
colors:
primary:
name: Spice Wine
hex: "#3E0A07"
usage: Fondo institucional, heroes, paneles principales y storytelling de marca
secondary:
name: Cream Foam
hex: "#E8E1B6"
usage: Texto claro, fondos suaves, titulos sobre oscuro y respiracion editorial
tertiary:
name: Harvest Olive
hex: "#616C39"
usage: Packaging clasico, acentos naturales y bloques de producto
background:
name: Roasted Espresso
hex: "#2A0908"
usage: Base oscura de maxima profundidad y contraste
surface:
name: Toasted Sand
hex: "#D7B897"
usage: Tarjetas, modulos claros, areas narrativas y fondos de ilustracion
ink:
name: Coffee Black
hex: "#000000"
usage: Logotipo sobre claro, texto principal y estructura fuerte
inkSoft:
name: Walnut Brown
hex: "#78360A"
usage: Texto secundario, bordes decorativos y detalles tipograficos
border:
name: Indigo Roast
hex: "#191347"
usage: Packaging premium, contornos oscuros y contraste de colecciones
typography:
display:
family: Custom Arabic display and warm editorial serif observed
role: Titulares de marca, secciones principales, logotipo y mensajes de caracter
weight: 700
size: 64px
lineHeight: 0.94
letterSpacing: -0.04em
htmlFamily: Fraunces
htmlNote: "Original: custom Arabic display plus warm editorial serif observed -> HTML: Fraunces (Google substitute)"
body:
family: Warm editorial serif observed
role: Body copy, descripciones, storytelling y notas de producto
weight: 400
size: 16px
lineHeight: 1.72
letterSpacing: -0.01em
htmlFamily: Newsreader
htmlNote: "Original: warm editorial serif observed -> HTML: Newsreader (Google substitute)"
label:
family: Compact logo sans observed
role: Labels, captions, chips, nombres de sabores y microcopy
weight: 600
size: 12px
lineHeight: 1.3
letterSpacing: 0.16em
htmlFamily: Instrument Sans
htmlNote: "Original: compact sans observed -> HTML: Instrument Sans (Google substitute)"
rounded:
sm: 10px
md: 18px
lg: 26px
xl: 34px
full: 999px
spacing:
xs: 6px
sm: 10px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
components:
buttonPrimary:
background: "#E8E1B6"
text: "#3E0A07"
border: "1px solid rgba(232, 225, 182, 0.10)"
radius: 999px
padding: "14px 24px"
buttonSecondary:
background: "transparent"
text: "#E8E1B6"
border: "1px solid rgba(232, 225, 182, 0.20)"
radius: 999px
padding: "14px 24px"
badge:
background: "rgba(232, 225, 182, 0.10)"
text: "#E8E1B6"
border: "1px solid rgba(232, 225, 182, 0.12)"
radius: 999px
padding: "6px 12px"
card:
background: "#5A1812"
border: "1px solid rgba(215, 184, 151, 0.16)"
radius: 26px
padding: 24px
shadow: "0 18px 40px -30px rgba(0, 0, 0, 0.48)"
input:
background: "#5A1812"
text: "#E8E1B6"
border: "1px solid rgba(215, 184, 151, 0.18)"
radius: 18px
padding: "14px 16px"
motion:
level: gentle
durations: "160ms, 220ms"
easing: "cubic-bezier(0.22, 1, 0.36, 1)"
pattern: Elevaciones suaves, apariciones cortas y pequenos cambios de enfasis en tarjetas o sabores
imagery:
direction: Ilustracion de personaje, cafe servido, packaging premium y bodegones calidos con madera y especias
rule: Priorizar textura, calidez y composicion de empaque; evitar efectos futuristas o atmosferas abstractas sin materia
---
# 1. Brand summary
Baroilla se siente como una marca de cafe con alma de empaque coleccionable. Su identidad mezcla nostalgia, sabor, juego y una fuerte conciencia de personaje, sin dejar de verse cuidada y premium.
La marca no vive solo en el logotipo. Vive en el mundo que construye: la paleta especiada, la ilustracion, los sabores y la sensacion de producto de estante bien narrado.
# 2. Color system
## Core palette
- `Spice Wine` `#3E0A07`: ancla emocional y fondo principal.
- `Cream Foam` `#E8E1B6`: contraste calido y luz del sistema.
- `Harvest Olive` `#616C39`: linea clasica y natural para producto.
- `Roasted Espresso` `#2A0908`: profundidad oscura y dramatismo controlado.
## Support roles
- `Toasted Sand` `#D7B897`: fondo editorial claro y tactil.
- `Coffee Black` `#000000`: logotipo, trazos y texto fuerte sobre claro.
- `Walnut Brown` `#78360A`: detalles, bordes y matices secundarios.
- `Indigo Roast` `#191347`: contraste premium para colecciones de empaque.
## Usage
- Usar `Spice Wine` como territorio principal de marca.
- Reservar `Cream Foam` para dar respiracion, lectura y lujo calido.
- Alternar `Harvest Olive` e `Indigo Roast` para diferenciar familias de producto.
# 3. Typography
## Heading system
- Original: `custom Arabic display and warm editorial serif observed`
- HTML substitute: `Fraunces`
- Rol: titulos, claims, secciones y presencia de marca
- Peso observado: `700`
- Escala sugerida: `64px`
- Tracking: `-0.04em`
La guia mezcla un display arabe muy rotundo con una serif calida para encabezados en latin. En HTML se usa `Fraunces`, porque conserva caracter, sabor editorial y una personalidad menos convencional que una serif de catalogo generica.
## Body system
- Original: `warm editorial serif observed`
- HTML substitute: `Newsreader`
- Rol: parrafos, storytelling y soporte de marca
- Peso base: `400`
- Escala: `16px / 1.72`
El cuerpo necesita sentirse narrativo y amable. `Newsreader` aporta una lectura refinada, organica y adecuada para una marca que quiere contar historias alrededor del cafe.
## Label system
- Original: `compact sans observed`
- HTML substitute: `Instrument Sans`
- `12px`
- `0.16em`
- Uso en nombres de sabores, chips, captions y pequenos rotulos
# 4. Composition cues
- Alternancia entre paneles vino oscuros y superficies arena claras.
- Marcos troquelados y formas de sello o ticket como recurso distintivo.
- Ilustracion de personaje como centro del universo visual.
- Packaging como prueba principal del sistema, no solo como aplicacion secundaria.
# 5. Components
## Buttons
- Primary: crema calida con texto vino oscuro.
- Secondary: contorno crema sobre fondo profundo.
## Cards
- Fondo `#5A1812`
- Borde `rgba(215, 184, 151, 0.16)`
- Radio `26px`
- Sombra `0 18px 40px -30px rgba(0, 0, 0, 0.48)`
## Badge
- Pastilla crema translucida sobre vino.
## Input
- Campo oscuro con borde arena y lectura clara.
# 6. Imagery and materiality
Baroilla funciona con cafe servido, madera, telas, ilustracion, papel y bodegones de empaque. La materia es importante: todo debe sentirse tostado, tactil y vivo.
Evitar minimalismo esteril, tecnicismo frio o fondos ambiguos sin producto. La marca gana cuando se siente humana, calida y con sabor.
# 7. Motion
- Nivel: `gentle`
- Duraciones: `160ms` y `220ms`
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`
- Recomendacion: pequenos lifts, transiciones suaves y enfasis delicado en sabores o colecciones