← Color Fonts
Bunco Brand Guide Bakery, warm editorial system
bunco bakery house

Warm bakery identity

The bun everyone craves.

Crema aireada, naranja de horno y una tipografia redondeada construyen una marca que se siente cercana, recien hecha y lista para habitar aparadores, empaques y menu diario.

Open the guide See the palette

Flavor system

03
Mood Tactile, soft and neighborhood-driven Palette Flour Mist, Butter Glow, Toasted Beige, Oven Orange Use Packaging, storefronts, menu boards and bakery promos
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 999px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
}
@theme {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --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": "Gebuk",
      "role": "Headings, logo gestures, campaign words",
      "weight": "700",
      "size": "64px",
      "lineHeight": "0.94",
      "letterSpacing": "-0.03em",
      "htmlFamily": "Sniglet",
      "htmlNote": "Original: Gebuk -> HTML: Sniglet (Google substitute)"
    },
    "body": {
      "family": "Inter Light",
      "role": "Body copy, navigation, product notes",
      "weight": "300",
      "size": "16px",
      "lineHeight": "1.65",
      "letterSpacing": "-0.01em",
      "htmlFamily": "Inter",
      "htmlNote": "Original: Inter Light -> HTML: Inter"
    },
    "label": {
      "family": "Inter",
      "role": "Eyebrows, chips, UI labels",
      "weight": "600",
      "size": "12px",
      "lineHeight": "1.3",
      "letterSpacing": "0.14em"
    }
  },
  "rounded": {
    "sm": "12px",
    "md": "18px",
    "lg": "28px",
    "xl": "36px",
    "full": "999px"
  },
  "spacing": {
    "xs": "6px",
    "sm": "10px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "xxl": "48px"
  }
}
---
name: Bunco
description: Sistema de marca para una bakery calida y editorial, construida con crema suave, mantequilla tostada y un naranja de horno que vuelve memorable el logo.
mode: light
atmosphere:
  - warm
  - tactile
  - inviting
  - editorial
  - handcrafted
colors:
  primary:
    name: Oven Orange
    hex: "#BA490A"
    usage: Logo, CTA primario, titulares de acento, bloques de marca
  secondary:
    name: Butter Glow
    hex: "#FFF1B8"
    usage: Resaltes calidos, secundarios suaves, paneles de apoyo
  tertiary:
    name: Toasted Beige
    hex: "#E3C394"
    usage: Fondos de apoyo, chips, superficies tibias
  background:
    name: Flour Mist
    hex: "#F1F8E8"
    usage: Fondo base del sistema
  surface:
    name: Soft Cream
    hex: "#FFF8E9"
    usage: Tarjetas, paneles claros y showcase
  ink:
    name: Cocoa Ink
    hex: "#5A2C14"
    usage: Texto principal, outlines y detalles estructurales
  inkSoft:
    name: Baker Brown
    hex: "#8A5F3C"
    usage: Texto secundario, metadata y notas
  border:
    name: Dough Line
    hex: "#E4D2B8"
    usage: Bordes suaves y separadores
typography:
  display:
    family: Gebuk
    role: Headings, logo gestures, campaign words
    weight: 700
    size: 64px
    lineHeight: 0.94
    letterSpacing: -0.03em
    htmlFamily: Sniglet
    htmlNote: "Original: Gebuk -> HTML: Sniglet (Google substitute)"
  body:
    family: Inter Light
    role: Body copy, navigation, product notes
    weight: 300
    size: 16px
    lineHeight: 1.65
    letterSpacing: -0.01em
    htmlFamily: Inter
    htmlNote: "Original: Inter Light -> HTML: Inter"
  label:
    family: Inter
    role: Eyebrows, chips, UI labels
    weight: 600
    size: 12px
    lineHeight: 1.3
    letterSpacing: 0.14em
rounded:
  sm: 12px
  md: 18px
  lg: 28px
  xl: 36px
  full: 999px
spacing:
  xs: 6px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  buttonPrimary:
    background: "#BA490A"
    text: "#FFF8E9"
    border: "1px solid rgba(186, 73, 10, 0.12)"
    radius: 999px
    padding: "14px 24px"
  buttonSecondary:
    background: "transparent"
    text: "#BA490A"
    border: "1px solid rgba(186, 73, 10, 0.22)"
    radius: 999px
    padding: "14px 24px"
  badge:
    background: "#FFF8E9"
    text: "#8A5F3C"
    border: "1px solid rgba(138, 95, 60, 0.14)"
    radius: 999px
    padding: "6px 12px"
  card:
    background: "#FFF8E9"
    border: "1px solid #E4D2B8"
    radius: 28px
    padding: 24px
    shadow: "0 20px 44px -28px rgba(90, 44, 20, 0.20)"
  input:
    background: "#FFFDF7"
    text: "#5A2C14"
    border: "1px solid rgba(90, 44, 20, 0.14)"
    radius: 16px
    padding: "14px 16px"
motion:
  level: gentle
  durations: "160ms, 220ms"
  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
  pattern: Hover suave, desplazamiento minimo y transiciones limpias
imagery:
  direction: Pan recien horneado, manos en proceso, vitrinas de barrio, texturas de miga y costra
  rule: Mostrar materia real y calidez humana; evitar escenas frias o producto aislado sin contexto
