Prototipos

App Comercia

Dashboard

Reservaciones dummy

Tienda en línea Mobil

Tienda en línea PC

Punto de venta (Campos personalizados)

Kanban

Campos personalizados - Documentos

Tamaños y Fuentes

Categoría	Fuente	font-size	font-weight	text-transform	line-height
H1	Roboto	32px	500 / medium	none	2em
H2	Roboto	30px	600 / bold	upercase	2.1em
H3	Roboto	27px	500 / medium	uppercase	2.1em
H4	Roboto	24px	500 / medium	none	2.1em
H5	Roboto	21px	500 / medium	none	2.1em
H6	Roboto	18px	500 / medium	none	2.1em
Subtitulo 1	Roboto	20px	500 / medium	none	1.6em
Subtitulo 2	Roboto	18px	300 / regular	none	1.6em
Body	Roboto	16px	300 / regular	none	1.6em
Body 2	Roboto	15px	500 / medium	none	1.6em
Boton	Roboto	15px	500 / medium	uppercase	1.6em
Caption	Roboto	13px	300 / regular	none	1.8em

Colores de texto

Texto 1

#64707a

Los textos de segunda importancia usan éste color. De manera que sean legibles mas no destaquen en su importancia.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Texto 2

#313c52

La mayoría de los textos o botones vivos usarán este color para que su alto contraste sea destacable de entre todos los colores de fondo. Cabe destacar que no se usará el color negro. Éste color debe considerarse como negro.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Deshabilitado

opacity: .5;

Los elementos deshabilitados o generalmente los textos de clase Caption usan este color. Son elementos en que el usuario debe notar que no están vivos. No denotan en alguna accion o su accion esta incapacitada por alguna razon

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Iconos

Elemento	Fuente	Clase	Content
Actividades	Font Awesome	fa-check-square	\f14a
Almacenes	Font Awesome	fas fa-boxes	\f1cd
Agenda	Font Awesome	fas fa-calendar-day	\f783
cajas y bancos	Font Awesome	fas fa-university	\f19c
campañas	Vtiger-icons	vicon-campaigns	\e60d
casos	Font Awesome	fas fa-ticket-alt	\f3ff
Catalogo	Font Awesome	fas fa-tags	\f02c
CFDIs Pagos	icomoon	vicon-treebespagoscfdi	\e900
Compras	Font Awesome	fas fa-shopping-basket	\f788
Configuración	Font Awesome	fas fa-cog	\f013
Contacto	Font Awesome	fas fa-user	\f007
control tiempo	Font Awesome	fas fa-clock	\f017
Cotizaciones	icomoon	vicon-quotes	\e909
Cuenta	Font Awesome	fas fa-building	\f1ad
Documentos	Font Awesome	fas fa-folder-open	\f07c
Email Templates	Font Awesome	fas fa-envelope-open-text	\f658
F. Traslado	icomoon	vicon-treebesftp	\e905
factura	icomoon	vicon-treebesfacturas	\e907
faqs	Font Awesome	fas fa-question-circle	\f059
Finanzas	Font Awesome	fas fa-money-bill-wave	\f53a
flujo de efectivo	Font Awesome	fas fa-hand-holding-usd	\f4c0
Herramientas	Font Awesome	fas fa-tools	\f7d9
Importador de productos	Font Awesome	fas fa-upload	\f093
Metas de proyectos	Vtiger-icons	vicon-projectmilestone	\e659
Movimientos de almacen	Font Awesome	fas fa-dolly	\f472
Nominas	icomoon	vicon-treebesnom	\e904
Notas de crédito	icomoon	vicon-treebesndc	\e903
nuestros sitios	Font Awesome	fas fa-globe	\f0ac
Operaciones	Font Awesome	fas fa-life-ring	\f1cd
Oportunidades	Font Awesome	fas fa-address-book	\f2b9
Ordenes de compra	Vtiger-icons	vicon-purchaseorder	\e65b
Ordenes de venta	Vtiger-icons	vicon-salesorder	\e667
Papelera	Font Awesome	fas fa-trash	\f1f8
Polizas	Font Awesome	fas fa-file-alt	\f15c
Prospectos	Font Awesome	fas fa-id-card	\f2c2
Proveedores	Font Awesome	fas fa-user-tag	\f507
Proyectos	Font Awesome	fas fa-briefcase	\f0b1
Reportes	Font Awesome	fas fa-chart-bar	\f080
RSS	Vtiger-icons	icon-rss	\e666
SAT	icomoon	vicon-treebessatcfdi	\e906
SAT Productos	icomoon	vicon-treebessatproductos	\e90C
SAT Unidades	icomoon	vicon-treebessatunidades	\e90C
Servicios	Font Awesome	fas fa-hammer	\f6e3
SMS Noti	Vtiger-icons	vicon-smsnotifier	\e672
Soporte	Font Awesome	fas fa-headset	\f590
Tablero	Font Awesome	fas fa-tachometer-alt	\f3fd
Tareas de proyectos	Font Awesome	fas fa-clipboard-check	\f46c
Tipos de mano de obra	Font Awesome	fas fa-hard-hat	\f807
Tipos de Soporte	Font Awesome	fas fa-clipboard-list	\f46d
Ventas	Font Awesome	fas fa-cash-register	\f788
VGS Gantt	Font Awesome	fas fa-cocktail	\f007

