Mercado Bitcoin

---
name: "Mercado Bitcoin"
description: "Design system do Mercado Bitcoin, maior exchange de criptomoedas da América Latina. Interface dark-flat com tipografia híbrida Times New Roman + IBM Plex Sans, paleta industrial e acento azul (#0051c3) para elementos interativos."
colors:
  brand:
    accent: "#0051c3"
    danger: "#e8550c"
    dangerDark: "#de5052"
    dangerDeep: "#521010"
    warning: "#e4d89e"
    info: "#0000ee"
  semantic:
    background: "#1d2327"
    surface: "#000000"
    surfaceAlt: "#0a0a0b"
    textPrimary: "#ffffff"
    textMuted: "#404040"
    textLight: "#595959"
    border: "#474d51"
  neutral:
    light1: "#eaebeb"
    light2: "#f3f4f4"
    light3: "#c8cacc"
    dark1: "#141415"
    dark2: "#5f5c6b"
typography:
  headline:
    fontFamily: "Times New Roman, serif"
    fontSize: "48px"
    fontWeight: 700
  body:
    fontFamily: "IBM Plex Sans, sans-serif"
    fontSize: "16px"
    fontWeight: 400
rounded:
  xs: "2px"
  sm: "4px"
  md: "8px"
  asymmetric: "5px 5px 0px 0px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  xxl: "48px"
---

## Overview

**Mercado Bitcoin** é a maior exchange de criptomoedas da América Latina, fundada em 2013. Seu design system combina uma estética dark-flat industrial com uma escolha tipográfica ousada: Times New Roman para headlines (evocando confiança e tradição financeira) pareada com IBM Plex Sans para corpo (modernidade e legibilidade técnica).

