● ONLINE
VTEX Design System

VTEX Design System

Sistemas de Design

código aberto framework para consistent, accessible e-commerce interfaces.

GratuitoSistemas de Design
VISITAR SITE >>

Visão Geral

VTEX Design System is VTEX's official open-source design system for building scalable, consistent, and accessible digital experiences in e-commerce platforms. It provides reusable UI components, patterns, guidelines, and tools tailored for online stores, checkout flows, and admin panels, with a focus on performance, internationalization, and developer productivity using React components and Figma libraries. Component Library: Reusable elements like buttons, forms, cards, product grids, and checkout widgets with variants for themes and states. Design Tokens: Semantic colors, typography, spacing, icons, and motion for brand consistency. Accessibility: WCAG compliance with ARIA support and inclusive patterns. Tools: Figma kit for prototyping; React library (VTEX Styleguide) for implementation.

label.best_for

tokens de projetar: Semantic cores, tipografia, espaçamento, ícones, e motion para marca consistency. acessibilidade: WCAG compliance com ARIA suporte e inclusive padrões. ferramentas: Figma kit para prototipagem; React biblioteca (VTEX Styleguide) para implementation.

Principais Recursos

  • biblioteca de componentes: Reusable elements como buttons, forms, cards, product grids, e checkout widgets com variants para themes e states.
  • tokens de projetar: Semantic cores, tipografia, espaçamento, ícones, e motion para marca consistency.
  • acessibilidade: WCAG compliance com ARIA suporte e inclusive padrões.
  • ferramentas: Figma kit para prototipagem; React biblioteca (VTEX Styleguide) para implementation.

Prós

  • +Código aberto
  • +Biblioteca extensa de ícones
  • +Geração de paleta de cores
  • +Verificação de contraste de acessibilidade

Contras

  • -A adoção requer alinhamento da equipe
  • -A personalização pode ser complexa

/// ESPECIFICAÇÕES

  • Preço:free
  • Plataforma:
    Browser
ASSETS_DIRECTORY
figma
/// Ferramentas Similares
Vuetify

Vuetify

Vuetify é um completo Vue.js framework de IU esse strictly adheres para material projetar guidelines, oferecendo rico conjunto de componentes e poderoso personalização capabilities.

A2UI

A2UI

código aberto protocol para IA agents para gerar seguro, declarative UIs através de platforms.

Watt Design System

Watt Design System

Holaluz's Figma-baseado kit de IU para consistent, accessible renewable energy interfaces.