DESIGN SYSTEM

# Guia de Estilo Premium

A padronização visual completa da Arantes Tecnologia.

## 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`
Tags
TAG LABEL `.tag-label`
Standard Tag `.tag`
Primary Tag `.tag-primary`
Secondary Tag `.tag-secondary`
Success Tag `.tag-success`
Danger Tag `.tag-danger`
Warning Tag `.tag-warning`
Info Tag `.tag-info`
STANDARD
`.gs-tag`
PRIMARY
`.gs-tag.gs-primary`
SECONDARY
`.gs-tag.gs-secondary`
SUCCESS
`.gs-tag.gs-success`
DANGER
`.gs-tag.gs-danger`
WARNING
`.gs-tag.gs-warning`
INFO
`.gs-tag.gs-info`
Exemplos Reais
ARQUITETURA

#### 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`