← Color Fonts
Crehana Brandbook
Digital optimism
crehana
Brandbook Shapes People Platform
Construyendo equipos listos para el futuro

Designing talent growth at scale.

Crehana combina una base de producto muy clara con una energia visual optimista, modular y digital. El sistema vive en violeta electrico, panels blancos, shapes redondeadas y codigos cromaticos por categoria.

Inspect the system Open palette
Shape language

Modular forms, friendly rhythm, product clarity.

El corazon del sistema esta en su modularidad: circulos, capsulas, arcos y paneles que pueden moverse entre brandbook, social media, interfaces y materiales internos sin perder coherencia.

Category palette

One brand, many learning lanes.

La guia abre el sistema a familias de color para campañas y categorias, pero el violeta siempre vuelve a ordenar la jerarquia y la memoria visual.

Mint Blue Yellow Rose
Applied arts

Interfaces and campaigns share the same DNA.

El mismo sistema sirve para slides, posts, UI y brand materials. Esa consistencia es una de las partes mas fuertes del brandbook.

06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #5424FF;
  --color-primary-hover: #4618F4;
  --color-primary-active: #3A10D8;
  --color-secondary: #11152D;
  --color-accent: #1E95F2;
  --color-accent-soft: #A7D8FF;
  --color-mint: #DDF6EE;
  --color-green: #13C783;
  --color-yellow: #FFC733;
  --color-pink: #F6C9D8;
  --color-rose: #E54E78;
  --color-lavender: #EBDDFE;
  --color-background: #EEF1F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F7FB;
  --color-text-primary: #11152D;
  --color-text-secondary: #4B5568;
  --color-text-muted: #8C94A6;
  --color-text-on-primary: #FFFFFF;
  --color-border: #DCE2EC;
  --color-border-subtle: #EDF1F6;
  --color-success: #13C783;
  --color-success-bg: #DDF6EE;
  --color-warning: #FFC733;
  --color-warning-bg: #FFF0BE;
  --color-error: #E54E78;
  --color-error-bg: #FBD8E3;
  --color-info: #A7D8FF;
  --color-info-bg: #E8F5FF;
  --font-display: "Gilroy";
  --font-body: "Gilroy";
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-gap: 28px;
  --space-section-padding: 88px;
}
@theme {
  --color-primary: #5424FF;
  --color-primary-hover: #4618F4;
  --color-primary-active: #3A10D8;
  --color-secondary: #11152D;
  --color-accent: #1E95F2;
  --color-accent-soft: #A7D8FF;
  --color-mint: #DDF6EE;
  --color-green: #13C783;
  --color-yellow: #FFC733;
  --color-pink: #F6C9D8;
  --color-rose: #E54E78;
  --color-lavender: #EBDDFE;
  --color-background: #EEF1F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F7FB;
  --color-text-primary: #11152D;
  --color-text-secondary: #4B5568;
  --color-text-muted: #8C94A6;
  --color-text-on-primary: #FFFFFF;
  --color-border: #DCE2EC;
  --color-border-subtle: #EDF1F6;
  --color-success: #13C783;
  --color-success-bg: #DDF6EE;
  --color-warning: #FFC733;
  --color-warning-bg: #FFF0BE;
  --color-error: #E54E78;
  --color-error-bg: #FBD8E3;
  --color-info: #A7D8FF;
  --color-info-bg: #E8F5FF;
  --font-display: "Gilroy";
  --font-body: "Gilroy";
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 56px;
  --spacing-gap: 28px;
  --spacing-section-padding: 88px;
}
{
  "colors": {
    "primary": "#5424FF",
    "primary-hover": "#4618F4",
    "primary-active": "#3A10D8",
    "secondary": "#11152D",
    "accent": "#1E95F2",
    "accent-soft": "#A7D8FF",
    "mint": "#DDF6EE",
    "green": "#13C783",
    "yellow": "#FFC733",
    "pink": "#F6C9D8",
    "rose": "#E54E78",
    "lavender": "#EBDDFE",
    "background": "#EEF1F5",
    "surface": "#FFFFFF",
    "surface-alt": "#F5F7FB",
    "text-primary": "#11152D",
    "text-secondary": "#4B5568",
    "text-muted": "#8C94A6",
    "text-on-primary": "#FFFFFF",
    "border": "#DCE2EC",
    "border-subtle": "#EDF1F6",
    "success": "#13C783",
    "success-bg": "#DDF6EE",
    "warning": "#FFC733",
    "warning-bg": "#FFF0BE",
    "error": "#E54E78",
    "error-bg": "#FBD8E3",
    "info": "#A7D8FF",
    "info-bg": "#E8F5FF"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Gilroy",
      "fontSize": "64px",
      "fontWeight": "700",
      "lineHeight": "64px",
      "letterSpacing": "-0.04em"
    },
    "body-md": {
      "fontFamily": "Poppins",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "24px"
    },
    "label-sm": {
      "fontFamily": "Poppins",
      "fontSize": "11px",
      "fontWeight": "500",
      "lineHeight": "16px"
    }
  },
  "rounded": {
    "sm": "12px",
    "md": "18px",
    "lg": "28px",
    "xl": "40px",
    "full": "9999px"
  },
  "spacing": {
    "base": "8px",
    "sm": "12px",
    "md": "20px",
    "lg": "32px",
    "xl": "56px",
    "gap": "28px",
    "section-padding": "88px"
  }
}
---
version: "1.0"
name: "Crehana Brandbook"
description: "Sistema visual para una plataforma de desarrollo y gestion de talento con energia digital, violeta electrico, capas pastel por categoria, interfaces claras y un lenguaje geometrico de shapes redondeadas."
colors:
  primary: "#5424FF"
  primary-hover: "#4618F4"
  primary-active: "#3A10D8"
  secondary: "#11152D"
  accent: "#1E95F2"
  accent-soft: "#A7D8FF"
  mint: "#DDF6EE"
  green: "#13C783"
  yellow: "#FFC733"
  pink: "#F6C9D8"
  rose: "#E54E78"
  lavender: "#EBDDFE"
  background: "#EEF1F5"
  surface: "#FFFFFF"
  surface-alt: "#F5F7FB"
  text-primary: "#11152D"
  text-secondary: "#4B5568"
  text-muted: "#8C94A6"
  text-on-primary: "#FFFFFF"
  border: "#DCE2EC"
  border-subtle: "#EDF1F6"
  success: "#13C783"
  success-bg: "#DDF6EE"
  warning: "#FFC733"
  warning-bg: "#FFF0BE"
  error: "#E54E78"
  error-bg: "#FBD8E3"
  info: "#A7D8FF"
  info-bg: "#E8F5FF"
