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

shadcn/ui — Componentes Aplicados

shadcn/ui (122k stars). Componentes primarios de shadcn aplicados al contexto BioTech.

Buttons

Default

bg-gray-900

Primary

bg-[#00d4aa]

Outline

border-gray-200

Ghost

hover:bg-gray-50

Danger

bg-red-500

Secondary

bg-gray-50

Badge / Tag

Research Research Industry Biotech Critical Beta

Input / Form Field

Email

jorge@cysbio.tech

We'll never share your email.

Input with Icon

Search

Select Dropdown

Filter by archetipo

Card Component

Phage Therapy Platform

Creado por BioPhage Labs

9.1

Elaborate bacteriophage therapies as targeted antibiotic alternatives for resistant bacteria.

Research Industry

Tabs

Phage therapy represents a promising alternative to antibiotics. Current clinical trials show 80% effectiveness against drug-resistant bacteria.

Dialog / Alert

NDA Required

You need to sign a non-disclosure agreement before accessing proprietary evaluation data.

Avatar + Name

DR

Dr. Maria Chen

Virology · Stanford

Verified

06

Tremor — Charts y Metrics Aplicadas

Tremor (16k stars). Charts y metrics de Tailwind UI aplicadas al contexto BioTech.

Stats Cards

Total Startups

847

↑ 12% vs mes anterior

Active Matches

124

↑ 8% vs mes anterior

Feedbacks

3.2k

↑ 23% vs mes anterior

Avg Score

7.8

↓ 0.3 vs mes anterior

Bar Chart — Startups by Category

Startups by Category Last 12 months

Gene

Pharma

Cell

AI

Agri

Env

Donut Chart — Ecosystem Distribution

Ecosystem Distribution

Industry 30%

Research 20%

VC Investors 15%

Startups 20%

Policy 15%

Progress / Score

Innovation92%

Scientific Rigor78%

Market Potential85%

Team65%

Table

Startup	Category	Score	Status
BioPhage Labs	Gene Therapy	9.1	Active
CarbonAlgae	CleanTech	7.2	Review
CRISPR Climate	AgBiotech	8.5	Active

07

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)