Petri Tecnologia — Design System

01 — Brand

Identidade Visual

O símbolo e o wordmark formam a identidade da Petri Tecnologia. Use-os com consistência e respeito às zonas de proteção.

Símbolo — Light & Dark

Fundo Claro

Fundo Escuro

Fundo Accent

Wordmark — Modern Machine

PETRI TECNOLOGIA

Logo Completa — Combinações

PETRI TECNOLOGIA

Escala do Símbolo

64px

48px

32px

24px

16px

02 — Colors

Paleta de Cores

Sistema de cores baseado nos princípios Apple — alto contraste, acessibilidade e consistência visual em todos os contextos.

Cores Principais

Primary

#1D1D1F

Texto principal, headlines

Secondary

#6E6E73

Texto secundário, labels

Tertiary

#F5F5F7

Fundos, superfícies

White

#FFFFFF

Cards, modais, inputs

Cor de Marca

Brand Accent

#0066CC

CTAs, links, foco, destaque

Accent Hover

#0077ED

Estado hover

Accent Light

#CCE4FF

Backgrounds sutis

Accent Dark

#003D7A

Dark mode accent

Cores Semânticas

Success

#34C759

Warning

#FF9F0A

Error

#FF3B30

Info

#007AFF

Superfícies

Surface 1

#FFFFFF — Base

Surface 2

#F5F5F7 — Elevado

Surface 3

#E8E8ED — Terciário

Surface 4

#1D1D1F — Dark

03 — Typography

Tipografia

Sistema tipográfico baseado na escala Apple — letter-spacing negativo em grandes tamanhos, line-height calibrada para cada nível.

Display

96px / −0.022em / 1.05 Inovação.

72px / −0.022em / 1.05 Tecnologia.

56px / −0.022em / 1.05 Transformamos ideias.

Headlines

40px / −0.022em / 1.1 / 700 Petri Tecnologia

32px / −0.022em / 1.15 / 700 Soluções digitais de alto padrão

28px / −0.011em / 1.2 / 600 Design, engenharia e estratégia

24px / −0.011em / 1.2 / 600 Construindo o futuro digital do Brasil

Body

17px / 0em / 1.47059 / 400 A Petri Tecnologia desenvolve produtos digitais com excelência técnica e atenção extrema ao design. Cada projeto é tratado como uma obra única, com foco total na experiência do usuário.

15px / 0em / 1.47059 / 400 Nosso processo combina pesquisa, prototipagem e desenvolvimento iterativo para garantir que cada solução seja precisa, eficiente e escalável.

13px / 0em / 1.47059 / 400 Especialistas em interfaces Apple-like, sistemas de design, aplicativos web e mobile com performance de referência.

Caption & Overline

12px / 0em / 1.33 / 400 Versão 1.0.0 — Última atualização: maio 2026

11px / 0.08em / 1.0 / 600 — OVERLINE Design System — Seção 01

Modern Machine — Fonte de Marca

Reservada exclusivamente para wordmark, logotipo e comunicações de marca. Nunca use em corpo de texto ou interface.

PETRI

04 — Spacing

Espaçamento & Grid

Grade de 8px com escala multiplicativa. Todos os espaçamentos de layout e componentes derivam desta base.

Escala de Espaçamento

4px

--sp-1 — Separadores internos, ícone/texto

8px

--sp-2 — Gap entre elementos inline

12px

--sp-3 — Padding de badge, gap pequeno

16px

--sp-4 — Padding de input, gap de lista

20px

--sp-5 — Padding horizontal de botão

24px

--sp-6 — Padding de card, gap de seção

32px

--sp-8 — Gap entre cards, padding de modal

40px

--sp-10 — Padding de seção pequena

48px

--sp-12 — Padding vertical de card grande

64px

--sp-16 — Espaço entre grupos de conteúdo

80px

--sp-20 — Padding de hero, seção compacta

96px

--sp-24 — Padding de página, seção espaçosa

Sistema de Grid — 12 Colunas

12 col

6

4

3

Gutter: 8px Margem: 48px Max-width: 1080px Breakpoints: 375 / 768 / 1024 / 1280px

05 — Components

Componentes

Biblioteca de componentes reutilizáveis seguindo a linguagem visual Apple — bordas finas, sombras sutis e transições precisas.

Botões — Variantes

Tamanhos — Primary

Campos de Formulário

Nome completo

E-mail

Busca

Categoria

Cards

Padrão

Card Default

Borda sutil de 0.5px. Fundo branco. Usado para conteúdo de leitura.

Elevado

Card Elevated

Sombra sutil. Sem borda. Para destaque em fundo cinza.

Interativo ↗

Card Interactive

Hover com elevação. Para listas clicáveis e grids de produto.

Badges & Tags

Accent Sucesso Atenção Erro Neutro Novo

Design Tecnologia Mobile Web v1.0

Avatares

GP

PT

AB

CD

GP

PT

AB

+12 pessoas

Divisores

ou continue com

06 — Iconography

Iconografia

O símbolo da Petri em diferentes contextos e tamanhos — incluindo o formato de app icon com o container iOS de cantos arredondados.

App Icon — Estilo iOS

128px

80px

60px

44px

29px

Símbolo em Contexto

Fundo Branco

Fundo Escuro

Fundo Accent

07 — Motion

Movimento

Animações precisas e com propósito. Cada transição segue curvas Apple-calibradas — nunca aleatórias, sempre funcionais.

Curvas de Easing — passe o mouse para animar

Apple Ease

cubic-bezier(0.25, 0.46, 0.45, 0.94)

350ms — Padrão de interface

Spring

cubic-bezier(0.34, 1.56, 0.64, 1)

500ms — Elementos de destaque

Linear

linear

350ms — Loaders, progress bars

Escala de Duração

150ms

Fast

Hover, focus ring, opacidade

200ms

Normal

Botões, inputs, cards

350ms

Slow

Modais, drawers, page transitions

500ms

Spring

Entrada de elementos principais

08 — Dark Mode

Modo Escuro

Comparação lado a lado dos principais componentes em light e dark. O sistema suporta ambos nativamente via CSS custom properties.

Light Mode

PETRI

SobreServiçosContato

Projeto

Design System v1

Fundamentos visuais completos da marca.

Dark Mode

PETRI

SobreServiçosContato

Projeto

Design System v1

Fundamentos visuais completos da marca.

Tokens Dark Mode

Background primário#000000

Superfície elevada#1C1C1E

Texto primário#FFFFFF

Texto secundáriorgba(255,255,255,0.55)

Accent#0A84FF

Borda sutilrgba(255,255,255,0.08)

Separadorrgba(255,255,255,0.12)

Nav frosted glassrgba(29,29,31,0.85)