Design System - SellSync¶

Versão: 1.0.0 Última atualização: 15 de dezembro de 2025 Domínio: https://sellsync.ai

📋 Índice¶

Brand Identity
Color Palette
Typography
Spacing & Layout
Components
Icons
Illustrations
Motion & Animation
Accessibility
Implementation (Tailwind)

Brand Identity¶

Logo¶

Versões: - Primary (Horizontal): Logo + texto "SellSync" - Secondary (Icon Only): Apenas símbolo circular com seta - Monochrome: Versão toda em navy (para backgrounds coloridos)

Símbolo: - Círculo representando sincronização/continuidade - Seta/raio crescente simbolizando crescimento e velocidade - Combinação transmite: automação + crescimento de vendas

Clear Space: - Mínimo de 20px ao redor do logo em todos os lados - Não colocar elementos dentro do clear space

Tamanho Mínimo: - Logo horizontal: 120px de largura - Icon only: 32px × 32px

Uso Incorreto: - ❌ Não alterar cores - ❌ Não distorcer proporções - ❌ Não adicionar sombras ou efeitos - ❌ Não usar em backgrounds de baixo contraste

Color Palette¶

Primary Colors¶

Navy Blue (Brand Primary)¶

Cor principal da marca (texto, headers, elementos importantes)

HEX: #1E3A5F
RGB: rgb(30, 58, 95)
HSL: hsl(213, 52%, 25%)
Tailwind: primary-900

Uso: - Headers (h1, h2, h3) - Botões primários (background) - Navegação ativa - Texto de destaque

Vibrant Orange (Brand Accent)¶

Cor de destaque/ação (CTAs, links, highlights)

HEX: #FF6B35
RGB: rgb(255, 107, 53)
HSL: hsl(16, 100%, 60%)
Tailwind: accent-500

Uso: - CTAs principais ("Começar Teste Grátis") - Links hover - Badges de novo/destaque - Ícones de sucesso/ação

Secondary Colors¶

Light Blue (Secondary)¶

HEX: #4A90E2
RGB: rgb(74, 144, 226)
Tailwind: blue-500

Uso: - Links não visitados - Botões secundários - Informational alerts

Success Green¶

HEX: #10B981
RGB: rgb(16, 185, 129)
Tailwind: green-500

Uso: - Mensagens de sucesso - Status "ativo", "conectado" - Checkmarks, badges de sucesso

Warning Yellow¶

HEX: #F59E0B
RGB: rgb(245, 158, 11)
Tailwind: yellow-500

Uso: - Avisos (não críticos) - Status "pendente" - Alertas de atenção

Error Red¶

HEX: #EF4444
RGB: rgb(239, 68, 68)
Tailwind: red-500

Uso: - Mensagens de erro - Status "falha", "erro" - Validação de formulários (erro)

Neutral Colors (Grays)¶

/* Backgrounds */
--gray-50:  #F9FAFB   /* Lightest background */
--gray-100: #F3F4F6   /* Card background */
--gray-200: #E5E7EB   /* Borders, dividers */

/* Text */
--gray-600: #4B5563   /* Secondary text */
--gray-700: #374151   /* Primary text */
--gray-900: #111827   /* Headings */

Color Usage Guidelines¶

Hierarquia de Atenção: 1. Orange (Accent): Ações primárias (CTAs) 2. Navy (Primary): Conteúdo principal, navegação 3. Blue (Secondary): Ações secundárias, links 4. Green/Yellow/Red: Status e feedback

