M
DestacadoTop Ventas
4.9(128)
Casa OaxacaMezcal Espadin Premium
$890
MXNProductos Mexicanos de Calidad
Mezcal, chocolate, chapulines, textiles y mucho mas. Envios a todo Mexico y al extranjero.
Envio Gratis
En compras +$1,500
Pago Seguro
Tarjeta y transferencia
Devoluciones
30 dias para devolver
Productos Populares
Los mas vendidos de nuestra tienda
C
Nuevo
4.8(89)
MayordomoChocolate de Metate 500g
$185
MXNR
-19%
5(34)
Telares del SurRebozo de Algodon
$1,450
$1,800
MXNC
4.8(45)
Plata ChiapasCollar Plata con Ambar
$1,680
MXNM
Top Ventas
5(23)
Mezcales del SurMezcal Tobala Edicion Limitada
$1,850
MXNH
-13%
Quedan pocas unidades
4.9(18)
Textiles ChiapasHuipil Bordado Floral
$2,800
$3,200
MXNT
4.7(156)
Cacao RealTableta Chocolate 70% Cacao
$95
MXNA
Nuevo
4.9(31)
Plata OaxacaAretes Plata Filigrana
$890
MXNC
4.5(78)
Rancho GrandeChapulines al Ajo 150g
$110
MXNOfertas Especiales
Aprovecha estos descuentos por tiempo limitado
Suscribete y Obtén 10% de Descuento
Recibe ofertas exclusivas y novedades en tu correo
Design System
Guia de estilos ClickO: Definicion visual, paleta cromatica, tipografia y biblioteca de componentes.
Design System
ClickO - Guia de estilos
Colores
Paleta de colores del sistema
Paleta Principal
Los colores base del sistema de diseno
Primary
#00B4AD--primaryBotones principales, links, acentos
Primary Light
#62D6D2--primary-lightFondos suaves, hover en primarios
Secondary
#1A4786--secondaryCTAs secundarios, barras de navegacion
Secondary Light
#3470C3--secondary-lightAcentos secundarios, hover
Success
#4CAF50--successConfirmaciones, estados positivos
Info
#3498DB--infoInformacion, notificaciones
Warning
#F4D03F--warningAlertas, advertencias
Destructive
#CB233D--destructiveErrores, acciones criticas
Gray
#3F3F3F--neutral-grayTexto secundario, bordes neutros
Background
#FFFFFF--backgroundFondo principal de la aplicacion
Foreground
#252525--foregroundTexto principal
Muted
#F5F5F3--mutedFondos secundarios, secciones alternas
Colores para Graficos
Paleta para visualizaciones de datos
Chart 1
Graficos - Primario
Chart 2
Graficos - Secundario
Chart 3
Graficos - Terciario
Chart 4
Graficos - Cuaternario
Chart 5
Graficos - Quinario
Tipografia
Escalas tipograficas y fuentes
Fuentes
DM Sans para texto general,Playfair Display para titulos destacados
DisplayPlayfair Display
48px / 3remBold (700)text-5xl font-bold font-serifClickO Artesanias Mexicanas
Titulos principales, hero sections
Heading 1DM Sans
36px / 2.25remBold (700)text-4xl font-boldEl veloz murcielago hindu comia feliz cardillo y kiwi
Titulos de pagina
Heading 2DM Sans
30px / 1.875remSemibold (600)text-3xl font-semiboldEl veloz murcielago hindu comia feliz cardillo y kiwi
Titulos de seccion
Heading 3DM Sans
24px / 1.5remSemibold (600)text-2xl font-semiboldEl veloz murcielago hindu comia feliz cardillo y kiwi
Subtitulos
Heading 4DM Sans
20px / 1.25remMedium (500)text-xl font-mediumEl veloz murcielago hindu comia feliz cardillo y kiwi
Titulos de card
Body LargeDM Sans
18px / 1.125remRegular (400)text-lgEl veloz murcielago hindu comia feliz cardillo y kiwi
Texto destacado, leads
BodyDM Sans
16px / 1remRegular (400)text-baseEl veloz murcielago hindu comia feliz cardillo y kiwi
Texto principal
Body SmallDM Sans
14px / 0.875remRegular (400)text-smEl veloz murcielago hindu comia feliz cardillo y kiwi
Texto secundario, labels
CaptionDM Sans
12px / 0.75remRegular (400)text-xsEl veloz murcielago hindu comia feliz cardillo y kiwi
Texto pequeno, meta info
Espaciado
Sistema de espaciado y radios
Sistema de Espaciado
Escala de espaciado basada en 4px
xs4pxsm8pxmd16pxlg24pxxl32px2xl48px3xl64pxBorder Radius
Radios de esquina del sistema
smcalc(0.75rem - 4px)
mdcalc(0.75rem - 2px)
lg0.75rem
xlcalc(0.75rem + 4px)
full9999px
Componentes
Biblioteca de componentes UI
Componentes Disponibles
55+ componentes UI disponibles basados en shadcn/ui
AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleCommandContext MenuDialogDrawerDropdown MenuFormHover CardInputInput GroupInput OTPLabelMenubarNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltip
Ejemplo de Componentes
Cards
Card Default
Descripcion de la tarjeta
Contenido de ejemplo
Card Destacada
Con borde primario
Contenido de ejemplo
Card Muted
Con fondo muted
Contenido de ejemplo
Badges
DefaultSecondaryOutlineDestructiveSuccessWarning