---
version: "alpha"
name: "Charte Graphique"
description: "Sistema visual observado en screenshot de Emulsion Collective, con fondo violeta profundo, flores modulares, rosa vibrante, azul eléctrico y una voz tipográfica expresiva basada en Creato Display."
mode: dark
source: "C:\\Users\\USER\\claude-skill-library-v2\\utilidades\\DESIGN Style guides 2\\screens 2\\Charte-Graphique-Emulsion-Collective-2026-06-21-11_49_25.png"
sourceType: image
sourceAccuracy: "Colores medidos desde la imagen. La marca visible es Emulsion Collective y el cierre del documento dice charte graphique. La tipografía Creato Display es visible en el specimen; el resto de familias se documenta como aproximado cuando no se detecta con certeza."
atmosphere:
  - playful
  - collective
  - editorial
  - graphic
  - expressive
colors:
  primary:
    name: Deep Plum
    hex: "#18052F"
    usage: Fondos principales, cubiertas, paneles de sistema y contraste general
  secondary:
    name: Electric Violet
    hex: "#3522F4"
    usage: Flor principal, acentos de sistema y elementos de alto reconocimiento
  tertiary:
    name: Bubble Pink
    hex: "#F37BEF"
    usage: Segunda familia de flores, acentos expresivos y contraste amistoso
  quaternary:
    name: Soft Lavender
    hex: "#C6B3FF"
    usage: Paneles suaves, apoyo tipografico y equilibrio cromatico
  background:
    name: Night Indigo
    hex: "#120326"
    usage: Canvas dominante
  surface:
    name: Plum Panel
    hex: "#211044"
    usage: Superficies elevadas, cards y modulos internos
  text-primary:
    name: Warm Ivory
    hex: "#FFF7FB"
    usage: Texto principal sobre fondos oscuros
  text-secondary:
    name: Lilac Mist
    hex: "#D8CCFF"
    usage: Texto secundario, labels y notas
  border:
    name: Violet Line
    hex: "#4A3290"
    usage: Bordes, keylines y orden estructural
typography:
  display:
    family: "Creato Display"
    role: Headings, chapter titles, signature statements
    weight: "700 aprox"
    size: "72px aprox"
    lineHeight: 0.9
    letterSpacing: "-0.035em"
    htmlFamily: "Sora"
    htmlNote: "Original observado en el screenshot. Sora se elige como Google substitute tras comparar Outfit, Sora e Instrument Sans; Sora conserva mejor la tensión geométrica y el tono amable."
  body:
    family: "(no detectado)"
    role: Body copy, captions, explanatory notes
    weight: "400 a 500 aprox"
    size: "16px"
    lineHeight: 1.58
    letterSpacing: "0"
    htmlFamily: "Instrument Sans"
    htmlNote: "La familia exacta no se detecta con certeza en el screenshot. Instrument Sans se usa como sustituto HTML por claridad y tono contemporáneo."
  logo:
    family: "Logotipo Emulsion Collective observado"
    role: Wordmark and collective lockup
    weight: "(no detectado)"
    htmlFamily: "Sora"
    htmlNote: "Aproximación HTML para el lockup gráfico del colectivo."
rounded:
  sm: "4px"
  md: "10px"
  lg: "16px"
  xl: "22px"
spacing:
  base: "8px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "40px"
components:
  button-primary:
    backgroundColor: "#3522F4"
    textColor: "#FFF7FB"
    border: "1px solid rgba(53, 34, 244, 0.32)"
    rounded: "16px"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#FFF7FB"
    border: "1px solid rgba(255, 247, 251, 0.20)"
    rounded: "16px"
    padding: "12px 20px"
  card:
    backgroundColor: "#211044"
    border: "1px solid #4A3290"
    rounded: "18px"
    padding: "22px"
  badge:
    backgroundColor: "rgba(243, 123, 239, 0.16)"
    textColor: "#F37BEF"
    border: "1px solid rgba(243, 123, 239, 0.24)"
motion:
  level: restrained
  durations: "180ms, 260ms"
  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
  pattern: Soft fades, playful reveal rhythm and restrained hover lift
---

## Overview

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

## Source reliability

- Source used: single screenshot of the brand guide
- Observed brand in source: `Emulsion Collective`
- Document title in source: `charte graphique`
- Colors: measured from image
- Typography: `Creato Display` is visible in the specimen page
- Exact CSS variables, exact export ratios and full font stack: `(no detectado)`

## Colors

The system uses a dark expressive palette with deep plum as the base, electric violet as the main accent and bubble pink as the emotional counterpoint.

- **Primary (#18052F):** dominant canvas and structural foundation.
- **Secondary (#3522F4):** strongest brand accent and main flower family.
- **Tertiary (#F37BEF):** expressive counter-accent for illustrations and lively details.
- **Quaternary (#C6B3FF):** calm support for softer modules and balance.

- **Usage:** Background: #120326; Surface: #211044; Text Primary: #FFF7FB; Text Secondary: #D8CCFF; Border: #4A3290; Accent: #3522F4 / #F37BEF

## Typography

Typography is partially observable in the screenshot.

- **Display:** Creato Display, 72px approx, weight 700 approx, compact and graphic.
- **Body:** `(no detectado)`, reconstructed in HTML with Instrument Sans for clarity.
- **Logo lockup:** observed collective wordmark, exact source `(no detectado)`, approximated in HTML only.

## Layout

Layout behaves like a visual identity manual with accessibility, forbidden uses, colors, typography, graphic universe, iconography, pictograms, motion, illustrations and real-world applications.

- **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 mostly graphic. Strong color blocks, illustration contrast and image placement create the rhythm more than heavy glass or blur.

- **Surface style:** Flat graphic boards with subtle relief
- **Borders:** 1px #4A3290, 1px rgba(255, 247, 251, 0.12)
- **Shadows:** 0 24px 54px -36px rgba(3, 2, 20, 0.48)
- **Blur:** `(no detectado)`

## Shapes

The flower emblem and derived pattern create a circular and modular shape language, while panels remain controlled and only moderately rounded.

- **Corner radii:** 4px, 10px, 16px, 22px
- **Icon sets:** custom flower emblem, iconography and pictograms observed in guide

## Components

The visible system spans logo lockups, color boards, accessibility modules, forbidden-use matrices, typography specimens, iconography, pictograms, illustration systems and application mockups.

### Buttons

- **Primary:** electric violet background, ivory text, squared-soft radius.
- **Secondary:** transparent dark field with ivory text and structured border.

### Cards and Surfaces

- **Card surface:** #211044, border #4A3290, radius 18px, padding 22px.

### Brand system

- **Observed:** flower symbol, collective wordmark, pattern tiles, iconography, pictograms, motion frames, illustrations, stationery, landing page and social applications.

## Do's and Don'ts

### Do

- Do keep deep plum as the stable structural field.
- Do let violet and pink create the expressive tension of the system.
- Do preserve the flower emblem as a repeatable modular asset.
- Do keep copy zones clear from decorative overload.

### Don't

- Don't replace the palette with generic corporate blues or muted neutrals.
- Don't flatten the system into a plain SaaS UI without its floral language.
- Don't over-round controls into pills when the brand already expresses softness through the emblem.
- Don't place decorative flowers over the main headline block.

## Motion

Motion should feel playful but controlled. Use soft reveals, light hover movement and paced section entrances.

**Motion Level:** restrained

**Durations:** 180ms, 260ms

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

**Hover Patterns:** contrast, gentle lift, color emphasis

**Scroll Patterns:** section reveal, staggered graphic entrance