Contraste: - Texto em navy (#1E3A5F) sobre branco: WCAG AAA (13.2:1) - Texto em branco sobre orange (#FF6B35): WCAG AA (4.8:1) - Texto em branco sobre navy: WCAG AAA (12.6:1)

Typography¶

Font Families¶

Primary (Sans-Serif):

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Alternativa: Poppins, DM Sans

Monospace (Código):

font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;

Type Scale¶

Headings¶

/* H1 - Hero Titles */
font-size: 48px (3rem)
font-weight: 700 (bold)
line-height: 1.2
letter-spacing: -0.02em
color: #1E3A5F (navy)

/* H2 - Section Titles */
font-size: 36px (2.25rem)
font-weight: 700
line-height: 1.3
letter-spacing: -0.01em
color: #1E3A5F

/* H3 - Subsection Titles */
font-size: 24px (1.5rem)
font-weight: 600 (semibold)
line-height: 1.4
color: #1E3A5F

/* H4 - Card Headers */
font-size: 20px (1.25rem)
font-weight: 600
line-height: 1.5
color: #374151 (gray-700)

Body Text¶

/* Body Large */
font-size: 18px (1.125rem)
font-weight: 400 (regular)
line-height: 1.6
color: #374151

/* Body Regular (Default) */
font-size: 16px (1rem)
font-weight: 400
line-height: 1.5
color: #4B5563 (gray-600)

/* Body Small */
font-size: 14px (0.875rem)
font-weight: 400
line-height: 1.5
color: #4B5563

/* Caption */
font-size: 12px (0.75rem)
font-weight: 400
line-height: 1.4
color: #6B7280 (gray-500)

Font Weights¶

--font-regular: 400
--font-medium: 500
--font-semibold: 600
--font-bold: 700

Uso: - Regular (400): Corpo de texto - Medium (500): Botões, labels - Semibold (600): Headings menores (H3, H4), badges - Bold (700): Headings principais (H1, H2), CTAs

Spacing & Layout¶

Spacing Scale (8px base)¶

--space-1: 4px   (0.25rem)
--space-2: 8px   (0.5rem)
--space-3: 12px  (0.75rem)
--space-4: 16px  (1rem)
--space-5: 20px  (1.25rem)
--space-6: 24px  (1.5rem)
--space-8: 32px  (2rem)
--space-10: 40px (2.5rem)
--space-12: 48px (3rem)
--space-16: 64px (4rem)
--space-20: 80px (5rem)

Uso: - 4px: Espaçamento mínimo entre elementos relacionados - 8px: Padding interno de botões pequenos - 16px: Padding padrão de cards, inputs - 24px: Gaps entre sections - 48px: Margin entre seções grandes

Layout Grid¶

Desktop (>= 1024px): - 12 colunas - Gutter: 24px - Max-width: 1280px - Margins laterais: 48px

Tablet (768px - 1023px): - 8 colunas - Gutter: 16px - Margins laterais: 32px

Mobile (< 768px): - 4 colunas - Gutter: 16px - Margins laterais: 16px

Border Radius¶

--radius-sm: 4px   /* Inputs, small buttons */
--radius-md: 8px   /* Cards, medium buttons */
--radius-lg: 12px  /* Modals, large cards */
--radius-xl: 16px  /* Hero sections */
--radius-full: 9999px /* Pills, avatars */

Shadows¶

/* Elevation 1 - Subtle lift (cards) */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

/* Elevation 2 - Medium lift (dropdowns) */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Elevation 3 - High lift (modals) */
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

/* Elevation 4 - Very high (tooltips) */
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);

Components¶

Buttons¶

Primary Button (CTA)¶

/* Default State */
background: #FF6B35 (orange)
color: #FFFFFF
padding: 12px 24px
border-radius: 8px
font-weight: 600
font-size: 16px
box-shadow: 0 2px 4px rgba(255, 107, 53, 0.2)

/* Hover */
background: #FF5722 (darken 10%)
box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3)
transform: translateY(-1px)

/* Active/Pressed */
background: #E64A19 (darken 15%)
transform: translateY(0)

/* Disabled */
background: #FED7AA (orange-200)
color: #92400E
cursor: not-allowed

Secondary Button¶

background: transparent
color: #1E3A5F (navy)
border: 2px solid #1E3A5F
padding: 12px 24px
border-radius: 8px

/* Hover */
background: #F3F4F6 (gray-100)
border-color: #FF6B35 (orange)
color: #FF6B35

Ghost Button¶

background: transparent
color: #4B5563 (gray-600)
padding: 12px 24px

/* Hover */
background: #F3F4F6 (gray-100)
color: #1E3A5F (navy)

Input Fields¶

/* Default */
border: 1px solid #E5E7EB (gray-200)
border-radius: 8px
padding: 12px 16px
font-size: 16px
color: #374151 (gray-700)
background: #FFFFFF

/* Focus */
border-color: #FF6B35 (orange)
outline: 2px solid rgba(255, 107, 53, 0.1)

/* Error */
border-color: #EF4444 (red)
outline: 2px solid rgba(239, 68, 68, 0.1)

/* Disabled */
background: #F9FAFB (gray-50)
color: #9CA3AF (gray-400)
cursor: not-allowed

Cards¶

background: #FFFFFF
border: 1px solid #E5E7EB (gray-200)
border-radius: 12px
padding: 24px
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)

/* Hover (interactive cards) */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
border-color: #D1D5DB (gray-300)
transform: translateY(-2px)
transition: all 0.2s ease

Badges¶

Status Badge (Success)¶

background: #D1FAE5 (green-100)
color: #065F46 (green-800)
padding: 4px 12px
border-radius: 9999px (pill)
font-size: 12px
font-weight: 600

Variants: - Warning: bg-yellow-100, text-yellow-800 - Error: bg-red-100, text-red-800 - Info: bg-blue-100, text-blue-800

Modals¶

background: #FFFFFF
border-radius: 16px
padding: 32px
max-width: 600px
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15)

/* Overlay */
background: rgba(17, 24, 39, 0.5) /* gray-900 50% opacity */
backdrop-filter: blur(4px)

Tooltips¶

background: #1E3A5F (navy)
color: #FFFFFF
padding: 8px 12px
border-radius: 8px
font-size: 14px
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)

/* Arrow */
border-top: 6px solid #1E3A5F

Icons¶

Icon Library¶

Primary: Lucide Icons (open-source, 1000+ icons) Alternativa: Heroicons, Phosphor Icons

