Loggi ELKE (Design System)

---
name: Loggi ELKE (Design System)
description: >
  Design system da Loggi, a maior plataforma de logística last-mile do Brasil.
  Tecnologia de ponta a ponta para entregas urbanas e nacionais com cobertura 100%
  do território brasileiro. O ELKE é o DS interno que sustenta web, app de
  entregadores e plataforma de gestão de envios. Foco em simplicidade, tracking
  em tempo real e acessibilidade operacional. Tipografia Montserrat (extrabold
  para impacto, regular para corpo). Paleta azul vibrante com gradientes cyan,
  tokens v2 com sistema semântico completo, dark surfaces para o app de tracking.
colors:
  brand:
    primary: "#0055FF"
    primaryHover: "#0040E6"
    primaryLegacy: "#006AFF"
    main: "#00BAFF"
    darkBlue: "#003B99"
    dodgerBlue: "#0095FF"
    brandLight: "#E6F8FF"
  gradient:
    primary: "linear-gradient(180deg, #006AFF -60%, #00BAFF)"
    header: "linear-gradient(91.41deg, #00BAFF 4.07%, #006AFF 36.38%)"
  semantic:
    surface: "#FFFFFF"
    surfaceContainerLow: "#F2F2F2"
    surfaceContainer: "#E6E6E6"
    surfaceContainerHigh: "#1A1A1A"
    surfaceContainerBorder: "#E4E4E7"
    onSurface: "#1A1A1A"
    onSurfaceVariant: "#666666"
    onSurfaceInverse: "#FFFFFF"
    outline: "#E6E6E6"
    outlineLow: "#F2F2F2"
    outlineHigh: "#CCCBCD"
    border: "rgba(232, 232, 232, 0.30)"
  primaryTokens:
    primary: "#0055FF"
    primary5: "rgba(0, 85, 255, 0.05)"
    primary30: "rgba(0, 85, 255, 0.30)"
    primaryContainer: "#EAF2FF"
    primaryContainerAlpha: "rgba(0, 85, 255, 0.08)"
    primaryContainerHover: "#D1E3FF"
    primaryContainerHoverAlpha: "rgba(0, 85, 255, 0.16)"
    onPrimary: "#FFFFFF"
    onPrimaryVariant: "rgba(255, 255, 255, 0.8)"
  secondary:
    onSecondary: "#1A1A1A"
    onSecondaryInversed: "#FFFFFF"
    secondaryAlpha: "rgba(26, 26, 26, 0.05)"
    secondaryContainerAlpha: "rgba(26, 26, 26, 0.1)"
    secondaryInverseAlpha: "rgba(255, 255, 255, 0.1)"
    secondaryInverseHoverAlpha: "rgba(255, 255, 255, 0.2)"
  dark:
    dark: "#06142C"
    darkHigh: "#02090A"
    darkContainer: "#0D1E3E"
    darkContainerLow: "#153362"
    darkContainerHigh: "#00091A"
    darkContainerAlpha: "rgba(0, 0, 0, 0.4)"
    onDark: "#FFFFFF"
    onDarkVariant: "#DADADA"
    darkOutline: "rgba(231, 231, 231, 0.10)"
  feedback:
    positive: "#1BB84B"
    positiveContainer: "#E8FCEE"
    successful: "#0FAE79"
    alert: "#FCB121"
    alertContainer: "#FEEDCD"
    negative: "#EB2727"
    negativeContainer: "#FDE7E7"
    insight: "#4C2DEB"
    insightContainer: "#EBE8FD"
    onContainer: "#1A1A1A"
    backdropWhite: "rgba(255, 255, 255, 0.8)"
    backdropBlack: "rgba(26, 26, 26, 0.6)"
    starRating: "#FDBD27"
  neutral:
    white: "#FFFFFF"
    black: "#000000"
    coal: "#2E3545"
    grayscaleW10: "#FAFAFA"
    grayscaleW13: "#F5F5F5"
    grayscaleW14: "#F3F3F3"
    grayscaleW15: "#E8E8E8"
    grayscaleW20: "#CCCCCC"
    grayscaleW25: "#BEC7D6"
    grayscaleW28: "#A3A3A3"
    grayscaleW30: "#808080"
    grayscaleW35: "#5A5A5A"
    grayscaleW40: "#333333"
    grayscaleW45: "#343434"
  input:
    border: "#C8CDD9"
    color: "#343434"
    label: "#6E6E6E"
    placeholder: "#6E6E6E"
    transparent: "rgba(255, 255, 255, 0.4)"
    transparentColor: "#FFFFFF"
    transparentLabel: "#FFFFFF"
    transparentPlaceholder: "rgba(255, 255, 255, 0.8)"
  legacy:
    quote: "#1B71F7"
    aeroblue: "#D2FFDF"
    pinegreen: "#2E5A1C"
    starRating: "#F6822A"
    feedbackSuccess: "#71B2AB"
    feedbackError: "#CE4E6B"
    feedbackValidationError: "#CC0014"
    feedbackInfo: "#7199B2"
    feedbackAlert: "#F49854"
