Management system UI - v0 by Vercel

Cloned Vanessa55-rgb/Fronted to start this chat.

dame por favor las especificaciones para hacer el figma igual dame los colores y todo lo demas en menos de 5000 caracteres

57d ago

Especificaciones de Diseño — GestiónPro

Paleta de Colores

Token	Hex	Uso
Primary	`#0D2240`	Sidebar, botones principales, textos destacados
Primary Light	`#1A3A5C`	Hover en sidebar, fondos secundarios oscuros
Accent	`#F5C518`	CTAs, badges activos, iconos destacados, links hover
Background	`#FFFFFF`	Fondo principal de páginas
Card	`#F8FAFC`	Tarjetas, tablas, contenedores
Border	`#E2E8F0`	Bordes de inputs, separadores, líneas
Muted	`#64748B`	Texto secundario, placeholders
Foreground	`#0F172A`	Texto principal
Destructive	`#EF4444`	Errores, eliminar
Success	`#22C55E`	Estados activos, confirmaciones

Tipografía

Familia: Inter (Google Fonts)

Elemento	Peso	Tamaño	Line Height
H1	700 (Bold)	48px	1.1
H2	600 (Semibold)	32px	1.2
H3	600 (Semibold)	24px	1.3
H4	500 (Medium)	18px	1.4
Body	400 (Regular)	16px	1.5
Small	400 (Regular)	14px	1.5
Caption	500 (Medium)	12px	1.4

Espaciado (8pt Grid)

4px — Gaps mínimos
8px — Padding interno pequeño
16px — Padding estándar
24px — Espaciado entre secciones
32px — Margen de contenedores
48px — Separación de secciones grandes
64px — Padding vertical de hero

Border Radius

Elemento	Valor
Botones	8px
Cards	12px
Inputs	8px
Badges	9999px (pill)
Avatares	9999px (círculo)
Modales	16px

Sombras

Card:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
Card Hover:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
Dropdown:    0 10px 15px rgba(0,0,0,0.1)
Modal:       0 25px 50px rgba(0,0,0,0.25)

Componentes Clave

Sidebar (240px ancho)

Fondo: #0D2240
Items: padding 12px 16px, radius 8px
Item activo: fondo #1A3A5C, borde izq 3px #F5C518
Iconos: 20px, color #94A3B8 (inactivo), #F5C518 (activo)

Botón Primario

Fondo: #0D2240
Texto: #FFFFFF
Hover: #1A3A5C
Padding: 12px 24px

Botón Accent

Fondo: #F5C518
Texto: #0D2240
Hover: #D4A600

Input

Borde: 1px #E2E8F0
Focus: borde #0D2240, ring 2px rgba(13,34,64,0.1)
Padding: 12px 16px
Placeholder: #94A3B8

Card

Fondo: #FFFFFF
Borde: 1px #E2E8F0
Padding: 24px
Hover: translateY(-2px) + sombra elevada

Badge

Activo: fondo #DCFCE7, texto #166534
Inactivo: fondo #FEE2E2, texto #991B1B
Pendiente: fondo #FEF3C7, texto #92400E

Tabla

Header: fondo #F8FAFC, texto #64748B, 12px uppercase
Row hover: fondo #F1F5F9
Celdas: padding 16px

Breakpoints

Mobile: 0–640px
Tablet: 641–1024px
Desktop: 1025px+

Iconos

Lucide Icons (stroke-width: 2, tamaño base: 20px)

Transiciones

Default: all 200ms ease
Hover cards: transform 200ms ease, box-shadow 200ms ease
Sidebar collapse: width 300ms ease

57d ago

listo los precios que sean colombianos y las sede que tiene es bogota, medellin y amalfi

57d ago

No veo precios en la landing page actual. Voy a agregar una sección de precios en pesos colombianos y actualizar el footer con las sedes de Bogotá, Medellín y Amalfi.

Listo. He actualizado la landing page con:

Sección de precios en pesos colombianos (COP): Tres planes - Básico ($149.000/mes), Profesional ($349.000/mes) y Empresarial ($749.000/mes) con sus respectivas características.
Sedes actualizadas en el footer: Bogotá, Medellín y Amalfi (Colombia) con un diseño mejorado que incluye logo, descripción, lista de sedes y enlaces rápidos.
Navegación actualizada: Agregué el enlace "Precios" tanto en el menú desktop como en el menú móvil.

