← Color Fonts
CREATIVE BRAND TEMPLATE / Style Guide
Editorial + Modular
C2045
Voice Brand Usage Deck
Creative Brand Guidelines Template

Build a quiet editorial system for premium decks.

Arena cálida, negro carbono y módulos crema crean una plantilla sobria para brand books, presentaciones y sistemas visuales refinados.

Open the guide Review the palette
System Balance
03
ToneEditorial and calm
PaletteSand, cream, carbon
FormSpreads, modules and fine rules
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #D1BE98;
  --color-secondary: #F3E6CF;
  --color-accent: #B59A6A;
  --color-neutral: #FAF6EF;
  --color-background: #1C1B1A;
  --color-surface: #262422;
  --color-surface-light: #F7F0E5;
  --color-text-primary: #FAF6EF;
  --color-text-secondary: #CEC4B4;
  --color-text-dark: #171614;
  --color-text-muted: #7D746A;
  --color-border: #3A3631;
  --font-display: "Schibsted Grotesk";
  --font-body: "Schibsted Grotesk";
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --space-base: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #D1BE98;
  --color-secondary: #F3E6CF;
  --color-accent: #B59A6A;
  --color-neutral: #FAF6EF;
  --color-background: #1C1B1A;
  --color-surface: #262422;
  --color-surface-light: #F7F0E5;
  --color-text-primary: #FAF6EF;
  --color-text-secondary: #CEC4B4;
  --color-text-dark: #171614;
  --color-text-muted: #7D746A;
  --color-border: #3A3631;
  --font-display: "Schibsted Grotesk";
  --font-body: "Schibsted Grotesk";
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --spacing-base: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "colors": {
    "primary": "#D1BE98",
    "secondary": "#F3E6CF",
    "accent": "#B59A6A",
    "neutral": "#FAF6EF",
    "background": "#1C1B1A",
    "surface": "#262422",
    "surface-light": "#F7F0E5",
    "text-primary": "#FAF6EF",
    "text-secondary": "#CEC4B4",
    "text-dark": "#171614",
    "text-muted": "#7D746A",
    "border": "#3A3631"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Schibsted Grotesk",
      "fontSize": "48px",
      "fontWeight": "700",
      "lineHeight": "46px",
      "letterSpacing": "-0.045em"
    },
    "body-md": {
      "fontFamily": "Familjen Grotesk",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "26px"
    },
    "label-md": {
      "fontFamily": "Fragment Mono",
      "fontSize": "11px",
      "fontWeight": "400",
      "lineHeight": "18px"
    }
  },
  "rounded": {
    "sm": "8px",
    "md": "14px",
    "lg": "22px",
    "full": "9999px"
  },
  "spacing": {
    "base": "4px",
    "sm": "12px",
    "md": "20px",
    "lg": "32px",
    "xl": "48px",
    "gap": "24px",
    "section-padding": "96px"
  }
}
---
version: "1.0"
name: "Creative Brand Guidelines Template"
description: "Sistema editorial de brand guidelines con arena calida, negro carbono, crema suave y una composicion sobria para decks, presentaciones y plantillas de marca premium."
colors:
  primary: "#D1BE98"
  secondary: "#F3E6CF"
  accent: "#B59A6A"
  neutral: "#FAF6EF"
  background: "#1C1B1A"
  surface: "#262422"
  surface-light: "#F7F0E5"
  text-primary: "#FAF6EF"
  text-secondary: "#CEC4B4"
  text-dark: "#171614"
  text-muted: "#7D746A"
  border: "#3A3631"
typography:
  display-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "46px"
    letterSpacing: "-0.045em"
  body-md:
    fontFamily: "Familjen Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "Fragment Mono"
    fontSize: "11px"
    fontWeight: 400
    lineHeight: "18px"
rounded:
  sm: "8px"
  md: "14px"
  lg: "22px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.text-dark}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  card:
    backgroundColor: "{colors.surface-light}"
    borderColor: "#DDD1BC"
    textColor: "{colors.text-dark}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Creative Brand Guidelines Template

## 1. Tema Visual y Atmosfera