typography:
  families:
    - Montserrat
  fallbacks:
    - "Montserrat Fallback"
    - ui-sans-serif
    - system-ui
    - sans-serif
  weights:
    regular: 400
    medium: 500
    bold: 700
    extrabold: 800
  sizes:
    caption: 12
    body2: 14
    body1: 16
    subtitle: 18
    heading5: 20
    heading4: 24
    heading3: 28
    heading2: 32
    heading1: 40
    display: 48
  lineHeights:
    tight: 1.14
    normal: 1.33
    relaxed: 1.5
rounded:
  none: 0
  xs: 2
  small: 4
  medium: 6
  large: 8
  xLarge: 12
  xxLarge: 16
  pill: 999
  circle: "50%"
spacing:
  nano: 4
  xxs: 8
  xs: 12
  sm: 16
  md: 24
  lg: 32
  xl: 40
  xxl: 48
  xxxl: 64
  huge: 80
  giant: 96
---

## Overview

**ELKE** é o design system interno da **Loggi**, a maior plataforma de logística last-mile do Brasil. A empresa opera com tecnologia proprietária para entregas urbanas e nacionais, com cobertura 100% do território brasileiro, processando mais de 1 milhão de pacotes diariamente no maior sorter da América do Sul.

### Números

| Métrica | Valor |
|---------|-------|
| Cobertura | 100% do Brasil |
| Pacotes/dia | 1.000.000+ |
| Pontos de coleta | 1.700+ |
| Entregadores parceiros | 200.000+ |
| Design System | ELKE |
| Plataformas | Web, app entregador (iOS/Android), app tracking |

### Princípios de Design

O ELKE segue princípios centrados na operação logística:

1. **Simplicidade operacional** — Interfaces limpas para entregadores em trânsito e lojistas em alta demanda
2. **Velocidade de percepção** — Informação de tracking e status deve ser compreendida em milissegundos
3. **Confiança tecnológica** — Azul dominante transmite solidez e inovação em logística
4. **Acessibilidade inclusiva** — Entregadores com devices variados, condições de iluminação adversas
5. **Escalabilidade** — Sistema que funciona de PMEs com 1 envio/dia a indústrias com milhares

### Características Técnicas

- **Palette dual** — Sistema v1 (legacy) e v2 (atual) coexistem com tokens semânticos
- **Gradient branding** — Gradientes azul-cyan são a assinatura visual (header, hero, CTAs)
- **Dark surfaces** — Background escuro (`#06142C`, `#0D1E3E`) para o contexto de tracking e app operacional
- **Responsive-first** — Mobile-first para entregadores, desktop para gestão/lojistas
- **High-contrast feedback** — Status de entrega (positivo verde, alerta amarelo, erro vermelho) com containers coloridos

---

## Colors

### Filosofia de Cor

> "Azul é Loggi. O gradiente azul-cyan transmite movimento, velocidade e tecnologia — pilares de uma empresa de logística que processa milhões de pacotes."

A paleta ELKE é organizada em dois níveis: o **brand blue** como cor dominante (botões, headers, CTAs, gradientes) e um sistema **semântico v2** completo com tokens para surfaces, containers, feedback e estados interativos.

### Brand Colors (Primary Blue)

