Design System

nimble.

Um sistema de design construído para velocidade, clareza e execução. Produtos em dias, não semanas.

Syne Font Low-code First AI Ready
Fundação

Princípios

O sistema inteiro é construído sobre três pilares. Se algo viola esses princípios, está errado.

01
Velocidade
Todo componente deve ser implementável em minutos. Sem ambiguidade, sem configuração excessiva. Pronto para usar.
02
Clareza
Uma hierarquia visual óbvia. O usuário sabe onde está, o que fazer e o que acontecerá. Zero confusão.
03
Execução
Perfeição entregue é melhor que perfeição imaginada. Consistência > criatividade solta. Padrões existem para serem seguidos.
04
Leveza
Espaço em branco é um elemento de design. Menos elementos, mais impacto. Se pode ser removido sem perda — remova.
Fundação

Paleta de Cores

Cinco famílias de cor, cada uma com escala completa de 50 a 900. Coral é a voz da marca. Verde é confirmação e ação. Roxo é inteligência.

PRIMARY
Coral
#E57A5A
SECONDARY
Verde
#B4D19C
ACCENT
Roxo
#B4A7D6
DARK
Navy
#0C1738
BASE
Creme
#FAF5F5
Coral — Primary
Verde — Secondary
Roxo — Accent / AI
Navy — Dark
Fundação

Tipografia

Syne. Geométrica, moderna, com personalidade forte. Funciona igualmente bem em títulos enormes e texto de corpo.

Syne · A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
O futuro não sabe esperar.
0 1 2 3 4 5 6 7 8 9 · Regular · Medium · SemiBold · Bold · ExtraBold
Display
72px / 800 / -0.03em
Nimble
H1
56px / 800 / -0.03em
Produto Digital
H2
40px / 700 / -0.02em
Low-code + AI
H3
32px / 700 / -0.01em
Entrega Acelerada
H4
24px / 600 / -0.01em
Desenvolvimento Ágil
H5
20px / 600
Ferramentas Modernas
H6
17px / 600
Componentes Reutilizáveis
Body
15px / 400 / 1.7
Combinamos o que há de mais moderno para que sua ideia se transforme em um produto digital impactante, rápido.
Small
13px / 400 / 1.7
Texto auxiliar, metadados, labels secundários
Label / Eyebrow
11px / 700 / 0.1em
Sobre a Nimble
Fundação

Espaçamento

Escala baseada em múltiplos de 4px. Use os tokens, nunca valores arbitrários.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-8 · 32px
--space-10 · 40px
--space-12 · 48px
--space-16 · 64px
--space-20 · 80px
--space-24 · 96px
Fundação

Border Radius

none · 0
sm · 4px
md · 8px
lg · 12px
xl · 16px
2xl · 24px
full · pill
Fundação

Sombras

sm
md
lg
xl
glow coral
glow green
glow purple
Fundação

Motion

Animações devem ser rápidas e propositais. Hover nos cards para ver os exemplos.

Durações
fast · 100ms
normal · 200ms
slow · 400ms
Translate
translateX(12px)
Scale
scale(1.2) · spring
Rotate
rotate(45deg)
Fade
opacity(0.3)
Fundação

Grid System

12 colunas, gap 16px. Breakpoints: sm(480), md(768), lg(1024), xl(1280).

12 colunas
Exemplos de layout
6
6
4
4
4
8
4
Componentes

Botões

Hierarquia clara: Primary (Coral) para ação principal, Secondary (Verde) para confirmação, Ghost para ações terciárias.

Variantes
Tamanhos
Estados
Componentes

Inputs

Obrigatório
Email inválido
URL válida ✓
Apenas leitura
Componentes

Cards

N
Projeto

Pacaembu Arena

Site de alto volume, lançado em 3 meses com alto nível de interações e referência em múltiplos canais.

10 semanas Framer + Figma
→
Outsourcing

Time sob demanda

Acesso imediato a especialistas em React, Python, LLM e Low-code. Sem contrato de longo prazo.

Início em 48h Alta performance
✦
IA Integrada

Produtos com IA

Integramos LLMs diretamente nas soluções para acelerar tanto o desenvolvimento quanto a experiência do usuário.

Low-code + AI ● Disponível
Componentes

Alerts

ℹ
Informação
Seu projeto foi criado e está aguardando o kick-off meeting para início.
✓
Entrega realizada
O site foi lançado com sucesso em produção. Todas as validações passaram.
⚠
Atenção
O prazo de validação expira em 48 horas. Revise as entregas pendentes.
✕
Erro na integração
Não foi possível conectar com a API externa. Verifique as credenciais.
Componentes

Tags & Chips

Coral Verde Roxo Navy Neutro Dark Low-code ✓ Entregue IA Em progresso Framer Figma Make
Componentes

Loaders

Spinner
Dots
Progress bar
Pulse
IA · Diferencial Nimble

Chat Components

Componentes específicos para interfaces de IA, um diferencial central da Nimble.

Nimble AI
claude-sonnet · streaming
N
Olá! Sou o assistente da Nimble. Como posso te ajudar a construir seu produto digital hoje?
U
Preciso de um site para minha marca em 3 semanas.
N
Código

