Brendbuk Identity Board Brand Style Guide
← Color Fonts

Brendbuk

Sistema editorial y de marca observado desde screenshot: capitulos impresos, logotipo en cirilico, rojo frambuesa dominante y una combinacion de acentos maiz, oliva y marron para articular color, tipografia y aplicaciones.

Fuente: screenshot estatico. Colores medidos desde imagen. Tipografias visibles detectadas por lectura en la pagina de tipografia. CSS original, radios exactos y especificaciones tecnicas completas: no detectado.

FUENTE: brendbuk-firmennyj-stil-gajdlajn-2026-06-21-11_42_44.png

Typography

Detectada + aproximada
Heading system
NAMU
Original observado: NAMU
HTML substitute: Montserrat · 72px aprox · 800
Visual identity
foundations
Body system
Conqueror Sans
Original observado: Conqueror Sans
HTML substitute: Source Sans 3 · 16px · 400 a 600 aprox
La guia se comporta como un brandbook impreso: bloques amplios, notas tecnicas y una jerarquia de capitulo muy clara.
Marca observada en fuente: ХОРОВОД ВРЕМЁН · wordmark reconstruido de forma aproximada solo para HTML.
Аа Бб Вв Гг · Aa Bb Cc Dd
Headings · Body · Logo lockup

Colors

Warm editorial
Primary #B7163B
Secondary #F4B43A
Tertiary #8A912C
Quaternary #6B3424
Usage: Background #F7EEDC · Surface #FFF8ED · Text Primary #4A241C · Text Secondary #7C6052 · Border #D7C4A8

Overview

Screenshot-derived
Observed brandХОРОВОД ВРЕМЁН
Source typeStatic screenshot
Chapter flowLogo, palette, typography, graphic elements, print
Visual cueEditorial boards with folk-modern warmth
La guia se organiza como un brandbook de identidad con paginas de portada intensas y paginas tecnicas sobre crema. El patron aparece como apoyo seccional, no como ruido continuo, y las aplicaciones de marca se enfocan en reglas de uso y piezas impresas.

Components

Observed modules
ХОРОВОД
ВРЕМЁН
ХОРОВОД
ВРЕМЁН
ХОРОВОД
ВРЕМЁН
Observed modules: Logo applications, icon-like emblem lockups, misuse matrix, color tables, typography specimen pages, campaign cards and print collaterals.

Buttons

HTML translation
Primary chapter Archive action
Note: La fuente es una guia impresa, no una UI nativa. Estos botones son una traduccion web del sistema cromatico y de la silueta suave observada.

Spacing

Board rhythm
8px base 12px note gap 16px module gap 24px board padding 40px chapter breath
Chapter spacing
Printed board cadence
La composicion deja mucho aire entre capitulos grandes y concentra la informacion dentro de mosaicos mas densos cuando muestra reglas de logo, specimen o piezas impresas.

Elevation / Depth

Subtle paper depth
Observed print logic
Depth style: Flat editorial boards with light card relief. The screenshot suggests contrast-led hierarchy rather than glass or blur.
box-shadow: 0 20px 50px -34px rgba(74, 36, 28, 0.18) border: 1px solid #D7C4A8 blur: (no detectado)

Shapes

Pattern + modest radii
Corner radii4px · 10px · 16px · 24px · pill
Pattern roleSection support, chapter divider, not headline overlay

Do's and Don'ts

Guardrails

Do

Usar rojo frambuesa como ancla principal de capitulo.
Tratar amarillo y oliva como soportes, no como protagonistas iguales.
Mantener la marca y sus versiones en alto contraste.
Reservar una columna limpia para titulares y texto.

Don't

No mezclar la identidad con azules corporativos frios.
No usar blur, glow o UI futurista fuera del sistema observado.
No poner el pattern encima del bloque principal de copy.
No deformar el wordmark ni bajar contraste en aplicaciones.

Motion

