Design System
A fonte única de verdade para quem constrói produtos digitais com a Igma. Tokens, componentes e padrões visuais — tudo em um lugar.
O que é este Design System?
O Igma Design System centraliza todos os padrões visuais e de interação usados nos produtos digitais criados pela Igma. Ele serve como referência para designers, desenvolvedores humanos e IAs que trabalham em soluções sob a marca Igma.
Princípios de Design
Quatro valores que orientam cada decisão de produto — do tom de cinza de um border à hierarquia de uma headline.
Marca & Logo
A logomarca da Igma é o ativo de marca mais importante. Deve ser sempre aplicada com cuidado, respeito ao espaço de respiro e nos contextos aprovados abaixo.
Variações aprovadas
A logo Igma existe em dois formatos: logotipo completo (wordmark) e símbolo (ícone). Utilize sempre os arquivos originais, nunca recriar manualmente.
Espaço de respiro (clear space)
O espaço mínimo ao redor da logo deve ser equivalente à altura da letra "i" do logotipo. Nunca posicionar outros elementos dentro desta área de exclusão.
Área de exclusão (dashed) = altura do "i"
O que não fazer
- Alterar cores da logo
- Distorcer ou esticar
- Aplicar sombra ou efeito
- Usar sobre fundos com baixo contraste
- Recriar o logotipo manualmente
- Usar apenas os arquivos originais
- Respeitar o clear space
- Aplicar nas variações aprovadas
- Manter proporções originais
- Garantir contraste mínimo 4.5:1
Tamanhos mínimos
Tipografia
A Space Grotesk é a única fonte do sistema. Geométrica, moderna e extremamente legível — ela carrega a personalidade técnica e humana da Igma.
Família tipográfica
Pesos disponíveis
Escala tipográfica
Todas as medidas são em pixels. Use clamp() em títulos de destaque para responsividade fluida.
Import HTML
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet"> /* CSS aplicação */ body { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
Playfair Display
Fonte serifada de alto impacto para títulos editoriais, citações e momentos de destaque. Complementa a Space Grotesk sem competir com ela — usadas juntas criam contraste entre razão e emoção.
Quando usar
- Headlines de seção hero (impacto máximo)
- Frases de efeito e citações de clientes
- Pull quotes em artigos e cases
- Títulos editoriais em propostas e reports
- Momentos únicos de destaque por página
- Interface de produto (navs, labels, botões)
- Textos corridos ou body copy
- Títulos de componentes ou cards
- Múltiplas ocorrências na mesma tela
- Tamanhos abaixo de 24px
Display Hero — título de impacto
Pesos Bold a Black (700–900). Combine texto regular com itálico colorido para criar ritmo e hierarquia visual sem precisar de cores de fundo adicionais.
Para de Ser Negócio
/* HTML */ <h1 class="playfair-display-block"> Quando o Software<br> <em>Para de</em> Ser Negócio </h1> /* CSS */ .playfair-display-block { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.02em; color: var(--igma-white); } .playfair-display-block em { font-style: italic; color: var(--igma-red); }
Pesos e estilos disponíveis
Combinações aprovadas
Playfair Display sempre acompanhada de Space Grotesk no mesmo layout. A serifada traz emoção e impacto; a grotesca traz clareza e estrutura.
desde o primeiro sprint.
↑ Combinação 1: Eyebrow em Space Grotesk · Headline em Playfair · Body e botões em Space Grotesk
↑ Combinação 2: Citação em Playfair italic · Atribuição em Space Grotesk
falam por si.
↑ Combinação 3: Seção em grid · Título em Playfair · Texto em Space Grotesk
Escala de tamanhos recomendada
Import HTML
/* Adicione ao <head> — junto com Space Grotesk */ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700 &family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900 &display=swap" rel="stylesheet"> /* CSS custom property */ :root { --font: 'Space Grotesk', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; } /* Aplicação */ .headline-editorial { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } /* Itálico colorido (acento Igma Red) */ .headline-editorial em { font-style: italic; color: var(--igma-red); }
Regras de convivência entre fontes
Cores
O sistema de cores da Igma é construído sobre um vermelho de marca forte (#FF462E), preto editorial e uma escala de cinzas funcionais. A paleta é intencional e restrita.
Cores da marca
Escala de cinzas
Cores de feedback
Contrastes e acessibilidade
Ícones
A Igma usa a biblioteca Lucide Icons como padrão. Ícones de linha fina, consistentes e altamente legíveis — alinhados ao caráter técnico e limpo da marca.
Biblioteca padrão
Exemplos de uso
Regras de uso
- Usar sempre
currentColorpara herdar a cor do contexto - stroke-width: 1.5px padrão
- Tamanhos: 16px, 20px ou 24px
- Ícone acompanhado de label textual quando possível
- Misturar diferentes estilos de ícone (outline + filled)
- Usar ícones menores que 16px
- Usar ícone como único indicador de ação crítica
- Ícones com stroke-width diferente de 1.5
Botões
Botões são a principal forma de ação em interfaces Igma. Hierarquia clara: Primary para ação principal, Secondary para ação de suporte, Ghost para ações terciárias.
Variantes
Botões com ícone
Tokens CSS
/* Variante Primary */ .btn-primary { background: var(--igma-red); border-color: var(--igma-red); color: var(--igma-white); } .btn-primary:hover { background: var(--igma-red-dark); transform: translateY(-1px); } /* Tamanhos */ .btn-md { padding: 10px 20px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-lg); }
Inputs
Campos de formulário limpos, com estados bem definidos. O foco usa um ring sutil em preto — consistente com a identidade editorial da Igma.
Estados
Checkbox
Controles de seleção customizados e acessíveis. O estado marcado usa fundo preto por padrão, com variante em vermelho para contextos de destaque.
Variantes
Cards de Valor
Cards para exibir métricas, KPIs e dados resumidos. Três variantes: Light (padrão), Dark e Red (destaque de marca).
Variantes
Tags
Tags e chips para categorização, filtros e estados. Sempre em pill shape com dot opcional para indicadores de status.
Variantes de cores
Com dot (indicador)
Status
Indicadores de status em linha com dot colorido e glow sutil. Usados em tabelas, listas e dashboards para comunicar estado de forma imediata.
Variantes
Accordion
Componente de expansão para FAQs, configurações e conteúdo agrupado. Animação suave com max-height transition.
Exemplo interativo
:root. Todas as variáveis seguem o padrão --igma-[categoria]-[valor]. Nunca use valores hardcoded — sempre referencie os tokens.
Header
Header fixo com fundo preto semitransparente e blur. Três zonas: logo, navegação central e ações à direita.
Especificações
Links
Variantes
Linhas / Dividers
Variantes
Padrão .divider
Espessa .divider-thick
Vermelha .divider-red
Tracejada .divider-dashed
Com texto .divider-text
Totais
Componente de resumo financeiro. Usado em checkouts, propostas e resumos de investimento. O total final usa o vermelho Igma para dar peso visual.
Exemplo de proposta
Cheat Sheet
Referência rápida de todos os tokens visuais do sistema. Copie e use diretamente no seu código.
Cores
| Token | Valor | Uso |
|---|---|---|
--igma-red | #FF462E | Cor primária de marca, CTAs, destaques |
--igma-red-dark | #CC3520 | Hover de elementos vermelhos |
--igma-red-light | #FF6E5A | Links ativos em fundo escuro |
--igma-red-subtle | #FFF0EE | Background de tags e badges vermelhos |
--igma-black | #0A0A0A | Textos, headers, backgrounds escuros |
--igma-white | #FFFFFF | Backgrounds claros, textos sobre escuro |
--igma-gray-100 | #F5F5F3 | Background de seções alternadas |
--igma-gray-200 | #E8E8E4 | Borders padrão |
--igma-gray-400 | #9A9A94 | Placeholders, ícones inativos |
--igma-gray-600 | #555550 | Textos secundários, descrições |
--igma-success | #1A7A4A | Estados positivos |
--igma-warning | #C97C00 | Alertas e avisos |
--igma-danger | #CC2222 | Erros e ações destrutivas |
--igma-info | #1A5AAA | Informativos e loading |
Tipografia
| Token | Valor | Uso |
|---|---|---|
--fs-5xl | 64px | Display / Hero giant |
--fs-4xl | 48px | H1 principal |
--fs-3xl | 36px | H2 seção |
--fs-2xl | 28px | H3 subseção |
--fs-xl | 22px | H4 / Títulos de card |
--fs-lg | 18px | Texto de lead / destaque |
--fs-md | 16px | Corpo principal |
--fs-base | 14px | UI padrão, labels, secundário |
--fs-sm | 12px | Captions, metadados |
--fs-xs | 11px | Eyebrows, tags micro |
--fw-light | 300 | Textos decorativos muito grandes |
--fw-regular | 400 | Corpo de texto |
--fw-medium | 500 | Labels, navegação |
--fw-semibold | 600 | Botões, subtítulos |
--fw-bold | 700 | Títulos, destaques |
Espaçamento & Raios
| Token | Valor | Uso |
|---|---|---|
--radius-sm | 4px | Tags XS, checkboxes, badges |
--radius-md | 8px | Botões, inputs, menus |
--radius-lg | 12px | Cards, modals, blocos |
--radius-xl | 16px | Painéis, seções destacadas |
--radius-full | 9999px | Pills, tags, avatares redondos |
Tokens SCSS
Copie os tokens abaixo para o seu arquivo de variáveis SCSS ou como CSS custom properties no :root do seu projeto.
CSS Custom Properties (recomendado)
/* ───────────────────────────────────────── IGMA DESIGN SYSTEM — Tokens v2.0 Copie para o :root do seu projeto ───────────────────────────────────────── */ :root { /* Brand Colors */ --igma-red: #FF462E; --igma-red-dark: #CC3520; --igma-red-light: #FF6E5A; --igma-red-subtle: #FFF0EE; --igma-black: #0A0A0A; --igma-white: #FFFFFF; /* Gray Scale */ --igma-gray-50: #FAFAF8; --igma-gray-100: #F5F5F3; --igma-gray-200: #E8E8E4; --igma-gray-300: #D4D4CF; --igma-gray-400: #9A9A94; --igma-gray-500: #737370; --igma-gray-600: #555550; --igma-gray-700: #3A3A37; --igma-gray-800: #1F1F1D; --igma-gray-900: #0A0A0A; /* Feedback */ --igma-success: #1A7A4A; --igma-success-light: #E6F5EE; --igma-warning: #C97C00; --igma-warning-light: #FFF8E6; --igma-danger: #CC2222; --igma-danger-light: #FDEAEA; --igma-info: #1A5AAA; --igma-info-light: #E8F0FA; /* Typography */ --font: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --fs-5xl: 64px; /* Spacing & Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; }
SCSS Variables
// ───────────────────────────────────────── // IGMA DS — SCSS Variables // ───────────────────────────────────────── // Brand $igma-red: #FF462E; $igma-red-dark: #CC3520; $igma-red-light: #FF6E5A; $igma-red-subtle: #FFF0EE; $igma-black: #0A0A0A; $igma-white: #FFFFFF; // Grays $gray: ( 50: #FAFAF8, 100: #F5F5F3, 200: #E8E8E4, 300: #D4D4CF, 400: #9A9A94, 500: #737370, 600: #555550, 700: #3A3A37, 800: #1F1F1D, ); // Typography $font-family: 'Space Grotesk', system-ui, sans-serif; $font-display: 'Playfair Display', Georgia, serif; $fw-light: 300; $fw-regular: 400; $fw-medium: 500; $fw-semibold: 600; $fw-bold: 700; // Font scale $fs: ( xs: 11px, sm: 12px, base: 14px, md: 16px, lg: 18px, xl: 22px, 2xl: 28px, 3xl: 36px, 4xl: 48px, 5xl: 64px, ); // Radii $radius: ( sm: 4px, md: 8px, lg: 12px, xl: 16px, full: 9999px, ); // Mixins úteis @mixin igma-btn($variant: primary) { font-family: $font-family; font-weight: $fw-semibold; border-radius: map-get($radius, md); transition: all 0.18s ease; cursor: pointer; @if $variant == primary { background: $igma-red; color: $igma-white; &:hover { background: $igma-red-dark; } } @if $variant == secondary { background: $igma-black; color: $igma-white; } } // Uso: @include igma-btn(primary);