ERP RealPower · Design System

Tokens

Cores

Tipografia

Título H1

Título H2

Título H3

Texto padrão

Texto auxiliar

Legenda

Componentes · Progresso

Progresso da Peritagem

60%

<div class="rp-progress">
  <div class="rp-progress-track">
    <div class="rp-progress-bar" style="width:60%"></div>
  </div>
  <span class="text-xs">60%</span>
</div>

Componentes · Upload

Upload de Arquivo

Escolher arquivo Nenhum arquivo escolhido

<div class="rp-upload">
  <input id="arquivo" type="file" class="rp-upload-input">
  <label for="arquivo" class="rp-btn"><i class="bi bi-upload"></i>Escolher arquivo</label>
  <span class="rp-upload-name">Nenhum arquivo escolhido</span>
</div>

Ícones · Pack fino e elegante

Ações

Status

Navegação

Alertas

Arquivos

Sistema

Snippets · Tailwind Config e CSS

tailwind.config.js

module.exports = {
  content: [
    "./templates/**/*.html",
    "./processo/**/*.html",
    "./peritagem/**/*.html",
    "./static/**/*.js"
  ],
  theme: {
    extend: {
      borderRadius: { xl: "1rem" },
      boxShadow: { card: "0 1px 2px rgba(16,24,40,.06)" }
    }
  },
  plugins: []
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

src/styles/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .rp-btn { @apply inline-flex items-center gap-2 px-3 py-2 border border-slate-300 rounded-xl bg-white text-slate-700 font-medium shadow-sm; }
  .rp-input { @apply w-full px-3 py-2 border border-slate-300 rounded-xl bg-white text-slate-900; }
  .rp-chip { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold; }
  .rp-card { @apply bg-white rounded-2xl shadow-sm ring-1 ring-slate-200; }
  .rp-section { @apply bg-white rounded-2xl ring-1 ring-slate-200; }
  .rp-checkbox { @apply w-4 h-4 rounded border border-slate-300 text-sky-600; }
}

src/styles/components.css

@layer components {
  .ds-tabs .tab { @apply px-3 py-2 text-slate-600; }
  .ds-tabs .tab-active { @apply text-slate-900 font-semibold bg-slate-100 rounded-md shadow-none border-0; }
  .ds-table th { @apply text-[11px] uppercase text-slate-600; }
  .ds-empty { @apply border border-slate-200 bg-slate-50 rounded-2xl; }
}

Fontes

Primária

Inter 400/500/600/700

Fallback Stack

ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial

Inputs · Complementares

Data

Checkbox

Recebido em Garantia

Compatibilidade Legado

Snippets · Componentes (HTML)

Botões

<button class="rp-btn">Padrão</button>
<button class="rp-btn bg-slate-900 text-white border-slate-900">Primário</button>
<button class="rp-btn bg-sky-600 text-white border-sky-600"><i class="bi bi-plus"></i>Novo</button>

Inputs

<input class="rp-input" placeholder="Digite aqui">
<select class="rp-input"><option>Opção</option></select>
<textarea class="rp-input" rows="3"></textarea>
<input type="date" class="rp-input">
<input type="checkbox" class="rp-checkbox">

Chip / Badge

<span class="rp-chip bg-sky-100 text-sky-700">Aberto</span>
<span class="px-2 py-1 text-xs rounded-full bg-emerald-100 text-emerald-700">Concluído</span>

Card

<div class="rp-card p-6">
  <p class="text-xs text-slate-500">Resumo</p>
  <p class="text-lg font-bold">OS #1001</p>
  <div class="flex gap-2">
    <span class="rp-chip bg-sky-100 text-sky-700">Aberto</span>
  </div>
</div>

Navbar de Abas

<nav class="ds-tabs flex items-center gap-2 border-b pb-2">
  <button class="tab tab-active" data-index="0">Timeline</button>
  <span class="text-slate-300">|</span>
  <button class="tab" data-index="1">Chegada</button>
</nav>
<div data-content="0">Conteúdo Timeline</div>
<div class="hidden" data-content="1">Conteúdo Chegada</div>

Tabela

<table class="w-full text-left border-collapse min-w-[1024px] ds-table">
  <thead class="bg-slate-50 border-b">
    <tr>
      <th class="px-4 py-3">OS</th>
      <th class="px-4 py-3">Status</th>
      <th class="px-4 py-3 text-right">Progresso</th>
    </tr>
  </thead>
  <tbody class="text-sm">
    <tr class="border-b">
      <td class="px-4 py-3">1001</td>
      <td class="px-4 py-3"><span class="rp-chip bg-sky-100 text-sky-700">Aberto</span></td>
      <td class="px-4 py-3">
        <div class="w-full h-1 rounded bg-slate-200">
          <div class="h-1 rounded bg-sky-500" style="width:50%"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Estado Vazio

<div class="ds-empty p-6 text-center">
  <div class="text-slate-700 font-medium">Nenhuma ordem encontrada</div>
  <div class="mt-1 text-slate-500 text-sm">Use o botão “Nova OS” para registrar.</div>
  <div class="mt-3">
    <button class="rp-btn bg-emerald-600 text-white border-emerald-600">+ Nova OS</button>
  </div>
</div>

Ícones

<i class="bi bi-plus-lg"></i>
<span data-feather="check"></span>
<script>if(window.feather){feather.replace();}</script>

Botões · Acesso Rápido

Ordem de Serviço Planejamento Parâmetros Fases Relatos

Tabela · Completa

OS	Tipo	Status	Cliente	Execução	Progresso	Ações
1001	Programada	Aberto	Empresa A	10/03/2026		Editar
1002	Programada	Concluído	Empresa B	19/03/2026		Editar

Estados e Badges

Status da OS

Aberto Em Peritagem Orçamento Concluído Cancelado

Prioridade

Baixa Média Alta Urgente

Tipo de OS

Programada Não Programada Cortesia Emergencial Testes

Vazios e Alertas

Nenhuma ordem encontrada

Use o botão “Nova OS” para registrar uma ordem.

Atenção

Dados incompletos na configuração da peritagem.

Componentes · Botões

Componentes · Inputs

Texto

Seleção

Textarea

Componentes · Cards

Resumo

OS #1001

Cliente

Aberto Média

Peritagem

Itens

40%

Prazo

Entrega

10 dias

Componentes · Navbar de Abas

Conteúdo Timeline

Componentes · Tabela

OS	Status	Cliente	Progresso
1001	Aberto	Empresa A
1002	Concluído	Empresa B

Layouts

Coluna Lateral

Dados

Conteúdo Principal

Abas e páginas