Design System

Introdução

Como o sistema está organizado e como usá-lo.

1 · Tokens

Variáveis CSS em src/styles/tokens.css — a única fonte de verdade. Suportam tema claro e escuro.

2 · Primitivos

Box, Stack, Grid, Text, VisuallyHidden — blocos de base de que tudo se compõe.

3 · Componentes

Botões, formulários, overlays, dados — tipados, acessíveis, com estados documentados.

Regra de ouro: as páginas usam apenas componentes do design system. Se falta algo, adiciona-se ao sistema primeiro — mantém o sistema honesto e completo.

Logótipo

O logótipo real da marca (ficheiro fornecido), nunca redesenhado. A marca-símbolo funciona sobre campos claros e escuros; o logótipo completo exige um campo claro porque o texto é escuro.

lockup · campo claro

marca-símbolo · campo escuro

✓ Fazer

Usar os ficheiros originais fornecidos.
Manter a proporção e a área de protecção.
Marca-símbolo sobre campos claros ou escuros; lockup sobre campo claro.

✕ Nunca

Esticar, rodar, recolorir ou adicionar sombras.
Colocar a marca-gradiente sobre campos de tom médio.
Compor o logótipo noutra tipografia.

Imagens & Grafismos

Linguagem gráfica própria da MOPANOIL — grafismos vectoriais on-brand (chama, energia, fluxo) na paleta âmbar→chama + aço. Sem fotografia de stock; deixa espaços para fotos reais da operação via next/image.

BrandPattern

FlowRibbon

Cenas de serviço (ServiceScene)

Componentes em src/components/brand/graphics.tsx. Para fotografia real (operação, equipa, Angola), use next/image com rácio fixo, alt descritivo e formatos AVIF/WebP.

Cores

Derivadas do logótipo. Âmbar nunca leva texto branco (falha 2.1:1); usa texto carvão (8.1:1 AAA).

Brand — Âmbar / Ouro

50

100

200

300

400

500

600

700

800

900

950

Flame — Vermelho

50

100

300

500

600

700

900

Neutral — Carvão frio

50

100

200

300

400

500

600

700

800

900

950

Secundária — Metálico (papelaria / cartão)

#3A5A78

steel-500

#2E4C6B

steel-600

#8FA6BC

steel-300

#6B7178

graphite-500

#40454B

graphite-700

Par	Rácio	Veredicto
Carvão-900 / Branco	16.9	AAA
Neutral-600 / Branco (corpo)	6.25	AA
Carvão / Âmbar-500	8.1	AAA
Branco / Âmbar-500	2.1	Falha
Flame-600 / Branco	5.9	AA

Tipografia

Sora (display) + Inter (corpo). Escala modular 1.25.

5xlDisplay — Crescemos em parceria

4xlH1 — Crescemos em parceria

3xlH2 — Crescemos em parceria

2xlH3 — Crescemos em parceria

xlH4 — Crescemos em parceria

lgLead — Crescemos em parceria

baseCorpo — Crescemos em parceria

smMeta — Crescemos em parceria

Voz & Tom

Profissional, orientado à parceria, confiante e claro. A competência exprime-se pela clareza, nunca pelo jargão.

Botões

✓ "Peça uma proposta", "Ver serviços"

✕ "Enviar", "Clique aqui"

Estados vazios

✓ "Ainda não há nada aqui. Comece por…"

✕ "Sem dados."

Erros

✓ "Não conseguimos enviar. Verifique o email e tente novamente."

✕ "Erro 422."

Tom

✓ Parceria, rigor, plain-language

✕ Hype, tecniquês gratuito

Tokens (referência viva)

Valores computados em tempo real (reflectem o tema activo). Clique para copiar var().

Cor — semânticas

	Token	Valor computado
	--color-bg	…
	--color-surface	…
	--color-text	…
	--color-text-muted	…
	--color-border	…
	--color-brand	…
	--color-brand-text	…
	--color-flame	…
	--color-focus	…

Raio

Token	Valor computado
--radius-sm	…
--radius-md	…
--radius-lg	…
--radius-xl	…
--radius-2xl	…

Movimento

Token	Valor computado
--duration-fast	…
--duration-base	…
--duration-slow	…
--ease-standard	…
--ease-spring	…

Espaçamento & Raio

Base 4px. Raio derivado da geometria arredondada do logótipo.

Espaçamento

1

2

3

4

6

8

12

16

Raio

sm

md

lg

xl

2xl

Elevação & Movimento

Sombras quentes e de baixo espalhamento. Movimento respeita prefers-reduced-motion.

e1

e2

e3

e4

Acessibilidade

WCAG 2.1 AA como linha de base em todo o sistema — não é um rodapé, é um requisito.

Contraste

Todos os pares verificados. Âmbar nunca com texto branco.

Teclado

Todos os componentes operáveis; overlays com focus-trap + Escape.

Foco visível

Anel :focus-visible global; nunca removido sem substituto.

Movimento reduzido

prefers-reduced-motion desliga animação não-essencial.

Registo de contraste (pares reais)

Par	Rácio	Veredicto
Carvão-900 / Branco	16.9	AAA
Neutral-600 / Branco (corpo)	6.25	AA
Carvão / Âmbar-500	8.1	AAA
Branco / Âmbar-500	2.1	Falha — não usar
Flame-600 / Branco	5.9	AA
Steel-600 / Branco	8.9	AAA

Checklist por componente

Rótulo/nome acessível
Operável por teclado
Foco visível
Estado comunicado (aria-*)
Contraste AA+
Suporta reduced-motion
Toca-alvo ≥ 40px
Sem armadilhas de foco