typography:
  display-lg:
    fontFamily: "Gilroy"
    fontSize: "64px"
    fontWeight: 700
    lineHeight: "64px"
    letterSpacing: "-0.04em"
  body-md:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-sm:
    fontFamily: "Poppins"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "16px"
rounded:
  sm: "12px"
  md: "18px"
  lg: "28px"
  xl: "40px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "56px"
  gap: "28px"
  section-padding: "88px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "12px 20px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border-subtle}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
---

# DESIGN.md - Crehana Brandbook

> Sistema de diseno extraido de la captura `Crehana-Brandbook-2026-06-18-15_09_52.png`.
> La referencia muestra el rediseño del brandbook de Crehana para una plataforma de desarrollo y gestion de talento, con un lenguaje digital claro, optimista y muy modular.

---

## 1. Tema Visual y Atmosfera

Crehana se siente como una marca de software educativo y de talento que quiere proyectar claridad, energia y confianza sin caer en frialdad corporativa. El sistema usa un violeta electrico como gran ancla emocional, pero lo acompaña con fondos blancos y grises muy limpios, lo que evita saturacion y deja espacio para que las interfaces, las shapes y las categorias respiren.

La marca combina dos gestos muy claros. El primero es una identidad principal dominada por violeta, shapes redondeadas y layouts amplios con UI minimal. El segundo es un sistema secundario muy flexible donde categorias y campañas se codifican con familias de color pastel o vibrante: menta, celeste, amarillo, rosa y verde. Esta mezcla la hace ver util, contemporanea y optimista.

La atmosfera general no es premium editorial ni brutalista. Es amable, sistemica y digital-first. Se siente construida para producto, contenido, social media y materiales de equipo al mismo tiempo. La forma redondeada, la composicion modular y el uso de paneles blancos sugieren una marca que quiere ser accesible y muy organizada.

