Copiado al portapapeles

Brand & Design System

Así se ve
CoCoCo

Guía de identidad visual para el equipo. Logos, colores, tipografía y reglas de uso.

01 — Identidad

Logos & Isotipos

Isotipo Mono · Fondos dark ↓ Descargar SVG
Isotipo Color · Fondos claros ↓ Descargar SVG
Horizontal Color · Dark ↓ Descargar SVG
Horizontal Mono · Dark ↓ Descargar SVG

02 — Paleta

Sistema de color

Max Dark
#000913
900
#011020
800
#01162C
600
#003873
500D
#2F6288
500W
#86A4BA
300
#F0F9FF
200
#F6FBFF
White
#FFFFFF
Blue Co
#00BFFF
Acento primario. Links, highlights, elementos activos.
Green Co
#6BFF00
Métricas positivas, éxito, resultados destacados.
Green XP
#3ACC00
Variante verde con mayor contraste sobre fondos.
Pink Co
#FF1493
Máximo énfasis. CTA principal. Usar con mesura.

03 — Tipos

Tipografía

Roboto Serif — Display, Titulares, Citas, Números
128
NUMBER — Huge
SemiBold · 128px
LS -6% · LH 100%
Título principal
TITLE — Normal
Medium · 64px
LS -6% · LH 117%
Subtítulo grande
SUBTITLE — Big
Medium · 40px
LS -3% · LH 120%
"Las corporaciones que no crean también mueren."
QUOTE — Big
Medium Italic · 32px
LS -3% · LH 140%
Inter — UI, Cuerpo, Headers, Labels
HEADER LABEL
HEADER — Normal
Bold · 20px
LS +20% · Uppercase
Texto de cuerpo en tamaño normal para párrafos.
TEXTO — Normal
Medium · 24px
LS -2% · LH 140%
Texto secundario, descripciones, notas a pie.
TEXTO — Small
Medium · 20px
LS -2% · LH 140%

04 — Principios

Reglas de uso

01
Dark first
El modo oscuro es el default para decks y presentaciones externas. Fondo #000913, texto blanco, acentos eléctricos sobre negro profundo.
02
Un acento por pieza
No mezclar más de 2 colores de acento en el mismo componente. Pink (#FF1493) reservado para máximo énfasis o CTA principal.
03
Espacio generoso
Padding mínimo en cards: 32px. Un mensaje por slide. Nunca saturar. La densidad se controla, no se improvisa.
04
Tracking negativo
Los titulares (Roboto Serif) siempre con letter-spacing negativo (-3% a -6%). Nunca expandir. Da el aspecto compacto y técnico de CoCoCo.
05
Logo sin recrear
Usar siempre el SVG o asset oficial. Nunca texto plano, nunca emojis como sustituto. "CoCoCo" con mayúsculas en C, segunda C y tercera C.
06
Sin gradientes ornamentales
Máximo un gradiente lineal sutil entre dos tonos de la escala base. Cero gradientes arcoíris, cero sombras dramáticas no funcionales.

05 — Implementación

CSS Variables

/* CoCoCo Design System — CSS Variables */
/* cococo.ventures/brand — v1.0 */

:root {
  /* ── Escala base ── */
  --color-max-dark:   #000913;
  --color-900-dark:   #011020;
  --color-800-dark:   #01162C;
  --color-600-dark:   #003873;
  --color-500-dark:   #2F6288;
  --color-500-white:  #86A4BA;
  --color-300-white:  #F0F9FF;
  --color-200-white:  #F6FBFF;
  --color-max-white:  #FFFFFF;

  /* ── Acentos de marca ── */
  --color-blue-co:    #00BFFF;
  --color-green-co:   #6BFF00;
  --color-green-xp:   #3ACC00;
  --color-pink-co:    #FF1493;

  /* ── Tipografía ── */
  --font-display:     'Roboto Serif', serif;
  --font-ui:          'Inter', sans-serif;

  /* ── Escala de tamaños ── */
  --text-number:      128px;
  --text-title:       64px;
  --text-sub-big:     40px;
  --text-sub:         32px;
  --text-body-big:    32px;
  --text-body:        24px;
  --text-body-sm:     20px;
  --text-header:      20px;
  --text-header-mini: 16px;

  /* ── Spacing & Shape ── */
  --radius-card:      12px;
  --radius-btn:       6px;
  --padding-card:     32px;
}