Design System Óptago

Biblioteca completa de componentes em CSS puro sem Tailwind, sem build. Inclua ui-optago.css e ui-optago.js no seu projeto e use as classes com prefixo op-. Em cada bloco abaixo, use Copiar para levar o HTML direto pro seu projeto, ou Ver código para inspecionar.

Usar via CDN

Sem baixar nada adicione as duas linhas ao <head>:

<link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css">
<script src="https://unpkg.com/ui-optago/ui-optago.js"></script>

Cores da Marca

Preto Base
#000000

Verde-lima Destaque
#C0FF6B · --op-accent

Cinza-claro Texto
#D5D5D5 · --op-text

Cinza-chumbo Apoio
#656565 · --op-muted

Cores Semânticas

Info
#3B82F6 · --op-info

Success
#10B981 · --op-success

Warning
#F59E0B · --op-warning

Danger / Error
#EF4444 · --op-danger

Tipografia

Heading 1 Chakra Petch

Heading 2 Seções

Heading 3 Cards e blocos

Heading 4 Subtítulos

Parágrafo padrão em Inter. Criamos e mantemos produtos próprios e sob medida, sempre com a mesma régua: proteger dados, reduzir atrito e manter tudo no ar.

Texto secundário / muted para descrições e apoio.

JetBrains Mono dados técnicos, códigos e rótulos. optago.com.br · 0 cookies

Atalho de teclado: Ctrl + K · código inline: --op-accent: #C0FF6B

Botões

Badges & Etiquetas

Default Brand · Online Info Resolvido Pendente Crítico Pill Offline

Alertas

Atualização disponível

A versão 3.4 do painel já pode ser instalada.

Deploy concluído

Todos os serviços estão no ar e saudáveis.

Espaço quase esgotado

Seu disco principal atingiu 90% de capacidade.

Falha na conexão

Não foi possível conectar ao banco de dados.

Formulários

Nome completo *

Como aparece no documento.

E-mail com ícone

Campo com erro

Verifique o CPF informado.

Campo válido

Domínio disponível!

Select

Input group

https:// .com.br

Textarea

Checkbox marcado Checkbox Desabilitado Radio A Radio B

Notificações ativas Modo manutenção

Range 75%

Tabelas

Usuário	Função	Status
AF Aline Franco usr_8921	Administradora	Ativo
CE Carlos Eduardo usr_1174	DevOps	Ausente
MR Marina Reis usr_3350	Suporte	Bloqueado

Tabela avançada Tabulator

Para tabelas com ordenação, paginação e filtros, use a variante com Tabulator e tema Óptago. A biblioteca é carregada sob demanda: OptagoUI.tabulator('#minhaTabela', opções) clique nos cabeçalhos para ordenar.

Cards

Auditoria de Segurança

Execute uma varredura completa nos seus containers em busca de vulnerabilidades.

Iniciar scan

Requisições / mês 1.42M +12,4% vs. mês anterior

Tempo de resposta 184ms -8ms esta semana

CE

Carlos Eduardo

Engenheiro DevOps

Admin Óptago

Avatares

SM

MD

LG

AR

AF

CE

MR

+5

Progresso, Spinners & Skeleton

Deploy em andamento75%

Upload40%

Disco92%

Tabs

Visão geral do sistema: tudo operando normalmente.

Ajuste preferências, chaves de API e integrações.

[12:04:31] INFO serviço reiniciado com sucesso

Métricas das últimas 24 horas.

Métricas dos últimos 7 dias.

Métricas dos últimos 30 dias.

Perfil

Tabs verticais são ideais para páginas de configuração com muitas categorias.

Segurança

Autenticação em duas etapas, sessões ativas e histórico de acesso.

Cobrança

Plano atual, faturas e método de pagamento.

API Keys

Gere e revogue chaves de acesso à API.

Accordion

O que é a Óptago?

Criamos e mantemos produtos próprios (Comanda Rápida, Stats Rails, Brasil Buscador) e prestamos serviços sob medida sempre com a mesma régua: segurança, privacidade e performance.

O site usa cookies?

Não. Coleta mínima de dados: o site institucional não usa cookies nem rastreadores.

Como funciona o suporte?

Atendimento direto pelo WhatsApp comercial, com SLA definido em contrato para clientes de consultoria.

Dropdown

Tooltips

Uptime

Breadcrumb & Paginação

1
2
3
…
12

Timeline

Agora · 14:32
Deploy em produção em andamento

Publicando a versão 3.4.0 nos servidores sa-east-1.
Hoje · 13:58
Testes aprovados

128 testes executados, 0 falhas. Cobertura em 94%.
Hoje · 11:20
Alerta de uso de disco

Volume principal atingiu 85% limpeza automática agendada.
Ontem · 22:47
Incidente resolvido resolvido

Instabilidade na API de pagamentos durou 12 minutos.
02 Jul · 09:00
Projeto criado

Repositório inicializado e pipeline configurado.

Efeitos Glow verde-lima

Manchas desfocadas de verde-lima para dar profundidade ao fundo esta própria página usa três (topo e cantos). Posicione .op-glow dentro de um container com position:relative; o conteúdo por cima deve ter z-index maior. Variações: op-glow-sm, op-glow-lg, op-glow-strong, op-glow-info.

Hero com glow de fundo

Segurança, privacidade e performance a mesma régua em todos os produtos.

Toasts / Notificações

Notificações aparecem centralizadas no topo. API: OptagoUI.toast(mensagem, tipo)

Modais

Layout App Shell

Esta própria página usa o app shell

Header, footer e sidebar (direita) são fixos apenas o conteúdo central rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.

<body class="op-app">
  <div class="op-app-body">
    <header class="op-header">...</header>
    <main class="op-main">CONTEÚDO ROLÁVEL</main>
    <footer class="op-footer">...</footer>
  </div>
  <aside class="op-sidebar">
    <nav class="op-sidebar-nav">
      <a class="op-nav-item" href="#secao">
        <i class="ph ph-palette"></i>
        <span class="op-nav-text">Título</span>
        <span class="op-nav-tooltip">Título</span>
      </a>
    </nav>
  </aside>
</body>