| Token | Hex | Uso |
|-------|-----|-----|
| `color-v2-primary` | `#0055FF` | Azul primário v2 — CTAs, botões, links, ícones ativos |
| `color-primary` | `#006AFF` | Azul primário legacy — headers, backgrounds |
| `color-v2-main` | `#00BAFF` | Cyan vibrante — gradientes, acentos, destaque tecnológico |
| `color-darkblue` | `#003B99` | Azul escuro — textos sobre fundos claros, ênfase |
| `color-dodgerblue` | `#0095FF` | Azul intermediário — hovers, links secundários |
| `color-brandlight` | `#E6F8FF` | Azul ultra-claro — backgrounds sutis, containers leves |

### Gradientes (Assinatura Visual)

| Token | Valor | Uso |
|-------|-------|-----|
| `loggi-gradient` | `linear-gradient(180deg, #006AFF -60%, #00BAFF)` | Hero sections, backgrounds verticais |
| `loggi-headerGradient` | `linear-gradient(91.41deg, #00BAFF 4.07%, #006AFF 36.38%)` | Header principal, navbar |

Os gradientes blue-to-cyan são a assinatura visual mais forte da Loggi. Comunicam movimento e progressão — metáfora perfeita para tracking de entregas.

### Surfaces & Containers (v2)

| Token | Hex | Uso |
|-------|-----|-----|
| `surface` | `#FFFFFF` | Background principal |
| `surface-container-low` | `#F2F2F2` | Seções alternadas, backgrounds secundários |
| `surface-container` | `#E6E6E6` | Separadores, áreas neutras |
| `surface-container-high` | `#1A1A1A` | Contextos dark (tracking, app noturno) |
| `on-surface` | `#1A1A1A` | Texto principal sobre superfícies claras |
| `on-surface-variant` | `#666666` | Texto secundário, descrições |
| `outline` | `#E6E6E6` | Bordas de cards, dividers |

### Dark Mode (App de Tracking / Operacional)

| Token | Hex | Uso |
|-------|-----|-----|
| `dark` | `#06142C` | Background principal dark (navy profundo) |
| `dark-high` | `#02090A` | Background mais profundo |
| `dark-container` | `#0D1E3E` | Cards e containers dark |
| `dark-container-low` | `#153362` | Containers elevados dark |
| `dark-container-high` | `#00091A` | Surface mais profunda |
| `on-dark` | `#FFFFFF` | Texto principal em dark |
| `on-dark-variant` | `#DADADA` | Texto secundário em dark |
| `dark-outline` | `rgba(231,231,231,0.10)` | Bordas sutis em dark |

O dark mode da Loggi não usa preto puro — utiliza **navy escuro** (`#06142C`) que mantém a identidade azul mesmo no contexto noturno. Ideal para entregadores trabalhando à noite.

### Feedback / Status de Entrega

| Token | Hex | Uso |
|-------|-----|-----|
| `feedback-positive` | `#1BB84B` | Entrega realizada, status OK |
| `feedback-positive-container` | `#E8FCEE` | Background de sucesso |
| `feedback-successful` | `#0FAE79` | Confirmação de ação |
| `feedback-alert` | `#FCB121` | Em trânsito, atenção necessária |
| `feedback-alert-container` | `#FEEDCD` | Background de alerta |
| `feedback-negative` | `#EB2727` | Falha na entrega, erro |
| `feedback-negative-container` | `#FDE7E7` | Background de erro |
| `feedback-insight` | `#4C2DEB` | Informações e dicas |
| `feedback-insight-container` | `#EBE8FD` | Background informativo |
| `star-rating` | `#FDBD27` | Estrelas de avaliação |

### Input States

| Token | Hex | Uso |
|-------|-----|-----|
| `input-border` | `#C8CDD9` | Borda de inputs em repouso |
| `input-color` | `#343434` | Texto digitado |
| `input-label` | `#6E6E6E` | Labels flutuantes |
| `input-placeholder` | `#6E6E6E` | Placeholders |

---

## Typography

### Montserrat — A Família Tipográfica

A Loggi utiliza **Montserrat** como família tipográfica única para todas as aplicações — web, app, marketing e comunicação interna. A escolha de uma Google Font aberta reflete o posicionamento de acessibilidade e democracia de acesso da marca.

#### Justificativa

