Manual de Estilo

Guía de diseño y componentes para Berilio

1. Identidad de Marca

Logo Principal
Be rilio
Uso: Aplicación principal
Tamaño mínimo: 45px altura
Espacio libre: 50% del alto
Isotipo
Be
Uso: Favicon, avatar
Elemento: Be (Berilio)
Color: #1565C0
Versión Oscura
Be rilio
Uso: Fondos oscuros
Contraste mínimo: 4.5:1
Ajuste: +20% brillo

2. Paleta de Colores

Colores Principales

Primary Blue
#2196F3
Acciones principales, links
Primary Dark
#1565C0
Estados hover, énfasis
Primary Darker
#10519D
Footer, fondos oscuros
Accent Blue
#1878C6
Acentos, badges

Colores de Fondo

Blue Light (Beige)
#E3F2FD
Fondos de tarjetas
Cyan Light (Mint)
#E1F5FE
Secciones alternativas
Indigo Light (Lavender)
#E8EAF6
Destacados, CTA
Background
#FEFEFE
Fondo principal

Colores de Texto

Text Primary
#2D2D2D
Títulos, texto principal
Text Secondary
#666666
Descripciones, subtítulos
Text Light
#999999
Placeholders, notas
Border Light
#F0F0F0
Bordes, divisores

3. Tipografía

Font Stack Principal
JetBrains Mono - La fuente técnica que transmite precisión
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', 'Consolas', monospace;
H1 - Hero Title

Un solo sistema para todas tus certificaciones ISO

font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.3;
H2 - Section Title

Características principales

font-size: 2rem; font-weight: 600;
H3 - Card Title

Ahorra 70% del tiempo en auditorías

font-size: 1.25rem; font-weight: 600;
Body Text

Berilio es el software de gestión ISO diseñado para empresas que necesitan mantener múltiples certificaciones sin duplicar esfuerzos. Integramos ISO 9001, 14001, 45001 y 27001 en un solo sistema inteligente.

font-size: 1rem; line-height: 1.6;
Small Text

© 2025 Berilio. Todos los derechos reservados.

font-size: 0.9rem; color: var(--text-secondary);

4. Componentes UI

Botones

Nav Button
<button class="btn-primary">Botón Primario</button> <button class="btn-secondary">Botón Secundario</button> <button class="btn-outline">Botón Outline</button>

Tarjetas de Características

Tarjeta Azul Claro

Contenido de ejemplo para mostrar el estilo de la tarjeta.

Tarjeta Cyan

Contenido de ejemplo para mostrar el estilo de la tarjeta.

Tarjeta Índigo

Contenido de ejemplo para mostrar el estilo de la tarjeta.

<div class="feature-card beige"> <h3>Título</h3> <p>Descripción</p> </div>

Elementos de Formulario

5. Sistema de Espaciado

0.25rem (4px)
0.5rem (8px)
1rem (16px)
1.5rem (24px)
2rem (32px)
3rem (48px)
4rem (64px)

6. Sistema de Grid

Grid de 3 Columnas

Columna 1
Columna 2
Columna 3

Grid de 2 Columnas

Columna 1
Columna 2

Grid Responsive

Auto 1
Auto 2
Auto 3
Auto 4

7. Iconografía

8. Guías de Uso

Principios de Diseño

  • Claridad: Interfaces limpias y sin distracciones
  • Consistencia: Uso uniforme de colores, espaciado y tipografía
  • Técnico pero accesible: Lenguaje preciso sin ser intimidante
  • Enfoque en datos: Presentación clara de información compleja
  • Responsive: Diseño adaptable a todos los dispositivos

Tono de Comunicación

  • Profesional: Serio pero no corporativo
  • Directo: Sin marketing fluff, solo valor real
  • Técnico: Usar terminología ISO correcta
  • Confiable: Transmitir seguridad y experticia
  • Español neutro: Evitar regionalismos

Mejores Prácticas

  • Usar JetBrains Mono para todo el texto
  • Mantener contraste mínimo de 4.5:1 para accesibilidad
  • Border radius consistente de 12px para tarjetas, 8px para botones
  • Transiciones suaves de 0.3s ease
  • Padding de sección estándar de 4rem 2rem
  • Máximo ancho de contenido de 1200px