---
version: alpha
name: "Chatter"
description: "Burbujas redondas, un verde azulado amable y las conversaciones en primer plano. Chatter mantiene a las personas y los mensajes en el centro: una pantalla blanca, burbujas verde azulado para lo que envías, burbujas gris pálido para las respuestas, avatares redondos y generosas esquinas de 22px. Las insignias de no leídos y los estados de escritura se ven con claridad sin convertir la pantalla en una tragaperras."
colors:
  primary: "#0F7F81"
  on-primary: "#FFFFFF"
  secondary: "#F08A4B"
  tertiary: "#5B7BE0"
  neutral: "#56676A"
  surface: "#FFFFFF"
  on-surface: "#14201F"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 18px
  md: 20px
  lg: 22px
  xl: 26px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Chatter mantiene a las personas y los mensajes en el centro: una pantalla blanca, burbujas verde azulado para lo que envías, burbujas gris pálido para las respuestas, avatares redondos y generosas esquinas de 22px. Las insignias de no leídos y los estados de escritura se ven con claridad sin convertir la pantalla en una tragaperras.

## Colors

- **primary (#0F7F81):** Verde azulado profundo, para tus burbujas de mensaje, el botón de enviar y las insignias de no leídos. Aguamarina brillante en modo oscuro.
- **on-primary (#FFFFFF)**
- **secondary (#F08A4B):** Albaricoque, para reacciones, menciones y la segunda serie de gráficos.
- **tertiary (#5B7BE0):** Azul lavanda, para enlaces, archivos compartidos y una tercera serie.
- **neutral (#56676A):** Gris verde azulado para las horas, los acuses de lectura y las vistas previas de mensajes en la lista de chats.
- **surface (#FFFFFF):** Blanco; las tarjetas y las burbujas entrantes son de un gris verde azulado pálido.
- **on-surface (#14201F)**

## Typography

Plus Jakarta Sans en todo: negrita 700 para los títulos de pantalla (30px) y los nombres, regular 400 a 16px con interlineado de 1.5 para los mensajes. Las horas y las vistas previas usan 13px.

## Layout

Pantallas de móvil con 16px de margen lateral y una barra de pestañas inferior de 60px con cuatro pestañas con etiqueta e insignias de no leídos. La lista de chats se abre en una conversación a pantalla completa con el campo de mensaje fijo abajo.

## Shapes

Esquinas de 22px en burbujas, tarjetas y el campo de mensaje, con una esquina más cerrada en el lado de la cola; avatares circulares; cada área táctil mide al menos 48px. Sin sombras; bordes pálidos de 1px donde hagan falta.

## Components

Filas de la lista de chats con avatar, nombre, vista previa, hora y número de no leídos, burbujas de mensaje agrupadas por remitente, un campo de mensaje con adjuntar y enviar, reacciones en forma de píldora y un indicador de escritura.

## Do's and Don'ts

- Agrupa los mensajes consecutivos de la misma persona.
- Mantén el campo de mensaje visible por encima del teclado.
- No uses el verde azulado fuera de tus propios mensajes y de las acciones clave.
- No pongas sombras ni degradados en las burbujas.