Sistema de Tipografía - Poppins + Kaisei HarunoUmi
Display
.text-displayEvaluación de Diseñadores
64px / 700 weight / Kaisei HarunoUmi / -0.02em letter-spacing
Heading 1
.text-h1Plataforma de Evaluación
48px / 700 weight / Poppins / -0.01em letter-spacing
Heading 2
.text-h2Tests Individuales y Organizacionales
36px / 600 weight / Poppins / -0.01em letter-spacing
Heading 3
.text-h3Evaluación de Competencias
30px / 600 weight / Poppins
Heading 4
.text-h4Personal Test vs Organization Test
24px / 600 weight / Poppins
Paragraph
.text-pBloopScore evalúa competencias en varios ejes: habilidades técnicas, investigación, estrategia, comunicación, liderazgo e innovación. Cada test devuelve un score que determina el nivel de seniority (junior, mid, senior, lead).
16px / 400 weight / Poppins / 1.6 line-height
Small
.text-smallTexto secundario para descripciones y detalles adicionales
14px / 400 weight / Poppins / 1.5 line-height
Caption
.text-captionTexto muy pequeño para etiquetas, timestamps y metadata
12px / 400 weight / Poppins / 1.4 line-height
Ejemplos de Uso
Descubre tu Nivel Real
Evalúa tus habilidades de diseño
BloopScore te ayuda a identificar tu nivel real de seniority como diseñador y te proporciona un roadmap claro para tu crecimiento profesional.
Personal Test
Evalúa las habilidades y seniority de un diseñador individual, con feedback detallado para mejorar.
Efectos de Background
Cards con Blur Glass
Efecto de cristal con blur y transparencia para un look moderno y elegante.
Card Glass
Efecto de cristal con transparencia y blur
Card Glass Pro
Versión premium con borde verde
Card Glass Max
Máximo blur con borde azul
Chips con Blur Glass
Chips con efecto de cristal para un look más sofisticado.
Chips Glass Básicos
Chips Glass Coloreados
Chips Glass Interactivos
Ejemplos de Uso Práctico
Casos de uso reales para el efecto glass en la aplicación BloopScore.
Card de Test de Diseñador
Test UX Research
CompletadoEvaluación de habilidades de investigación de usuario
Widget de Dashboard
Estadísticas
HoyPanel de Filtros
Filtros
Paleta de Colores
Primary
#17FF57Secondary
#17FF57Background
#1e1e1eSurface
#252525Text
#F1F5F9Texto de ejemplo
Success
#17FF57Warning
#FFB800Error
#FF4444Info
#17B8FFEscala de Colores Semánticos
Paleta basada en el verde primario
Todos los colores semánticos están derivados del color primario (#17FF57) para mantener coherencia visual.
Success
#4DFF7A#17FF57#0FCC3DWarning
#FFCC4D#FFB800#CC8F00Error
#FF6666#FF4444#CC2222Info
#4DD6FF#17B8FF#0F99CCEjemplos de Uso con la Nueva Escala
Indicadores de Estado
Barras de Progreso
Sistema de Medallas
Medallas de Certificación
Sistema de medallas para certificar logros y habilidades de diseñadores.
Medallas por Rareza
Categorías de Medallas
Habilidades
UX Research, UI Design
Logros
Primer test, Puntuación perfecta
Certificaciones
UX Pro, Product Designer
Estados de Medallas
Sistema de Preguntas
Componentes de Evaluación
Sistema de preguntas tipo Typeform para evaluaciones rápidas de diseñadores.
Tipos de Preguntas
Selección Múltiple
Rating
Bueno
Sí/No
Texto
Categorías de Evaluación
Niveles de Dificultad
Componentes de Chips
Variantes de Chips
Chips Básicos
Chips Primarios
Chips de Interacción Verde
Chips de Estado
Chips Interactivos
Haz clic en las X para remover los chips
Tamaños
Ejemplos de Uso
Filtros de Habilidades
Selecciona las competencias que quieres evaluar:
Resultados del Test
Perfil de Usuario
Componentes de Input
Ejemplos de Formularios
Inputs Básicos
Inputs Avanzados
Ejemplo de Formulario Completo
Configuración para Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: "#17FF57",
secondary: "#17FF57",
background: "#1e1e1e",
surface: "#252525",
text: "#F1F5F9",
success: "#17FF57",
warning: "#FFB800",
error: "#FF4444",
info: "#17B8FF",
}
}
}
}