Lorem Ipsum is simply dummy text of the
Beta Online
2025
Design system
A base de tudo: o guia de estilo que o Beta Online usa para criar qualquer tela com a mesma cara. Replicado aqui, em código, como foi entregue.
Paleta de cores
- 50%
#FFFFFF - 15%
#CD2323 - 15%
#0F1115 - 10%
#440404 - 5%5%
Escala de cinza
Degradê
Extras
Complementares
Tipografia
Montserrat
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
- 64px · Bold · 74H1 / Montserrat / Bold
- 56px · Bold · 66H2 / Montserrat / Bold
- 48px · Bold · 56H3 / Montserrat / Bold
- 36px · SemiBold · 48H4 / Montserrat / SemiBold
- 32px · SemiBold · 48H5 / Montserrat / SemiBold
- 24px · Bold · 32H6 / Montserrat / Bold
- 20px · SemiBold · 32H7 / Montserrat / SemiBold
- 18px · Medium / SemiBold / Bold · 26Subtítulo 1 / Medium · SemiBold · Bold
- 18 · 16 · 14px · SemiBoldParágrafo 1, 2 e 3 / Montserrat / SemiBold
- 16px · SemiBold · 1%Caps / Montserrat / SemiBold
- 16px · Bold · 24Botão / Montserrat / Bold
Botões e controles
Botões grandes · 56px
Principais
Secundários
Extras
Botões médios · 48px
Principais
Secundários
Botões pequenos · 40px
Principais
Secundários
Outros
Campos de preenchimento
Seleção
Checkbox
Avatares, breadcrumbs e marcadores
Avatares
CBCBCBCBCB
88px72px56px40px32px
Marcadores
AtivoRevisãoInativoExpirado
BreadcrumbsItem › Item 2 › Item 3 › Item 4
Paginação e busca
Botão de paginação
Indicadores visuais
12345
123…
Busca
Busca avançadaFiltro
Cards
Lorem Ipsum is simply dummy text of the printing
Lorem Ipsum is simply dummy text of the printing
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem | Ipsum | Lorem
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem | Ipsum | Lorem
Lorem | Ipsum | Lorem
Tabelas e filtros
Lorem IpsumLorem Ipsum is simply
Lorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum Lorem Filtro Classificar por
Depoimentos e menu
Menu · padrão
UI/UX & Web
As páginas do novo Beta Online, no desktop e no celular, construídas com os componentes do design system. Escolha a página e navegue.
As telas rolam sozinhas: role, toque e navegue como no site real
Ver site ao vivoSobre o projeto
Uma nova cara para uma escola de Perícia Judicial que tinha parado no tempo.
O Beta Online é uma escola online de cursos de Perícia Judicial, pós-graduação e formação de peritos, com um Banco Nacional de Peritos que conecta profissionais a escritórios e tribunais.
O site antigo tinha um modelo ultrapassado e carregado, que não deixava claro o que era a escola. Criamos primeiro um design system completo e, a partir dele, redesenhamos o site nas versões desktop e mobile. O projeto foi desenhado e entregue, mas não chegou a ser publicado.
O desafio
Trazer uma nova cara para o Beta Online. O site era antigo, com visual datado e informação demais: quem chegava não entendia, de cara, o que era a escola nem o que a plataforma oferecia.
A solução
Começamos pela base: um design system com regras claras de cor, tipografia e componentes. O novo site nasceu desse sistema, mais limpo, com hierarquia forte, o vermelho só onde importa e cada seção explicando um passo: cursos, carreiras, depoimentos, Banco de Peritos e dúvidas.
O que mudou
Mais limpo
Menos ruído, mais respiro e o vermelho usado com propósito: o visual deixou de parecer antigo e passou a passar confiança.
Mais fácil de entender
Logo no topo fica claro o que é o Beta Online e o que a plataforma oferece: cursos, carreiras e o Banco Nacional de Peritos.
Base para crescer
Com o design system, qualquer página nova sai com a mesma cara, sem começar do zero.
Em números
10grupos de componentes no design system
3tamanhos de botão: 56, 48 e 40px
2versões do site: desktop e mobile