**Palabras clave de personalidad**: digital optimism, structured clarity, talent growth, modular, approachable, energetic, platform-native

**Densidad del layout**: spacious

**Modo preferido**: light

**Nivel de ornamentacion**: graphic and controlled

---

## 2. Paleta de Colores y Roles Semanticos

La guia deja ver un sistema cromatico principal y otro extendido por categorias. El color primario es el violeta de marca. A partir de ahí aparecen tonos pastel y vivos que sirven para clasificar contenidos y construir artes sin perder coherencia.

### Colores principales

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Crehana Violet | `--color-primary` | `#5424FF` | logo, botones, titulares, ancla principal del sistema | `#FFFFFF` |
| Ink Navy | `--color-secondary` | `#11152D` | contraste alto, fondos oscuros, copy fuerte | `#FFFFFF` |
| Product Blue | `--color-accent` | `#1E95F2` | shapes, UI, paneles activos y piezas de apoyo | `#FFFFFF` |
| Sky Mist | `--color-accent-soft` | `#A7D8FF` | soporte visual suave, circulos, bloques secundarios | `#11152D` |

### Paleta expandida

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Mint Surface | `--color-mint` | `#DDF6EE` | fondos intro, slides suaves, areas optimistas |
| Growth Green | `--color-green` | `#13C783` | exito, progreso, variantes de campaign |
| Signal Yellow | `--color-yellow` | `#FFC733` | alertas suaves, artes de alto contraste |
| Blush Pink | `--color-pink` | `#F6C9D8` | fondos editoriales rosas |
| Energy Rose | `--color-rose` | `#E54E78` | social media y piezas de alto impacto |
| Soft Lavender | `--color-lavender` | `#EBDDFE` | tags, fonditos y notas suaves |

### Neutros del sistema

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Chrome Gray | `--color-background` | `#EEF1F5` | canvas general |
| White Surface | `--color-surface` | `#FFFFFF` | tarjetas y pantallas |
| Quiet Panel | `--color-surface-alt` | `#F5F7FB` | paneles secundarios |
| Strong Ink | `--color-text-primary` | `#11152D` | texto principal |
| UI Slate | `--color-text-secondary` | `#4B5568` | copy secundaria |
| Soft UI Gray | `--color-text-muted` | `#8C94A6` | metadata y labels |

### Regla de color

El violeta siempre debe sentirse dominante y reconocible. Los colores secundarios no deben competir entre ellos sin una logica de categoria. El sistema funciona mejor cuando cada pieza prioriza uno o dos colores de apoyo y deja el resto como repertorio, no como mezcla completa.

---

## 3. Tipografia

La guia tipografica muestra `Gilroy` para titulos y `Poppins` para cuerpos. La sensacion coincide con lo que se ve en pantalla: headings geometricos, gruesos y muy limpios; copy amable, funcional y facil de escalar en interfaces y social assets.

Como `Gilroy` no esta en Google Fonts, la sustitucion HTML debe buscar una sans de personalidad geometrica, compacta y con tono contemporaneo. Las tres candidatas mas razonables para este caso son:

- `Outfit`, por su geometria clara y ritmo de producto.
- `Sora`, por su presencia digital y algo mas tecnica.
- `Plus Jakarta Sans`, por su tono mas humano y amable.

La mejor traduccion aqui es `Outfit`, porque conserva mejor la combinacion de claridad, peso y estructura geometrica que se observa en los headlines de Crehana sin caer en una solucion demasiado generica. `Poppins` puede mantenerse tal cual como body y label porque ya forma parte explicita de la guia y esta disponible en Google Fonts.

### Fuentes base

```css
--font-heading: 'Gilroy', 'Outfit', sans-serif;
--font-body: 'Poppins', sans-serif;
--font-label: 'Poppins', sans-serif;
```