- **Geometric sans-serif** — Transmite modernidade e tecnologia
- **Peso Extrabold (800)** — Usado extensivamente em headings, comunica força e confiança
- **Alta legibilidade** — Performance em telas pequenas (entregadores em smartphones)
- **Ampla disponibilidade** — Google Font gratuita, carrega rápido via CDN

### Escala Tipográfica

| Token | Tamanho | Line Height | Peso | Uso |
|-------|:---:|:---:|:---:|---|
| `caption` | 12px | 16px | 400/500 | Labels mínimos, timestamps, metadata |
| `body2` | 14px | 20px | 400/500 | Texto secundário, descrições, links nav |
| `body1` | 16px | 24px | 400 | Corpo padrão, parágrafos, conteúdo |
| `subtitle` | 18px | 24px | 500/700 | Subtítulos, card titles menores |
| `heading5` | 20px | 28px | 700 | Headings de seção |
| `heading4` | 24px | 32px | 800 | Headings de destaque, card titles |
| `heading3` | 28px | 32px | 800 | Títulos de página (mobile) |
| `heading2` | 32px | 40px | 800 | Títulos hero (mobile) |
| `heading1` | 40px | 48px | 800 | Display principal (desktop) |
| `display` | 48px | 56px | 800 | Hero headlines, landing pages |

### Pesos e Hierarquia

| Role | Weight | Código | Uso |
|------|:------:|:---:|-----|
| Display / Hero | 800 | Extrabold | Headlines, hero sections, números destaque |
| Heading | 800 | Extrabold | Títulos de seção, card headings |
| Subtitle | 700 | Bold | Subtítulos, emphasis em seções |
| Body emphasis | 500 | Medium | Nomes, labels ativos, nav items |
| Body | 400 | Regular | Texto corrido, descrições, parágrafos |

### Padrão de Uso no Site

O site loggi.com utiliza predominantemente **Extrabold (800)** para todos os headings, criando um impacto visual forte e direto. O contraste entre headings extrabold e body regular é a principal ferramenta de hierarquia tipográfica.

---

## Layout

### Spacing Scale

O ELKE utiliza uma escala baseada em múltiplos de 4px e 8px:

| Token | Valor | Uso |
|-------|:---:|---|
| `nano` | 4px | Micro gaps, ícone interno |
| `xxs` | 8px | Gap ícone-texto, padding mínimo de botões |
| `xs` | 12px | Padding interno compacto |
| `sm` | 16px | Padding padrão de componentes, gutter mobile |
| `md` | 24px | Espaçamento entre elementos, gutter desktop |
| `lg` | 32px | Separação entre blocos |
| `xl` | 40px | Espaçamento de seção |
| `xxl` | 48px | Separação entre seções |
| `xxxl` | 64px | Separação grande |
| `huge` | 80px | Hero spacing |
| `giant` | 96px | Máxima separação |

### Grid System

| Contexto | Colunas | Margem | Gutter |
|----------|:---:|:---:|:---:|
| Mobile (< 768px) | 4 | 16px | 16px |
| Tablet (768–1024px) | 8 | 32px | 24px |
| Desktop (> 1024px) | 12 | Auto (centrado) | 24px |
| Wide (> 1440px) | 12 | Auto (max-width container) | 32px |

### Containers

| Breakpoint | Max-width |
|-----------|:---------:|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1440px |

### Anatomia de Página (Site Marketing)

1. **Header** — Gradiente azul-cyan horizontal, logo, nav, CTAs
2. **Hero** — Background com gradiente ou imagem, headline extrabold, CTA primário
3. **Social Proof** — Carousel de logos de clientes (Sephora, Vivara, Pandora etc.)
4. **Services** — Cards de serviços com ícones e descrições
5. **Metrics** — Números grandes (1M+ pacotes, 100% cobertura, 1700+ pontos)
6. **Integrations** — Grid de plataformas parceiras
7. **Tools** — Carousel de ferramentas gratuitas
8. **Testimonials** — Carousel de depoimentos com foto e logo
9. **Blog** — Cards de conteúdo recente
10. **Footer** — Dark, multi-coluna, social links

---

## Elevation & Depth

### Filosofia

