BioTech Platform — Brandbook Visual

01

Paleta — Light Theme

Turquesa → Violeta → Rosa

Primarios

Primary#00d4aa

Secondary#6c5ce7

Accent#fd79a8

Fondos

Base#ffffff

Alt#f9fafb

Card#ffffff

Escalonamiento de grises

Arquetipo

Industry#0984e3

Startup#e84393

Research#00b894

VC#f39c12

Policy#e17055

03

Íconos Heroicons — Tailwind CSS

Heroicons (31k stars GitHub). Creados por el equipo de Tailwind CSS. Estilo lineal suave, stroke 1.5px, esquinas redondeadas, más "soft" que Lucide. Usado por Tailwind, Vercel, Linear.

Arquetipos (Heroicons outline)

Industry

building

Startup

rocket-launch

Research

flask

VC

chart-bar

Policy

shield-check

Reacciones / Feedback

💡 Útil

✅ Validar

❓ Aclarar

🤝 Collab

⚠️ Riesgo

Heroicons Solid vs Outline

Outline (default)

Más limpio, profesional — ideal para UI principal

Solid (relleno)

Más visible, ideal para CTAs, badges, estado activo

Card con ícono Heroicon

Phage therapy platform

Bacteriófagos como alternativa a antibióticos

9.1

3100+ íconos disponibles

Lista completa: heroicons.com
• 3100+ íconos, stroke 1.5px
• 3 tamaños: mini(16), small(20), 24, 28
• 2 estilos: outline (default) y solid
• Usado por Tailwind, Vercel, Linear
• Plugin Figma disponible (comunidad)
• SVG inline directo en HTML
• Licencia MIT

04

Librerías de Componentes — Con Buen Gusto

Las mejores librerías de componentes open-source evaluadas por devs con buen gusto (2026).
Criterios: diseño, calidad del código, estrellas GitHub, reviews de la comunidad, uso en producción real.

Top Recommendations

shadcn/ui ★★★★★

⭐ 122k stars GitHub · MIT · Tailwind + Radix UI

El rey actual. No es un package — es código copiado a tu repo. 69+ componentes primarios accesibles. El estándar de diseño en el ecosistema JS moderno. Basado en Radix UI (primitives accesibles).

★ Recomendada Mejor diseño Radix UI Tailwind TypeScript 69+ comps

Tremor

⭐ 16k stars · MIT · Tailwind + Recharts

Charts, metrics, KPIs y dashboards. Creada por el equipo de Tailwind UI. Perfecta para dashboards de analytics, métricas de startup, reporting biotech. Integración perfecta con shadcn/ui.

★ Recomendada Charts Recharts Metrics Dashboards

Mantine

⭐ 30k stars · MIT · React · 120+ components

"La mejor lib de componentes que he usado" (review de devs con 20+ años). 120+ components + 70+ hooks. Forms, date pickers, modals, selects... casi todo cubierto. Ideal si necesitas algo específico rápido.

React 120+ comps 70+ hooks Forms Datatables

Radix UI

⭐ 20k stars · MIT · Unstyled primitives

Primitives accesibles sin estilo. shadcn/ui se basa en esto. Si querés control total del diseño pero sin perder accesibilidad, esto es la base técnica.

Primitives Accesibilidad Unstyled Base de shadcn

Librerías Adicionales (especializadas)

Sonner

⭐ 13k stars · MIT · Toast notifications

Notificaciones toast más suaves y bonitas que existen. De Emil Kowalski (mismo autor de Vaul). Animaciones impecables. Perfecta para feedback en la app.

★ RecomendadaToastsNotificationsEmil Kowalski

Vaul

⭐ 8k stars · MIT · Bottom sheets (estilo Apple)

Bottom sheets estilo iOS. Draggable, swipeable, accesible. Ideal para mobile-first UX. Perfecta para el mockup de tu app biotech.

★ RecomendadaBottom sheetsMobileApple-style

Embla Carousel

⭐ 15k stars · MIT · Carousels ultra suaves

Carousels sin dependencias. Suave como manteca. Accessibility-first. Ideal para carouseles de showcases, portfolios de startups biotech.

CarouselsSliderNo deps

Recharts

⭐ 24k stars · MIT · Charts para React

Charts declarativos basados en D3. Perfecto para dashboards de analytics, gráficos de biotecnología, métricas de startups. Tremor se basa en esto.

ChartsD3DeclarativoAnalytics

Tabla Comparativa

Librería	Stars	Tipo	Para	¿Por qué elegirla?
shadcn/ui	122k	Primarios	Todas las UIs	El más bonito, más popular, accesible
Tremor	16k	Charts + Metrics	Dashboards	De Tailwind UI, ideal para analytics
Mantine	30k	Full suite	Apps complejas	120+ comps, casi todo cubierto
Radix UI	20k	Primitives	Control total	Base de shadcn, accesibilidad garantizada
Sonner	13k	Toasts	Feedback	Las toast más lindas que existen
Vaul	8k	Bottom Sheets	Mobile	Estilo iOS, drag & swipe
Recharts	24k	Charts	Datos	Declarativo, basado en D3
Embla	15k	Carousels	Showcases	Sin deps, ultra suave

Combinación Recomendada para BioTech Platform

Stack sugerido (máximo gusto, mínimo peso):

1. Heroicons → Íconos ✅
2. shadcn/ui → Componentes primarios (Button, Dialog, Table, Sidebar, Card, Input, Form...)
3. Tremor → Charts y métricas para dashboards
4. Sonner → Toasts / notificaciones
5. Vaul → Bottom sheets para mobile

Todos comparten Tailwind CSS → no hay conflicto de estilos. Todo es copiar-paste a tu repo → tenés control total.

05

Cards & UI

Research Industry Startup VC Policy

Buscar challenges, startups, evaluadores...

06

Mockup Mobile

Buscar...

🔥 Top 🆕 Nuevos 🎯 Match

Phage therapy 9.1

Bacteriófagos como alternativa a antibióticos

Algae carbon 7.2

Microalgas para capturar CO2 industrial

Gene editing 8.5

CRISPR para resistencia al clima

Bacteriófagos vs antibióticos

El problema: resistencia a antibióticos. La solución: bacteriófagos. Buscamos colaboradores en microbiología y regulatory affairs.

Research Industry

🤝 Conectar 💡 Feedback

07

Do / Don't

✅ Hacer

Fondo blanco con cards blancas y borde sutil
Íconos Heroicons lineales, stroke 1.5px, color plano
Solo H1 y CTAs con gradiente
Border-radius 12px en cards
Shadow suave al hover
Componentes de shadcn/ui para estructura

❌ No hacer

Background gris oscuro como base
Gradientes en íconos o cards
Esquinas rectas
Colores de arquetipo como fondos
Más de 5 colores simultáneos
Componentes con estilo propio (Material, Bootstrap)