Hero Principal
Layout canonico
Section 0
VinMatrix Design System
Biblioteca visualcom tokens, componentes e padroes reais.
Esta pagina documenta tipografia, superficies, motion e layouts usando as mesmas classes e comportamentos da landing oficial do VinMatrix.
Biblioteca do sistema
Tokens e componentes catalogados
Buscar estilo, classe, componente ou padrao
Buttons & Inputs
Estados e variacoes
Section 3
Typography
Escala tipografica usada na landing, em ordem de hierarquia.
Heading 1
Gestao visual de adega
64px / 67px
Heading 2
Tecnologia de ponta
36px / 40px
Heading 3
Reconhecimento IA
20px / 28px
Heading 4
Baixe o App
16px / 24px
Bold L
R$ 42k
18px / 28px
Bold M
Minha Adega
14px / 20px
Bold S
Comecar Gratis
12px / 16px
Paragraph
Organize posicoes, digitalize rotulos e acompanhe sua colecao com uma experiencia fluida.
18px / 30px
Regular L
Combinamos precisao e elegancia para sua colecao.
18px / 28px
Regular M
Fluxo sincronizado entre VinMatrix e VinCellar.
14px / 20px
Regular S
Disponivel para iOS e Android.
12px / 16px
Colors & Surfaces
Fundos, bordas, overlays e gradientes usados no design real.
Page Surface
landing-shell background
Card Surface
White card with border and depth
Section Surface
Neutral section background
Mobile Cream Surface
VinCellar inspired card background
Brand Gradient
Used in logo text treatment
Radial Overlay
Decorative atmospheric background
Wine Accent (Dark Mode)
--wine-red / --wine-light — glow tuned for dark backgrounds, avoids pure black/white
UI Components
Componentes canonicos com variacoes de estado usadas no produto.
Buttons
Inputs
Estado default
VM
Feature Card
Card base da landing com espacamento e bordas canonicas.
Store Actions
Layout & Spacing
Padroes de container, grid e blocos usados na landing.
Hero Layout
8/4 split with side KPIs
Right column for compact supporting metrics.
Feature Grid
Media + Sidebar
Motion & Interaction
Galeria de animacoes presentes na landing oficial.
Reveal Entrance
Classes: reveal + is-visible (via observer)
Hover Lift
Classes: hover:shadow-xl + transition-all
Button Transition
Classes: hover:bg-primary-hover transition-colors
Media Zoom
Classes: group-hover:scale-105 duration-700
Icons
Mesmo sistema de icones usado na landing: Lucide e Phosphor.
Lucide
Phosphor