Guía de estilos · Marketplace Dashboard

Paleta de colores

Los valores marcados como estimado se infieren visualmente porque la compresión de la imagen desatura los acentos.

Superficies oscuras (dashboard)

--color-nav-bg

#042326

Barra de navegación y fondo del tooltip

--color-panel-bg

#062225

Marco exterior del dashboard

--color-header-bg

#193135

Bloque "Hello Antoine!" que contiene los KPI

--color-metric-card-bg

#2C4144

Tarjetas KPI (Total sales, Products, Churn)

--color-icon-circle-bg

#475C5D

Círculo de icono dentro de la tarjeta KPI

Superficies claras

--color-page-bg

#E8EDF3

Fondo del panel izquierdo de presentación

--color-card-bg

#FFFFFF

Tarjetas blancas y feature cards

--color-card-header-bg

#F1F5F6

Cabecera de tarjeta y fila seleccionada

--color-sub-card-bg

#F9FAFC

Mini-KPIs y filas de acción

--color-chart-area-fill

#EAF6F2

Relleno bajo la línea principal del gráfico

--color-axis-badge-bg

#F7F7F7

Badge del día activo en el eje X

--color-border estimado

#DDE3EA

Bordes 1px de tarjetas claras

Texto

--color-text-hero

#2D3E50

Título grande de portada

--color-text-body-muted

#798088

Párrafo descriptivo

--color-text-feature

#3B434E

"Fully Customizable", "Clean Design"…

--color-text-dark

#1F2F2F

Títulos de tarjeta y línea principal del gráfico

--color-text-table

#3D3D3D

Celdas de la tabla de productos

--color-text-table-head

#2C2C2C

Encabezados Name / Price

--color-text-on-dark

#F5FFFF

Texto principal sobre oscuro

--color-text-on-dark-muted

#A4B9BC

Etiquetas KPI ("Total sales")

--color-text-on-dark-faint

#516669

"vs prev. 28 days", "of $ 5,000.00"

--color-text-axis

#ADADAD

Ejes del gráfico y placeholder del buscador

Acentos

--color-accent-mint

#C7F8E5

Logo / marca

--color-accent-green estimado

#4FB286

Variación positiva (↗ 11%)

--color-accent-orange estimado

#E9A13B

Línea "Last Period" y punto del tooltip

--color-accent-red estimado

#C0392B

Icono de alerta / producto destacado

Tipografía

Sans-serif geométrica y redondeada. El título de portada coincide con Manrope (o Plus Jakarta Sans); el texto de interfaz con Inter. Pesos: 400 cuerpo y etiquetas · 500 nav, features y encabezados de tabla · 600 títulos de tarjeta y KPIs · 700 título de portada. Los números usan tabular-nums.

hero--text-hero 44px · 700 · lh 1.1 · -0.02em · Manrope

Marketplace Dashboard with AI Integrations

greeting--text-greeting 24px · 600 · lh 1.2 · -0.01em

Hello Antoine!

kpi-value--text-kpi 24px · 600 · lh 1.1 · tabular-nums

$ 1,284.00

feature--text-feature 18px · 500 · lh 1.3

Fully Customizable

body--text-body 16px · 400 · lh 1.55

A clean, AI-powered component designed to highlight at-risk customers based on purchase behavior, satisfaction rating, and engagement recency.

card-title--text-card-title 15px · 600 · lh 1.3

Quick Analytics

nav--text-nav 13px · 500

Home · Products · Analytics · Reports

table--text-table 13px · 400 / 500 encabezados

Winter Jacket 45.67

label--text-label 12px · 400

Total sales

caption + delta--text-caption 11px · 400 / 500

↗ 11% vs prev. 28 days

Radios de borde

Elemento	Token
Panel exterior del dashboard	--radius-panel: 16px
Tarjetas KPI, Analytics, Products, features	--radius-card: 12px
Mini-KPIs y filas de acción	--radius-sub-card: 8px
Tooltip del gráfico	--radius-tooltip: 6px
Miniaturas de producto	--radius-thumb: 6px
Nav pill, buscador, badge del eje	--radius-full: 999px
Círculo de icono KPI	50%

Espaciado y dimensiones

Medida	Token
Padding del panel exterior	--panel-padding: 16px
Padding interior de tarjeta	--card-padding: 16px
Gap entre tarjetas KPI	--gap-kpi: 12px
Gap entre tarjetas principales	--gap-cards: 16px
Altura de la barra de navegación	--nav-height: 48px
Altura de fila de tabla	--table-row-height: 44px
Altura de fila de acción	--action-row-height: 36px
Círculo de icono KPI	--icon-circle-size: 36px
Miniatura de producto	--thumb-size: 24px

Componentes

Reproducción de los bloques de la captura usando únicamente los tokens.

Navegación + tarjetas KPI

Total sales

$ 1,284.00of $ 5,000.00

↗ 11%vs prev. 28 days

Total Products

122items

↗ 0%vs prev. 28 days

% Latest Churn

7.81%

↗ 1.7%vs prev. 28 days

Average Order Value

$ 124.32

Last Period Sales

$ 901.77

Low Stock Products

7items

6 orders to fulfill ›

50+ payments to capture ›

1 chargeback to review ›

Name	Price
Winter Jacket	45.67
V2A Helmet	150.25
Oversized Shirt	300.99
Bike Glove	75.50
Short Pants	400.00
Mamba Bag	250.00
Summer Jacket	175.30

Feature cards (portada)

Fully Customizable

Clean Design

Auto Layout