Botões

Playground com controlos ao vivo.

<Button variant="primary" size="md" trailingIcon={<IconArrowRight />}>
  Fale connosco
</Button>

Controlos

variant

size

loadingdisabledtrailingIcon

Nota: primary usa texto escuro sobre âmbar (8.1:1 AAA).

Todas as variantes

Formulários

Cada controlo com label, texto de ajuda, erro e estados, ligados via ARIA.

Nome

Como devemos tratá-lo.

Email

Indique um email válido.

Dados & Feedback

Badges & Tags

BrandFlameActivoPlaneadoInfoTag

Avatares

Card

Superfície com raio suave e sombra em camadas.

24Projectos entregues↑ 12%

Progresso64%

Nota de marca

Âmbar é para preenchimentos e destaques, não para texto sobre branco.

Sucesso

Mensagem enviada com sucesso.

Erro

Não foi possível enviar a mensagem.

Sector (domínio)

Componentes específicos do domínio da MOPANOIL — petróleo, gás e energias — em vez dos mapas/GIS de outras marcas.

Cadeia de valor (upstream → downstream)

Upstream
Prospecção
Midstream
Transporte
Downstream
Distribuição

Matriz de capacidades

Capacidade	Upstream	Midstream	Downstream
Gestão de projectos
Consultoria ambiental
Prestação de serviços
Energias renováveis

Blocos de Marketing

Secções de nível superior usadas nas páginas do site, construídas a partir dos mesmos tokens.

Feature grid

Gestão de Projectos
Concepção, portfólios e soluções aos desafios do sector.
Consultoria Ambiental
Estudos de impacte e consultoria para operações responsáveis.
Prestação de Serviços
Do upstream ao downstream, incluindo renováveis.

Testemunho

A MOPANOIL foi o parceiro que precisávamos para reduzir custos sem comprometer o rigor técnico.

Parceiro do sectorOperador de Petróleo & Gás

Linha temporal

Prospecção
Upstream
Estudo e concepção do projecto.
Execução
Midstream
Gestão de portfólio e serviços.
Distribuição
Downstream
Soluções até ao cliente final.

Parede de logótipos

PETRO

ENERGIA

GÁS-AO

RENOVA

LUANDA

Tabela de preços

Consulta

Sob orçamento

Avaliação inicial do desafio.

Diagnóstico
Recomendações
Relatório

Projecto

Recomendado

Sob orçamento

Gestão completa de projecto.

Concepção
Gestão de portfólio
Acompanhamento
Relatórios periódicos

Parceria

Sob orçamento

Acompanhamento contínuo.

Equipa dedicada
Terceirização
SLA

Padrões

Modelos de nível de página reutilizados no site: estados vazios e de erro, prontos a usar.

Estado vazio

Sem resultados

Não encontrámos nada com esses critérios. Ajuste a pesquisa e tente de novo.

Estado de erro

500

Algo correu mal

Ocorreu um erro inesperado. Tente novamente dentro de momentos.

Componentes interactivos

Modais, drawers, toasts, tabs, tabelas e formulários — todos com teclado e ARIA.

Utilitários — ⌘K & menu de contexto

Command palette (⌘K / Ctrl+K) · Context menu (clique direito)

Clique com o botão direito aqui

Overlays & feedback

Modal · Drawer · Toast · Tooltip · Popover · Dropdown

Tabs

Concepção e gestão de projectos e portfólios.

Accordion / FAQ

Tabela (ordenável)

Serviços por âmbito
		Estado
Gestão de Projectos	Upstream	Activo
Consultoria Ambiental	Midstream	Activo
Prestação de Serviços	Downstream	Planeado

Controlos de formulário

Aceito ser contactado

Âmbito de interesse

Upstream

Downstream

Receber novidades

Orçamento estimado40%

Área de interesse

Autocomplete filtrável (ARIA combobox).

Data preferida

Calendário em popover.

Documentos

Escolher ficheiro ou arraste para aqui

PDF até 5 MB

Paginação

Recursos / Brand Kit

Ficheiros reais para download, nas cores e tipografia da MOPANOIL.

Os SVGs abrem em qualquer editor vectorial (Illustrator/Inkscape/Figma) e exportam para PDF/EPS. Substitua os campos [ … ] pelos dados reais.

Introdução

Logótipo

Imagens & Grafismos

Cenas de serviço (ServiceScene)

Cores

Brand — Âmbar / Ouro

Flame — Vermelho

Neutral — Carvão frio

Secundária — Metálico (papelaria / cartão)

Tipografia

Voz & Tom

Tokens (referência viva)

Cor — semânticas

Raio

Movimento

Espaçamento & Raio

Espaçamento

Raio

Elevação & Movimento

Acessibilidade

Registo de contraste (pares reais)

Checklist por componente

Botões

Formulários

Dados & Feedback

Card

Sector (domínio)

Cadeia de valor (upstream → downstream)

Matriz de capacidades

Blocos de Marketing

Feature grid

Gestão de Projectos

Consultoria Ambiental

Prestação de Serviços

Testemunho

Linha temporal

Prospecção

Execução

Distribuição

Parede de logótipos

Tabela de preços

Consulta

Projecto

Parceria

Padrões

Estado vazio

Sem resultados

Estado de erro

Algo correu mal

Componentes interactivos

Utilitários — ⌘K & menu de contexto

Overlays & feedback

Tabs

Accordion / FAQ

Onde operam?

Que serviços prestam?

Tabela (ordenável)

Controlos de formulário

Paginação

Recursos / Brand Kit