Esta referencia se siente como una plantilla editorial de alto nivel para presentar una marca con elegancia silenciosa. La composicion combina negro profundo, fondos arena, tarjetas crema y un uso muy medido de bloques geometricos. Todo se comporta como un deck premium: claro, ordenado y con suficiente contraste para que la informacion se vea importante sin necesidad de dramatismo visual.

La board alterna spreads oscuras y claras, portadas con tipografia grande, modulos rectangulares, lineas finas y una reticula sobria que sugiere precision editorial. El sistema no quiere verse tecnologico ni futurista; quiere verse refinado, funcional y listo para adaptarse a muchas marcas sin perder presencia.

**Palabras clave de personalidad**: editorial, refinado, sobrio, modular, premium, silencioso, funcional, contemporaneo

**Densidad del layout**: balanced

**Modo preferido**: dark editorial with warm neutrals

**Nivel de ornamentacion**: subtle

**Audiencia visual objetivo**: estudios creativos, templates de brand book, presentaciones premium, systems decks, pitch visual y kits de identidad

---

## 2. Paleta de Colores y Roles Semanticos

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Sand Editorial | `--color-primary` | `#D1BE98` | Fondo calido principal, portadas y paneles de marca | `#171614` |
| Cream Surface | `--color-secondary` | `#F3E6CF` | Superficies claras y zonas de lectura | `#171614` |
| Bronze Note | `--color-accent` | `#B59A6A` | Acentos suaves, reglas y detalles de apoyo | `#171614` |
| Paper Neutral | `--color-neutral` | `#FAF6EF` | Texto claro, respiracion y contraste | `#171614` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Carbon Editorial | `--color-bg` | `#1C1B1A` | Canvas oscuro y spreads principales |
| Dark Panel | `--color-surface` | `#262422` | Cards oscuras y modulos secundarios |
| Soft Paper | `--color-surface-light` | `#F7F0E5` | Tarjetas claras, fichas y contenido informativo |
| Quiet Border | `--color-border` | `#3A3631` | Bordes, divisores y estructura |
| Pale Border | `--color-border-light` | `#DDD1BC` | Bordes sobre superficies claras |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Paper Neutral | `--color-text` | `#FAF6EF` | Titulares y body sobre fondo oscuro |
| Warm Mist | `--color-text-secondary` | `#CEC4B4` | Copy secundario y supporting text |
| Ink Editorial | `--color-text-dark` | `#171614` | Texto sobre fondos claros y arena |
| Quiet Taupe | `--color-text-muted` | `#7D746A` | Metadata y microcopy |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#7A9C7B` | `#0F170F` |
| Exito (bg) | `--color-success-bg` | `#E4EDE1` | - |
| Advertencia | `--color-warning` | `#D1BE98` | `#241E14` |
| Advertencia (bg) | `--color-warning-bg` | `#F2E7D1` | - |
| Error | `--color-error` | `#C97B73` | `#FFF5F4` |
| Error (bg) | `--color-error-bg` | `#F3DEDA` | - |
| Info | `--color-info` | `#9A8D76` | `#171614` |
| Info (bg) | `--color-info-bg` | `#ECE5D7` | - |

La paleta funciona cuando se siente material y editorial. El negro sostiene jerarquia, el arena humaniza y el crema mantiene limpieza. No necesita saturacion extra ni acentos llamativos para verse premium.

---

## 3. Reglas de Tipografia

### Familias tipograficas

```css
/* Heading: Schibsted Grotesk - sustituto Google para la grotesca editorial amplia observada en la plantilla */
--font-heading: 'Schibsted Grotesk', sans-serif;

/* Body: Familjen Grotesk - sans de lectura limpia para sistemas editoriales y decks */
--font-body: 'Familjen Grotesk', sans-serif;

/* Labels: Fragment Mono - monoespaciada sobria para specs, captions y micro-etiquetas */
--font-label: 'Fragment Mono', monospace;
```