---

# 1. Brand summary

Bunco se presenta como una bakery amable, tactil y luminosa. La identidad mezcla un naranja de horno bastante protagonista con una base crema y mantequilla que hace que todo se sienta tibio, suave y facil de acercar.

El sistema no intenta verse premium-frio ni minimal-tech. Su fuerza esta en la combinacion de logo redondeado, superficies claras y una fotografia muy sensorial donde la miga, la corteza y las manos aportan credibilidad.

# 2. Color system

## Core palette

- `Oven Orange` `#BA490A`: color de firma, mejor cuando se usa como bloque amplio, marca principal o CTA.
- `Butter Glow` `#FFF1B8`: amarillo mantequilla para acentos suaves y paneles de apoyo.
- `Toasted Beige` `#E3C394`: beige-pan para balancear el sistema y conectar con harinas, migas y empaques.
- `Flour Mist` `#F1F8E8`: fondo claro dominante, muy aireado y limpio.

## Support roles

- `Soft Cream` `#FFF8E9`: superficie de tarjetas y secciones altas en luz.
- `Cocoa Ink` `#5A2C14`: tinta principal, suficiente contraste sin endurecer el tono.
- `Baker Brown` `#8A5F3C`: texto secundario y metadata.
- `Dough Line` `#E4D2B8`: hairlines, bordes y divisiones de baja tension.

## Usage

- Mantener el fondo general claro y respirable.
- Reservar `Oven Orange` para marca, headlines clave y botones principales.
- No saturar la pantalla con demasiados acentos a la vez; el sistema vive mejor con grandes campos claros y uno o dos golpes calidos.

# 3. Typography

## Heading system

- Original: `Gebuk`
- HTML substitute: `Sniglet`
- Rol: titulares, palabras de campana, firma de marca
- Peso: `700`
- Escala base observada: `64px`
- Tracking: `-0.03em`

`Gebuk` se percibe redondeada, cercana y un poco juguetona, ideal para que la marca se sienta propia sin ponerse infantil. En HTML se sustituye por `Sniglet`, que conserva la suavidad y el caracter curvo mejor que opciones mas genericas.

## Body system

- Original: `Inter Light`
- HTML: `Inter`
- Rol: parrafos, menu, notas de producto, UI
- Peso base: `300`
- Escala base observada: `16px / 1.65`

La guia original usa un cuerpo muy sobrio para que toda la expresividad recaiga en la marca y la fotografia. Esa combinacion mantiene claridad sin robar protagonismo.

## Label system

- `Inter 600`
- `12px`
- `0.14em`
- Uso en eyebrows, pills, etiquetas y navegacion compacta

# 4. Composition cues

- Canvas claro, casi pastel, con mucho espacio abierto.
- Bloques de marca grandes y limpios.
- Tarjetas redondeadas con radios generosos.
- Repeticion de rectangulos suaves, capsulas y ventanas de exhibicion.
- El gesto visual mas fuerte debe sentirse panaderia fisica: aparador, empaque, textura o producto; nunca abstraccion tecnologica.

# 5. Components

## Buttons

- Primary: `#BA490A` con texto `#FFF8E9`, radio completo y presencia amistosa.
- Secondary: transparente, contorno naranja, misma geometria.

## Cards

- Fondo `#FFF8E9`
- Borde `#E4D2B8`
- Radio `28px`
- Sombra `0 20px 44px -28px rgba(90, 44, 20, 0.20)`

## Badge

- Pastilla clara con borde suave y texto `Baker Brown`

## Input

- Campo claro con borde muy fino, sin dramatismo

# 6. Imagery and materiality

La fotografia debe sentirse recien salida del horno: costras doradas, harina suspendida, manos en accion, vitrinas de barrio y empaques calidos. La materia prima importa tanto como el producto final.

Evitar fondos frios, metalicos o corporativos. La marca pierde alma si se separa del pan, del papel y del gesto humano.

# 7. Motion

- Nivel: `gentle`
- Duraciones: `160ms` y `220ms`
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`

Las interacciones deben sentirse suaves, casi como acomodar producto en aparador. Nada de rebotes exagerados ni efectos vistosos. Hover, lift y cambios de color discretos son suficientes.

# 8. Elevation and depth

La profundidad es ligera y siempre calida. Las sombras no deben verse grises ni demasiado duras; mejor una sombra marron tenue que ayude a separar tarjetas sobre el canvas crema.

La identidad gana cuando la profundidad recuerda empaque fisico o cartel de aparador, no interfaz high-tech.

# 9. Shapes

- Radios grandes y amigables
- Pastillas completas en CTAs y labels
- Ventanas rectangulares con esquinas redondeadas
- Ningun gesto punzante o demasiado anguloso

# 10. Do

- Usar grandes superficies claras con uno o dos acentos calidos.
- Dejar que la fotografia muestre textura real.
- Mantener titulares redondeados y de alto caracter.
- Construir layouts limpios donde el producto respire.

# 11. Don't

- No usar gradientes difusos, halos o fondos atmosfericos sin motivo.
- No mezclar demasiados naranjas diferentes en la misma vista.
- No convertir el sistema en una UI generica de cafeteria tech.
- No poner elementos decorativos sobre el copy principal.