Icon Sizes¶

--icon-xs: 16px
--icon-sm: 20px
--icon-md: 24px
--icon-lg: 32px
--icon-xl: 48px

Uso: - 16px: Inline com texto pequeno (12-14px) - 20px: Botões, inputs, badges - 24px: Navegação, cards - 32px: Hero sections, ilustrações - 48px: Empty states, onboarding

Icon Style¶

Stroke width: 2px (padrão)
Rounded corners: Sim (default)
Fill: Apenas para ícones sólidos (ex: checkmark preenchido)

Illustrations¶

Style Guidelines¶

Estilo: - Flat design (sem gradientes complexos) - 2-3 cores máximo (navy + orange + accent) - Linhas arredondadas, friendly - Minimalista, clean

Usos: - Empty states ("Nenhuma pergunta ainda") - Onboarding screens - Error pages (404, 500) - Marketing (landing page)

Fontes de Ilustrações: - unDraw (customizar cores para navy + orange) - Storyset - Ilustrações customizadas (contratar designer)

Motion & Animation¶

Principles¶

Purposeful: Animações devem ter propósito (feedback, guiar atenção)
Subtle: Não distrair (duração < 300ms)
Consistent: Mesma timing function em toda a app

Timing¶

/* Fast - UI Feedback */
transition: all 0.15s ease-out

/* Standard - Modals, Dropdowns */
transition: all 0.2s ease-in-out

/* Slow - Page Transitions */
transition: all 0.3s ease-in-out

Easing Functions¶

--ease-out: cubic-bezier(0.33, 1, 0.68, 1)     /* Elementos entrando */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1) /* Elementos se movendo */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) /* Bounce suave */

Common Animations¶

Fade In¶

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

animation: fadeIn 0.2s ease-out;

Slide Up¶

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

animation: slideUp 0.3s ease-out;

Scale (Button Hover)¶

transition: transform 0.15s ease-out;

/* Hover */
transform: scale(1.02);

Accessibility¶

Contrast Ratios (WCAG 2.1)¶

AA Standard (Minimum): - Normal text (16px): 4.5:1 - Large text (24px+): 3:1

AAA Standard (Enhanced): - Normal text: 7:1 - Large text: 4.5:1

SellSync Compliance: - Navy (#1E3A5F) on White: 13.2:1 (AAA ✅) - White on Orange (#FF6B35): 4.8:1 (AA ✅) - Gray-600 on White: 7.4:1 (AAA ✅)

Focus States¶

/* Keyboard Focus (outline) */
outline: 2px solid #FF6B35 (orange)
outline-offset: 2px

/* Visível para keyboard users, escondido para mouse */
:focus-visible {
  outline: 2px solid #FF6B35;
}

Screen Readers¶

Usar aria-label em botões sem texto
alt text em todas as imagens
Semantic HTML (<nav>, <main>, <article>)
Skip to content link

Implementation (Tailwind)¶

Configuração Tailwind¶

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F0F4F8',
          100: '#D9E2EC',
          500: '#1E3A5F', // Navy
          600: '#183152',
          900: '#0F1F38',
        },
        accent: {
          50: '#FFF4ED',
          100: '#FFE4D1',
          500: '#FF6B35', // Orange
          600: '#FF5722',
          700: '#E64A19',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        'xl': '12px',
        '2xl': '16px',
      },
      boxShadow: {
        'soft': '0 2px 8px rgba(0, 0, 0, 0.08)',
        'medium': '0 4px 12px rgba(0, 0, 0, 0.1)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Classe Utilities Customizadas¶

/* Button Primary */
.btn-primary {
  @apply bg-accent-500 text-white px-6 py-3 rounded-lg font-semibold;
  @apply hover:bg-accent-600 hover:shadow-lg;
  @apply transition-all duration-200 ease-out;
}

/* Card */
.card {
  @apply bg-white border border-gray-200 rounded-xl p-6;
  @apply shadow-soft hover:shadow-medium;
  @apply transition-shadow duration-200;
}

/* Badge */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full;
  @apply text-xs font-semibold;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

Design Tokens (CSS Variables)¶

:root {
  /* Colors */
  --color-primary: #1E3A5F;
  --color-accent: #FF6B35;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Spacing */
  --space-unit: 8px;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

/* Dark Mode (Future) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #FFFFFF;
    --color-bg: #111827;
    --color-text: #F9FAFB;
  }
}

Changelog¶

v1.0.0 (15/12/2025)¶

Design system inicial baseado na logo oficial
Paleta de cores definida (Navy + Orange)
Tipografia (Inter)
Componentes base (buttons, inputs, cards)
Tokens Tailwind configurados

Recursos¶

Figma: - SellSync Design System (criar)

Storybook: - Component Library (deploy futuro)

Downloads: - Logo Assets (SVG, PNG) - Tailwind Config

Última atualização: 15 de dezembro de 2025 Versão: 1.0.0 Mantido por: Design Team @ SellSync

Dúvidas? design@sellsync.ai