01 / Design Tokens

CORES PRINCIPAIS

BG Primary#05051A

BG Secondary#0A0A2E

Purple Main#7B2FFF

GRADIENTES

02 / Typography

H1

Software de Alto Padrão

Gradient

Experiência Digital

Body

A Arantes Tecnologia desenvolve soluções focadas em performance e design exclusivo.

03 / Button Gallery

Todos os botões e variações em um único ambiente de teste. Troque o fundo para ver como se comportam em cada contexto.

Semântica (Sólido)

.btn-primary

.btn-secondary

.btn-success

.btn-danger

.btn-warning

.btn-info

Outline

.btn-outline-primary

.btn-outline-success

.btn-outline-danger

.btn-outline-warning

.btn-outline-info

Variações & Estados

.btn-light

.btn-dark

.btn-link

.btn-disabled

Star Border

.star-border--primary

.star-border--secondary

.star-border--success

.star-border--danger

.star-border--warning

.star-border--info

Glass Surface

.gs-primary

.gs-secondary

.gs-success

.gs-danger

.gs-warning

.gs-info

Pixel Buttons

.pixel-card--primary

.pixel-card--secondary

.pixel-card--success

.pixel-card--danger

.pixel-card--warning

.pixel-card--info

Pixel Buttons (Branco)

.pixel-btn--white-primary

.pixel-btn--white-secondary

.pixel-btn--white-success

.pixel-btn--white-danger

.pixel-btn--white-warning

.pixel-btn--white-info

04 / Surface & Tag Gallery

Teste a transparência e o contraste de cards e tags sobre diferentes ambientes.

Superfícies

GLASS LIGHT

.glass-card

GLASS MID

.glass-mid

GLASS INTENSE

.glass-intense

GS CARD

.glass-surface.gs-card

Sistemas Legados

Modernização de infraestrutura com foco em escalabilidade.

.glass-card.glass-mid

PREMIUM UI

2026

Arantes App v2

Uma interface imersiva que utiliza todo o poder do Glassmorphism para criar uma experiência única de usuário.

.glass-surface.gs-card.gs-dynamic

05 / Pixel Card

Cards com efeito de pixels animados ao hover. Porta de @react-bits/PixelCard para Vanilla JS.

Variantes

DEFAULT

.pixel-card--default

BLUE

.pixel-card--blue

YELLOW

.pixel-card--yellow

PINK

.pixel-card--pink

PURPLE

.pixel-card--purple

Exemplos Reais

SERVIÇO

Design de Sistemas

Interfaces premium com animações avançadas.

Premium Service Card

🔥

POPULAR

App Mobile

Soluções Android e iOS sob medida.

Product Highlight Card