Design System Óptago

Biblioteca completa de componentes em CSS puro e JavaScript vanilla, 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.

Suporta tema claro e escuro automaticamente: detecta a preferência do navegador (prefers-color-scheme) e lembra sua escolha depois que você alternar no botão de lua/sol no topo da página.

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

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.

Manchas desfocadas para dar profundidade ao fundo, esta própria página usa algumas (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, op-glow-cyan (cor secundária da marca, #6BE0FF).

Toda a aparência (cores, raio de borda, sombras, fontes, dimensões do app shell...) vive em variáveis CSS (tokens) declaradas no :root de ui-optago.css. Não precisa editar o arquivo da lib: sobrescreva só as variáveis que quiser, depois de carregá-la.

<style>
  :root {
    --op-accent: #FF6B00;
    --op-cyan: #00B8D9;
    --op-radius: 6px;
  }
</style>

OptagoUI.customize({
  accent: '#FF6B00',       // vira --op-accent
  cyan: '#00B8D9',
  '--op-radius': '6px'     // nome completo também funciona
});

Principais tokens

Lista completa: seção 1. TOKENS no topo de ui-optago.css. O tema claro redefine boa parte desses tokens dentro de html.light { ... } — pra customizar só o modo claro (ou só o escuro), sobrescreva dentro do seletor correspondente.

Integração com driver.js via OptagoUI.tour(steps, options?). A biblioteca é carregada do CDN sob demanda (só quando o tour for iniciado) e o popover já sai estilizado com o tema Óptago — escuro e claro, sem nenhuma configuração extra.

OptagoUI.tour([
  {
    element: '#meu-elemento',
    popover: {
      title: 'Bem-vindo!',
      description: 'Este é o ponto de partida.',
    }
  },
  {
    element: '#outro-elemento',
    popover: {
      title: 'Passo 2',
      description: 'Continue por aqui.',
    }
  },
  // step sem element = modal centralizado
  {
    popover: {
      title: 'Pronto!',
      description: 'Tour concluído com sucesso.',
    }
  }
]).then(function(d) {
  // d = instância driver.js (opcional)
});

OptagoUI.tour(steps, {
  // Padrões já configurados pelo OptagoUI:
  animate:        true,
  smoothScroll:   true,
  showProgress:   true,
  progressText:   '{{current}} de {{total}}',
  nextBtnText:    'Próximo →',
  prevBtnText:    '← Anterior',
  doneBtnText:    'Concluir',

  // Qualquer opção nativa do driver.js:
  allowClose:     true,   // fecha com ESC/clique no overlay
  onDestroyed:    function() {
    console.log('tour encerrado');
  }
});

Estrutura de um step

Destaque avulso (sem tour)

Para destacar um único elemento sem navegar por steps, passe um array de um único step. O driver.js também expõe highlight() nativamente se você precisar da instância.

OptagoUI.tour([
  {
    element: '#meu-campo',
    popover: { title: 'Atenção', description: 'Preencha este campo.' }
  }
]);

Bloco pronto para o rodapé de qualquer site feito pela Óptago, mesmo sites que não usam o resto deste design system. São dois arquivos HTML autocontidos (<style> + markup, sem depender de nada do site hospedeiro): optago-credit-dark.html (fundos escuros ou neutros) e optago-credit-light.html (fundos claros). Escolha o que combina com o fundo onde o selo vai ficar.

<!-- Via CDN, sem copiar nada: -->
<div id="optago-credit"></div>
<script>
  fetch('https://unpkg.com/ui-optago@1.2.3/optago-credit-dark.html')
    .then(r => r.text())
    .then(html => document.getElementById('optago-credit').innerHTML = html);
</script>

<!-- Ou copie o arquivo pro seu projeto e inclua localmente
     (ex.: include no PHP, import estático, etc.) -->

A Óptago cria e mantém produtos próprios e sob medida, sempre com a mesma régua: proteger dados, reduzir atrito e manter tudo no ar. Em vez de um produto só, mantemos uma família de sistemas internos (login centralizado, gestão de clientes e cobranças, controle de estoque e nota fiscal, ponto de venda, monitoramento) que compartilham a mesma identidade visual, o mesmo padrão de segurança e a mesma forma de trabalhar.

Este design system é parte direta dessa régua: em vez de cada sistema reinventar botão, formulário e tabela do zero, todos os produtos da Óptago falam a mesma língua visual, o que acelera quem constrói e deixa a experiência previsível pra quem usa.

optago.com.br