**Nota de implementacion HTML**:  
Original observada en la guia: `Gilroy` / `Poppins`  
Sustitucion renderizada en HTML: `Outfit` / `Poppins`

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|------|-----|-----------|-------------|-----|
| `text-xs` | `0.6875rem` | `11px` | `16px` | labels, tags, notas |
| `text-sm` | `0.875rem` | `14px` | `20px` | captions y descripciones cortas |
| `text-base` | `1rem` | `16px` | `24px` | cuerpo principal |
| `text-lg` | `1.125rem` | `18px` | `28px` | statements de apoyo |
| `text-2xl` | `2rem` | `32px` | `38px` | subtitulos fuertes |
| `text-5xl` | `4rem` | `64px` | `64px` | hero headline |

### Jerarquia observada

- `Gilroy` domina portada, secciones y titulares de brandbook.
- `Poppins` sostiene interfaces, texto de apoyo y labels.
- La marca necesita pesos limpios y grandes bloques de aire.
- La claridad tipografica es tan importante como el color.

---

## 4. Layout y Composicion

La composicion del brandbook es sistemica y modular. Muchas paginas se organizan como dobles paneles sobre un canvas gris claro, con tarjetas blancas de alto radio y contenidos muy ordenados. El espacio negativo es amplio, pero nunca vacio; casi siempre hay una logica de grilla o de shapes activando la pagina.

### Principios visibles

- grids y pantallas sobre gris claro
- tarjetas blancas con radio generoso
- shapes circulares, rectangulares y capsulares
- modularidad por bloques
- mezcla de producto, artes y UI dentro del mismo lenguaje

### Tokens de layout

```css
--container-max: 1180px;
--grid-columns: 12;
--grid-gap: 28px;
--section-padding: 88px;
--card-padding: 24px;
--content-measure: 48ch;
```

### Logica espacial

Crehana necesita verse clara y organizada. Si el layout se vuelve demasiado ornamental, pierde legibilidad de sistema. Si se vuelve demasiado sobrio, se diluye la energia del brandbook. El punto correcto esta en modularidad limpia con color y shapes muy bien dirigidos.

---

## 5. Componentes

Aunque la guia es de marca y no de app completa, deja ver como deben sentirse sus piezas digitales: redondeadas, amables, legibles y de alto contraste. Los componentes del HTML deben traducir esa idea sin inventar complejidad.

### Boton primario

```css
background: #5424FF;
color: #FFFFFF;
border: 1px solid transparent;
border-radius: 9999px;
padding: 12px 20px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
```

**Hover**: llevar hacia `#4618F4`.  
**Active**: profundizar a `#3A10D8`.  
**Focus**: anillo suave en `#A7D8FF`.

### Boton secundario

```css
background: #FFFFFF;
color: #5424FF;
border: 1px solid #DCE2EC;
border-radius: 9999px;
padding: 12px 20px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
```

### Tarjetas

```css
background: #FFFFFF;
border: 1px solid #EDF1F6;
border-radius: 18px;
box-shadow: 0 14px 30px rgba(17, 21, 45, 0.06);
```

### Motivos de marca

- circulos grandes
- capsulas horizontales
- rectangulos redondeados
- combinaciones geometricas con superposicion
- tags y pills de categoria

---

## 6. Direccion de UI / HTML

La traduccion HTML debe sentirse como una extension del brandbook, no como una pagina de SaaS cualquiera. El preview debe trabajar con un gran campo violeta, una composicion de shapes y una tarjeta blanca o menta que parezca una portada de guia o un panel de producto. El ambiente es limpio, pero no frio; colorido, pero no ruidoso.

### Recomendaciones para la version HTML

- usar violeta como hero principal y no esconderlo
- combinarlo con blanco, navy y un par de secundarios suaves
- construir shapes redondeadas reales, no ilustraciones abstractas blandas
- documentar la sustitucion `Gilroy -> Outfit`
- dejar que el sistema de categorias viva en chips y swatches agrupados

### Evitar

- degradados genericos sin funcion
- blobs o neblinas tipo IA
- fondos oscuros gratuitos en todo el sistema
- repetir un look startup generico que podria pertenecer a cualquier marca

---

## 7. Resumen Operativo

Crehana se reconoce por cinco cosas:

1. un violeta de marca muy dominante
2. una sans display geometrica y amable
3. una base blanca y gris muy limpia
4. shapes redondeadas como lenguaje modular
5. familias de color por categoria y canal

Si el HTML sostiene esos cinco puntos a la vez, la traduccion se percibe fiel, viva y claramente ligada al brandbook original.