Restrained
Motion should feel almost printed into the interface. Prefer chapter reveal fades, slight upward entrance and controlled contrast shifts. Avoid bouncy, glossy or tech-heavy transitions because the source reads as an editorial identity guide, not a kinetic product UI.
durations: 180ms, 260ms easing: cubic-bezier(0.22, 1, 0.36, 1) patterns: fade-in, small lift, border emphasis
Brendbuk style guide reconstruction from screenshot source
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 40px;
}
@theme {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 40px;
}
{
  "colors": {},
  "typography": {
    "display": {
      "family": "NAMU",
      "role": "Headings, chapter covers, large editorial statements",
      "weight": "700 aprox",
      "size": "72px aprox",
      "lineHeight": "0.9",
      "letterSpacing": "-0.04em",
      "htmlFamily": "Montserrat",
      "htmlNote": "Original visible en la pagina de tipografia. Sustituto HTML aproximado."
    },
    "body": {
      "family": "Conqueror Sans",
      "role": "Body copy, captions, descriptive notes and usage rules",
      "weight": "400 a 600 aprox",
      "size": "16px",
      "lineHeight": "1.55",
      "letterSpacing": "0",
      "htmlFamily": "Source Sans 3",
      "htmlNote": "Original visible en la pagina de tipografia. Sustituto HTML aproximado."
    },
    "logo": {
      "family": "Logotipo observado en cirilico",
      "role": "Wordmark and logo applications",
      "weight": "(no detectado)",
      "htmlFamily": "Montserrat",
      "htmlNote": "Recreacion tipografica aproximada solo para preview HTML."
    }
  },
  "rounded": {
    "sm": "4px",
    "md": "10px",
    "lg": "16px",
    "xl": "24px"
  },
  "spacing": {
    "base": "8px",
    "sm": "8px",
    "md": "12px",
    "lg": "16px",
    "xl": "24px",
    "xxl": "40px"
  }
}
---
version: "alpha"
name: "Brendbuk"
description: "Sistema de identidad editorial observado en una guia de marca en ruso, con rojo frambuesa dominante, acentos amarillo maiz y oliva, patron chevron y una estructura de capitulos para logotipo, paleta, tipografia y aplicaciones impresas."
mode: light
source: "C:\\Users\\USER\\claude-skill-library-v2\\utilidades\\DESIGN Style guides 2\\screens 2\\brendbuk-firmennyj-stil-gajdlajn-2026-06-21-11_42_44.png"
sourceType: image
sourceAccuracy: "Colores medidos desde la imagen. La marca observada en el screenshot aparece como ХОРОВОД ВРЕМЁН. Tipografias visibles detectadas por lectura de la pagina de tipografia y aproximadas para HTML cuando no hay archivo fuente."
atmosphere:
  - editorial
  - cultural
  - print-led
  - folk-modern
  - disciplined
colors:
  primary:
    name: Raspberry Chapter
    hex: "#B7163B"
    usage: Fondos de capitulo, titulares, acento principal y sistema de navegacion
  secondary:
    name: Corn Yellow
    hex: "#F4B43A"
    usage: Titulares de portada, highlights y llamadas secundarias
  tertiary:
    name: Olive Pattern
    hex: "#8A912C"
    usage: Pattern de soporte, codificacion de secciones y contraste natural
  quaternary:
    name: Russet Brown
    hex: "#6B3424"
    usage: Versiones profundas de logotipo, paneles de contraste y texto sobre fondos claros
  background:
    name: Paper Cream
    hex: "#F7EEDC"
    usage: Canvas general, slides internas y composicion principal
  surface:
    name: Warm Sand
    hex: "#EFE1C8"
    usage: Tarjetas, paneles y superficies secundarias
  text-primary:
    name: Cocoa Ink
    hex: "#4A241C"
    usage: Texto principal, lockups y labels oscuros
  text-secondary:
    name: Toasted Clay
    hex: "#7C6052"
    usage: Texto secundario y notas tecnicas
  border:
    name: Archive Line
    hex: "#D7C4A8"
    usage: Bordes finos y separadores
typography:
  display:
    family: "NAMU"
    role: Headings, chapter covers, large editorial statements
    weight: "700 aprox"
    size: "72px aprox"
    lineHeight: 0.9
    letterSpacing: "-0.04em"
    htmlFamily: "Montserrat"
    htmlNote: "Original visible en la pagina de tipografia. Sustituto HTML aproximado."
  body:
    family: "Conqueror Sans"
    role: Body copy, captions, descriptive notes and usage rules
    weight: "400 a 600 aprox"
    size: "16px"
    lineHeight: 1.55
    letterSpacing: "0"
    htmlFamily: "Source Sans 3"
    htmlNote: "Original visible en la pagina de tipografia. Sustituto HTML aproximado."
  logo:
    family: "Logotipo observado en cirilico"
    role: Wordmark and logo applications
    weight: "(no detectado)"
    htmlFamily: "Montserrat"
    htmlNote: "Recreacion tipografica aproximada solo para preview HTML."
rounded:
  sm: "4px"
  md: "10px"
  lg: "16px"
  xl: "24px"
spacing:
  base: "8px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "40px"