**Google Fonts (implementacion web):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Fragment+Mono:ital@0;1&family=Schibsted+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: la board original parece usar una grotesca editorial de presencia amplia para titulares y una sans clara para cuerpo. Para headings se compararon `Schibsted Grotesk`, `Syne` y `Archivo`; **Schibsted Grotesk** fue la mejor por su elegancia contenida y proporciones de publishing. Para body se compararon `Familjen Grotesk`, `Onest` y `Instrument Sans`; **Familjen Grotesk** sostuvo mejor la lectura limpia del template sin verse demasiado utilitaria. Para labels se eligio **Fragment Mono** por su tono técnico suave y discreto.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Captions, notas, metadata |
| `--text-sm` | 0.875rem | 14px | 1.5 | Labels, helper text, UI secundaria |
| `--text-base` | 1rem | 16px | 1.625 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.58 | Intro copy y descripcion |
| `--text-xl` | 1.25rem | 20px | 1.4 | Titulos de modulo |
| `--text-2xl` | 1.75rem | 28px | 1.18 | H3 |
| `--text-3xl` | 2.5rem | 40px | 1.05 | H2 |
| `--text-4xl` | 3rem | 48px | 0.96 | Heading system |

### Pesos tipograficos

```css
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Letter spacing

```css
--tracking-tight: -0.045em;
--tracking-normal: 0em;
--tracking-wide: 0.08em;
--tracking-wider: 0.16em;
```

La voz tipografica debe sentirse curada y amplia. Los titulares cargan la sofisticacion del sistema, mientras el body mantiene legibilidad y orden. Las labels deben aportar estructura, nunca ruido.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-neutral)
Color de texto: var(--color-text-dark)
Padding: 14px 24px
Border-radius: var(--radius-full)
Font-weight: var(--font-normal)
Font-size: var(--text-sm)

Hover:
  Background: #F2EBDD
  box-shadow: 0 14px 26px rgba(0,0,0,0.12)

Active:
  Background: #E9DEC8
  transform: translateY(1px)
```

**Secundario**
```
Background: transparent
Color: var(--color-neutral)
Border: 1px solid rgba(250,246,239,0.22)
Padding: 14px 24px
Border-radius: var(--radius-full)

Hover:
  Background: rgba(255,255,255,0.06)
  Border-color: rgba(206,196,180,0.36)
```

### Cards

**Tarjeta base**
```
Background: var(--color-surface-light)
Border: 1px solid #DDD1BC
Border-radius: 22px
Padding: 24px
Box-shadow: 0 18px 34px rgba(8, 8, 8, 0.10)
```

Las cards deben sentirse como piezas de un kit editorial listo para presentar. El valor no viene del efecto sino de la jerarquia, el borde fino y el aire interno.

---

## 5. Principios de Layout y Composicion

La composicion ideal para este sistema es editorial y estable. Un gran bloque tipografico, una pieza visual bien contenida y uno o dos modulos secundarios bastan para sugerir un template premium. Los fondos deben ser limpios; los patrones, si aparecen, deben estar encapsulados en una zona precisa y no contaminar el resto del lienzo.

Usar:

- bloques rectangulares amplios
- contraste entre negro, arena y crema
- lineas finas y divisores discretos
- un objeto hero o stack editorial bien contenido
- mucho aire alrededor del copy

Evitar:

- ornamentacion blanda o cinematica
- demasiadas texturas simultaneas
- iconos flotando sobre el titular
- reticulas visibles detras del texto principal

---

## 6. Movimiento

El motion ideal es casi invisible. Esta plantilla gana cuando los modulos aparecen con calma, los spreads se deslizan con precision y los detalles se activan sin llamar demasiado la atencion.

**Nivel de motion**: subtle

**Duraciones**: 140ms, 240ms, 420ms

**Easings**: `ease`, `cubic-bezier(0.22, 1, 0.36, 1)`

**Patrones**: fade-up corto, slide editorial, reveal de panel, transition de spread

---

## 7. Lo que Si y lo que No

### ✅ Hacer

1. **Usa el arena como tono de sofisticacion** — debe suavizar el negro sin diluirlo.
2. **Mantén el layout limpio y modular** — la elegancia sale del orden.
3. **Reserva un area clara para el texto hero** — la jerarquia necesita respirar.
4. **Emplea el patrón o barras solo en zonas acotadas** — deben sentirse parte del template, no decoración invasiva.

### ❌ No hacer

1. **No agregues gradientes blandos ni halos** — el sistema perderia su tension editorial.
2. **No superpongas elementos al titular** — rompe la claridad del spread.
3. **No satures de acentos cromaticos** — la paleta funciona por contencion.
4. **No conviertas la plantilla en una UI ruidosa** — debe seguir sintiendose brand book, no dashboard.