Design Tokens JSON

// tokens.json — Nimble Design System v1.0
{
  "color": {
    "coral": {
      "50": "#FDF3F0",
      "100": "#FAE2DA",
      "300": "#EDA082",
      "400": "#E57A5A", // ← primary
      "500": "#D96040",
      "700": "#8C3420"
    },
    "green": {
      "300": "#B4D19C", // ← secondary
      "500": "#82AD64"
    },
    "purple": {
      "400": "#B4A7D6" // ← accent/AI
    },
    "navy": {
      "800": "#0C1738" // ← dark
    },
    "base": {
      "100": "#FAF5F5" // ← background
    }
  },
  "spacing": {
    "1": "4px", "2": "8px", "4": "16px",
    "6": "24px", "8": "32px", "12": "48px",
    "16": "64px", "24": "96px"
  },
  "radius": {
    "sm": "4px", "md": "8px",
    "lg": "12px", "xl": "16px",
    "2xl": "24px", "full": "9999px"
  },
  "typography": {
    "fontFamily": "'Syne', sans-serif",
    "sizes": {
      "xs": "11px", "sm": "13px",
      "base": "15px", "xl": "24px",
      "4xl": "56px", "5xl": "72px"
    }
  }
}
Código

Tailwind Config

// tailwind.config.js
const nimbleTokens = require('./tokens.json');

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Syne', 'sans-serif'],
        display: ['Syne', 'sans-serif'],
      },
      colors: {
        coral: {
          50:  '#FDF3F0', 100: '#FAE2DA',
          300: '#EDA082', 400: '#E57A5A', /* primary */
          500: '#D96040', 600: '#B84830', 700: '#8C3420'
        },
        green: {
          50:  '#F4FAF0', 100: '#E4F2D8',
          300: '#B4D19C', /* secondary */
          500: '#82AD64', 700: '#4A6835'
        },
        purple: {
          100: '#EAE6F6', 400: '#B4A7D6', /* accent */
          700: '#5C4E98'
        },
        navy: {
          700: '#0C1F50', 800: '#0C1738', /* dark */
          900: '#06102A'
        },
        base: {
          100: '#FAF5F5', 200: '#F0E8E8',
          300: '#E0D4D4', 500: '#B09898'
        }
      },
      spacing: {
        '1': '4px', '2': '8px', '3': '12px',
        '4': '16px', '6': '24px', '8': '32px',
        '12': '48px', '16': '64px', '24': '96px'
      },
      borderRadius: {
        sm: '4px', md: '8px',   lg: '12px',
        xl: '16px', '2xl': '24px', full: '9999px'
      },
      boxShadow: {
        sm:  '0 1px 2px rgba(12,23,56,0.06)',
        md:  '0 4px 12px rgba(12,23,56,0.08)',
        lg:  '0 8px 24px rgba(12,23,56,0.12)',
        xl:  '0 16px 48px rgba(12,23,56,0.16)',
        'glow-coral':  '0 0 24px rgba(229,122,90,0.32)',
        'glow-green':  '0 0 24px rgba(180,209,156,0.40)',
        'glow-purple': '0 0 24px rgba(180,167,214,0.36)',
      },
      transitionTimingFunction: {
        spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        smooth: 'cubic-bezier(0.16, 1, 0.3, 1)'
      },
      transitionDuration: {
        fast: '100ms', normal: '200ms',
        slow: '400ms'
      }
    }
  }
};
Guidelines

Guia de Uso de Cores

Cada cor tem um papel específico. Usar fora do papel cria ruído visual.

🟠
Coral: ação e urgência
Botão primário, CTA, highlights de preço, labels de seção, ícones de alert de ação. Nunca use para texto de corpo.
🟢
Verde: confirmação e sucesso
Botão secondary, estados de sucesso, tags de entregue, indicadores de status ativo. Excelente em fundos dark.
🟣
Roxo: inteligência e AI
Qualquer coisa relacionada a IA, feature de terceiro passo, accent em dark backgrounds. Sutil, nunca dominante.
🔵
Navy: autoridade e base
Navbars, sidebars, cards dark, text primário. O fundo navy cria contraste máximo. Não use como accent.
⚪
Base: respiro e neutralidade
Background de página, superfícies de cards, bordas. Nunca use como elemento de destaque. É literalmente o silêncio.
🔴
Vermelho: erro e destructivo
Apenas para erros, ações destrutivas, validação de formulário. Nunca para branding ou features regulares.
Leis do Design System
01 Se é complexo, está errado. Se é genérico, está fraco. Se pode ser removido sem perda — remova.
02 Todo componente tem estado: default, hover, active, disabled, focus. Sem exceção.
03 Use tokens, nunca hex hardcoded. O token é o contrato. Se muda o token, muda tudo.
04 Velocidade > perfeição. Consistência > criatividade solta. Um produto entregue é infinitamente melhor que um perfeito no Figma.
O futuro não sabe esperar.
Nimble Design System · Uma empresa do Grupo Igma
DS-1.0.0 · Syne · 5 cores · 18 componentes · 2025