andmarcelle — Design que transforma marcas
Design System v1.0 — Lançamento

Design que
transforma marcas
em experiências

Do token ao componente. Do componente ao produto. andmarcelle entrega sistemas visuais que escalam com a sua marca.

andmarcelle.design/system
Design Tokens
Cores
Tipografia
Componentes
Iconografia
Grids
Motion
Exportar
Design Tokens v1.0.0
32+
Componentes
11
Tokens cor
14
Seções
v1.0
Release
Uso de tokens
Botões
Primary
Secondary
Ghost
Badges
v1.0
Beta
Draft
Tokens exportados
248
↑ 12% este mês
Sistema ativo
All systems operational
Componentes
32+
Glass 3D Icons
Usado por equipes de design em todo o Brasil
Estúdio Branco
Nova Marca Co.
Pixel House
Form Studio
Atlântico DSG
Viva Creative
Features

Tudo que uma marca
de verdade precisa

Design tokens, componentes, iconografia glass 3D e documentação — em um sistema coeso e pronto para usar.

Design Tokens

Variáveis CSS + JSON para Figma Tokens Studio. Cores, tipografia, espaçamento e motion em tokens reutilizáveis.

32 Ícones Glass 3D

Biblioteca com efeito de vidro tridimensional, reflexos especulares e 5 temas de cor.

Figma Ready

tokens.json compatível com Tokens Studio. Import em 3 cliques.

248 tokens prontos

32+ Componentes

Botões, cards, inputs, badges, avatares, alertas e muito mais — prontos para produção.

Button Card Input +29

Motion System

4 durações e 3 curvas de easing para animações fluidas.

Tipografia SF Pro Display

Escala tipográfica completa — de 12px a 96px — com pesos, entrelinha e letter-spacing definidos.

andmarcelle
Display · Light · Regular · Medium · Bold

Espaçamento & Raio

13 tokens de espaçamento (4px–128px) e 6 raios de borda — do sharp ao pill.

sm → full
32+
Componentes prontos
248
Design tokens
5
Temas de cor
100%
CSS puro, zero dependências
Design Tokens

Um sistema de tokens
vivo e escalável

Cada cor, espaçamento, sombra e animação é um token reutilizável. Mude um token e todo o sistema se atualiza.

CSS Custom Properties — tokens como variáveis CSS nativas, sem build step
JSON para Figma — importe direto no Tokens Studio em um clique
Hierarquia semântica — tokens de primitivo + tokens de componente
Ver tokens →
tokens.json — andmarcelle
Cores
--color-black
#0A090C
--color-purple-rich
#5B12B8
--color-purple-mid
#7B3ACD
--color-lavender
#E4DDEF
Espaçamento
--space-4
16px · 1rem
--space-8
32px · 2rem
--space-16
64px · 4rem
Sombras
--shadow-glow-sm
glow 20px
--shadow-glow-lg
glow 80px
Componentes

Componentes que
funcionam em qualquer escala

De 32px a 104px, do mobile ao desktop — cada componente foi desenhado para ser perfeito em todos os contextos.

Glass 3D Icons — 32 ícones com efeito de vidro, 5 temas de cor e 5 tamanhos
Estados completos — hover, focus, disabled, error — documentados e funcionais
Dark first — construído para o tema escuro com suporte opcional para claro
Começar agora →
andmarcelle
MA
Design System
Color Tokens
9 cores + 2 gradientes
Componentes
Glass 3D Icons
32 ícones · 5 temas
Tipografia
SF Pro Display
5 pesos · escala 12–96px
Primário
Secundário
Componentes
32+
Tokens
248
Portfólio

Projetos que falam
por si mesmos

Uma seleção de trabalhos criados com o sistema andmarcelle — identidade, UI, iconografia e muito mais.

Clientes

Amado por quem cria

Designers e desenvolvedores que já usam o sistema andmarcelle nos seus projetos.

★★★★★

"O design system da andmarcelle economizou semanas de trabalho no nosso projeto. Os tokens estão todos alinhados e a importação no Figma foi trivial."

LS
Lucas Silva
Product Designer · Estúdio Branco
★★★★★

"Os ícones glass 3D são exatamente o que eu precisava. Ficaram perfeitos no app — cinco temas de cor e cada um melhor que o outro."

AC
Ana Costa
UI Designer · Pixel House
★★★★★

"Finalmente um design system que parece marca de verdade. A consistência entre tokens, componentes e ícones é impecável. Recomendo demais."

RO
Renata Oliveira
Brand Designer · Nova Marca Co.
Preços

Simples, transparente

Escolha o plano certo para o seu projeto. Sem surpresas, sem taxas escondidas.

Starter
R$ 97 /mês

Perfeito para designers freelance e projetos pessoais.

Começar grátis
Design Tokens completos
32+ Componentes HTML/CSS
tokens.json para Figma
Glass 3D Icons
Suporte prioritário
Atualizações vitalícias
Enterprise
Custom

Para agências e empresas com necessidades específicas de branding.

Falar com a equipe
Tudo do Professional
White-label completo
Customização de brand
Suporte dedicado (4h SLA)
Onboarding com a equipe
Acesso ao código-fonte
FAQ

Perguntas frequentes

O sistema funciona com qualquer framework?
Sim. O sistema é CSS puro com custom properties — funciona em qualquer projeto: HTML vanilla, React, Vue, Svelte, Next.js ou qualquer outro. Sem dependências externas.
Como importo os tokens no Figma?
Instale o plugin Tokens Studio for Figma, abra o plugin no seu arquivo e carregue o arquivo tokens.json incluído. Em menos de 3 cliques todos os tokens aparecem como Variables e Styles nativos do Figma.
Os ícones glass 3D funcionam em produção?
Sim. Os ícones são SVGs inline com efeitos CSS puros — sem imagens, sem bibliotecas externas. Leves, acessíveis e com suporte a todos os navegadores modernos.
Posso usar em projetos de clientes?
A licença comercial (planos Professional e Enterprise) permite uso em projetos de clientes, produtos SaaS e aplicações comerciais. O plano Starter é apenas para uso pessoal e portfólio.
Existe suporte para modo claro (light mode)?
O sistema foi construído dark-first mas inclui variações dos tokens para fundo claro. Os ícones glass funcionam lindamente sobre o lavender da marca, como demonstrado na seção de iconografia.

Pronto para construir
algo extraordinário?

Junte-se a designers que já escolheram o andmarcelle Design System.