Identidad & System Design • Biovity

Guía de Marca y Sistema de Diseño

Los principios visuales, paleta de color, tipografía y componentes que dan vida al ecosistema de biociencias y tecnología en Chile.

Curated Organism

Filosofía de diseño

Satoshi + Geist

Sistema tipográfico

Tonal Depth

Jerarquía sin ruido

Filosofía & Principios

La esencia de Biovity

Cuatro pilares innegociables que guían cada decisión de producto, interfaz y comunicación.

The Curated Organism

Rigor biológico y sofisticación

Rechazamos las plantillas rígidas y saturadas de SaaS genérico. Cada sección respira con espacio deliberado, emulando la precisión milimétrica de un laboratorio y la pureza editorial.

Jerarquía Tonal Sin Bordes Pesados

Tonal Depth vs. Heavy Lines

La profundidad visual se construye apilando superficies sutiles (surface-container-low, lowest y highest) en lugar de encerrar cada módulo en bordes negros o grises pesados.

Color Estratégico y con Propósito

«Si todo tiene color, nada destaca»

La base neutra y sobria permite que el Verde Esmeralda (acciones y verificaciones) y el Violeta (términos clave y acentos de inteligencia) capturen la atención inmediata.

Uniformidad y Precisión Dimensional

Consistencia milimétrica en UI

Inputs, selectores y botones comparten alturas estandarizadas (h-11) y curvaturas coherentes, asegurando una experiencia táctil y visual armoniosa.

Paleta Cromática

Colores de Marca & Superficies Tonales

Haz clic en cualquier muestra de color para copiar su valor HEX o variable CSS al portapapeles.

Colores Principales(Core Brand Identity)

Primary
#00374a
Deep Slate Navy
RGB(0, 55, 74)•--primary

Botones principales, encabezados corporativos, elementos estructurales de alto peso.

Secondary
#006b5e
Emerald Green
RGB(0, 107, 94)•--secondary

Eyebrows en mayúsculas, estados activos, checks de verificación y llamados a la acción secundarios.

Accent
#8483d4
Biovity Violet
RGB(132, 131, 212)•--accent

Acentos en palabras clave de títulos (<span>), badges de IA, descuentos e inteligencia.

Muted Text
#71787d
Slate Gray
RGB(113, 120, 125)•--muted-foreground

Párrafos descriptivos, subtítulos, etiquetas secundarias y metadatos de apoyo.

Superficies Tonales(Tonal Layering System)

Canvas / Raised Cards
#ffffff
Surface Lowest (White)
RGB(255, 255, 255)•--surface-container-lowest

Fondo principal de la aplicación, tarjetas sobre fondos low y modales flotantes.

Tonal Sections
#f3f3f5
Surface Low
RGB(243, 243, 245)•--surface-container-low

Secciones alternadas, tarjetas de estadísticas y contenedores de formularios.

Interactive Chips
#e2e2e4
Surface Highest
RGB(226, 226, 228)•--surface-container-highest

Hover states, chips inactivos, divisores sutiles y pastillas de fondo secundario.

Tipografía & Escala

Estructura & Jerarquía Tipográfica

Combinamos Geist Sans para una legibilidad contemporánea en titulares e interfaces, con Geist Mono para datos técnicos, cifras y etiquetas.

Fuente Primaria • Sans
Geist Sans

Weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789 • ¿?!¡ @#$%&/()=+

Utilizada en títulos hero, encabezados de secciones, textos de botones, nombres de puestos y contenido editorial general.
Fuente Técnica • Monospace
Geist Mono

Weights: 500 (Medium), 600 (SemiBold), 700 (Bold)

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789 • [CLP] {API} $40.000/mes

Utilizada en etiquetas de categoría (eyebrows), cifras estadísticas, monedas, fechas y metadata técnica de laboratorio.
Escala de Jerarquías en Producción
DISPLAY HERO (h1)text-3xl sm:text-5xl lg:text-6xl • font-semibold

Software ATS y Reclutamiento Científico

SECTION HEADING (h2)text-2xl sm:text-3xl md:text-4xl • font-semibold

Conectamos el talento con la industria

EYEBROW TAG (Monospace Green)text-xs • font-mono • font-semibold • uppercase • tracking-wider
OPORTUNIDADES LABORALES • CHILE 2026
BODY / DESCRIPTIONStext-base sm:text-lg • text-muted-foreground • leading-relaxed

Centraliza candidatos, evalúa habilidades de laboratorio con scoring de IA y reduce tus tiempos de contratación técnica en un 60%.

METRIC VALUEtext-2xl sm:text-3xl • font-bold • font-sans • tracking-tight
+1.200Científicos postulando activamente
Biblioteca de Componentes

Patrones & Componentes Interactivos

Muestrario funcional de los elementos UI estandarizados que componen las interfaces de Biovity.

01 • Botones & Acciones
Variantes de Botones

Estandarizados con altura h-11, esquinas rounded-lg y transiciones suaves.

02 • Controles de Selección
Interruptor Mensual / Anual

Pista gris de alto contraste para el estado inactivo y verde esmeralda para el estado activo.

03 • Estadísticas & Cifras
Tarjetas Métricas

+150

Empresas activas

98.4%

Satisfacción ATS

Tipografía Satoshi bold, contenedor tonal `surface-container-low` sin bordes y texto centrado.

04 • Micro-etiquetas & Badges
Píldoras de Estado
Paso 01Paso 03AI MatchRecomendado

Utilizados para números de paso, estados inteligentes y recomendaciones.

05 • Formularios & Filtros
Barra de Búsqueda Homogénea (Regla de Misma Altura h-11)

Todos los controles en una misma fila conservan la altura h-11 para evitar desalineaciones en la cuadrícula visual.