Hotmart Cosmos

---
name: Hotmart Cosmos
description: >
  Design system da Hotmart, a maior plataforma de produtos digitais e cursos
  online da América Latina. Cosmos é o DS interno que guia a experiência visual
  dos produtos Hotmart (marketplace, área de membros, checkout, dashboard de
  produtores e afiliados). Identidade visual renovada em 2025 pela Irrreal e
  Est. 31, com tipografia custom pela Blackletra Type Foundry.
colors:
  primary:
    primary-50: "#FFF0EB"
    primary-100: "#FFDDD1"
    primary-200: "#FFB8A3"
    primary-300: "#FF8F6E"
    primary-400: "#F96B3D"
    primary-500: "#F04E23"
    primary-600: "#D43D16"
    primary-700: "#B02E0E"
    primary-800: "#862109"
    primary-900: "#5C1606"
    primary-on-color: "#FFFFFF"
  secondary:
    secondary-50: "#EEF4FF"
    secondary-100: "#D9E7FF"
    secondary-200: "#B3CEFF"
    secondary-300: "#7EABFF"
    secondary-400: "#4A88FF"
    secondary-500: "#1A6BFF"
    secondary-600: "#0052DB"
    secondary-700: "#003EA8"
    secondary-800: "#002B75"
    secondary-900: "#001A4A"
    secondary-on-color: "#FFFFFF"
  neutral:
    neutral-0: "#FFFFFF"
    neutral-50: "#F9FAFB"
    neutral-100: "#F3F4F6"
    neutral-200: "#E5E7EB"
    neutral-300: "#D1D5DB"
    neutral-400: "#9CA3AF"
    neutral-500: "#6B7280"
    neutral-600: "#4B5563"
    neutral-700: "#374151"
    neutral-800: "#1F2937"
    neutral-900: "#111827"
    neutral-950: "#0A0D14"
  success:
    success-50: "#ECFDF5"
    success-100: "#D1FAE5"
    success-400: "#34D399"
    success-500: "#10B981"
    success-700: "#047857"
  warning:
    warning-50: "#FFFBEB"
    warning-100: "#FEF3C7"
    warning-400: "#FBBF24"
    warning-500: "#F59E0B"
    warning-700: "#B45309"
  danger:
    danger-50: "#FEF2F2"
    danger-100: "#FEE2E2"
    danger-400: "#F87171"
    danger-500: "#EF4444"
    danger-700: "#B91C1C"
typography:
  display-lg:
    fontFamily: Hotmart Display
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Hotmart Display
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  display-sm:
    fontFamily: Hotmart Display
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Hotmart Sans
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: Hotmart Sans
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: Hotmart Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "-0.005em"
  body-lg:
    fontFamily: Hotmart Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "0em"
  body-md:
    fontFamily: Hotmart Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0em"
  body-sm:
    fontFamily: Hotmart Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0em"
  label-lg:
    fontFamily: Hotmart Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "0.01em"
  label-md:
    fontFamily: Hotmart Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "0.02em"
  label-sm:
    fontFamily: Hotmart Sans
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "0.02em"
  caption:
    fontFamily: Hotmart Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: "0em"
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  full: 9999px
spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary.primary-500}"
    textColor: "{colors.primary.primary-on-color}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
  button-primary-hover:
    backgroundColor: "{colors.primary.primary-600}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary.primary-500}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.neutral.neutral-700}"
    rounded: "{rounded.lg}"
    padding: "12px 24px"
  card:
    backgroundColor: "{colors.neutral.neutral-0}"
    rounded: "{rounded.xl}"
    padding: "{spacing.lg}"
  input:
    backgroundColor: "{colors.neutral.neutral-0}"
    textColor: "{colors.neutral.neutral-900}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    height: 44px
---

## Overview

**Cosmos** é o design system interno da **Hotmart**, a maior plataforma de produtos digitais e ensino online da América Latina. Fundada em 2011 em Belo Horizonte (MG), a Hotmart conecta mais de 200 mil criadores de conteúdo a mais de 25 milhões de compradores em 188 países, com mais de R$ 50 bilhões em vendas processadas.

### Identidade Visual

A identidade visual da Hotmart foi renovada em 2025 pela agência **Irrreal** em parceria com o estúdio **Est. 31**, sob direção de arte conjunta. O rebranding inclui:

