BioTech Platform — Brandbook Visual

01

Paleta de Colores

Gradiente principal

Turquesa → Violeta → Rosa · Solo para H1 hero, CTAs y highlights

Primarios

Primary #00d4aa Turquesa — el "cruce"

Secondary #6c5ce7 Violeta — puente ciencia/negocio

Accent Pink #fd79a8 Energía disruptiva

Fondos

Background Dark #0a0a0f

Card / Light bg #f5f5f7

Arquetipo por color

Industry#0984e3

Startup#fd79a8

Research#00b894

VC#fdcb6e

Policy#e17055

02

Gemini-style Icons

Principio de diseño

Inspirado en los app icons de Google Gemini: gradiente suave de fondo, ícono blanco SVG inline, esquinas redondeadas, estilo "cristal".

Características

Estructura

Fondo con gradiente (2 stops) + ícono SVG blanco al centro + border-radius alto

Reglas

Máximo 2 colores en el gradiente. SVG blanco puro. Border-radius: 25% del tamaño del ícono.

Íconos de arquetipo

🏭 Industry

Confianza corporativa

🚀 Startup

Energía disruptiva

🔬 Research

Rigor científico

💰 VC

Señal de inversión

⚖️ Policy

Guardian / alerta

Íconos de feedback/reacción

💡 Útil

Feedback positivo

✅ Validar

Aprobación técnica

❓ Aclarar

Necesita más info

🤝 Collab

Ofrecer colaboración

⚠️ Riesgo

Alerta / riesgo

Tamaños disponibles

SM · 32px

MD · 44px

LG · 56px

XL · 72px

Cómo se usa en la UI

Phage therapy platform

Bacteriófagos como alternativa a antibióticos resistentes

9.1

Algae carbon capture

Microalgas para capturar CO2 industrial a escala

7.2

SVG paths — copiar/pegar

🏭 Industry / Fábrica

<svg viewBox="0 0 24 24">
  <path d="M22 22H2V10l7-3v3l7-3v3l7-3v15z
           M4 12v8h6v-6l4 2v4h5V10l-5 2
           V9l-4 2-4-2v3z"/>
</svg>

🚀 Startup / Energía

<svg viewBox="0 0 24 24">
  <path d="M13 3L3 14h6l-1 5 10-11h-6l1-5z"/>
</svg>

🔬 Research / Microscopio

<svg viewBox="0 0 24 24">
  <path d="M15 4s-1 0-1 1v3a3 3 0 0 0 3 3h0
           a3 3 0 0 0 3-3V5c0-1-1-1-1-1H15z
           M8 11a7 7 0 0 0 7 7h0a7 7 0 0 0 7-7v-3
           a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v3
           a7 7 0 0 0 4 6zM10 20l2 2 2-2"/>
</svg>

💰 VC / Moneda

<svg viewBox="0 0 24 24">
  <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z
           M12 2a8 8 0 1 1-8 8 8 8 0 0 1 8-8z
           M12 5a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 12 7z
           M12 10a3 3 0 1 0 3 3 3 3 0 0 0-3-3z"/>
</svg>

⚖️ Policy / Escudo

<svg viewBox="0 0 24 24">
  <path d="M12 2L3 7v6c0 5.5 3.8 10.7 9 12
           5.2-1.3 9-6.5 9-12V7l-9-5z
           M9 18V9l6 4.5L9 18z"/>
</svg>

💡 Útil / Bombilla

<svg viewBox="0 0 24 24">
  <path d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1z
           M12 2C8.1 2 5 5.1 5 9c0 2.3 1.2 4.3 3 5.6V17h8v-2.4
           c1.8-1.3 3-3.3 3-5.6 0-4-3.1-7-7-7z
           M14.8 14.8A1 1 0 0 1 14 15h-4a1 1 0 0 1-.8-1.2
           A1 1 0 0 1 10 13h4a1 1 0 0 1 .8 1.8z"/>
</svg>

Reglas de uso

✅ Usar

Gradiente suave (2 stops), esquinas redondeadas, ícono blanco SVG inline, tamaño proporcional

❌ No usar

Emojis en UI productiva, gradientes con +2 colores, bordes afilados, íconos oscuros

03

Cards & Elementos UI

Challenge card con Gemini icon

Phage therapy platform

Bacteriófagos como alternativa a antibióticos resistentes

9.1

Algae carbon capture

Microalgas para capturar CO2 industrial a escala

7.2

Tipografía

Font stack

System font stack

-apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif

Hierarquía

H1 · 28-36px · 800 · Gradient

De la Duda al Avance

H2 · 22-28px · 700

Feedback del ecosistema

Body · 14-15px · 400

Publicá un desafío, aclará el dolor, recibí feedback — asíncrono.

05

Dark Mode (Default) vs Light Mode

Dark Mode

Dark mode card

Fondo #0a0a0f, card #1a1a24, border #2a2a3e

Light Mode

Light mode card

Fondo #f5f5f7, card #ffffff, border #d0d0d8

BioTech Innovation Platform