Colores Comercia.io

Azul Comercia

var(--azul)

#23A1DB

Morado Comercia

var(--morado)

#8051A1

Rojo

var(--rojo)

#F05B70

Amarillo

var(--amarillo)

#F7C379

Background

var(--fondo)

#EFEFF4

Fondo elemeno

var(--wBox)

#fff

Separador

var(--separador)

#C8C7CC

Fondo elemento Extra

var(--blancoX)

#F6F6F7

Borde dentro elemento

var(--borde)

#E5E5E5

Fondo Input / standard-btn

var(--standard)

#dfd8d845

Texto secundario

.secondary-text

var(--texto)

#64707A

Texto primario / Enlaces

.primary-text

var(--negro)

#313C52

Colores Comercia.io (Modo oscuro)

Azul Comercia

var(--azul)

#23A1DB

Morado Comercia

var(--morado)

#8051A1

Rojo

var(--rojo)

#F05B70

Amarillo

var(--amarillo)

#F7C379

Background

var(--fondo)

#202020

Fondo elemeno

var(--wBox)

#171717

Separador

var(--separador)

#373833

Fondo elemento Extra

var(--blancoX)

#1a1a1a

Borde dentro elemento

var(--borde)

#4b4b48

Fondo imput / standard-btn

var(--standard)

#66666645

Texto secundario

.secondary-text

var(--texto)

#c8c7cc

Texto primario / Enlaces

.primary-text

var(--negro)

#fff

Componentes

Nombre	Componente
Actividad	Nombre de caso 4 Jul 15min Ricardo Sanchez
Advanced 1	Venta de mostrador 13 Feb 6:39am $13,182.00
Advanced 2	Venta de mostrador 13 Feb 6:39am Lorem 1:00
Advanced 3	Venta de mostrador 13 Feb 6:39am $13,182.00 -$3,000
Advanced 4	Tarjeta Credito Santander $1,295.72 13 Feb 6:39am Efectivo Caja chica $95.00 29 Feb 9:05am
Boton primario
Boton secundario
Boton standard
Input Button
Content Title	Titulo de contenido
Details 1	Label Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniamtation
Estados	- Selecciona un estado -
Input
Input complex
Input Multiple	Tipos de gasto: CasetaComidaGasolinaHospedajeInsumosViaticos
Modal Title
Nav
Producto
Progress Bar	85% $3,500 / $8,500
Simple 1i	Lorem Ipsum
Simple 1t	L Lorem Ipsum
Simple 2 heavy	Lorem ipsum Dolor sit amet
Simple 2 light	Lorem ipsum Dolor sit amet
Simple 3	Lorem ipsum 8
Tabs
Timeline Element Top	31 Jun 3:45am Documento Vinculadoscreenshot-01.jpg
Timeline Element Mid	31 Jun 3:45am Documento Vinculadoscreenshot-01.jpg
Timeline Element Bottom	31 Jun 3:45am Documento Vinculadoscreenshot-01.jpg
Timeline Single	Venta 305 20 Nov 5:25pm Almacen Lorem A Venta 305 711 skinny ankleMovimiento: 3 \| Almacen: 267
Titulo	Resumen
User Comment	Beatriz Smith 4 Ago 10:05 am Lorem ipsum dolor sit amet, conse ctetuer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa.
User Input