- **Tipografia custom** criada pela **Blackletra Type Foundry** (Daniel Sabino e Diego Maldonado): *Hotmart Display* (soft serif contemporânea, formal, sem características retrô) e *Hotmart Sans* (baseada na Elza, usada também no novo logotipo)
- **Paleta cromática** ancorada em um coral-laranja vibrante como cor primária, evocando energia, ação e acessibilidade
- **Linguagem visual** que equilibra confiança institucional com apelo emocional para criadores digitais

### Personalidade

O sistema visual deve transmitir:

- **Empoderamento** — O criador é o protagonista; a plataforma é a infraestrutura
- **Energia** — Vibrante sem ser agressivo; o laranja Hotmart inspira ação
- **Confiança** — Profissional e robusto; lida com dinheiro e transações
- **Acessibilidade** — Simplicidade visual para diversos perfis de usuários brasileiros e globais
- **Modernidade** — Interfaces limpas, espaçosas, com foco em conversão

### Produtos do Ecosistema

| Produto | Função |
|---------|--------|
| Hotmart Marketplace | Catálogo público de cursos e infoprodutos |
| Hotmart Club | Área de membros para consumo de conteúdo |
| Hotmart Dashboard | Painel do produtor/afiliado (vendas, métricas, configurações) |
| Hotmart Checkout | Páginas de venda e processamento de pagamento |
| Hotmart App | App mobile para compradores (iOS/Android) |
| HotPay | Infraestrutura de pagamentos (SCD regulado pelo BC) |

---

## Colors

A paleta da Hotmart é construída em torno de um coral-laranja vibrante como cor primária, sustentado por um azul de acento para ações secundárias e uma escala neutra fria para interfaces do dashboard.

### Primary (Coral-Laranja)

A cor símbolo da Hotmart — um coral-laranja energético que comunica ação, criatividade e dinamismo. Usada em CTAs principais, elementos de destaque, links primários e branding.

| Token | Hex | Uso |
|-------|-----|-----|
| `primary-50` | #FFF0EB | Background sutil de áreas destacadas |
| `primary-100` | #FFDDD1 | Hover states suaves, tags leves |
| `primary-200` | #FFB8A3 | Bordas em estados ativos |
| `primary-300` | #FF8F6E | Ícones decorativos, ilustrações |
| `primary-400` | #F96B3D | Elementos interativos secundários |
| `primary-500` | #F04E23 | **CTA principal, botões primários, links, logo** |
| `primary-600` | #D43D16 | Hover em botões primários |
| `primary-700` | #B02E0E | Active/pressed state |
| `primary-800` | #862109 | Texto sobre fundos claros quando contraste máximo é necessário |
| `primary-900` | #5C1606 | Uso raro, apenas em variações dark |

### Secondary (Azul)

Azul de acento para ações secundárias, links informativos, indicadores de progresso e elementos que precisam de destaque sem competir com o CTA primário.

| Token | Hex | Uso |
|-------|-----|-----|
| `secondary-500` | #1A6BFF | Links secundários, badges, indicadores |
| `secondary-600` | #0052DB | Hover em elementos azuis |
| `secondary-700` | #003EA8 | Active state |

### Neutral

Escala neutra fria (gray-blue) usada em textos, bordas, backgrounds e toda a estrutura do dashboard.

| Token | Hex | Uso |
|-------|-----|-----|
| `neutral-0` | #FFFFFF | Background de cards, superfícies elevadas |
| `neutral-50` | #F9FAFB | Background de página, área principal |
| `neutral-100` | #F3F4F6 | Background alternado em tabelas, areas |
| `neutral-200` | #E5E7EB | Bordas suaves, separadores |
| `neutral-300` | #D1D5DB | Bordas de inputs em repouso |
| `neutral-400` | #9CA3AF | Texto placeholder, ícones desabilitados |
| `neutral-500` | #6B7280 | Texto secundário, captions |
| `neutral-600` | #4B5563 | Texto de corpo em áreas densas |
| `neutral-700` | #374151 | Texto principal de corpo |
| `neutral-800` | #1F2937 | Headlines de segundo nível |
| `neutral-900` | #111827 | Headlines principais, alto contraste |
| `neutral-950` | #0A0D14 | Backgrounds dark mode, overlays |

### Functional (Feedback)

