JARVIS

Design System v1.0

Petrol Blue × Orange — Built for Sinapse Negócios Digitais

Colors

Petrol Blue — Primary

50#E2EEF3

100#B6D4E1

200#85B6CC

300#5496B3

400#30799A

500#145E80

600#104E6B

700#0C3F57

800#083144

900#052332

950#031820

Accent Orange — Action

50#FFF5EB

100#FFE5CC

200#FFCC99

300#FFB266

400#FF9933

500#FF8000

600#E67300

700#CC6600

800#995200

900#663700

Surfaces — Dark Mode

Primary#091318

Secondary#0E1B22

Tertiary#13232C

Hover#182E3A

Border#2A4556

Success

#10B981

Error

#EF4444

Warning

#FF8000

Info

#5496B3

Typography

Display
36px / 800

Jarvis Platform

Heading 1
28px / 700

Dashboard Overview

Heading 2
22px / 700

Gestão de Projetos

Heading 3
16px / 600

Detalhes da Tarefa

Body
14px / 400

Plataforma de gestão inteligente para lançamentos digitais. Controle tarefas, cronogramas e métricas com inteligência artificial integrada.

Small
12px / 500

Atualizado há 5 minutos · 3 tarefas pendentes

Caption
10px / 700
uppercase

Status do Projeto

Mono
JetBrains Mono
12px / 400

const API_URL = "https://jarvis.sinapse.pro/api"

Buttons

DEFAULT

SMALL

LARGE

Inputs

Nome do projeto

Descrição

Data de entrega

Responsável

Badges & Tags

● Em andamento ● Concluído ● Atrasado ● Planejado ● Urgente Design Copy Vídeo

Cards

Lançamento Pago #3

A Criança que Não Fala — Campanha de conversão para o curso da Dra. Karen Baldin.

● Em andamento

Workshop Rastreio TEA

Lançamento Pago #2 — Workshop de Rastreio do TEA em Bebês. 9 tarefas ativas.

● Concluído

14d

Imersão Presencial #4

Próximo evento presencial com a equipe. Produção de materiais e logística.

● 3 atrasadas

Table

Tarefa	Status	Responsável	Prazo
Criar landing page	● Em andamento	M Maria	28/06
Gravar reels	● Planejado	J João	30/06
Revisar copy de e-mails	● Concluído	G Giulia	24/06

Components

Sidebar

Avatars

Avatar Stack

Controls

Tarefa concluída

Tarefa pendente

Enviar notificação

Toggles

Modo escuro

Notificações

Toasts & Notifications

✅ Tarefa criada com sucesso!

❌ Erro ao salvar alterações

⚠️ 3 tarefas atrasadas

ℹ️ Deploy em andamento...

Phase Colors (Gantt)

Estratégia Conteúdo Design Aquecimento Lançamento Pós-venda Perpétuo Debriefing

Progress Bars

Projeto Karen78%

Projeto Natália100%

Projeto Lívia23%

Spacing Scale

4px — xs

8px — sm

12px — md

16px — lg

24px — xl

32px — 2xl

48px — 3xl

Border Radius

4px sm

8px md

12px lg

16px xl

full

Code

/* Jarvis CSS Variables */
:root {
  --petrol-500: #145E80;
  --accent-500: #FF8000;
  --font-sans: 'Inter', sans-serif;
  --radius-lg: 12px;
}
  

JARVIS

Design System v1.0 — Sinapse Negócios Digitais

Petrol Blue #145E80 × Accent Orange #FF8000 × Inter + JetBrains Mono