Guía de Estilo Completa

Sistema de diseño unificado para ecología y tecnología

Combina la sostenibilidad de la ecología con la innovación tecnológica

1. Sistema de Colores

1.1 Paleta Primaria

#A1A1A1

Fondo General

--color-background

#0D2040

Paneles/Tarjetas

--color-panel

#132C55

Campos de Entrada

--color-input

#10B981

Botón Principal

--color-primary

#059669

Hover Botón

--color-primary-hover

1.2 Paleta Secundaria

#E5E7EB

Texto Principal

--color-text-primary

#C7D0E0

Texto Secundario

--color-text-secondary

1.3 Estados del Sistema

#059669

Éxito

--color-success

#D97706

Advertencia

--color-warning

#DC2626

Error

--color-error

#3B82F6

Información

--color-info

#6B7280

Deshabilitado

--color-disabled

2. Sistema Tipográfico

2.1 Tokens Tipográficos

--font-heading

'Times New Roman', serif

--font-body

system-ui, -apple-system, sans-serif

--text-xs

0.75rem (12px)

--text-sm

0.875rem (14px)

--text-base

1rem (16px)

--text-lg

1.125rem (18px)

--text-xl

1.25rem (20px)

--text-2xl

1.5rem (24px)

2.2 Jerarquía Tipográfica

Encabezado H1 - Título Principal

Times New Roman, 24pt, Bold, Mayúsculas, Centrado

Encabezado H2 - Subtítulo

Times New Roman, 20pt, Itálica, Izquierda

Encabezado H3 - Sub-subtítulo

Times New Roman, 16pt, Bold, Izquierda

Este es un ejemplo de texto general o cuerpo. Utilizamos una fuente sans-serif para mejor legibilidad en pantallas, con tamaño de 16px y interlineado de 1.5 para una lectura cómoda.

Este es un texto secundario o de nota, con estilo itálico y color más suave para información complementaria.

Texto de leyenda o caption, utilizado para aclaraciones o información menos relevante.

3. Componentes de Interfaz

3.1 Sistema de Botones

Botón Primario Botón Secundario Botón Peligro Botón Advertencia Botón Deshabilitado

3.2 Formularios y Estados

Campo Normal

Campo Éxito

✓ Validación exitosa

Campo Error

✗ Error de validación

Campo Advertencia

⚠ Advertencia de validación

3.3 Tarjetas y Componentes

□

Ecología

Componentes que representan sostenibilidad y cuidado ambiental.

Utiliza tonos verdes y formas orgánicas.

□

Tecnología

Elementos que transmiten innovación y precisión tecnológica.

Utiliza azules profundos y formas geométricas.

⚡

Innovación

La combinación perfecta entre ecología y tecnología.

Fusiona ambos conceptos de manera armónica.

4. Tokens de Diseño

Espaciado

--space-1

0.25rem (4px)

--space-2

0.5rem (8px)

--space-4

1rem (16px)

--space-6

1.5rem (24px)

--space-8

2rem (32px)

Border Radius

--radius-sm

4px

--radius-md

8px

--radius-lg

12px

Sombras

--shadow-sm

0 1px 2px rgba(0,0,0,0.05)

--shadow-md

0 4px 6px rgba(0,0,0,0.1)

--shadow-lg

0 10px 15px rgba(0,0,0,0.1)

5. Resumen de la Guía

□ Identidad Visual

Ecología: Representada por verdes (#10B981, #059669) que transmiten sostenibilidad y crecimiento.

Tecnología: Representada por azules profundos (#0D2040, #132C55) que evocan innovación y precisión.

□ Sistema de Diseño

Tipografía Híbrida: Times New Roman para títulos (identidad) + Sans-serif para cuerpo (legibilidad).

Componentes Modulares: Sistema escalable y consistente para todos los elementos UI.

□ Características Principales

• Paleta de colores expandida con estados completos
• Sistema tipográfico híbrido para mejor legibilidad
• Tokens CSS organizados para fácil mantenimiento
• Componentes accesibles y responsive
• Consistencia visual en toda la aplicación