A Loggi mantém interfaces predominantemente **flat** com uso moderado de sombras. A elevação é comunicada principalmente por:
- **Variação de cor de fundo** (branco vs cinza vs dark navy)
- **Bordas sutis** com baixa opacidade
- **Gradientes** para criar profundidade visual sem sombras

### Box Shadows

| Token | Box-shadow | Uso |
|-------|-----------|-----|
| `elevation.none` | Nenhuma | Elementos flat, a maioria dos cards |
| `elevation.low` | `0 2px 8px rgba(0,0,0,0.08)` | Cards sutis, hovers |
| `elevation.medium` | `0 4px 16px rgba(0,0,0,0.12)` | Dropdowns, popovers |
| `elevation.high` | `0 8px 32px rgba(0,0,0,0.16)` | Modais, overlays |

### Backdrop & Overlays

| Token | Valor | Uso |
|-------|-------|-----|
| `backdrop-white` | `rgba(255,255,255,0.8)` | Overlay sobre imagens claras |
| `backdrop-black` | `rgba(26,26,26,0.6)` | Scrim de modais, overlays dark |
| `dark-container-alpha` | `rgba(0,0,0,0.4)` | Overlay sobre gradientes |

### Cards no Dark Context

No contexto dark (tracking, app noturno), elevação é comunicada por luminosidade crescente do navy:
- Base: `#06142C`
- Nível 1: `#0D1E3E`
- Nível 2: `#153362`
- Nível 3: `#00091A` (mais profundo, inversão para contraste)

---

## Shapes

### Border Radius

| Token | Valor | Uso |
|-------|:---:|---|
| `none` | 0px | Imagens full-bleed, containers full-width |
| `xs` | 2px | Botões compactos (nav header), tags mínimas |
| `small` | 4px | Tags, badges pequenos |
| `medium` | 6px | Botões de navegação, items de menu |
| `large` | 8px | Botões CTA, cards padrão, inputs |
| `xLarge` | 12px | Cards destacados, containers maiores |
| `xxLarge` | 16px | Cards hero, modais |
| `pill` | 999px | Search bars, chips, filtros |
| `circle` | 50% | Avatares, ícones circulares, indicadores |

### Estilo Visual

A Loggi usa border-radius **conservador** (2px–8px predominante) — transmite eficiência e profissionalismo de uma empresa de logística. Diferente de fintechs com formas arredondadas excessivas, o ELKE prioriza **retângulos levemente suavizados** que comunicam precisão operacional.

### Iconografia

- Estilo: Line icons com traço consistente
- Tamanho padrão: 24px
- Stroke: 1.5–2px
- Contextos: Tracking de status, serviços, ferramentas, navegação
- Cor: Herda a cor do contexto (primary blue em CTAs, on-surface em conteúdo)

---

## Components

O ELKE sustenta a experiência em múltiplas plataformas: site marketing, painel de envios, app de entregadores e interfaces de tracking.

### Navegação

