Design System

Sistema visual do app de estoque, derivado do manual da marca Digital Senses. Personalidade: parceira, inovadora, criativa, moderna, amigável e inteligente — arquétipo cuidador: clara, calma e confiável, sem ruído.

Cores

Três cores da marca fazem 90% da interface. Apoio (índigo e rosa) vem dos gradientes dos elementos gráficos e é usado só em gráficos e no hero.

Deep#1A0047 · --ds-deep
texto, sidebar, logo

Violet#9044F5 · --ds-violet
ação primária, símbolo

Ghost#F8F8FF · --ds-ghost
fundo, logo invertido

Violet 700#6E1FD6
texto de destaque (AA)

Violet 300#B98BFF
destaque no escuro

Violet 100#EFE6FE
fundos de destaque

Indigo#6366E8 · --c2
série de gráfico

Pink#E879B9 · --c3
série de gráfico

Estados

Sucesso · enviadoAtenção · pendenteErro · saídaInfo · transferênciaMarca · equipamentoNeutro

Tipografia

DM Sans, a família da marca, em toda a interface (títulos e texto). Dados técnicos (S/N, MAC, códigos) usam monoespaçada.

Display 44Soluções em telas digitais

Título 32Dashboard

Seção 20Nós cuidamos de tudo

Base 14Equipamentos por S/N ou MAC e materiais por quantidade.

Rótulo 11.5Movimentações por dia

Mono 12.511154825001006481 · 3C:E5:B4:26:07:7C

Logo

Use sempre os SVGs oficiais em /brand. Fundo claro: versão principal. Fundo escuro ou violeta: invertida. Nunca recolorir, distorcer ou aplicar sobre fundos de baixo contraste.

logo-principal.svg — fundos claros

logo-invertido.svg — fundos escuros

simbolo.svg — favicon, avatar

logo-compacto.svg — DGSNS, espaços curtos

Forma e elevação

Cantos arredondados ecoam o símbolo: 8px controles · 12px cartões · 16px painéis e modais. Sombras curtas e arroxeadas; no tema escuro, bordas no lugar de sombra.

8 · sm

12 · md

16 · lg

Componentes

Botões

Formulário

Nome baseTipo

Nome composto que vai para o Bitrix0159 - PLAYER AQUÁRIO STV3000 PLUS | SN 11154825001006481

Cartão de indicador

179

Equipamentos em estoque

173 cadastros

A enviar ao Bitrix

abrir a fila →

Tabela e aviso

Avisos informativos usam o violeta suave da marca.

Código	Produto	Total
MAT-057	CABO DC DSHOW	5
EQP-156	0159 - PLAYER AQUÁRIO STV3000 PLUS \| SN …	1

Hero com gradiente da marca

Dashboard

Elemento gráfico do manual, recriado em CSS (violeta · índigo · rosa sobre branco gelado)

Uso

Faça

Um único botão primário por tela · fundo gelado e texto deep · violeta só para ação e destaque · estados com cor e texto.

Evite

Cores fora da paleta · violeta como cor de texto longo sobre claro (use Violet 700) · gradiente atrás de tabelas · logo recolorido.

<link rel="stylesheet" href="/tokens.css">   /* tokens da marca + tema claro/escuro */
<link rel="stylesheet" href="/style.css">    /* componentes */

Tema escuro automático via prefers-color-scheme. Fonte única: app/public/tokens.css.