57d ago

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...

Cloned Vanessa55-rgb/Fronted to start this chat.

dame por favor las especificaciones para hacer el figma igual dame los colores y todo lo demas en menos de 5000 caracteres

57d ago

Especificaciones de Diseño — GestiónPro

Paleta de Colores

Token	Hex	Uso
Primary	`#0D2240`	Sidebar, botones principales, textos destacados
Primary Light	`#1A3A5C`	Hover en sidebar, fondos secundarios oscuros
Accent	`#F5C518`	CTAs, badges activos, iconos destacados, links hover
Background	`#FFFFFF`	Fondo principal de páginas
Card	`#F8FAFC`	Tarjetas, tablas, contenedores
Border	`#E2E8F0`	Bordes de inputs, separadores, líneas
Muted	`#64748B`	Texto secundario, placeholders
Foreground	`#0F172A`	Texto principal
Destructive	`#EF4444`	Errores, eliminar
Success	`#22C55E`	Estados activos, confirmaciones

Tipografía

Familia: Inter (Google Fonts)

Elemento	Peso	Tamaño	Line Height
H1	700 (Bold)	48px	1.1
H2	600 (Semibold)	32px	1.2
H3	600 (Semibold)	24px	1.3
H4	500 (Medium)	18px	1.4
Body	400 (Regular)	16px	1.5
Small	400 (Regular)	14px	1.5
Caption	500 (Medium)	12px	1.4

Espaciado (8pt Grid)

4px — Gaps mínimos
8px — Padding interno pequeño
16px — Padding estándar
24px — Espaciado entre secciones
32px — Margen de contenedores
48px — Separación de secciones grandes
64px — Padding vertical de hero

Border Radius

Elemento	Valor
Botones	8px
Cards	12px
Inputs	8px
Badges	9999px (pill)
Avatares	9999px (círculo)
Modales	16px

Sombras

Card:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
Card Hover:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
Dropdown:    0 10px 15px rgba(0,0,0,0.1)
Modal:       0 25px 50px rgba(0,0,0,0.25)

Componentes Clave

Sidebar (240px ancho)

Fondo: #0D2240
Items: padding 12px 16px, radius 8px
Item activo: fondo #1A3A5C, borde izq 3px #F5C518
Iconos: 20px, color #94A3B8 (inactivo), #F5C518 (activo)

Botón Primario

Fondo: #0D2240
Texto: #FFFFFF
Hover: #1A3A5C
Padding: 12px 24px

Botón Accent

Fondo: #F5C518
Texto: #0D2240
Hover: #D4A600

Input

Borde: 1px #E2E8F0
Focus: borde #0D2240, ring 2px rgba(13,34,64,0.1)
Padding: 12px 16px
Placeholder: #94A3B8

Card

Fondo: #FFFFFF
Borde: 1px #E2E8F0
Padding: 24px
Hover: translateY(-2px) + sombra elevada

Badge

Activo: fondo #DCFCE7, texto #166534
Inactivo: fondo #FEE2E2, texto #991B1B
Pendiente: fondo #FEF3C7, texto #92400E

Tabla

Header: fondo #F8FAFC, texto #64748B, 12px uppercase
Row hover: fondo #F1F5F9
Celdas: padding 16px

Breakpoints

Mobile: 0–640px
Tablet: 641–1024px
Desktop: 1025px+

Iconos

Lucide Icons (stroke-width: 2, tamaño base: 20px)

Transiciones

Default: all 200ms ease
Hover cards: transform 200ms ease, box-shadow 200ms ease
Sidebar collapse: width 300ms ease

listo los precios que sean colombianos y las sede que tiene es bogota, medellin y amalfi

57d ago

No veo precios en la landing page actual. Voy a agregar una sección de precios en pesos colombianos y actualizar el footer con las sedes de Bogotá, Medellín y Amalfi.

Listo. He actualizado la landing page con:

Sección de precios en pesos colombianos (COP): Tres planes - Básico ($149.000/mes), Profesional ($349.000/mes) y Empresarial ($749.000/mes) con sus respectivas características.
Sedes actualizadas en el footer: Bogotá, Medellín y Amalfi (Colombia) con un diseño mejorado que incluye logo, descripción, lista de sedes y enlaces rápidos.
Navegación actualizada: Agregué el enlace "Precios" tanto en el menú desktop como en el menú móvil.

57d ago

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...