| Grupo | Token Base | Hex | Uso |
|-------|-----------|-----|-----|
| **Success** | `success-500` | #10B981 | Confirmações, vendas aprovadas, status ativo |
| **Warning** | `warning-500` | #F59E0B | Alertas, pendências, ações recomendadas |
| **Danger** | `danger-500` | #EF4444 | Erros, exclusões, transações recusadas |

### Gradientes

A Hotmart utiliza gradientes quentes no branding e comunicação marketing (hero sections, banners):

- **Hero gradient**: `linear-gradient(135deg, #F04E23 0%, #D43D16 50%, #8B2510 100%)` — degradê laranja para marrom-escuro
- **Accent gradient**: `linear-gradient(90deg, #F04E23 0%, #F96B3D 100%)` — coral vibrante horizontal

---

## Typography

### Fontes

O sistema tipográfico da Hotmart é composto por duas fontes custom exclusivas criadas pela **Blackletra Type Foundry** em 2025/2026:

| Fonte | Classificação | Uso | Notas |
|-------|---------------|-----|-------|
| **Hotmart Display** | Soft serif contemporâneo | Títulos de destaque, landing pages, comunicação | Formal sem ser retrô; curves suaves |
| **Hotmart Sans** | Sans-serif geométrica (baseada na Elza) | UI, corpo de texto, labels, botões, logotipo | Alta legibilidade em todos os tamanhos |

**Fallback stack**: `"Hotmart Sans", "Elza", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`

### Escala Tipográfica

A escala segue a convenção display/headline/body/label:

| Token | Fonte | Size | Weight | Line Height | Uso |
|-------|-------|:---:|:---:|:---:|-----|
| `display-lg` | Hotmart Display | 56px | 700 | 1.1 | Hero principal, landing pages |
| `display-md` | Hotmart Display | 44px | 700 | 1.15 | Títulos de seção marketing |
| `display-sm` | Hotmart Display | 36px | 700 | 1.2 | Subtítulos de seção |
| `headline-lg` | Hotmart Sans | 32px | 700 | 1.25 | Título de página (dashboard) |
| `headline-md` | Hotmart Sans | 24px | 700 | 1.3 | Título de card/modal |
| `headline-sm` | Hotmart Sans | 20px | 600 | 1.4 | Título de subsection |
| `body-lg` | Hotmart Sans | 18px | 400 | 1.6 | Parágrafo destaque |
| `body-md` | Hotmart Sans | 16px | 400 | 1.5 | Corpo de texto padrão |
| `body-sm` | Hotmart Sans | 14px | 400 | 1.5 | Texto secundário |
| `label-lg` | Hotmart Sans | 14px | 600 | 1.4 | Botões, labels de input |
| `label-md` | Hotmart Sans | 12px | 600 | 1.4 | Tags, badges |
| `label-sm` | Hotmart Sans | 11px | 500 | 1.3 | Micro-labels, overline |
| `caption` | Hotmart Sans | 12px | 400 | 1.4 | Helpers, timestamps |

### Regras

- **Hotmart Display** é reservada para comunicação e marketing — nunca dentro do dashboard/produto
- **Hotmart Sans** é usada em 95% da interface: navegação, formulários, tabelas, cards
- Peso máximo disponível: **700 (Bold)**. Não usar Extra Bold ou Black
- Letter spacing negativo em headlines para compactação visual

---

## Layout

### Grid System

O Cosmos utiliza um grid fluido responsivo:

| Viewport | Colunas | Gutter | Margin | Max-width |
|----------|:-------:|:------:|:------:|:---------:|
| Mobile (<640px) | 4 | 16px | 16px | 100% |
| Tablet (640-1024px) | 8 | 24px | 24px | 100% |
| Desktop (1024-1440px) | 12 | 24px | 32px | 1200px |
| Wide (>1440px) | 12 | 32px | auto | 1440px |

### Spacing Scale

O sistema de espaçamento segue um grid base de **8px** com um half-step de 4px para micro-ajustes:

| Token | Valor | Uso |
|-------|:---:|-----|
| `xs` | 4px | Micro-espaçamentos: gap entre ícone e texto |
| `sm` | 8px | Padding mínimo interno de chips/tags |
| `md` | 16px | Padding de inputs, espaçamento entre itens de lista |
| `lg` | 24px | Padding de cards, gap entre blocos |
| `xl` | 32px | Separação entre seções menores |
| `2xl` | 48px | Padding de seções |
| `3xl` | 64px | Grandes separações visuais |
| `4xl` | 96px | Seções de landing page |
| `5xl` | 128px | Hero spacing |

### Densidade

- **Dashboard/Produto**: Densidade média — foco em eficiência com respiro adequado
- **Marketing/Landing pages**: Densidade baixa — seções espaçosas com grandes títulos
- **Tabelas e listas**: Densidade alta — rows compactos (40-48px height)

---

## Elevation & Depth

A profundidade no Cosmos é expressa primariamente por **sombras suaves** em tons neutros frios, criando camadas de interface sem peso visual excessivo.

### Níveis de Elevação

| Token | Valor CSS | Uso |
|-------|-----------|-----|
| `shadow-none` | none | Nível base — textos, layouts flat |
| `shadow-xs` | `0 1px 2px rgba(0, 0, 0, 0.05)` | Cards sutis, hover states mínimos |
| `shadow-sm` | `0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)` | Cards de conteúdo, elementos elevados |
| `shadow-md` | `0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)` | Dropdowns, popovers, tooltips |
| `shadow-lg` | `0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)` | Modais, drawers |
| `shadow-xl` | `0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)` | Overlays elevados, dialogs críticos |

### Overlays

| Overlay | Valor | Uso |
|---------|-------|-----|
| Backdrop | `rgba(17, 24, 39, 0.5)` | Fundo de modais e drawers |
| Scrim | `rgba(17, 24, 39, 0.3)` | Overlays suaves (dropdown aberto) |

### Princípio

A Hotmart evita sombras pesadas ou coloridas. Profundidade é sutil e funcional: indica interatividade e hierarquia sem decoração.

---

## Shapes

### Border Radius

A linguagem de formas da Hotmart é **moderadamente arredondada** — suave o suficiente para parecer acessível e moderna, sem ser excessivamente pill-shaped.

| Token | Valor | Uso |
|-------|:---:|-----|
| `none` | 0px | Imagens edge-to-edge, dividers |
| `sm` | 4px | Inputs menores, tooltips |
| `md` | 8px | Inputs padrão, badges, chips |
| `lg` | 12px | Botões, cards pequenos |
| `xl` | 16px | Cards de conteúdo, containers |
| `2xl` | 24px | Cards de destaque, modals |
| `full` | 9999px | Avatares, pills, toggles |

### Regras de Forma

- **Botões** usam `rounded-lg` (12px) — padrão arredondado mas não pill
- **Cards** usam `rounded-xl` (16px) — suavidade convidativa
- **Inputs** usam `rounded-md` (8px) — sutil mas visível
- **Avatares e status** usam `rounded-full` — sempre circulares
- Consistência: todos os elementos em um mesmo container compartilham o mesmo nível de arredondamento

---

## Components

O Cosmos organiza seus componentes para atender ao ecossistema completo da Hotmart: dashboard de produtores, checkout de compradores, área de membros e pages de marketing.

### Buttons

| Variante | Background | Text | Border | Uso |
|----------|-----------|------|--------|-----|
| **Primary** | `primary-500` | white | none | CTA principal — 1 por tela |
| **Secondary** | transparent | `primary-500` | 1px `primary-500` | Ações complementares |
| **Ghost** | transparent | `neutral-700` | none | Ações terciárias, links estilizados |
| **Danger** | `danger-500` | white | none | Exclusões, ações destrutivas |
| **Disabled** | `neutral-100` | `neutral-400` | none | Estado indisponível |

Tamanhos: **sm** (32px height), **md** (40px), **lg** (48px)

### Cards

- Background: `neutral-0` (branco)
- Border-radius: `xl` (16px)
- Padding interno: `lg` (24px)
- Elevação: `shadow-sm` em repouso, `shadow-md` em hover
- Sem borda por padrão; usar `neutral-200` quando necessário agrupar visualmente

### Inputs

- Height: 44px (md) / 36px (sm)
- Border: 1px `neutral-300` em repouso
- Border focus: 2px `primary-500`
- Border error: 1px `danger-500`
- Border-radius: `md` (8px)
- Placeholder: `neutral-400`
- Label acima do input: `label-lg` weight 600