Bootstrap

Clase	Elemento
com container	Contenedor responsivo de ancho medio. El contenedor se limitará a un máximo de 1250px. `<div class="com container"> <!-- rows aquí --> </div>` Ejemplo:
com container-fluid	Contenedor de ancho completo. El contenedor se extenderá a lo ancho de la pantalla `<div class="com container-fluid"> <!-- rows aquí --> </div>` Ejemplo:
com row	Elemento de fila. Gracias a éste elemento las columas funcionan. `<div class="com container"> <div class="com row"> <!-- columnas aquí --> </div> </div>` .com.row
com col-sm-12	.com.col-sm-12
com col-sm-11	.com.col-sm-11 sm-1
com col-sm-10	.com.col-sm-10 .col-sm-2
com col-sm-9	.com.col-sm-9 .com.col-sm-3
com col-sm-8	.com.col-sm-8 .com.col-sm-4
com col-sm-7	.com.col-sm-7 .com.col-sm-5
com col-sm-6	.com.col-sm-6 .com.col-sm-6
com col-sm-5	.com.col-sm-5 .com.col-sm-3 .com.col-sm-4
com col-sm-4	.com.col-sm-4 .com.col-sm-4 .com.col-sm-4
com col-sm-3	.com.col-sm-3 .com.col-sm-3 .com.col-sm-3 .com.col-sm-3
com col-sm-2	.col-sm-2
com col-sm-1	sm-1

Iconos Comercia

fa-star-1

fa-star-half

fa-star-2

fa-star-half-1

fa-star-half-alt

fa-paypal

fa-visa

fa-amex

fa-mastercard

fa-discover

fa-google-pay

fa-apple-pay

fa-bbva

fa-mercado-libre

fa-mercado-pago

fa-oxxo

fa-whatsapp

fa-facebook

fa-soundcloud

fa-linkedin

fa-twitter

fa-spotify

fa-youtube

fa-pinterest

fa-amazon

fa-dribbble

fa-snapchat

fa-reddit

fa-google

fa-instagram

fa-comercia

fa-phone

fa-sign-in-alt

fa-inactivo

fa-palomita

fa-activo

fa-shopping-cart

fa-pen

fa-envelope

fa-minus

fa-plus

fa-times

fa-dot-circle

fa-circle

fa-venta

fa-factura

fa-map-marker-alt

fa-sign-out-alt

fa-th-list

fa-th-large

fa-search

fa-share

fa-share-alt

fa-calendar-alt

fa-calendar-check

fa-calendar

fa-clock

fa-stopwatch

fa-user

fa-user-circle

fa-elon

fa-elon-2

fa-user-clock

fa-user-cog

fa-user-edit

fa-child

fa-map-marked-alt

fa-lock

fa-lock-open

fa-hand-holding-usd

fa-bars

fa-chevron-down

fa-chevron-left

fa-chevron-right

fa-chevron-up

fa-caret-down

fa-caret-left

fa-caret-right

fa-caret-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-angle-up

fa-angle-double-up

fa-angle-double-right

fa-angle-double-left

fa-angle-double-down

fa-arrow-down

fa-arrow-left

fa-arrow-right

fa-arrow-up

fa-arrow-alt-circle-down

fa-arrow-alt-circle-left

fa-arrow-alt-circle-right

fa-arrow-alt-circle-up

fa-sort-alpha-down

fa-sort-alpha-up

fa-sort-amount-down

fa-sort-amount-up

fa-sort-numeric-down

fa-sort-numeric-up

fa-redo-alt

fa-sync-alt

fa-trash

fa-minus-circle

fa-pencil-alt

fa-store

fa-trophy

fa-rocket

fa-mobile-alt

fa-cash-register

fa-truck-loading

fa-truck

fa-shopping-bag

fa-download

fa-eye

Shortcodes Tienda

[shotcode /]

Prototipos

Tamaños y Fuentes

H1

H2

H3

H4

H5

H6

Colores de texto

Iconos

Colores Comercia.io

Colores Comercia.io (Modo oscuro)

Componentes

L

Bootstrap

Iconos Comercia

Shortcodes Tienda