---
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