### Badges e Tags

- Border-radius: `md` (8px) para tags, `full` para badges numéricos
- Variantes de cor: primary, success, warning, danger, neutral
- Padding: `4px 8px` (tag) / `2px 6px` (badge)
- Font: `label-md`

### Navigation (Sidebar)

- Width fixa: 240px (expandido) / 64px (colapsado)
- Background: `neutral-900` ou `neutral-0` (dependendo do produto)
- Items: 40px height, `rounded-md`
- Item ativo: background `primary-50`, texto `primary-600`
- Ícones: 20px, peso stroke 1.5

### Modals

- Max-width: 480px (sm), 640px (md), 800px (lg)
- Border-radius: `2xl` (24px)
- Padding: `xl` (32px)
- Backdrop: `rgba(17, 24, 39, 0.5)` com blur 4px
- Animação: scale de 0.95 → 1.0 + fade in (200ms ease-out)

### Toast / Notifications

- Position: top-right (desktop), bottom-center (mobile)
- Border-radius: `lg` (12px)
- Shadow: `shadow-md`
- Duração: 5s padrão, persistente para erros
- Ícone à esquerda colorcoded: success/warning/danger/info

### Tables

- Header: background `neutral-50`, texto `label-md` uppercase, `neutral-500`
- Row height: 48px
- Row hover: background `neutral-50`
- Bordas: apenas horizontal `neutral-200`
- Align numéricos à direita

---

## Do's and Don'ts

### ✅ Do's

- **Use o laranja `primary-500` exclusivamente para CTAs e ações primárias** — é a cor de maior impacto visual
- **Mantenha 1 CTA primário por viewport** — ações concorrentes confundem o usuário
- **Use Hotmart Display apenas em landing pages e comunicação** — nunca na UI do dashboard
- **Respeite contraste WCAG AA** — mínimo 4.5:1 para texto normal, 3:1 para texto grande e ícones
- **Siga a base de 8px** — espaçamentos devem ser múltiplos de 8 (com exceção de 4px para micro-ajustes)
- **Mantenha cards com shadow-sm** — elevação sutil que não pesa a interface
- **Use gradientes apenas em hero sections e branding** — nunca em botões ou componentes interativos
- **Aplique rounded-lg (12px) em botões consistentemente** — a suavidade é marca do estilo Hotmart
- **Trate o checkout como experiência premium** — máxima clareza, mínima distração, foco na conversão
- **Use os tokens de cor semânticos** — success para positivo, danger para destrutivo, warning para atenção

### ❌ Don'ts

- **Não use o laranja em grandes áreas de background** — isso satura o olho; reserve para pontos focais
- **Não misture Hotmart Display com Hotmart Sans em um mesmo parágrafo** — cada uma tem seu contexto
- **Não crie variações de cor fora da paleta tokenizada** — toda cor deve vir dos tokens Cosmos
- **Não use sombras coloridas ou muito pesadas** — Cosmos é sutil; profundidade é funcional, não decorativa
- **Não use rounded-full em botões** — botões pill-shaped não fazem parte do vocabulário visual Hotmart
- **Não coloque texto sobre gradientes sem overlay** — garantir legibilidade com overlay escuro ou texto em área safe
- **Não use mais de 2 cores de destaque em uma mesma tela** — primary + 1 funcional no máximo
- **Não quebre o grid de 8px** — espaçamentos como 10px, 15px, 18px não existem no sistema
- **Não use fontes externas** — todo texto deve usar Hotmart Sans (UI) ou Hotmart Display (comunicação)
- **Não coloque ações destrutivas com o mesmo peso visual de ações construtivas** — danger sempre mais discreto que primary

---

## Attribution

| Campo | Valor |
|-------|-------|
| **Source** | [hotmart.com](https://hotmart.com) |
| **Method** | public site CSS extraction |
| **Date** | 2026-07-05 |
| **Design System** | Cosmos (interno) |
| **Typography** | [Blackletra Type Foundry — Hotmart Custom](https://blackletra.com/custom/hotmart) |
| **Brand Identity** | Irrreal + Est. 31 (2025) |
| **Marketing Direction** | Nilson Kalil |
| **VP Marketing** | Ana Beatriz Carretero |
| **Website** | [hotmart.com](https://hotmart.com) |