Volta — Design System

Colores

Brand + Semantic + Neutrals

Ink #0d0d0d — --ink

Primary #e63c2f — --primary

Paper #f4f4f0 — --paper

Success #2a7a4b — --success

Warning #d97c10 — --warning

Info #1e5fa3 — --info

Danger #c0392b — --danger

Neutral 400 #a8a8a0 — --n400

100

200

300

400

500

600

700

800

900

Tipografía

Syne + IBM Plex Mono

Display 1 3rem / 800

Volta

font-size: 3rem
font-weight: 800

Display 2 2rem / 700

Design System

font-size: 2rem
font-weight: 700

Heading 1 1.5rem / 600

Componentes UI

font-size: 1.5rem
font-weight: 600

Heading 2 1.2rem / 600

Paleta de colores

font-size: 1.2rem
font-weight: 600

Heading 3 1rem / 600

Variantes de botón

font-size: 1rem
font-weight: 600

Body 0.938rem / 400

El design system unifica criterios visuales y de interacción.

font-size: 0.938rem
font-weight: 400

Small 0.813rem / 400

Texto de apoyo y notas secundarias en la interfaz.

font-size: 0.813rem
font-weight: 400

Mono 0.813rem / 400

const color = '#e63c2f';

IBM Plex Mono
font-size: 0.813rem

Label 0.688rem / 600

Etiqueta de sección

font-size: 0.688rem
letter-spacing: 0.14em

Botones

Variantes + Tamaños + Estados

Variantes

Tamaños

Con ícono

Dark bg

Formularios

Inputs + Select + Checkbox + Radio

Estados de input

Default

Filled Texto de ayuda o descripción del campo

Error * El formato del correo no es válido

Validado Correo verificado correctamente

Controles

Select

Textarea

Checkboxes

Envío gratis En descuento Edición limitada

Radio buttons

Talla S Talla M Talla L

Badges & Tags

Estado + Semántica + Neutros

Primary Success Warning Info Danger Neutral Dark Outline Nuevo Verificado Pendiente Agotado Archivado Edición limitada

Alertas

Info · Success · Warning · Danger

Información

Tu pedido está siendo procesado. Recibirás una confirmación por correo en los próximos minutos.

Éxito

Los cambios han sido guardados correctamente. El catálogo se actualizará en los próximos segundos.

Atención

Solo quedan 3 unidades disponibles de este producto. Completa tu compra antes de que se agote.

Error

No se pudo completar la transacción. Verifica los datos de tu tarjeta e intenta nuevamente.

Espaciado

Base 4px scale

4pxsp-1

8pxsp-2

12pxsp-3

16pxsp-4

24pxsp-6

32pxsp-8

48pxsp-12

64pxsp-16

Iconografía

24×24 / stroke 1.8

home

search

user

bag

heart

plus

trash

edit

settings

check

x

chevron-r

chevron-l

chevron-d

download

upload

grid

list