Charte Graphique System Brand Style Guide
← Color Fonts

Charte Graphique

Sistema visual observado desde screenshot de Emulsion Collective: flor modular como figura de marca, fondo plum profundo, acentos violeta y rosa, y una secuencia editorial que cubre accesibilidad, tipografías, universo gráfico, iconografía, pictogramas, movimiento, ilustraciones y aplicaciones.

Fuente: screenshot estatico. Colores medidos desde imagen. Tipografía Creato Display detectada por lectura visible; familia de cuerpo exacta, pesos completos y CSS originales: (no detectado).

FUENTE: Charte-Graphique-Emulsion-Collective-2026-06-21-11_49_25.png

Typography

Observed + approximated
Heading system
Creato Display
Original observado: Creato Display
Original: Creato Display -> HTML: Sora (Google substitute)
L’univers graphique
Emco
Body system
Instrument Sans
Original observado: (no detectado)
Original: (no detectado) -> HTML: Instrument Sans (Google substitute)
La marca usa una voz visual cálida y colectiva: display con mucha personalidad, cuerpo limpio y una jerarquía apoyada por color, figura y ritmo de página.
Comparadas para display: Outfit, Sora, Instrument Sans. Sora conserva mejor la geometría amable y el impacto sin caer en AI-slop.
Headings · Body · Collective lockup

Colors

Expressive dark
Primary #18052F
Secondary #3522F4
Tertiary #F37BEF
Quaternary #C6B3FF
Usage: Background #120326 · Surface #211044 · Text Primary #FFF7FB · Text Secondary #D8CCFF · Border #4A3290

Overview

Guide screenshot
Observed brandEmulsion Collective
Document titlecharte graphique
SequenceAccessibility, colors, typography, iconography, motion, applications
Identity cueFloral modular universe with collective tone

Components

Observed modules
Flower symbol Illustration system Observed brand rules
Emulsion
Collective
Emulsion
Collective
Emco

Buttons

HTML translation
Primary Secondary Quiet
Primary#3522F4 · text #FFF7FB · 16px radius
Supportdark field · ivory text · violet border

Spacing

Graphic rhythm
Section rhythm
Collective pacing
La guía mezcla paneles densos con zonas de aire y visuales grandes. El sistema necesita copy clara y campos limpios para que flores, iconos y color no choquen entre sí.
Graphic board
Scale
8px16px24px40px

Elevation & Depth

Graphic over glass

La profundidad viene más del contraste de paneles y del uso de imágenes, ilustraciones y bloques de color que de efectos pesados. Se percibe un relieve sutil, no una interfaz glass.

Surface#211044 · #2D1760
Border1px #4A3290
Shadowsubtle only · approximated
Exact values(no detectado)

Shapes

Flower-derived

La flor modular y sus variaciones dictan el lenguaje de forma. Los paneles conservan esquinas controladas para no competir con el protagonismo de la figura de marca.

Do's and Don'ts

Guardrails

Do

Usa el plum oscuro como campo estructural principal.
Deja que violeta y rosa construyan la energía de la marca.
Mantén la flor como activo modular repetible.
Reserva zonas de lectura claras para el copy principal.

Don't

No conviertas el sistema en una UI corporativa genérica.
No uses demasiadas flores encima del titular principal.
No cambies la tensión entre violeta eléctrico y rosa expresivo.

Motion

Restrained

La guía fuente es estática, pero el sistema visual pide reveals suaves, pequeñas elevaciones y entradas escalonadas. La energía está en la ilustración y el color, no en efectos ruidosos.

Motion levelRestrained
Durations180ms · 260ms
Easingcubic-bezier(.22,1,.36,1)
Behaviorsoft fades · light stagger
Charte Graphique · color-fonts item · image-derived reconstruction
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 40px;
}
@theme {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 40px;
}
{
  "colors": {},
  "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"
  }
}
---
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