A filosofia visual é minimalista e flat — elevação é comunicada através de shifts de cor e bordas, nunca sombras. O azul (#0051c3) é usado cirurgicamente para CTAs e elementos interativos, contrastando com a paleta predominantemente monocromática.

### Princípios de design

1. **Flat-first** — Sem sombras; hierarquia via cor de superfície e bordas
2. **Confiança institucional** — Times New Roman em headlines evoca tradição financeira
3. **Clareza técnica** — IBM Plex Sans para dados, números e interface
4. **Acento cirúrgico** — Azul (#0051c3) reservado exclusivamente para ações
5. **Densidade informacional** — Grid de 4px permite layouts densos para dados de mercado

---

## Colors

### Paleta de marca

| Token | Hex | Uso |
|---|---|---|
| `accent` | `#0051c3` | CTAs, links, focus rings, estados ativos |
| `background` | `#1d2327` | Fundo principal das páginas |
| `surface` | `#000000` | Cards, painéis e containers |
| `textPrimary` | `#ffffff` | Títulos e corpo de texto |
| `textMuted` | `#404040` | Captions, placeholders, info secundária |
| `border` | `#474d51` | Divisores, bordas de cards, outlines |
| `danger` | `#e8550c` | Estados de erro, quedas de preço |
| `warning` | `#e4d89e` | Alertas, indicadores de atenção |

### Aplicação de cor

- Use `#0051c3` para o CTA principal e elementos que pedem interação
- Use `#1d2327` como background padrão em todas as páginas
- Use `#000000` para superfícies elevadas (cards, modais)
- Mantenha texto em `#ffffff` para alto contraste; use `#404040` para texto secundário
- Bordas sempre em `#474d51` para separação sutil
- **Nunca use gradientes** — a paleta é sólida e flat

---

## Typography

### Famílias

| Papel | Família | Especificação |
|---|---|---|
| Headlines | Times New Roman | Bold (700), serif clássico |
| Body/UI | IBM Plex Sans | Regular (400), sans-serif técnico |

### Hierarquia sugerida

| Token | Tamanho | Peso | Uso |
|---|---:|---:|---|
| `h1` | 48px / 3rem | 700 | Hero headlines, títulos principais |
| `h2` | 32px / 2rem | 600 | Títulos de seção |
| `h3` | 24px / 1.5rem | 600 | Subtítulos, cards |
| `body` | 16px / 1rem | 400 | Texto corrido, descrições |
| `caption` | 12px / 0.75rem | 400 | Labels, metadados, timestamps |

### Regras tipográficas

- Limite a 2 famílias por tela: Times New Roman + IBM Plex Sans
- Use Times New Roman para headlines e IBM Plex Sans para corpo/UI
- Mantenha hierarquia consistente: máximo 3-4 tamanhos por tela
- Line-height: 1.5 para corpo, 1.2 para headlines
- Use cor e opacidade para hierarquia secundária, não tamanhos adicionais

---

## Layout

O Mercado Bitcoin utiliza um grid baseado em **4px**, permitindo composições compactas típicas de interfaces de trading. A densidade é compacta, com escala de spacing: 4, 8, 12, 14, 16, 20, 24, 28px.

### Spacing como significado

| Spacing | Uso |
|---|---|
| 4-8px | Tight: itens relacionados dentro de um grupo |
| 12-16px | Medium: entre grupos |
| 24-32px | Wide: entre seções |
| 48px+ | Vast: quebras de seção principais |

### Max-width

Conteúdo limitado a **1280px** em containers principais.

---

## Elevation & Depth

O Mercado Bitcoin segue uma filosofia **totalmente flat**. Não há box-shadows no sistema — elevação é comunicada exclusivamente através de:

### Estratégia de elevação

| Nível | Técnica | Uso |
|---|---|---|
| 0 — Base | Cor de background | Fundo da página |
| 1 — Raised | Superfície mais clara + borda sutil | Cards, painéis |
| 2 — Floating | Superfície ainda mais clara + borda forte | Dropdowns, popovers |
| 3 — Overlay | Backdrop + superfície modal | Modais, dialogs |

### Anti-patterns detectados

- ❌ Sem box-shadow em nenhum elemento
- ❌ Sem gradientes de fundo
- ❌ Sem blur ou backdrop-blur
- ❌ Sem zebra striping em tabelas

---

## Shapes

### Border radius

| Token | Valor | Uso |
|---|---|---|
| `xs` | 2px | Tags, badges compactos |
| `sm` | 4px | Inputs, campos de formulário |
| `md` | 8px | Cards padrão |
| `asymmetric` | 5px 5px 0px 0px | Cards com topo arredondado |

A linguagem de formas é industrial e funcional — raios pequenos, sem excessos decorativos.

---

## Components

### Botões

- **Primário:** fundo `#0051c3`, texto branco
- **Ghost:** fundo transparente, borda `#474d51`
- **Padding:** 8px 16px
- **Radius:** 5px 5px 0px 0px (assimétrico)
- **Hover:** opacity 0.9 ou shade mais claro
- **Focus:** ring com `#0051c3`

### Cards

- Background: `#000000`
- Border: `1px solid #474d51`
- Radius: `5px 5px 0px 0px`
- Padding: `16px`
- **Sem sombras** — use bordas e cores de superfície para profundidade

### Inputs

- Background: `#1d2327`
- Border: `1px solid #474d51`
- Focus: `border-color: #0051c3`
- Radius: `5px 5px 0px 0px`
- Label: `#404040`, 12px

### Stats/Dados de mercado

- Surface: `#000000`
- Label: `#404040` (muted, 12px, uppercase)
- Value: `#ffffff` (primary, 24-32px, bold)
- Variação positiva: usar cor de success
- Variação negativa: usar `#e8550c` (danger)

---

## Do's and Don'ts

### Faça

- Use `#0051c3` para elementos interativos (botões, links, focus rings)
- Use `#1d2327` como background principal
- Combine Times New Roman (headlines) com IBM Plex Sans (corpo)
- Siga o grid de **4px** para margens, padding e gaps
- Use bordas e shifts de background para elevação — não sombras
- Use border-radius da escala: 2px, 4px, 5px 5px 0px 0px, 8px

### Não faça

- Não introduza cores fora da paleta sem estender os tokens
- Não adicione famílias tipográficas além de Times New Roman e IBM Plex Sans
- Não use valores arbitrários de spacing — mantenha múltiplos de 4px
- Não adicione box-shadow — este design system usa elevação flat
- Não use gradientes — o design usa cores sólidas apenas
- Não use border-radius arbitrários
- Não use backdrop-blur ou efeitos de blur

---

## Attribution

| Campo | Valor |
|---|---|
| Source | [Mercado Bitcoin](https://www.mercadobitcoin.com.br) |
| Method | Public site CSS extraction via skillui |
| Extracted | 2026-09-11 |
| License | Design tokens extracted from publicly visible CSS. No affiliation with the brand. |