components:
  button-primary:
    backgroundColor: "#B7163B"
    textColor: "#F7EEDC"
    border: "1px solid rgba(183, 22, 59, 0.32)"
    rounded: "999px"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "#F7EEDC"
    textColor: "#B7163B"
    border: "1px solid #D7C4A8"
    rounded: "999px"
    padding: "12px 20px"
  card:
    backgroundColor: "#FFF8ED"
    border: "1px solid #D7C4A8"
    rounded: "16px"
    padding: "22px"
  badge:
    backgroundColor: "rgba(244, 180, 58, 0.18)"
    textColor: "#8B4D12"
    border: "1px solid rgba(244, 180, 58, 0.26)"
motion:
  level: restrained
  durations: "180ms, 260ms"
  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
  pattern: Print-like transitions, color fades and small lifts only
---

## Overview

- **Composition cues:**
  - Layout: Grid
  - Content Width: Full Bleed
  - Framing: Editorial boards
  - Grid: Strong

## Source reliability

- Source used: single screenshot of the brand guide
- Observed brand in source: `ХОРОВОД ВРЕМЁН`
- Colors: measured from image
- Typography: `NAMU` and `Conqueror Sans` are visibly named in the screenshot
- Exact CSS variables, exact export sizes and exact print specifications: `(no detectado)`

## Colors

The system uses a warm editorial palette with raspberry red as the chapter anchor, corn yellow as the callout accent and olive as the pattern support color.

- **Primary (#B7163B):** chapter backgrounds, hero headlines and main emphasis.
- **Secondary (#F4B43A):** large title contrast and warm highlight moments.
- **Tertiary (#8A912C):** pattern support, section coding and earthy contrast.
- **Quaternary (#6B3424):** deep logo applications and darker editorial blocks.

- **Usage:** Background: #F7EEDC; Surface: #EFE1C8; Text Primary: #4A241C; Text Secondary: #7C6052; Border: #D7C4A8; Accent: #B7163B

## Typography

Typography appears explicitly documented in the screenshot.

- **Display:** NAMU, 72px approx, weight 700 approx, compact line-height and bold editorial presence.
- **Body:** Conqueror Sans, 16px approx, regular to medium weights for captions and specifications.
- **Logo wordmark:** observed in Cyrillic, exact font source `(no detectado)`, reconstructed only as an approximation in HTML.

## Layout

Layout follows a chapter-based print grid. Each section behaves like a board with a large title zone, dense reference modules and a disciplined vertical flow between chapter dividers.

- **Layout type:** Grid
- **Content width:** Full Bleed
- **Base unit:** 8px
- **Scale:** 8px, 12px, 16px, 24px, 40px
- **Section padding:** 24px, 32px, 40px
- **Card padding:** 22px, 24px

## Elevation & Depth

Depth is light and print-led. Contrast comes more from paper, red blocks and color panels than from shadows or blur.

- **Surface style:** Flat editorial cards with soft paper depth
- **Borders:** 1px #D7C4A8, 1px rgba(183, 22, 59, 0.14)
- **Shadows:** 0 20px 50px -34px rgba(74, 36, 28, 0.18)
- **Blur:** `(no detectado)`

## Shapes

Shapes are modestly rounded. Most modules are rectangular with only enough softness to feel contemporary while staying compatible with print layouts.

- **Corner radii:** 4px, 10px, 16px, 24px, 999px
- **Icon sets:** custom logo applications and simple dot markers

## Components

The visible component language is built around logo application boards, palette tables, type specimens, misuse matrices and print collateral.

### Buttons

- **Primary:** #B7163B background, cream text, pill silhouette.
- **Secondary:** cream background, raspberry text, archival line border.

### Cards and Surfaces

- **Card surface:** #FFF8ED, border #D7C4A8, radius 16px, padding 22px.

### Brand system

- **Observed:** primary logo, reverse logo, chapter boards, color tables, typography specimen, misuse matrix, poster and print applications.

## Do's and Don'ts

### Do

- Do keep raspberry as the strongest chapter color.
- Do use yellow and olive as supporting accents instead of equal competitors.
- Do preserve the print-board rhythm of dense references inside calm paper canvases.
- Do keep the logo applications high-contrast and rule-driven.

### Don't

- Don't replace the warm cultural palette with cool corporate blues.
- Don't over-soften the layout with glassmorphism or heavy blur.
- Don't turn the pattern into decorative noise over the headline column.
- Don't distort or recolor the logo outside the observed variants.

## Motion

Motion should feel almost printed into the interface. Use simple fades, small upward travel and restrained hover contrast.

**Motion Level:** restrained

**Durations:** 180ms, 260ms

**Easing:** cubic-bezier(0.22, 1, 0.36, 1)

**Hover Patterns:** contrast, subtle lift, border emphasis

**Scroll Patterns:** chapter reveal, staggered board entrance