APEX / DESIGN SYSTEM / V1.1

Uma linguagem de design compartilhada.

Fundamentos para o site, Apex OS e a futura experiência de clientes. Tokens reais, componentes reutilizáveis e padrões interativos.

Manual de marca · PDF ↓ Marca · SVG ↓ Marca para fundo escuro · SVG ↓ Design tokens · JSON ↗

01 / Assinatura de marca

Apex Design Studio

Uma matriz em curvas: o símbolo se alinha ao centro óptico do nome. “design” fica sobre “studio”, ambos com o mesmo tamanho. O triângulo interno menor é preto em superfícies claras e branco em superfícies escuras.

SVG ↓Kit de marca ↓

02 / Cor semântica

Cor com função.

canvas#F9F8F4

surface#F0EEE7

ink#20211F

muted#62635D

border#D9D8CF

brand#FF6A00

brandText#20211F

brandInk#AA3F0A

symbolInner#000000

success#3F623E

successSurface#E8F0E1

warning#865400

warningSurface#FFF0CD

danger#A52E35

dangerSurface#FCE7E8

focus#AD3C00

Use texto grafite sobre ações laranja. Use brandInk para textos em tom laranja sobre superfícies claras. Estados sempre incluem rótulo, além de cor.

03 / MANROPE

Clareza em cada escala.

Clear thinking.Design com intenção.A new perspective.Texto legível conecta o sistema visual ao trabalho que as pessoas precisam realizar.LABEL / 11 / SEMIBOLD

Pesos 400, 500, 600, 700 e 800. Texto corrido usa medida confortável e entrelinha generosa; rótulos compactos permanecem secundários.

04 / Ritmo e geometria

Espaço cria hierarquia.

1 / 4px

2 / 8px

3 / 12px

4 / 16px

5 / 20px

6 / 24px

8 / 32px

10 / 40px

12 / 48px

16 / 64px

20 / 80px

24 / 96px

none / 0px

small / 4px

medium / 8px

large / 16px

device / 40px

pill / 999px

05 / Botões e links

Uma próxima ação clara.

Toda ação tem estados hover, focus-visible e disabled. Use verbos claros. Ações destrutivas precisam explicar a consequência e usar confirmação.

06 / Controles de formulário

Mantenha o contexto visível.

Projeto ilustrativoExemplo local de componente. Sem envio.

Etapa do projeto

Exemplo de validaçãoAdicione um nome para identificar este exemplo.

Campo desabilitado

Incluir este item ilustrativoOpção de demonstração

07 / Estados e retorno

Diga o que aconteceu.

RascunhoProntoPrecisa de revisãoBloqueadoEm andamento

Salvo neste exemplo

Mantenha o resultado visível e explique o próximo passo.

Revisão necessária

Explique qual decisão é necessária para continuar.

Não foi possível concluir

Preserve os dados e ofereça um caminho de recuperação.

Progresso ilustrativo do projeto64%

08 / Padrões de interação

Pense na interação completa.

Tome uma decisão com contexto.

As abas suportam setas, Home e End. As janelas usam o gerenciamento de foco nativo do navegador.

Padrão de acordeão acessível

Um disclosure nativo mantém o comportamento de teclado e o estado expandido consistentes. Use para detalhes opcionais.

09 / Fundamentos de produto

Pronto para a próxima interface.

Tabela de entregas ilustrativas
Entrega	Etapa	Estado
Brand direction	Design	Review
Client portal	Prototype	Concept

As demos mostram busca, filtros, detalhes, progresso, fila editorial, navegação mobile, visualização de arquivos e aprovação ilustrativa reversível. São conceitos frontend, não uma plataforma de clientes em produção.

Apex OS ↗ Apex Portal ↗

10 / Laboratório de movimento

Movimento com propósito.

Três comportamentos reutilizáveis: revelar relações, comunicar progresso e tornar uma mudança de estado legível. Nada inicia automaticamente. A preferência por movimento reduzido é respeitada.

Constelação conectada

Uma entrada em sequência revela um sistema de relações.

Varredura de evidências

Uma varredura finita representa uma inspeção, sem simular uma operação real.

Pilha de foco

Camadas se abrem para mostrar profundidade e retornam a um estado estável.