BioTech Platform

Brandbook Visual · Light Theme · Heroicons

v7.3 · Heroicons (Tailwind) · Component Libraries · 2026-09-26

Theme:

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

Í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

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.

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

jorge@cysbio.tech

We'll never share your email.

Input with Icon

Select Dropdown

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

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

Cards & UI

Research Industry Startup VC Policy

Mockup Mobile

BioTech Platform
🔥 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
Phage therapy
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

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)