- **Header** — Gradiente horizontal azul-cyan, logo à esquerda, mega-menu, CTAs "Entrar" e "Criar Conta"
- **MegaMenu** — Dropdown multi-coluna com ícones, organizado por categoria (Serviços, Parcerias, Ferramentas)
- **MobileNav** — Drawer lateral com hierarquia colapsável
- **Footer** — Background dark (#1A1A1A), multi-coluna, links de redes sociais, selos

### Cards e Containers

- **ServiceCard** — Card com ícone, título extrabold, descrição e link "Saiba mais"
- **ToolCard** — Card de ferramenta gratuita com imagem, título e CTA
- **TestimonialCard** — Depoimento com texto, nome do cliente, empresa e logo
- **BlogCard** — Imagem, título, descrição curta, link "Ler mais"
- **MetricCard** — Número grande (extrabold), label descritivo

### Formulários

- **Input** — Borda `#C8CDD9`, label flutuante, placeholder `#6E6E6E`
- **SearchInput** — Com ícone de busca, usado na calculadora de frete (CEP)
- **Select** — Dropdown para seleção de serviços
- **TrackingInput** — Input dedicado para código de rastreio

### Ações

- **ButtonPrimary** — Background `#006AFF` / `#0055FF`, texto branco, border-radius 2–8px
- **ButtonSecondary** — Ghost com borda, texto azul
- **ButtonGhost** — Sem background, hover com `rgba(255,255,255,0.1)`
- **LinkCTA** — Texto com seta, cor primary

### Feedback e Status

- **TrackingStatus** — Timeline vertical com dots coloridos por status
- **Alert** — Container com feedback color + ícone (success, alert, negative)
- **Badge** — Indicador numérico (notificações, pendências)
- **Toast** — Notificação temporária de ação concluída

### Carousel / Slider

- **LogoCarousel** — Scroll infinito horizontal de logos de clientes
- **TestimonialSlider** — Carousel com navegação (prev/next)
- **ToolsSlider** — Cards deslizantes de ferramentas

### Dados de Tracking

- **TrackingTimeline** — Histórico visual de eventos do pacote
- **StatusBadge** — Pill com cor de status (em trânsito, entregue, falha)
- **DeliveryMap** — Mapa com rota do entregador
- **ETADisplay** — Previsão de entrega em destaque

### Social Proof

- **ClientLogoStrip** — Faixa horizontal com logos (Sephora, Vivara, Pandora, Track&Field etc.)
- **MetricHighlight** — Bloco com número + descrição (DNA Tecnológico, 100% Cobertura, 1M pacotes)
- **ReviewStars** — Estrelas de avaliação (`#FDBD27`)

---

## Do's and Don'ts

### ✅ Do's

- **Use o gradiente azul-cyan como assinatura** — O gradient header e hero são a identidade visual mais forte da Loggi. Mantenha a direção e as stops de cor
- **Priorize Montserrat Extrabold (800) para headings** — É o peso dominante que cria impacto e diferencia a marca
- **Use tokens semânticos v2** — `color-v2-primary`, `color-v2-on-surface` etc. adaptam-se a contextos light/dark
- **Mantenha feedback por cores dedicadas** — Verde para sucesso, amarelo para trânsito/alerta, vermelho para falha. Sempre com container colorido
- **Use border-radius conservador (2–8px)** — Transmite eficiência e precisão operacional
- **Respeite o dark navy para contextos operacionais** — `#06142C` mantém identidade azul mesmo no dark mode
- **Teste em condições adversas** — Entregadores usam o app em pleno sol, chuva, com tela suja — garanta contraste alto
- **Use containers com alpha para transparências** — `primaryContainerAlpha`, `secondaryAlpha` permitem sobreposição elegante
- **Mantenha a hierarquia tipográfica simples** — Extrabold para títulos, Regular para corpo, Medium para nav/labels

### ❌ Don'ts

- **Não substitua o gradiente por cor sólida no header** — O gradiente horizontal `#00BAFF → #006AFF` é a assinatura; cor flat perde a dinâmica de movimento
- **Não use fontes além de Montserrat** — O sistema é mono-família; não introduzir serifs, display faces ou fontes alternativas
- **Não misture tokens v1 e v2 no mesmo componente** — Migre totalmente para v2; coexistência é técnica, não intencional
- **Não use preto puro (#000000) como background dark** — O dark mode é navy profundo (`#06142C`), nunca preto — preserva identidade azul
- **Não reduza contraste do feedback** — Status de entrega é critical path; cores devem ter 4.5:1 mínimo contra o background
- **Não arredonde excessivamente** — A Loggi não é uma fintech "friendly"; border-radius > 16px só em contextos específicos (pills, search)
- **Não use sombras pesadas** — A elevação é comunicada por cor/opacity, não por box-shadows profundos
- **Não ignore o mobile** — 70%+ do uso é mobile (entregadores + consumidores rastreando). Desktop é secundário
- **Não coloque texto sobre gradientes sem overlay** — Use `backdrop-black` ou container semitransparente para garantir legibilidade

---

## Attribution

| Campo | Valor |
|-------|-------|
| Source | [loggi.com](https://loggi.com) |
| Design System | ELKE (interno) |
| Method | Public site CSS extraction (CSS custom properties, computed styles, DOM analysis) |
| Tokens extraídos | `:root` CSS variables (v1 + v2 token system) |
| Typography | Google Fonts — Montserrat (loaded via Next.js font optimization) |
| Date | 2026-07-05 |