Marca y sistema.

---
version: alpha
name: Calaverita
description: Sistema de diseño del lab — software a medida, productos digitales y agentes operables por IA.
logo:
  glyph:  "https://calaverita.dev/logo.svg"
  badge:  "https://calaverita.dev/favicon.svg"
  minSize: 24px
  clearSpace: 0.5x
colors:
  primary:   "#FF5722"
  secondary: "#F5F0E8"
  tertiary:  "#1A181D"
  neutral:   "#08070B"
  muted:     "#6B6560"
  line:      "rgba(245, 240, 232, 0.08)"
typography:
  display:
    fontFamily: Geist
    fontSize: 72px
    fontWeight: 500
    lineHeight: 72px
    letterSpacing: -0.025em
  body:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  serif:
    fontFamily: Instrument Serif
    fontStyle: italic
    letterSpacing: -0.02em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0.12em
rounded:
  sm:   8px
  md:   14px
  lg:   18px
  xl:   24px
  full: 9999px
spacing:
  xs:  4px
  sm:  8px
  md:  16px
  lg:  24px
  xl:  40px
  2xl: 64px
  3xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.neutral}"
    typography: "{typography.body}"
    rounded: "{rounded.full}"
    padding: 12px 20px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.full}"
    padding: 12px 20px
  chip:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.secondary}"
    typography: "{typography.mono}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
---

# Calaverita — Sistema de diseño

## Overview

Tres ideas sostienen el sistema visual del lab:

1. Un fondo oscuro casi negro que respeta el ojo en sesiones largas de trabajo.
2. Un acento naranja con identidad cultural (cempasúchil, México) usado con criterio — énfasis, no relleno.
3. Un complemento serif italic que aparece sobre titulares display para dar pausa y suavidad.

Cada decisión visual responde a una de esas tres ideas. Cuando algo no encaja, se evalúa antes de añadirse.

## Logo

Dos variantes oficiales, ambas hospedadas en el dominio público de Calaverita —
se pueden referenciar directamente desde cualquier sitio, deck o documento.

| Variante | URL pública                              | Uso                                                       |
| -------- | ---------------------------------------- | --------------------------------------------------------- |
| glyph    | https://calaverita.dev/logo.svg          | Símbolo sin fondo. Overlays, marcas de agua, headers.     |
| badge    | https://calaverita.dev/favicon.svg       | Símbolo sobre cuadrado bone. Favicon, avatares, sociales. |

**Reglas de uso**:
- Tamaño mínimo: 24px de altura.
- Área de respiro: la mitad de la altura del logo alrededor del símbolo.
- No deformar, no aplicar sombras propias, no cambiar los colores del badge.

## Colors

| Token       | Hex         | Uso                                                             |
| ----------- | ----------- | --------------------------------------------------------------- |
| primary     | #FF5722     | Acento principal. CTAs, halos, números clave, serif italic.     |
| secondary   | #F5F0E8     | Texto y superficies claras. Voz del producto sobre fondo oscuro.|
| tertiary    | #1A181D     | Superficies intermedias. Hover de bloques, cards agrupadas.     |
| neutral     | #08070B     | Fondo base. El piso oscuro sobre el que vive todo el sistema.   |
| muted       | #6B6560     | Texto secundario, metadatos, etiquetas mono.                    |
| line        | rgba(...)   | Bordes y separadores. Nunca usar grises hardcoded.              |

## Typography

| Token   | Familia            | Tamaño         | Peso | Línea  | Tracking   |
| ------- | ------------------ | -------------- | ---- | ------ | ---------- |
| display | Geist              | 72px (fluido)  | 500  | 1.0    | -0.025em   |
| body    | Geist              | 16px           | 400  | 24px   | normal     |
| serif   | Instrument Serif   | variable       | 400i | 1.05   | -0.02em    |
| mono    | JetBrains Mono     | 13px           | 400  | 1.4    | 0.12em     |

El display siempre va en sans Geist con UNA o DOS palabras en serif italic cempasúchil. Nunca el titular completo en serif. Nunca el titular completo en cempasúchil.

## Layout

Escala de espaciado en base 4:

`xs 4 · sm 8 · md 16 · lg 24 · xl 40 · 2xl 64 · 3xl 96`

Ancho máximo de contenedor: `1280px`. Las secciones del sitio se anclan a este ancho con padding lateral de `24px` (móvil) a `40px` (desktop).

## Elevation & Depth

El sistema usa sombras suaves y cargadas hacia cempasúchil para acentuar selección o hover. No hay elevación "neutral" tipo Material — todo lo que sube de superficie lo hace con intención.

`shadow-press:  0 12px 36px -12px rgba(255, 87, 34, 0.45)`
`shadow-halo:   0 0 0 4px rgba(255, 87, 34, 0.16)`

## Shapes

| Token | Radio   | Uso                                  |
| ----- | ------- | ------------------------------------ |
| sm    | 8px     | Inputs, chips, controles pequeños.   |
| md    | 14px    | Tarjetas internas, code blocks.      |
| lg    | 18px    | Tarjetas principales, contenedores.  |
| xl    | 24px    | Bloques destacados, hero panels.     |
| full  | 9999px  | Pills, botones, avatares.            |

## Components

### button-primary
- backgroundColor: `{colors.secondary}`
- textColor: `{colors.neutral}`
- typography: `{typography.body}`
- rounded: `{rounded.full}`
- padding: `12px 20px`
- hover: backgroundColor `{colors.primary}`, textColor `{colors.secondary}`, translateY -1px

### button-ghost
- backgroundColor: `transparent`
- textColor: `{colors.secondary}`
- rounded: `{rounded.full}`
- padding: `12px 20px`
- border: `1px solid {colors.line}`

### chip
- backgroundColor: `{colors.tertiary}`
- textColor: `{colors.secondary}`
- typography: `{typography.mono}`
- rounded: `{rounded.full}`
- padding: `6px 14px`

### card
- backgroundColor: `{colors.tertiary}`
- textColor: `{colors.secondary}`
- rounded: `{rounded.lg}`
- padding: `{spacing.lg}`
- border: `1px solid {colors.line}`

## Do's and Don'ts

✅ **Sí:**
- Una o dos palabras en serif italic cempasúchil dentro de titulares display.
- Mono uppercase con tracking 0.12em para metadatos, números técnicos y etiquetas de sección.
- Bordes con la variable `{colors.line}`, nunca con un gris hardcoded.
- Sombras cempasúchil para selección o énfasis activo.

❌ **No:**
- Titulares completos en cempasúchil o en serif. Si todo es énfasis, nada lo es.
- Mono para prosa o textos largos. Sólo metadatos cortos.
- Grises arbitrarios en bordes o backgrounds. Toda diferencia visual usa tokens.
- Elevación neutral tipo Material. La elevación se gana, no se aplica.

:root {
  --void:        #08070B;
  --bone:        #F5F0E8;
  --ash:         #1A181D;
  --cempasuchil: #FF5722;
  --muted:       #6B6560;
  --line:        rgba(245, 240, 232, 0.08);
}