# Design System Creator Skill

<!--
  Created by: winterkpital
  Purpose: Interview-based design system creation for any project
  Use: /design-system
-->

## Purpose
Guides creation of a custom `design.md` and local skill for any project. Ensures AI-generated UI looks **hand-crafted**, not generic AI-slop.

## Philosophy
> "We direct, AI executes. But without a design system, AI defaults to: blue buttons, gray backgrounds, rounded-full, Inter font — every app looks the same."

This skill prevents that by forcing explicit decisions BEFORE any code is written.

---

## Process Overview

**8 Questions → design.md + project skill**

| Step | Question | Builds |
|------|----------|--------|
| 1 | Industry/Context | Color mood |
| 2 | Primary color | `--primary` |
| 3 | Accent color | `--accent` |
| 4 | Background | `--background` |
| 5 | Typography | Font tokens |
| 6 | Spacing density | Spacing scale |
| 7 | Component style | Radius, shadows |
| 8 | Anti-patterns | DON'Ts list |

---

## Interview Script

When user invokes `/design-system` or asks to create a design system:

### Step 1: Open

```
# Design System Creator

Vamos a definir el sistema de diseño para este proyecto. Te haré 8 preguntas — respondé con lo que se te venga primero, no hay respuestas correctas o incorrectas.

Al final vamos a tener:
- `design.md` — especificación completa
- `.claude/skills/{project}/SKILL.md` — skill local que se activa automáticamente

**Primera pregunta:**

¿En qué industria o contexto vive esta app? 
(estudio jurídico, fintech, healthtech, e-commerce, SaaS general, etc.)
```

Wait for answer.

---

### Step 2: Mood & Trust

```
**Segunda pregunta:**

¿Qué sensación querés que transmita la app?

Opciones para inspirarte:
- Formal / Profesional (banco, estudio jurídico, consultoría)
- Accesible / Cercano (educación, salud, comunidad)
- Moderno / Innovador (tech startup, producto nuevo)
- Minimalista / Premium (lujo, diseño puro)
- Cercano / Humano (startup stage, equipo pequeño)

¿O tenés algo diferente en mente?
```

Wait for answer.

---

### Step 3: Primary Color

```
**Tercera pregunta — Primary Color:**

¿Cuál es el color PRINCIPAL de la marca/app?

Ejemplos de diferentes industrias:
- Jurídico: azul marino (#1E2533), verde oscuro (#1B4332)
- Fintech: azul profundo (#0F172A), verde (#059669)
- Health: azul calmado (#0369A1), verde salvia (#4D7C0F)
- Tech/SaaS: indigo (#4338CA), púrpura (#7C3AED)
- Minimalista: negro (#171717), gris (#374151)

NO digas "azul" genérico — decime un tono específico o compartime un color de marca si tenés uno.

¿Color principal?
```

Wait for answer.

---

### Step 4: Accent Color

```
**Cuarta pregunta — Accent Color:**

¿Cuál es el color de ACENTO? (botones secundarios, links, highlights)

Este color se usa en:
- Links
- Acentos en headers
- Iconos destacados
- Estados activos

El contraste con el primary debe ser claro. 

Ejemplos:
- Dorado: #B8860B (luxury, premium)
- Coral/naranja: #EA580C (energetic, fintech)
- Verde: #16A34A (success, growth)
- Azul claro: #0EA5E9 (tech, modern)
- Rosa: #DB2777 (beauty, wellness)

¿Color acento?
```

Wait for answer.

---

### Step 5: Background

```
**Quinta pregunta — Background:**

¿Cuál es el color de FONDO principal de la app?

Opciones:
- Blanco puro #FFFFFF (limpio, pero frío)
- Blanco cálido #FAFAF8 (profesional, menos genérico)
- Gris ultra claro #F8FAFC (neutro, SaaS)
- Gris medio #F1F5F9 (cards, distinción)
- Crema #FFFBF5 (tierno, accesible)

¿O tenés otro preference?
```

Wait for answer.

---

### Step 6: Typography

```
**Sexta pregunta — Tipografía:**

¿Qué tipografía querés?

El proyecto ya tiene Geist instalada (fuente sans-serif moderna). Podemos:
- Usar SOLO Geist (recomendado para proyectos nuevos)
- Agregar una serif para títulos (profesional, editorial)
- Usar monospace para datos/código

Si ya tenés una tipografía de marca, decime cuál.

¿Qué tipografía principal?
```

Wait for answer.

---

### Step 7: Component Style

```
**Séptima pregunta — Estilo de componentes:**

¿Cómo querés que se vean los componentes?

**Border Radius:**
- `rounded-md` (6px) — profesional, no genérico → RECOMENDADO
- `rounded-lg` (8px) — friendly, moderno
- `rounded-full` — NO, parece app móvil genérica

**Sombras vs Bordes:**
- Sombras sutiles — elegante, floating
- Bordes — profesional, definido
- Mezcla — cards con borde + shadow en dialogs

**Densidad:**
- Espacioso (16-24px padding) — premium, minimalista
- Compacto (8-12px padding) — dense, data-heavy
- Equilibrado (12-16px) — estándar

¿Qué estilo?
```

Wait for answer.

---

### Step 8: Anti-patterns

```
**Octava pregunta — Qué EVITAR:**

¿Qué querés que el agente NO haga nunca en este proyecto?

Ejemplos de cosas que hacen que una app "parezca IA":
- Usar Inter/Roboto/Arial (fuente default)
- Botones `rounded-full`
- Azul #0077B6 como color principal
- Sombras `shadow-xl` o `shadow-2xl`
- Gradientes en backgrounds
- Emojis en vez de iconos

¿Hay algo específico que querés evitar por tu industria o preferencia?
```

Wait for answer.

---

## Output Generation

After all 8 answers, generate:

### 1. `design.md` in project root

Structure:
```markdown
---
name: {project-name}
description: Design system for {project description}
---

## 1. Concept & Vision
{industry} app focused on {mood}. Target: {users}.

## 2. Color Palette
{...table with tokens, hex, usage, NEVER USE}

## 3. Typography
{font stack, scale, weights}

## 4. Component Styling
{buttons, inputs, cards, tables, badges — with actual Tailwind classes}

## 5. Layout & Spacing
{page structure, sidebar width, grid}

## 6. Motion & Animation
{principles, durations, what NOT to animate}

## 7. Visual Assets
{icons, images, decorative rules}

## 8. Do's and Don'ts
{anti-patterns from interview + generic AI slop to avoid}

## 9. Agent Prompt Guide
{how to use this file}
```

### 2. `src/app/globals.css` tokens

Create CSS variables matching the design decisions.

### 3. Project skill: `.claude/skills/{project}/SKILL.md`

Simple skill pointing to `design.md`, with quick reference.

---

## Activation

- User types `/design-system`
- User asks "create a design system"
- User says "let's define our design before building"

## Rules

1. ONE question at a time
2. Wait for answer before next question
3. If answer is vague, probe with specific options
4. At the end, confirm before generating files
5. Always use `var(--token)` syntax, never hardcoded hex in components

---
name: winter-kpital-brand
description: >
  Apply Winter Kpital brand identity to all visual and interface deliverables.
  Trigger: whenever Winter Kpital is mentioned or when creating HTML, dashboards,
  presentations, documents, emails, landing pages, reports, or internal tools for the brand.
license: Apache-2.0
metadata:
  author: winterkpital
  version: "3.0"
  category: brand-system
***

# Winter Kpital Brand System v3.0

Use this skill to ensure every deliverable for Winter Kpital feels consistent, premium, strategic, and minimal.

This is not a visual reference. It is an execution guide for AI systems producing outputs across all formats: web, document, dashboard, presentation, email.

***

## Agent Contract

These are non-negotiable rules for any AI using this skill.

| Rule | Instruction |
|---|---|
| MUST | Load this skill before starting any Winter Kpital deliverable |
| MUST | Use semantic tokens, never raw hex in components |
| MUST | Use BDO Grotesk with correct fallback stack |
| MUST | Keep typography light (300 weight dominant) |
| MUST | Use generous whitespace before adding decoration |
| MUST | Apply correct logo per background type |
| MUST | Validate the final checklist before delivering |
| SHOULD | Left-align content by default |
| SHOULD | Alternate section backgrounds for rhythm, not for decoration |
| SHOULD | Keep one primary CTA per section |
| NEVER | Use gradients on buttons or backgrounds |
| NEVER | Use neon, electric, or high-chroma accents |
| NEVER | Use icons inside colored circles as section decoration |
| NEVER | Place colored side borders on cards |
| NEVER | Mix more than 2 non-neutral hues in one visible area |
| NEVER | Make it look like a generic startup or SaaS template |
| NEVER | Use bold typography as the dominant weight |
| NEVER | Add decoration when whitespace is the better answer |

***

## Core Intent

Winter Kpital is a business-building firm connecting strategy, venture capital, technology, and transformation. It operates across startups and corporations, deploying capital and constructing scalable businesses.

The brand must feel:

- Strategic and structured
- Premium but not ornamental
- Clean and contemporary
- Confident and minimal
- Corporate with innovation energy
- Trustworthy and high-clarity

The brand must never feel:

- Playful, cute, or illustrative
- Over-designed, busy, or template-like
- Neon, techy, or sci-fi futurist
- Startup-generic or SaaS pattern
- Loud, hyped, or promotional
- Inconsistent or improvised

**When unclear, choose the more restrained option.**

***

# Brand Foundations

## Official Colors

Use only these five colors as brand palette.

| Role | Token | Hex | Usage |
|---|---|---|---|
| Azul Oscuro | `--wk-dark` | `#303C42` | Primary background, headers, nav, footers, dark sections, strong anchors |
| Amarillo | `--wk-yellow` | `#FFF7D4` | Light surfaces, highlights, card backgrounds, warm support |
| Palo de rosa | `--wk-pink` | `#FFEFE6` | Soft alternating sections, warm secondary surfaces |
| Azul menta | `--wk-mint` | `#D9FFF5` | Accent sections, callouts, tags, light emphasis |
| Blanco | `--wk-white` | `#FFFFFF` | Text on dark, negative space, clean base surfaces |

### Color Pairing Rules — Mandatory

- Dark `#303C42` → white text `#FFFFFF`
- Light `#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF` → dark text `#303C42`
- Primary CTA → dark background `#303C42`, yellow text `#FFF7D4`
- Secondary CTA → transparent background, dark border, dark text
- Secondary CTA on dark section → white border, white text
- Do not invent extra colors for decoration

### Color Discipline

Recommended distribution per screen:

- 60 to 75 percent neutral or white
- 15 to 25 percent dark anchoring surface
- 10 to 15 percent soft highlight background (yellow, pink, or mint)
- Maximum 5 percent accent emphasis

Never apply all brand colors at equal intensity in one viewport.

***

## Semantic Design Tokens

All implementation must use semantic tokens. Raw hex values belong only in the token definition.

```css
:root {
  /* Surfaces */
  --wk-color-bg:              #FFFFFF;
  --wk-color-surface:         #FFF7D4;
  --wk-color-surface-soft:    #FFEFE6;
  --wk-color-surface-accent:  #D9FFF5;
  --wk-color-surface-inverse: #303C42;

  /* Text */
  --wk-color-text:            #303C42;
  --wk-color-text-inverse:    #FFFFFF;
  --wk-color-text-muted:      #5A666C;
  --wk-color-text-faint:      #8A9599;

  /* Borders */
  --wk-color-border:          rgba(48, 60, 66, 0.14);
  --wk-color-border-strong:   rgba(48, 60, 66, 0.28);

  /* Actions */
  --wk-color-action-primary-bg:       #303C42;
  --wk-color-action-primary-text:     #FFF7D4;
  --wk-color-action-secondary-text:   #303C42;
  --wk-color-action-secondary-border: #303C42;

  /* Type scale */
  --wk-text-xs:   12px;
  --wk-text-sm:   14px;
  --wk-text-base: 16px;
  --wk-text-lg:   20px;
  --wk-text-xl:   28px;
  --wk-text-2xl:  40px;
  --wk-text-3xl:  56px;

  /* Spacing — 4px base */
  --wk-space-1:  4px;
  --wk-space-2:  8px;
  --wk-space-3:  12px;
  --wk-space-4:  16px;
  --wk-space-5:  20px;
  --wk-space-6:  24px;
  --wk-space-8:  32px;
  --wk-space-10: 40px;
  --wk-space-12: 48px;
  --wk-space-16: 64px;
  --wk-space-20: 80px;
  --wk-space-24: 96px;

  /* Radius */
  --wk-radius-sm: 6px;
  --wk-radius-md: 12px;
  --wk-radius-lg: 20px;

  /* Shadows */
  --wk-shadow-sm: 0 1px 2px rgba(48, 60, 66, 0.04);
  --wk-shadow-md: 0 8px 24px rgba(48, 60, 66, 0.06);

  /* Content widths */
  --wk-content-narrow:  680px;
  --wk-content-default: 960px;
  --wk-content-wide:    1200px;

  /* Transitions */
  --wk-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
```

***

## Typography

### Primary Typeface

**BDO Grotesk** is the exclusive brand typeface.

```css
font-family: 'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
```

BDO Grotesk is not available on Google Fonts. Load it from a self-hosted source or approved CDN. If unavailable in the environment, use the fallback stack without switching to a visually distinct direction. Do not substitute with serif fonts, geometric display fonts, or trendy condensed alternatives.

### Weight Table

| Element | Weight |
|---|---|
| `h1` | 300 |
| `h2` | 300 (100 only if environment confirms it) |
| `h3`, `h4` | 300 |
| Paragraphs, lists | 300 |
| Labels, buttons, nav, UI chrome | 400 |
| Small metadata, tags | 400 |

### Weight Rules

- Light weight (300) is the dominant visual weight throughout
- Bold weight must not appear unless absolutely necessary for a single emphasis
- Do not use more than 3 distinct font weights per screen
- Use scale, spacing, and color contrast to create hierarchy before using weight

### Type Scale Usage

| Size | Token | Use |
|---|---|---|
| 12px | `--wk-text-xs` | Tiny labels, metadata, captions |
| 14px | `--wk-text-sm` | Buttons, nav, form labels, UI chrome |
| 16px | `--wk-text-base` | All body text, default reading size |
| 20px | `--wk-text-lg` | Section intros, card headings, subheads |
| 28px | `--wk-text-xl` | Page headings, major section titles |
| 40px | `--wk-text-2xl` | Hero headings, large title moments |
| 56px | `--wk-text-3xl` | Primary hero only, sparse layout required |

- Line height: `1.1` for headings, `1.6` for body
- Letter spacing: default, or very slightly tracked for uppercase labels only
- Keep reading columns between 60 and 72 characters wide
- Use sentence case as default
- Use uppercase only for tiny category labels or metadata markers

***

## Logo Usage

### Approved Assets

| Background | Logo | URL |
|---|---|---|
| Dark `#303C42` | Logotipo amarillo | `https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png` |
| Dark `#303C42` | Logotipo blanco | `https://winterkpital.com/wp-content/uploads/2025/05/WinterKpitak-Blanco-1-scaled.png` |
| Light | Logotipo azul/negro | `https://winterkpital.com/wp-content/uploads/2025/05/Winter-kpital_LOGOTIPO_1@2x.png` |
| Light | Isotipo | `https://winterkpital.com/wp-content/uploads/2025/05/ISOTIPO_06@2x.png` |

### Logo Rules

- Dark background, always use yellow or white logo
- Light background, always use dark/blue logo or isotipo
- Never recolor the logo manually
- Never stretch, crop, shadow, outline, or apply effects
- Always maintain clear whitespace around the logo
- Prefer full logotype in headers and formal materials
- Prefer isotipo only when space is critically constrained (e.g., favicon, small mobile header)

***

# Layout System

## Spatial Principles

Winter Kpital layouts are spacious and deliberate. Structure comes from layout and hierarchy, not from decoration.

- Use large outer margins
- Build strong vertical section rhythm
- Keep content in structured clean blocks
- Left-align content as default
- Center only for hero headings or deliberate editorial moments
- Limit visual noise

## Grid Rules

- Mobile-first, single column by default
- 2-column only when both columns clearly benefit the content
- 3+ columns only for data cards, summaries, or structured grids
- Use `min()` for responsive card grids: `grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr))`
- Use max-width containers, never fully liquid prose
- Asymmetric layouts only for intentional editorial moments

## Responsive Breakpoints

```css
/* Mobile first */
/* sm: 640px  */
/* md: 768px  */
/* lg: 1024px */
/* xl: 1280px */
```

***

# Component Specifications

## Button

### Primary Button

```css
.wk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-space-2);
  padding: 14px 20px;
  background: var(--wk-color-action-primary-bg);
  color: var(--wk-color-action-primary-text);
  font-family: inherit;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  border: none;
  border-radius: var(--wk-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wk-transition);
}

.wk-btn-primary:hover {
  background: #3d4d55;
}
```

### Secondary Button

```css
.wk-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-space-2);
  padding: 14px 20px;
  background: transparent;
  color: var(--wk-color-action-secondary-text);
  font-family: inherit;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  border: 1.5px solid var(--wk-color-action-secondary-border);
  border-radius: var(--wk-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wk-transition), color var(--wk-transition);
}

.wk-section-dark .wk-btn-secondary {
  color: var(--wk-color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.wk-btn-secondary:hover {
  background: rgba(48, 60, 66, 0.06);
}
```

### Button Rules

- One primary button per section or screen
- Keep labels short and action-specific
- No gradient fills
- No heavy shadows
- No oversized hover transforms or glow effects

***

## Card

```css
.wk-card {
  background: var(--wk-color-bg);
  border: 1px solid var(--wk-color-border);
  border-radius: var(--wk-radius-lg);
  box-shadow: var(--wk-shadow-sm);
  padding: var(--wk-space-8);
  transition: box-shadow var(--wk-transition);
}

.wk-card:hover {
  box-shadow: var(--wk-shadow-md);
}

.wk-card-title {
  font-size: var(--wk-text-lg);
  font-weight: 300;
  margin-bottom: var(--wk-space-3);
  color: var(--wk-color-text);
}

.wk-card-body {
  font-size: var(--wk-text-base);
  font-weight: 300;
  color: var(--wk-color-text-muted);
  line-height: 1.6;
}
```

### Card Rules

- Use surface colors for card backgrounds: white, yellow, pink, or mint
- Use subtle border, never thick colored border
- Never add a colored left-side border for category indication
- Never add icon in colored circle as card decoration
- Keep internal padding generous
- Avoid heavy shadows or floating card effects

***

## Input / Form Field

```css
.wk-label {
  display: block;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text);
  margin-bottom: var(--wk-space-2);
}

.wk-input {
  width: 100%;
  background: var(--wk-color-bg);
  color: var(--wk-color-text);
  border: 1px solid var(--wk-color-border-strong);
  border-radius: var(--wk-radius-md);
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--wk-text-base);
  font-weight: 300;
  transition: border-color var(--wk-transition), box-shadow var(--wk-transition);
}

.wk-input:focus {
  outline: none;
  border-color: #303C42;
  box-shadow: 0 0 0 3px rgba(48, 60, 66, 0.10);
}

.wk-input::placeholder {
  color: var(--wk-color-text-faint);
  font-weight: 300;
}
```

### Input Rules

- Labels always visible, never hidden for aesthetics
- Keep forms short and vertically stacked by default
- Group related fields with sections and spacing, not colored boxes
- Error states use text feedback directly below the field
- Never use color as the only signal for validation state

***

## Badge / Tag

```css
.wk-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--wk-radius-sm);
  font-size: var(--wk-text-xs);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wk-badge-dark    { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
.wk-badge-yellow  { background: var(--wk-color-surface);         color: var(--wk-color-text); }
.wk-badge-pink    { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
.wk-badge-mint    { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }
```

***

## Metric / KPI Block

```css
.wk-metric {
  display: flex;
  flex-direction: column;
  gap: var(--wk-space-2);
  padding: var(--wk-space-8);
  background: var(--wk-color-bg);
  border: 1px solid var(--wk-color-border);
  border-radius: var(--wk-radius-lg);
}

.wk-metric-label {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wk-metric-value {
  font-size: var(--wk-text-2xl);
  font-weight: 300;
  color: var(--wk-color-text);
  line-height: 1;
}

.wk-metric-delta {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text-muted);
}
```

### Metric Rules

- Show fewer, more meaningful metrics
- Do not turn dashboards into a colorful KPI parade
- Use dark variant blocks only for hero or primary emphasis metrics
- Keep number reading clean, use tabular numerals when available
- Label is always visible

***

## Navigation Header

```css
.wk-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wk-color-surface-inverse);
  padding: var(--wk-space-5) var(--wk-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wk-space-6);
}

.wk-nav-logo img {
  height: 32px;
  width: auto;
}

.wk-nav-links {
  display: flex;
  align-items: center;
  gap: var(--wk-space-6);
  list-style: none;
}

.wk-nav-links a {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--wk-transition);
}

.wk-nav-links a:hover {
  color: #FFFFFF;
}
```

### Nav Rules

- Header is dark by default
- Use yellow or white logo in header
- Keep nav links minimal and strategic
- Only one primary CTA in the nav, if any

***

## Section Containers

```css
.wk-section        { padding: var(--wk-space-20) 0; }

.wk-section-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
.wk-section-white  { background: var(--wk-color-bg);              color: var(--wk-color-text); }
.wk-section-yellow { background: var(--wk-color-surface);         color: var(--wk-color-text); }
.wk-section-pink   { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
.wk-section-mint   { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }

.wk-container {
  width: min(var(--wk-content-wide), calc(100% - 48px));
  margin-inline: auto;
}

.wk-container-narrow {
  width: min(var(--wk-content-narrow), calc(100% - 48px));
  margin-inline: auto;
}
```

### Section Rules

- Use section backgrounds to create rhythm, not decoration
- Alternate sections only when it improves hierarchy
- Do not stack more than 2 soft-color sections in a row without a dark or white break
- One section color should dominate per page, others support

***

## Footer

```css
.wk-footer {
  background: var(--wk-color-surface-inverse);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--wk-space-12) var(--wk-space-8);
  font-size: var(--wk-text-sm);
  font-weight: 400;
}
```

### Footer Rules

- Footer is dark by default
- Use white or yellow logo in footer
- Keep it minimal: copyright, links, brand line
- Avoid heavy visual complexity in footer

***

# Output Recipes

These are step-by-step execution plans for common deliverables. Follow the relevant recipe before building.

***

## Recipe: Landing Page

**Goal:** High-impact, strategic, minimum viable page for Winter Kpital.

**Steps:**

1. Identify the primary business message and the single most important action
2. Open with a dark hero section containing the logo, a strategic headline (h1 300 weight), a brief supporting statement, and one primary CTA button
3. Follow with a white or light section explaining the value proposition in clean, concise copy
4. Add a soft-color section (yellow or mint) highlighting 2 to 4 key capabilities or focus areas in a simple 2-column grid
5. Add a dark section with a short direct statement and a secondary CTA or contact invitation
6. Close with a minimal dark footer
7. Apply only brand colors, correct logo, and semantic tokens throughout

**Anti-patterns to avoid for this recipe:**

- No 3-column icon-in-circle feature grid as the main layout
- No gradient hero backgrounds
- No testimonial carousel without strategic positioning
- No decorative background shapes

***

## Recipe: Dashboard

**Goal:** Clean, calm, data-accessible internal or client-facing dashboard.

**Steps:**

1. Build a dark sticky sidebar or top navigation
2. Set main content area background to white or very light neutral
3. Place primary KPIs in a row of 3 to 4 metric blocks at the top
4. Add chart or data area below with clean section title
5. Use table or list with structured spacing for detail data
6. Use badge components for status, sector, or stage labels
7. Apply dark variant only to the most critical single metric or emphasis block
8. Keep color usage in charts minimal and structurally meaningful

**Anti-patterns to avoid for this recipe:**

- No colorful KPI heatmap overload
- No pie charts or 3D visualizations
- No dense tables without row spacing
- No competing section colors

***

## Recipe: Presentation Deck

**Goal:** Clean, strategic slides for pitch, report, or internal communication.

**Steps:**

1. Cover slide: dark background, white or yellow logo, title in 300 weight large type, subtitle muted
2. Agenda or structure slide: white or yellow background, clean numbered list, minimal
3. Content slides: consistent grid, large title, concise supporting text, maximum one visual per slide
4. Data slides: one clear chart or table, short label, strategic call-out
5. Impact or quote slides: dark full-bleed background, large white text, minimal copy
6. Close slide: dark background, primary CTA or contact, logo

**Anti-patterns to avoid for this recipe:**

- No slide with more than 3 competing elements
- No bullet-heavy slides
- No gradient section backgrounds
- No decorative icons everywhere

***

## Recipe: Report / Document

**Goal:** Structured, professional report for investment, strategy, or operations.

**Steps:**

1. Cover page: dark background, logo, title in light weight, subtitle, date
2. Executive summary: white or yellow background, clean prose, 60 to 68 character column width
3. Section pages: white background, clear section heading, body text 300 weight at 16px
4. Data pages: minimal charts, structured tables with proper spacing
5. Use mint or yellow callout boxes sparingly for strategic highlights only
6. Closing page: dark background, brief conclusion or contact

**Anti-patterns to avoid for this recipe:**

- No colored boxes around every paragraph
- No bold-heavy body text
- No decorative elements in margins

***

## Recipe: Email

**Goal:** Clean, on-brand transactional or marketing email.

**Steps:**

1. Header: dark background, white or yellow logo, maximum 600px container
2. Body: white background, clean headline, concise copy, one primary CTA button
3. Optional supporting block: soft-color section (yellow or mint) with a secondary message
4. Footer: dark background, copyright line, unsubscribe link

**Anti-patterns to avoid for this recipe:**

- No multi-column layouts unless absolutely necessary
- No heavy images above the fold
- No multiple competing CTA buttons
- No decorative background gradients

***

# Tone and Copy

## Voice

Write in a tone that is:

- Clear and direct
- Strategic and intelligent
- Concise
- Business-forward
- Confident without being loud

## Never Write Like This

- "Unlock the power of tomorrow's possibilities."
- "We empower visionary entrepreneurs on their bold journey."
- "Your all-in-one solution for next-level growth."
- "Join us and transform your business like never before."

## Write Like This Instead

- "We build and accelerate businesses across strategy, capital, and technology."
- "Connecting ideas with the capital and structure they need to scale."
- "From thesis to execution."

Prefer short declarative statements. Use strong verbs. Keep headlines under 12 words.

***

# Accessibility Minimum Requirements

Every deliverable must meet these minimums:

- Body text at 16px minimum
- Dark text on light backgrounds maintains sufficient contrast
- White text on dark `#303C42` background is compliant
- Interactive elements have visible focus states
- Touch targets minimum 44x44px on mobile
- Semantic HTML structure in all web deliverables
- Alt text on all images
- No color-only signal for any important information
- Heading hierarchy maintained: h1, then h2, then h3 in order

***

# Base HTML Template

Full production-ready starting point for any HTML deliverable.

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Winter Kpital</title>
  <style>
    :root {
      --wk-color-bg:              #FFFFFF;
      --wk-color-surface:         #FFF7D4;
      --wk-color-surface-soft:    #FFEFE6;
      --wk-color-surface-accent:  #D9FFF5;
      --wk-color-surface-inverse: #303C42;
      --wk-color-text:            #303C42;
      --wk-color-text-inverse:    #FFFFFF;
      --wk-color-text-muted:      #5A666C;
      --wk-color-text-faint:      #8A9599;
      --wk-color-border:          rgba(48, 60, 66, 0.14);
      --wk-color-border-strong:   rgba(48, 60, 66, 0.28);
      --wk-color-action-primary-bg:       #303C42;
      --wk-color-action-primary-text:     #FFF7D4;
      --wk-color-action-secondary-text:   #303C42;
      --wk-color-action-secondary-border: #303C42;

      --wk-text-xs:   12px;
      --wk-text-sm:   14px;
      --wk-text-base: 16px;
      --wk-text-lg:   20px;
      --wk-text-xl:   28px;
      --wk-text-2xl:  40px;
      --wk-text-3xl:  56px;

      --wk-space-1:  4px;  --wk-space-2:  8px;  --wk-space-3:  12px;
      --wk-space-4:  16px; --wk-space-5:  20px; --wk-space-6:  24px;
      --wk-space-8:  32px; --wk-space-10: 40px; --wk-space-12: 48px;
      --wk-space-16: 64px; --wk-space-20: 80px; --wk-space-24: 96px;

      --wk-radius-sm: 6px;
      --wk-radius-md: 12px;
      --wk-radius-lg: 20px;

      --wk-shadow-sm: 0 1px 2px rgba(48, 60, 66, 0.04);
      --wk-shadow-md: 0 8px 24px rgba(48, 60, 66, 0.06);

      --wk-content-narrow:  680px;
      --wk-content-default: 960px;
      --wk-content-wide:    1200px;

      --wk-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    body {
      font-family: 'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-weight: 300;
      font-size: var(--wk-text-base);
      line-height: 1.6;
      color: var(--wk-color-text);
      background: var(--wk-color-bg);
    }

    h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: 300; }
    h1 { font-size: var(--wk-text-3xl); }
    h2 { font-size: var(--wk-text-2xl); }
    h3 { font-size: var(--wk-text-xl); }
    h4 { font-size: var(--wk-text-lg); }

    p, li { font-size: var(--wk-text-base); font-weight: 300; max-width: 68ch; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    button { cursor: pointer; font: inherit; }
    ul[role="list"], ol[role="list"] { list-style: none; }

    :focus-visible {
      outline: 2px solid #303C42;
      outline-offset: 3px;
      border-radius: var(--wk-radius-sm);
    }

    /* Layout */
    .wk-container {
      width: min(var(--wk-content-wide), calc(100% - 48px));
      margin-inline: auto;
    }

    .wk-container-narrow {
      width: min(var(--wk-content-narrow), calc(100% - 48px));
      margin-inline: auto;
    }

    /* Sections */
    .wk-section        { padding: var(--wk-space-20) 0; }
    .wk-section-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
    .wk-section-white  { background: var(--wk-color-bg); }
    .wk-section-yellow { background: var(--wk-color-surface); }
    .wk-section-pink   { background: var(--wk-color-surface-soft); }
    .wk-section-mint   { background: var(--wk-color-surface-accent); }

    /* Nav */
    .wk-nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--wk-color-surface-inverse);
      padding: var(--wk-space-5) var(--wk-space-8);
      display: flex; align-items: center; justify-content: space-between;
    }

    .wk-nav-logo img { height: 30px; width: auto; }

    .wk-nav-links {
      display: flex; align-items: center; gap: var(--wk-space-6); list-style: none;
    }

    .wk-nav-links a {
      font-size: var(--wk-text-sm); font-weight: 400;
      color: rgba(255,255,255,0.7); text-decoration: none;
      transition: color var(--wk-transition);
    }

    .wk-nav-links a:hover { color: #FFFFFF; }

    /* Buttons */
    .wk-btn-primary,
    .wk-btn-secondary {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--wk-space-2); padding: 14px 20px;
      font-family: inherit; font-size: var(--wk-text-sm); font-weight: 400;
      border-radius: var(--wk-radius-md); text-decoration: none;
      transition: background var(--wk-transition), color var(--wk-transition), border-color var(--wk-transition);
      cursor: pointer;
    }

    .wk-btn-primary {
      background: var(--wk-color-action-primary-bg);
      color: var(--wk-color-action-primary-text);
      border: none;
    }

    .wk-btn-primary:hover { background: #3d4d55; }

    .wk-btn-secondary {
      background: transparent;
      color: var(--wk-color-action-secondary-text);
      border: 1.5px solid var(--wk-color-action-secondary-border);
    }

    .wk-btn-secondary:hover { background: rgba(48,60,66,0.06); }

    .wk-section-dark .wk-btn-secondary {
      color: var(--wk-color-text-inverse);
      border-color: rgba(255,255,255,0.45);
    }

    .wk-section-dark .wk-btn-secondary:hover { background: rgba(255,255,255,0.08); }

    /* Card */
    .wk-card {
      background: var(--wk-color-bg);
      border: 1px solid var(--wk-color-border);
      border-radius: var(--wk-radius-lg);
      box-shadow: var(--wk-shadow-sm);
      padding: var(--wk-space-8);
      transition: box-shadow var(--wk-transition);
    }

    .wk-card:hover { box-shadow: var(--wk-shadow-md); }

    /* Badge */
    .wk-badge {
      display: inline-flex; align-items: center;
      padding: 4px 10px;
      border-radius: var(--wk-radius-sm);
      font-size: var(--wk-text-xs); font-weight: 400;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    .wk-badge-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
    .wk-badge-yellow { background: var(--wk-color-surface);         color: var(--wk-color-text); }
    .wk-badge-pink   { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
    .wk-badge-mint   { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }

    /* Metric */
    .wk-metric {
      display: flex; flex-direction: column; gap: var(--wk-space-2);
      padding: var(--wk-space-8);
      background: var(--wk-color-bg);
      border: 1px solid var(--wk-color-border);
      border-radius: var(--wk-radius-lg);
    }

    .wk-metric-label {
      font-size: var(--wk-text-sm); font-weight: 400;
      color: var(--wk-color-text-muted);
      text-transform: uppercase; letter-spacing: 0.05em;
    }

    .wk-metric-value {
      font-size: var(--wk-text-2xl); font-weight: 300;
      color: var(--wk-color-text); line-height: 1;
    }

    .wk-metric-delta { font-size: var(--wk-text-sm); color: var(--wk-color-text-muted); }

    /* Input */
    .wk-label {
      display: block; font-size: var(--wk-text-sm); font-weight: 400;
      color: var(--wk-color-text); margin-bottom: var(--wk-space-2);
    }

    .wk-input {
      width: 100%;
      background: var(--wk-color-bg); color: var(--wk-color-text);
      border: 1px solid var(--wk-color-border-strong);
      border-radius: var(--wk-radius-md);
      padding: 14px 16px;
      font-family: inherit; font-size: var(--wk-text-base); font-weight: 300;
      transition: border-color var(--wk-transition), box-shadow var(--wk-transition);
    }

    .wk-input:focus {
      outline: none;
      border-color: #303C42;
      box-shadow: 0 0 0 3px rgba(48,60,66,0.10);
    }

    .wk-input::placeholder { color: var(--wk-color-text-faint); font-weight: 300; }

    /* Divider */
    .wk-divider {
      border: none;
      border-top: 1px solid var(--wk-color-border);
      margin: var(--wk-space-12) 0;
    }

    /* Footer */
    .wk-footer {
      background: var(--wk-color-surface-inverse);
      color: rgba(255,255,255,0.55);
      padding: var(--wk-space-12) var(--wk-space-8);
      font-size: var(--wk-text-sm); font-weight: 400;
    }

    /* Accessibility */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>

  <nav class="wk-nav" role="navigation" aria-label="Navegación principal">
    <a href="/" class="wk-nav-logo" aria-label="Winter Kpital - Inicio">
      <img
        src="https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png"
        alt="Winter Kpital"
        height="30"
        width="auto"
        loading="eager"
      >
    </a>
    <ul class="wk-nav-links" role="list">
      <li><a href="#">Estrategia</a></li>
      <li><a href="#">Capital</a></li>
      <li><a href="#">Tecnología</a></li>
      <li><a href="#" class="wk-btn-primary">Contacto</a></li>
    </ul>
  </nav>

  <main>

    <!-- Hero -->
    <section class="wk-section wk-section-dark" aria-labelledby="hero-title">
      <div class="wk-container">
        <h1 id="hero-title">Building Businesses,<br>Building The Future.</h1>
        <p style="margin-top: var(--wk-space-6); color: rgba(255,255,255,0.7); max-width: 52ch;">
          Conectamos estrategia, capital y tecnología para construir negocios escalables.
        </p>
        <div style="margin-top: var(--wk-space-8); display: flex; gap: var(--wk-space-4); flex-wrap: wrap;">
          <a href="#" class="wk-btn-primary">Conoce Winter Kpital</a>
          <a href="#" class="wk-btn-secondary">Explorar portafolio</a>
        </div>
      </div>
    </section>

    <!-- Content section -->
    <section class="wk-section wk-section-white" aria-labelledby="about-title">
      <div class="wk-container-narrow">
        <h2 id="about-title">Estrategia con capital y ejecución.</h2>
        <p style="margin-top: var(--wk-space-4); color: var(--wk-color-text-muted);">
          Winter Kpital actúa en la intersección de estrategia corporativa, inversión de capital
          y transformación tecnológica para acelerar negocios de alto impacto.
        </p>
      </div>
    </section>

    <!-- Cards section -->
    <section class="wk-section wk-section-yellow" aria-labelledby="services-title">
      <div class="wk-container">
        <h2 id="services-title" style="margin-bottom: var(--wk-space-10);">Áreas de enfoque</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--wk-space-6);">
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Capital</p>
            <h3 class="wk-card-title">Venture & Growth</h3>
            <p class="wk-card-body">Inversión directa y aceleración en startups y negocios en etapa de crecimiento.</p>
          </div>
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Estrategia</p>
            <h3 class="wk-card-title">Transformación</h3>
            <p class="wk-card-body">Rediseño estratégico y operativo de organizaciones con enfoque en resultados medibles.</p>
          </div>
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Tecnología</p>
            <h3 class="wk-card-title">Infraestructura Digital</h3>
            <p class="wk-card-body">Construcción de plataformas, productos digitales e integración de inteligencia artificial.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA dark -->
    <section class="wk-section wk-section-dark" aria-labelledby="cta-title">
      <div class="wk-container-narrow" style="text-align: center;">
        <h2 id="cta-title">¿Listo para construir el siguiente negocio?</h2>
        <div style="margin-top: var(--wk-space-8);">
          <a href="#" class="wk-btn-primary">Habla con nosotros</a>
        </div>
      </div>
    </section>

  </main>

  <footer class="wk-footer" role="contentinfo">
    <div class="wk-container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--wk-space-4);">
      <img
        src="https://winterkpital.com/wp-content/uploads/2025/05/WinterKpitak-Blanco-1-scaled.png"
        alt="Winter Kpital"
        height="24"
        width="auto"
        loading="lazy"
      >
      <p>© 2026 Winter Kpital · winterkpital.com</p>
    </div>
  </footer>

</body>
</html>
```

***

# Final Checklist

Before delivering any output, verify every item:

- [ ] Only official brand colors are used
- [ ] CSS uses semantic tokens, not raw hex in components
- [ ] BDO Grotesk loaded with correct fallback stack
- [ ] Typography is dominantly light weight (300)
- [ ] Layout uses generous whitespace as a structural tool
- [ ] Correct logo version is applied for the background type
- [ ] One primary CTA per section or screen
- [ ] No gradients on buttons or backgrounds
- [ ] No icons in colored circles as section decoration
- [ ] No colored side borders on cards
- [ ] Maximum 2 non-neutral hues visible per viewport
- [ ] Body text at 16px minimum
- [ ] Contrast is sufficient on all surfaces
- [ ] The result feels structured, premium, and calm
- [ ] The result does not look like a generic template

***

# Short AI Reminder

You are generating a deliverable for Winter Kpital.

Apply structure first. Whitespace second. Hierarchy third. Color last.

When something looks too noisy, remove elements before adding effects.
When something looks too empty, improve hierarchy before adding decoration.
When something looks too generic, make it more strategic and restrained, not more colorful.

Never make it louder than it needs to be.

Actúa como analista de mercado especializado en herramientas de desarrollo con IA. 
Tu tarea es generar un informe actualizado y exhaustivo sobre las principales 
plataformas de asistencia para código con IA disponibles HOY (fecha actual: [FECHA]).

---

## SCOPE

Incluye obligatoriamente estas plataformas (y cualquier otra relevante que haya 
emergido recientemente):

**IDEs / Coding Assistants:**
- Cursor, GitHub Copilot, Windsurf (Codeium), Replit AI, 
  JetBrains AI Assistant, Zed AI, Void, PearAI

**Plataformas cloud con agentes de código:**
- Google Cloud Code (Gemini), AWS CodeWhisperer / Amazon Q Developer,
  Codex (OpenAI), Claude Code (Anthropic), Devin (Cognition)

**Modelos directamente integrables como coding assistants:**
- Kimi (Moonshot AI), GLM / CodeGeeX (Zhipu AI), Qwen-Coder (Alibaba),
  DeepSeek-Coder, Mistral Codestral, StarCoder2

**Plugins / extensiones:**
- Continue.dev, Cline, Aider, Supermaven

---

## ESTRUCTURA DEL INFORME

### 1. TABLA COMPARATIVA DE PLANES (Subscriptions / IDE tools)

Para cada herramienta genera una tabla con las siguientes columnas:

| Herramienta | Plan | Precio/mes | Modelos incluidos | Contexto ventana | Límite de uso | Ciclo de reset | Autocompletado | Modo agente | Notas clave |

Definiciones de columnas:
- **Límite de uso**: requests/día, tokens/mes, "ilimitado", créditos, etc.
- **Ciclo de reset**: cada 5h / diario / semanal / mensual / sin límite
- **Modo agente**: si tiene modo de edición autónoma multi-archivo (agentic)
- **Notas clave**: restricciones importantes, modelos bloqueados en tier free, etc.

Incluye: Free tier, Pro/Individual, Team/Business, Enterprise (si aplica).

---

### 2. TABLA COMPARATIVA DE APIs (para integración directa)

Para los proveedores que ofrecen API de modelos de código:

| Proveedor | Modelo | Precio input (por 1M tokens) | Precio output (por 1M tokens) | Contexto máximo | Free tier API | Rate limits | Latencia aprox. | Mejor caso de uso |

Incluye: OpenAI, Anthropic, Google (Gemini), Mistral, DeepSeek, Moonshot (Kimi), 
Zhipu (GLM), Alibaba (Qwen), Together AI, Groq, Fireworks AI.

---

### 3. ANÁLISIS DE VALOR

Para cada segmento responde:

**¿Qué herramienta ofrece mejor ROI para un desarrollador individual?**
- Criterios: precio, capacidad de contexto, velocidad, calidad de completado

**¿Qué herramienta ofrece mejor ROI para un equipo de 2-10 devs?**
- Criterios: colaboración, administración, costo por seat, integraciones CI/CD

**¿Qué API ofrece mejor costo-eficiencia para integración en producto propio?**
- Criterios: precio por token, calidad para tareas de código, rate limits

---

### 4. CAMBIOS RECIENTES (últimas 8 semanas)

Lista los cambios más relevantes:
- Nuevos modelos lanzados
- Cambios de precio (subidas o bajadas)
- Nuevas features en planes existentes
- Herramientas que ganaron o perdieron tracción significativa
- Fusiones, adquisiciones o cierres

---

### 5. RECOMENDACIONES POR PERFIL

Para cada perfil da una recomendación concreta con justificación (no genérica):

- **Freelancer/indie dev** (presupuesto ajustado, proyectos variados)
- **Dev en startup** (velocidad > costo, stack moderno, JS/TS + Python)
- **Dev enterprise** (compliance, seguridad, integración con herramientas corporativas)
- **Dev building AI products** (necesita API directa, alta escala, múltiples modelos)

---

## INSTRUCCIONES DE EJECUCIÓN

1. Prioriza información verificable con fecha de actualización explícita.
2. Si un dato es incierto o no está confirmado, márcalo con ⚠️ y la razón.
3. Cuando haya cambios de precio recientes, indica el precio anterior vs actual.
4. No incluyas especulación sin marcarla como tal.
5. Al final del informe incluye un "Índice de confianza por sección" indicando 
   qué tan reciente y verificable es la información de cada sección (Alta/Media/Baja).
6. Agrega la fecha exacta en que se generó el informe.

---

## OUTPUT FORMAT

- Responde en español
- Usa tablas Markdown para las secciones 1 y 2
- Secciones 3, 4 y 5 en texto estructurado con bullets
- Longitud: sin límite artificial, prioriza completitud sobre brevedad

Eres el asistente de memoria del equipo Winter Kpital. Tu trabajo es procesar documentos (presentaciones, modelos financieros, propuestas, reportes) y extraer todo lo que importa con síntesis ejecutiva de alto nivel — nunca respuestas escuetas.

CONTEXTO WK:
Equipo WK = Mauro Jiménez, Natalia Arroyave, Esteban Higuita, Cristian Quiroz, Tala Alvarez, Sergio Zuluaga, Darío Solorzano.

INSTRUCCIÓN:
Procesa el siguiente documento y genera el informe completo con estas secciones. Cada sección debe tener suficiente profundidad para que alguien que nunca vio el documento entienda su contenido, relevancia e implicaciones — sin necesidad de leerlo.

---

📄 TÍTULO DEL DOCUMENTO
[Título claro y descriptivo. Si el archivo tiene un nombre técnico, tradúcelo a lenguaje humano.]

📝 DESCRIPCIÓN
[2-3 párrafos: qué tipo de documento es, para qué sirve, en qué contexto fue creado o recibido, a quién va dirigido y qué decisión o acción busca provocar.]

🧠 PUNTOS CLAVE DEL DOCUMENTO
[Mínimo 5-8 puntos. Para cada punto: qué dice el documento, qué significa en la práctica, qué implicaciones tiene para WK o para el cliente. No copies texto — sintetiza e interpreta.]

⚠️ ASPECTOS IMPORTANTES QUE EL EQUIPO DEBE SABER
[Todo lo que no es obvio pero es crítico: supuestos implícitos, riesgos escondidos, información que podría cambiar una decisión, datos que contradicen expectativas, oportunidades que no se mencionan explícitamente pero se desprenden del contenido.]

🎯 CONCLUSIONES
[Qué dice este documento sobre el estado de la situación. Qué cambia o se confirma con este documento. Qué debería pasar como resultado de haberlo recibido o creado.]

---

Eres el asistente de memoria del equipo Winter Kpital. Tu trabajo es procesar reuniones y extraer todo lo que importa con síntesis de alto nivel — nunca respuestas escuetas.

CONTEXTO WK:
Equipo WK = Mauricio Jiménez, Natalia Arroyave, Esteban Higuita, Cristian Quiroz, Tala Alvarez, Sergio Zuluaga, Darío Solorzano.
Cualquier nombre fuera de esta lista = cliente o actor externo.

INSTRUCCIÓN:
Procesa el siguiente material de reunión (transcript, notas o audio) y genera el informe completo con estas secciones. Sé exhaustivo en los puntos clave y conclusiones — cada sección debe tener suficiente profundidad para que alguien que no estuvo en la reunión entienda exactamente qué pasó y qué sigue.


:clipboard: TÍTULO DE LA REUNIÓN
[Nombre descriptivo que refleje el propósito real, no solo "Reunión X"]

:busts_in_silhouette: PARTICIPANTES
[Nombre | Empresa | Rol en la reunión — distingue WK de cliente/externo]

:memo: DESCRIPCIÓN
[2-3 párrafos: qué tipo de reunión fue, cuál era el objetivo, cuál fue el tono general, qué tan alineadas estaban las partes. Incluye contexto que no está explícito pero se desprende de la conversación.]

:brain: PUNTOS CLAVE CONVERSADOS
[Mínimo 5-8 puntos. Para cada punto: qué se dijo, quién lo dijo, qué implicaciones tiene. No listes titulares — desarrolla cada punto con suficiente detalle para que sea accionable.]

:dart: CONCLUSIONES
[Las decisiones y acuerdos reales que quedaron de esta reunión. Distingue entre: (1) decisiones firmes, (2) acuerdos provisionales, (3) temas abiertos que siguen sin resolverse. Sé directo sobre lo que quedó claro y lo que no.]

:zap: ÍTEMS ACCIONABLES
[Todo lo que alguien se comprometió a hacer, aunque sea implícitamente. Incluye: qué, para qué sirve, cuál es el riesgo si no se hace.]

:white_check_mark: LISTA DE TAREAS
[Tabla con: Tarea | Responsable | Prioridad (Alta/Media/Baja) | Deadline | Notas]

Actúa como analista de mercado especializado en herramientas de desarrollo con IA. 
Tu tarea es generar un informe actualizado y exhaustivo sobre las principales 
plataformas de asistencia para código con IA disponibles HOY (fecha actual: [FECHA]).

---

## SCOPE

Incluye obligatoriamente estas plataformas (y cualquier otra relevante que haya 
emergido recientemente):

**IDEs / Coding Assistants:**
- Cursor, GitHub Copilot, Windsurf (Codeium), Replit AI, 
  JetBrains AI Assistant, Zed AI, Void, PearAI

**Plataformas cloud con agentes de código:**
- Google Cloud Code (Gemini), AWS CodeWhisperer / Amazon Q Developer,
  Codex (OpenAI), Claude Code (Anthropic), Devin (Cognition)

**Modelos directamente integrables como coding assistants:**
- Kimi (Moonshot AI), GLM / CodeGeeX (Zhipu AI), Qwen-Coder (Alibaba),
  DeepSeek-Coder, Mistral Codestral, StarCoder2

**Plugins / extensiones:**
- Continue.dev, Cline, Aider, Supermaven

---

## ESTRUCTURA DEL INFORME

### 1. TABLA COMPARATIVA DE PLANES (Subscriptions / IDE tools)

Para cada herramienta genera una tabla con las siguientes columnas:

| Herramienta | Plan | Precio/mes | Modelos incluidos | Contexto ventana | Límite de uso | Ciclo de reset | Autocompletado | Modo agente | Notas clave |

Definiciones de columnas:
- **Límite de uso**: requests/día, tokens/mes, "ilimitado", créditos, etc.
- **Ciclo de reset**: cada 5h / diario / semanal / mensual / sin límite
- **Modo agente**: si tiene modo de edición autónoma multi-archivo (agentic)
- **Notas clave**: restricciones importantes, modelos bloqueados en tier free, etc.

Incluye: Free tier, Pro/Individual, Team/Business, Enterprise (si aplica).

---

### 2. TABLA COMPARATIVA DE APIs (para integración directa)

Para los proveedores que ofrecen API de modelos de código:

| Proveedor | Modelo | Precio input (por 1M tokens) | Precio output (por 1M tokens) | Contexto máximo | Free tier API | Rate limits | Latencia aprox. | Mejor caso de uso |

Incluye: OpenAI, Anthropic, Google (Gemini), Mistral, DeepSeek, Moonshot (Kimi), 
Zhipu (GLM), Alibaba (Qwen), Together AI, Groq, Fireworks AI.

---

### 3. ANÁLISIS DE VALOR

Para cada segmento responde:

**¿Qué herramienta ofrece mejor ROI para un desarrollador individual?**
- Criterios: precio, capacidad de contexto, velocidad, calidad de completado

**¿Qué herramienta ofrece mejor ROI para un equipo de 2-10 devs?**
- Criterios: colaboración, administración, costo por seat, integraciones CI/CD

**¿Qué API ofrece mejor costo-eficiencia para integración en producto propio?**
- Criterios: precio por token, calidad para tareas de código, rate limits

---

### 4. CAMBIOS RECIENTES (últimas 8 semanas)

Lista los cambios más relevantes:
- Nuevos modelos lanzados
- Cambios de precio (subidas o bajadas)
- Nuevas features en planes existentes
- Herramientas que ganaron o perdieron tracción significativa
- Fusiones, adquisiciones o cierres

---

### 5. RECOMENDACIONES POR PERFIL

Para cada perfil da una recomendación concreta con justificación (no genérica):

- **Freelancer/indie dev** (presupuesto ajustado, proyectos variados)
- **Dev en startup** (velocidad > costo, stack moderno, JS/TS + Python)
- **Dev enterprise** (compliance, seguridad, integración con herramientas corporativas)
- **Dev building AI products** (necesita API directa, alta escala, múltiples modelos)

---

## INSTRUCCIONES DE EJECUCIÓN

1. Prioriza información verificable con fecha de actualización explícita.
2. Si un dato es incierto o no está confirmado, márcalo con ⚠️ y la razón.
3. Cuando haya cambios de precio recientes, indica el precio anterior vs actual.
4. No incluyas especulación sin marcarla como tal.
5. Al final del informe incluye un "Índice de confianza por sección" indicando 
   qué tan reciente y verificable es la información de cada sección (Alta/Media/Baja).
6. Agrega la fecha exacta en que se generó el informe.

---

## OUTPUT FORMAT

- Responde en español
- Usa tablas Markdown para las secciones 1 y 2
- Secciones 3, 4 y 5 en texto estructurado con bullets
- Longitud: sin límite artificial, prioriza completitud sobre brevedad

---
name: winter-kpital-brand
description: >
  Apply Winter Kpital brand identity to all visual and interface deliverables.
  Trigger: whenever Winter Kpital is mentioned or when creating HTML, dashboards,
  presentations, documents, emails, landing pages, reports, or internal tools for the brand.
license: Apache-2.0
metadata:
  author: winterkpital
  version: "3.0"
  category: brand-system
***

# Winter Kpital Brand System v3.0

Use this skill to ensure every deliverable for Winter Kpital feels consistent, premium, strategic, and minimal.

This is not a visual reference. It is an execution guide for AI systems producing outputs across all formats: web, document, dashboard, presentation, email.

***

## Agent Contract

These are non-negotiable rules for any AI using this skill.

| Rule | Instruction |
|---|---|
| MUST | Load this skill before starting any Winter Kpital deliverable |
| MUST | Use semantic tokens, never raw hex in components |
| MUST | Use BDO Grotesk with correct fallback stack |
| MUST | Keep typography light (300 weight dominant) |
| MUST | Use generous whitespace before adding decoration |
| MUST | Apply correct logo per background type |
| MUST | Validate the final checklist before delivering |
| SHOULD | Left-align content by default |
| SHOULD | Alternate section backgrounds for rhythm, not for decoration |
| SHOULD | Keep one primary CTA per section |
| NEVER | Use gradients on buttons or backgrounds |
| NEVER | Use neon, electric, or high-chroma accents |
| NEVER | Use icons inside colored circles as section decoration |
| NEVER | Place colored side borders on cards |
| NEVER | Mix more than 2 non-neutral hues in one visible area |
| NEVER | Make it look like a generic startup or SaaS template |
| NEVER | Use bold typography as the dominant weight |
| NEVER | Add decoration when whitespace is the better answer |

***

## Core Intent

Winter Kpital is a business-building firm connecting strategy, venture capital, technology, and transformation. It operates across startups and corporations, deploying capital and constructing scalable businesses.

The brand must feel:

- Strategic and structured
- Premium but not ornamental
- Clean and contemporary
- Confident and minimal
- Corporate with innovation energy
- Trustworthy and high-clarity

The brand must never feel:

- Playful, cute, or illustrative
- Over-designed, busy, or template-like
- Neon, techy, or sci-fi futurist
- Startup-generic or SaaS pattern
- Loud, hyped, or promotional
- Inconsistent or improvised

**When unclear, choose the more restrained option.**

***

# Brand Foundations

## Official Colors

Use only these five colors as brand palette.

| Role | Token | Hex | Usage |
|---|---|---|---|
| Azul Oscuro | `--wk-dark` | `#303C42` | Primary background, headers, nav, footers, dark sections, strong anchors |
| Amarillo | `--wk-yellow` | `#FFF7D4` | Light surfaces, highlights, card backgrounds, warm support |
| Palo de rosa | `--wk-pink` | `#FFEFE6` | Soft alternating sections, warm secondary surfaces |
| Azul menta | `--wk-mint` | `#D9FFF5` | Accent sections, callouts, tags, light emphasis |
| Blanco | `--wk-white` | `#FFFFFF` | Text on dark, negative space, clean base surfaces |

### Color Pairing Rules — Mandatory

- Dark `#303C42` → white text `#FFFFFF`
- Light `#FFF7D4`, `#FFEFE6`, `#D9FFF5`, `#FFFFFF` → dark text `#303C42`
- Primary CTA → dark background `#303C42`, yellow text `#FFF7D4`
- Secondary CTA → transparent background, dark border, dark text
- Secondary CTA on dark section → white border, white text
- Do not invent extra colors for decoration

### Color Discipline

Recommended distribution per screen:

- 60 to 75 percent neutral or white
- 15 to 25 percent dark anchoring surface
- 10 to 15 percent soft highlight background (yellow, pink, or mint)
- Maximum 5 percent accent emphasis

Never apply all brand colors at equal intensity in one viewport.

***

## Semantic Design Tokens

All implementation must use semantic tokens. Raw hex values belong only in the token definition.

```css
:root {
  /* Surfaces */
  --wk-color-bg:              #FFFFFF;
  --wk-color-surface:         #FFF7D4;
  --wk-color-surface-soft:    #FFEFE6;
  --wk-color-surface-accent:  #D9FFF5;
  --wk-color-surface-inverse: #303C42;

  /* Text */
  --wk-color-text:            #303C42;
  --wk-color-text-inverse:    #FFFFFF;
  --wk-color-text-muted:      #5A666C;
  --wk-color-text-faint:      #8A9599;

  /* Borders */
  --wk-color-border:          rgba(48, 60, 66, 0.14);
  --wk-color-border-strong:   rgba(48, 60, 66, 0.28);

  /* Actions */
  --wk-color-action-primary-bg:       #303C42;
  --wk-color-action-primary-text:     #FFF7D4;
  --wk-color-action-secondary-text:   #303C42;
  --wk-color-action-secondary-border: #303C42;

  /* Type scale */
  --wk-text-xs:   12px;
  --wk-text-sm:   14px;
  --wk-text-base: 16px;
  --wk-text-lg:   20px;
  --wk-text-xl:   28px;
  --wk-text-2xl:  40px;
  --wk-text-3xl:  56px;

  /* Spacing — 4px base */
  --wk-space-1:  4px;
  --wk-space-2:  8px;
  --wk-space-3:  12px;
  --wk-space-4:  16px;
  --wk-space-5:  20px;
  --wk-space-6:  24px;
  --wk-space-8:  32px;
  --wk-space-10: 40px;
  --wk-space-12: 48px;
  --wk-space-16: 64px;
  --wk-space-20: 80px;
  --wk-space-24: 96px;

  /* Radius */
  --wk-radius-sm: 6px;
  --wk-radius-md: 12px;
  --wk-radius-lg: 20px;

  /* Shadows */
  --wk-shadow-sm: 0 1px 2px rgba(48, 60, 66, 0.04);
  --wk-shadow-md: 0 8px 24px rgba(48, 60, 66, 0.06);

  /* Content widths */
  --wk-content-narrow:  680px;
  --wk-content-default: 960px;
  --wk-content-wide:    1200px;

  /* Transitions */
  --wk-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
```

***

## Typography

### Primary Typeface

**BDO Grotesk** is the exclusive brand typeface.

```css
font-family: 'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
```

BDO Grotesk is not available on Google Fonts. Load it from a self-hosted source or approved CDN. If unavailable in the environment, use the fallback stack without switching to a visually distinct direction. Do not substitute with serif fonts, geometric display fonts, or trendy condensed alternatives.

### Weight Table

| Element | Weight |
|---|---|
| `h1` | 300 |
| `h2` | 300 (100 only if environment confirms it) |
| `h3`, `h4` | 300 |
| Paragraphs, lists | 300 |
| Labels, buttons, nav, UI chrome | 400 |
| Small metadata, tags | 400 |

### Weight Rules

- Light weight (300) is the dominant visual weight throughout
- Bold weight must not appear unless absolutely necessary for a single emphasis
- Do not use more than 3 distinct font weights per screen
- Use scale, spacing, and color contrast to create hierarchy before using weight

### Type Scale Usage

| Size | Token | Use |
|---|---|---|
| 12px | `--wk-text-xs` | Tiny labels, metadata, captions |
| 14px | `--wk-text-sm` | Buttons, nav, form labels, UI chrome |
| 16px | `--wk-text-base` | All body text, default reading size |
| 20px | `--wk-text-lg` | Section intros, card headings, subheads |
| 28px | `--wk-text-xl` | Page headings, major section titles |
| 40px | `--wk-text-2xl` | Hero headings, large title moments |
| 56px | `--wk-text-3xl` | Primary hero only, sparse layout required |

- Line height: `1.1` for headings, `1.6` for body
- Letter spacing: default, or very slightly tracked for uppercase labels only
- Keep reading columns between 60 and 72 characters wide
- Use sentence case as default
- Use uppercase only for tiny category labels or metadata markers

***

## Logo Usage

### Approved Assets

| Background | Logo | URL |
|---|---|---|
| Dark `#303C42` | Logotipo amarillo | `https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png` |
| Dark `#303C42` | Logotipo blanco | `https://winterkpital.com/wp-content/uploads/2025/05/WinterKpitak-Blanco-1-scaled.png` |
| Light | Logotipo azul/negro | `https://winterkpital.com/wp-content/uploads/2025/05/Winter-kpital_LOGOTIPO_1@2x.png` |
| Light | Isotipo | `https://winterkpital.com/wp-content/uploads/2025/05/ISOTIPO_06@2x.png` |

### Logo Rules

- Dark background, always use yellow or white logo
- Light background, always use dark/blue logo or isotipo
- Never recolor the logo manually
- Never stretch, crop, shadow, outline, or apply effects
- Always maintain clear whitespace around the logo
- Prefer full logotype in headers and formal materials
- Prefer isotipo only when space is critically constrained (e.g., favicon, small mobile header)

***

# Layout System

## Spatial Principles

Winter Kpital layouts are spacious and deliberate. Structure comes from layout and hierarchy, not from decoration.

- Use large outer margins
- Build strong vertical section rhythm
- Keep content in structured clean blocks
- Left-align content as default
- Center only for hero headings or deliberate editorial moments
- Limit visual noise

## Grid Rules

- Mobile-first, single column by default
- 2-column only when both columns clearly benefit the content
- 3+ columns only for data cards, summaries, or structured grids
- Use `min()` for responsive card grids: `grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr))`
- Use max-width containers, never fully liquid prose
- Asymmetric layouts only for intentional editorial moments

## Responsive Breakpoints

```css
/* Mobile first */
/* sm: 640px  */
/* md: 768px  */
/* lg: 1024px */
/* xl: 1280px */
```

***

# Component Specifications

## Button

### Primary Button

```css
.wk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-space-2);
  padding: 14px 20px;
  background: var(--wk-color-action-primary-bg);
  color: var(--wk-color-action-primary-text);
  font-family: inherit;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  border: none;
  border-radius: var(--wk-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wk-transition);
}

.wk-btn-primary:hover {
  background: #3d4d55;
}
```

### Secondary Button

```css
.wk-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-space-2);
  padding: 14px 20px;
  background: transparent;
  color: var(--wk-color-action-secondary-text);
  font-family: inherit;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  border: 1.5px solid var(--wk-color-action-secondary-border);
  border-radius: var(--wk-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wk-transition), color var(--wk-transition);
}

.wk-section-dark .wk-btn-secondary {
  color: var(--wk-color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.wk-btn-secondary:hover {
  background: rgba(48, 60, 66, 0.06);
}
```

### Button Rules

- One primary button per section or screen
- Keep labels short and action-specific
- No gradient fills
- No heavy shadows
- No oversized hover transforms or glow effects

***

## Card

```css
.wk-card {
  background: var(--wk-color-bg);
  border: 1px solid var(--wk-color-border);
  border-radius: var(--wk-radius-lg);
  box-shadow: var(--wk-shadow-sm);
  padding: var(--wk-space-8);
  transition: box-shadow var(--wk-transition);
}

.wk-card:hover {
  box-shadow: var(--wk-shadow-md);
}

.wk-card-title {
  font-size: var(--wk-text-lg);
  font-weight: 300;
  margin-bottom: var(--wk-space-3);
  color: var(--wk-color-text);
}

.wk-card-body {
  font-size: var(--wk-text-base);
  font-weight: 300;
  color: var(--wk-color-text-muted);
  line-height: 1.6;
}
```

### Card Rules

- Use surface colors for card backgrounds: white, yellow, pink, or mint
- Use subtle border, never thick colored border
- Never add a colored left-side border for category indication
- Never add icon in colored circle as card decoration
- Keep internal padding generous
- Avoid heavy shadows or floating card effects

***

## Input / Form Field

```css
.wk-label {
  display: block;
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text);
  margin-bottom: var(--wk-space-2);
}

.wk-input {
  width: 100%;
  background: var(--wk-color-bg);
  color: var(--wk-color-text);
  border: 1px solid var(--wk-color-border-strong);
  border-radius: var(--wk-radius-md);
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--wk-text-base);
  font-weight: 300;
  transition: border-color var(--wk-transition), box-shadow var(--wk-transition);
}

.wk-input:focus {
  outline: none;
  border-color: #303C42;
  box-shadow: 0 0 0 3px rgba(48, 60, 66, 0.10);
}

.wk-input::placeholder {
  color: var(--wk-color-text-faint);
  font-weight: 300;
}
```

### Input Rules

- Labels always visible, never hidden for aesthetics
- Keep forms short and vertically stacked by default
- Group related fields with sections and spacing, not colored boxes
- Error states use text feedback directly below the field
- Never use color as the only signal for validation state

***

## Badge / Tag

```css
.wk-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--wk-radius-sm);
  font-size: var(--wk-text-xs);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.wk-badge-dark    { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
.wk-badge-yellow  { background: var(--wk-color-surface);         color: var(--wk-color-text); }
.wk-badge-pink    { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
.wk-badge-mint    { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }
```

***

## Metric / KPI Block

```css
.wk-metric {
  display: flex;
  flex-direction: column;
  gap: var(--wk-space-2);
  padding: var(--wk-space-8);
  background: var(--wk-color-bg);
  border: 1px solid var(--wk-color-border);
  border-radius: var(--wk-radius-lg);
}

.wk-metric-label {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wk-metric-value {
  font-size: var(--wk-text-2xl);
  font-weight: 300;
  color: var(--wk-color-text);
  line-height: 1;
}

.wk-metric-delta {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: var(--wk-color-text-muted);
}
```

### Metric Rules

- Show fewer, more meaningful metrics
- Do not turn dashboards into a colorful KPI parade
- Use dark variant blocks only for hero or primary emphasis metrics
- Keep number reading clean, use tabular numerals when available
- Label is always visible

***

## Navigation Header

```css
.wk-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wk-color-surface-inverse);
  padding: var(--wk-space-5) var(--wk-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wk-space-6);
}

.wk-nav-logo img {
  height: 32px;
  width: auto;
}

.wk-nav-links {
  display: flex;
  align-items: center;
  gap: var(--wk-space-6);
  list-style: none;
}

.wk-nav-links a {
  font-size: var(--wk-text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--wk-transition);
}

.wk-nav-links a:hover {
  color: #FFFFFF;
}
```

### Nav Rules

- Header is dark by default
- Use yellow or white logo in header
- Keep nav links minimal and strategic
- Only one primary CTA in the nav, if any

***

## Section Containers

```css
.wk-section        { padding: var(--wk-space-20) 0; }

.wk-section-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
.wk-section-white  { background: var(--wk-color-bg);              color: var(--wk-color-text); }
.wk-section-yellow { background: var(--wk-color-surface);         color: var(--wk-color-text); }
.wk-section-pink   { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
.wk-section-mint   { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }

.wk-container {
  width: min(var(--wk-content-wide), calc(100% - 48px));
  margin-inline: auto;
}

.wk-container-narrow {
  width: min(var(--wk-content-narrow), calc(100% - 48px));
  margin-inline: auto;
}
```

### Section Rules

- Use section backgrounds to create rhythm, not decoration
- Alternate sections only when it improves hierarchy
- Do not stack more than 2 soft-color sections in a row without a dark or white break
- One section color should dominate per page, others support

***

## Footer

```css
.wk-footer {
  background: var(--wk-color-surface-inverse);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--wk-space-12) var(--wk-space-8);
  font-size: var(--wk-text-sm);
  font-weight: 400;
}
```

### Footer Rules

- Footer is dark by default
- Use white or yellow logo in footer
- Keep it minimal: copyright, links, brand line
- Avoid heavy visual complexity in footer

***

# Output Recipes

These are step-by-step execution plans for common deliverables. Follow the relevant recipe before building.

***

## Recipe: Landing Page

**Goal:** High-impact, strategic, minimum viable page for Winter Kpital.

**Steps:**

1. Identify the primary business message and the single most important action
2. Open with a dark hero section containing the logo, a strategic headline (h1 300 weight), a brief supporting statement, and one primary CTA button
3. Follow with a white or light section explaining the value proposition in clean, concise copy
4. Add a soft-color section (yellow or mint) highlighting 2 to 4 key capabilities or focus areas in a simple 2-column grid
5. Add a dark section with a short direct statement and a secondary CTA or contact invitation
6. Close with a minimal dark footer
7. Apply only brand colors, correct logo, and semantic tokens throughout

**Anti-patterns to avoid for this recipe:**

- No 3-column icon-in-circle feature grid as the main layout
- No gradient hero backgrounds
- No testimonial carousel without strategic positioning
- No decorative background shapes

***

## Recipe: Dashboard

**Goal:** Clean, calm, data-accessible internal or client-facing dashboard.

**Steps:**

1. Build a dark sticky sidebar or top navigation
2. Set main content area background to white or very light neutral
3. Place primary KPIs in a row of 3 to 4 metric blocks at the top
4. Add chart or data area below with clean section title
5. Use table or list with structured spacing for detail data
6. Use badge components for status, sector, or stage labels
7. Apply dark variant only to the most critical single metric or emphasis block
8. Keep color usage in charts minimal and structurally meaningful

**Anti-patterns to avoid for this recipe:**

- No colorful KPI heatmap overload
- No pie charts or 3D visualizations
- No dense tables without row spacing
- No competing section colors

***

## Recipe: Presentation Deck

**Goal:** Clean, strategic slides for pitch, report, or internal communication.

**Steps:**

1. Cover slide: dark background, white or yellow logo, title in 300 weight large type, subtitle muted
2. Agenda or structure slide: white or yellow background, clean numbered list, minimal
3. Content slides: consistent grid, large title, concise supporting text, maximum one visual per slide
4. Data slides: one clear chart or table, short label, strategic call-out
5. Impact or quote slides: dark full-bleed background, large white text, minimal copy
6. Close slide: dark background, primary CTA or contact, logo

**Anti-patterns to avoid for this recipe:**

- No slide with more than 3 competing elements
- No bullet-heavy slides
- No gradient section backgrounds
- No decorative icons everywhere

***

## Recipe: Report / Document

**Goal:** Structured, professional report for investment, strategy, or operations.

**Steps:**

1. Cover page: dark background, logo, title in light weight, subtitle, date
2. Executive summary: white or yellow background, clean prose, 60 to 68 character column width
3. Section pages: white background, clear section heading, body text 300 weight at 16px
4. Data pages: minimal charts, structured tables with proper spacing
5. Use mint or yellow callout boxes sparingly for strategic highlights only
6. Closing page: dark background, brief conclusion or contact

**Anti-patterns to avoid for this recipe:**

- No colored boxes around every paragraph
- No bold-heavy body text
- No decorative elements in margins

***

## Recipe: Email

**Goal:** Clean, on-brand transactional or marketing email.

**Steps:**

1. Header: dark background, white or yellow logo, maximum 600px container
2. Body: white background, clean headline, concise copy, one primary CTA button
3. Optional supporting block: soft-color section (yellow or mint) with a secondary message
4. Footer: dark background, copyright line, unsubscribe link

**Anti-patterns to avoid for this recipe:**

- No multi-column layouts unless absolutely necessary
- No heavy images above the fold
- No multiple competing CTA buttons
- No decorative background gradients

***

# Tone and Copy

## Voice

Write in a tone that is:

- Clear and direct
- Strategic and intelligent
- Concise
- Business-forward
- Confident without being loud

## Never Write Like This

- "Unlock the power of tomorrow's possibilities."
- "We empower visionary entrepreneurs on their bold journey."
- "Your all-in-one solution for next-level growth."
- "Join us and transform your business like never before."

## Write Like This Instead

- "We build and accelerate businesses across strategy, capital, and technology."
- "Connecting ideas with the capital and structure they need to scale."
- "From thesis to execution."

Prefer short declarative statements. Use strong verbs. Keep headlines under 12 words.

***

# Accessibility Minimum Requirements

Every deliverable must meet these minimums:

- Body text at 16px minimum
- Dark text on light backgrounds maintains sufficient contrast
- White text on dark `#303C42` background is compliant
- Interactive elements have visible focus states
- Touch targets minimum 44x44px on mobile
- Semantic HTML structure in all web deliverables
- Alt text on all images
- No color-only signal for any important information
- Heading hierarchy maintained: h1, then h2, then h3 in order

***

# Base HTML Template

Full production-ready starting point for any HTML deliverable.

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Winter Kpital</title>
  <style>
    :root {
      --wk-color-bg:              #FFFFFF;
      --wk-color-surface:         #FFF7D4;
      --wk-color-surface-soft:    #FFEFE6;
      --wk-color-surface-accent:  #D9FFF5;
      --wk-color-surface-inverse: #303C42;
      --wk-color-text:            #303C42;
      --wk-color-text-inverse:    #FFFFFF;
      --wk-color-text-muted:      #5A666C;
      --wk-color-text-faint:      #8A9599;
      --wk-color-border:          rgba(48, 60, 66, 0.14);
      --wk-color-border-strong:   rgba(48, 60, 66, 0.28);
      --wk-color-action-primary-bg:       #303C42;
      --wk-color-action-primary-text:     #FFF7D4;
      --wk-color-action-secondary-text:   #303C42;
      --wk-color-action-secondary-border: #303C42;

      --wk-text-xs:   12px;
      --wk-text-sm:   14px;
      --wk-text-base: 16px;
      --wk-text-lg:   20px;
      --wk-text-xl:   28px;
      --wk-text-2xl:  40px;
      --wk-text-3xl:  56px;

      --wk-space-1:  4px;  --wk-space-2:  8px;  --wk-space-3:  12px;
      --wk-space-4:  16px; --wk-space-5:  20px; --wk-space-6:  24px;
      --wk-space-8:  32px; --wk-space-10: 40px; --wk-space-12: 48px;
      --wk-space-16: 64px; --wk-space-20: 80px; --wk-space-24: 96px;

      --wk-radius-sm: 6px;
      --wk-radius-md: 12px;
      --wk-radius-lg: 20px;

      --wk-shadow-sm: 0 1px 2px rgba(48, 60, 66, 0.04);
      --wk-shadow-md: 0 8px 24px rgba(48, 60, 66, 0.06);

      --wk-content-narrow:  680px;
      --wk-content-default: 960px;
      --wk-content-wide:    1200px;

      --wk-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    body {
      font-family: 'BDO Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-weight: 300;
      font-size: var(--wk-text-base);
      line-height: 1.6;
      color: var(--wk-color-text);
      background: var(--wk-color-bg);
    }

    h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-weight: 300; }
    h1 { font-size: var(--wk-text-3xl); }
    h2 { font-size: var(--wk-text-2xl); }
    h3 { font-size: var(--wk-text-xl); }
    h4 { font-size: var(--wk-text-lg); }

    p, li { font-size: var(--wk-text-base); font-weight: 300; max-width: 68ch; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; }
    button { cursor: pointer; font: inherit; }
    ul[role="list"], ol[role="list"] { list-style: none; }

    :focus-visible {
      outline: 2px solid #303C42;
      outline-offset: 3px;
      border-radius: var(--wk-radius-sm);
    }

    /* Layout */
    .wk-container {
      width: min(var(--wk-content-wide), calc(100% - 48px));
      margin-inline: auto;
    }

    .wk-container-narrow {
      width: min(var(--wk-content-narrow), calc(100% - 48px));
      margin-inline: auto;
    }

    /* Sections */
    .wk-section        { padding: var(--wk-space-20) 0; }
    .wk-section-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
    .wk-section-white  { background: var(--wk-color-bg); }
    .wk-section-yellow { background: var(--wk-color-surface); }
    .wk-section-pink   { background: var(--wk-color-surface-soft); }
    .wk-section-mint   { background: var(--wk-color-surface-accent); }

    /* Nav */
    .wk-nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--wk-color-surface-inverse);
      padding: var(--wk-space-5) var(--wk-space-8);
      display: flex; align-items: center; justify-content: space-between;
    }

    .wk-nav-logo img { height: 30px; width: auto; }

    .wk-nav-links {
      display: flex; align-items: center; gap: var(--wk-space-6); list-style: none;
    }

    .wk-nav-links a {
      font-size: var(--wk-text-sm); font-weight: 400;
      color: rgba(255,255,255,0.7); text-decoration: none;
      transition: color var(--wk-transition);
    }

    .wk-nav-links a:hover { color: #FFFFFF; }

    /* Buttons */
    .wk-btn-primary,
    .wk-btn-secondary {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--wk-space-2); padding: 14px 20px;
      font-family: inherit; font-size: var(--wk-text-sm); font-weight: 400;
      border-radius: var(--wk-radius-md); text-decoration: none;
      transition: background var(--wk-transition), color var(--wk-transition), border-color var(--wk-transition);
      cursor: pointer;
    }

    .wk-btn-primary {
      background: var(--wk-color-action-primary-bg);
      color: var(--wk-color-action-primary-text);
      border: none;
    }

    .wk-btn-primary:hover { background: #3d4d55; }

    .wk-btn-secondary {
      background: transparent;
      color: var(--wk-color-action-secondary-text);
      border: 1.5px solid var(--wk-color-action-secondary-border);
    }

    .wk-btn-secondary:hover { background: rgba(48,60,66,0.06); }

    .wk-section-dark .wk-btn-secondary {
      color: var(--wk-color-text-inverse);
      border-color: rgba(255,255,255,0.45);
    }

    .wk-section-dark .wk-btn-secondary:hover { background: rgba(255,255,255,0.08); }

    /* Card */
    .wk-card {
      background: var(--wk-color-bg);
      border: 1px solid var(--wk-color-border);
      border-radius: var(--wk-radius-lg);
      box-shadow: var(--wk-shadow-sm);
      padding: var(--wk-space-8);
      transition: box-shadow var(--wk-transition);
    }

    .wk-card:hover { box-shadow: var(--wk-shadow-md); }

    /* Badge */
    .wk-badge {
      display: inline-flex; align-items: center;
      padding: 4px 10px;
      border-radius: var(--wk-radius-sm);
      font-size: var(--wk-text-xs); font-weight: 400;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    .wk-badge-dark   { background: var(--wk-color-surface-inverse); color: var(--wk-color-text-inverse); }
    .wk-badge-yellow { background: var(--wk-color-surface);         color: var(--wk-color-text); }
    .wk-badge-pink   { background: var(--wk-color-surface-soft);    color: var(--wk-color-text); }
    .wk-badge-mint   { background: var(--wk-color-surface-accent);  color: var(--wk-color-text); }

    /* Metric */
    .wk-metric {
      display: flex; flex-direction: column; gap: var(--wk-space-2);
      padding: var(--wk-space-8);
      background: var(--wk-color-bg);
      border: 1px solid var(--wk-color-border);
      border-radius: var(--wk-radius-lg);
    }

    .wk-metric-label {
      font-size: var(--wk-text-sm); font-weight: 400;
      color: var(--wk-color-text-muted);
      text-transform: uppercase; letter-spacing: 0.05em;
    }

    .wk-metric-value {
      font-size: var(--wk-text-2xl); font-weight: 300;
      color: var(--wk-color-text); line-height: 1;
    }

    .wk-metric-delta { font-size: var(--wk-text-sm); color: var(--wk-color-text-muted); }

    /* Input */
    .wk-label {
      display: block; font-size: var(--wk-text-sm); font-weight: 400;
      color: var(--wk-color-text); margin-bottom: var(--wk-space-2);
    }

    .wk-input {
      width: 100%;
      background: var(--wk-color-bg); color: var(--wk-color-text);
      border: 1px solid var(--wk-color-border-strong);
      border-radius: var(--wk-radius-md);
      padding: 14px 16px;
      font-family: inherit; font-size: var(--wk-text-base); font-weight: 300;
      transition: border-color var(--wk-transition), box-shadow var(--wk-transition);
    }

    .wk-input:focus {
      outline: none;
      border-color: #303C42;
      box-shadow: 0 0 0 3px rgba(48,60,66,0.10);
    }

    .wk-input::placeholder { color: var(--wk-color-text-faint); font-weight: 300; }

    /* Divider */
    .wk-divider {
      border: none;
      border-top: 1px solid var(--wk-color-border);
      margin: var(--wk-space-12) 0;
    }

    /* Footer */
    .wk-footer {
      background: var(--wk-color-surface-inverse);
      color: rgba(255,255,255,0.55);
      padding: var(--wk-space-12) var(--wk-space-8);
      font-size: var(--wk-text-sm); font-weight: 400;
    }

    /* Accessibility */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>

  <nav class="wk-nav" role="navigation" aria-label="Navegación principal">
    <a href="/" class="wk-nav-logo" aria-label="Winter Kpital - Inicio">
      <img
        src="https://winterkpital.com/wp-content/uploads/2025/05/LOGOTIPO_7@2x.png"
        alt="Winter Kpital"
        height="30"
        width="auto"
        loading="eager"
      >
    </a>
    <ul class="wk-nav-links" role="list">
      <li><a href="#">Estrategia</a></li>
      <li><a href="#">Capital</a></li>
      <li><a href="#">Tecnología</a></li>
      <li><a href="#" class="wk-btn-primary">Contacto</a></li>
    </ul>
  </nav>

  <main>

    <!-- Hero -->
    <section class="wk-section wk-section-dark" aria-labelledby="hero-title">
      <div class="wk-container">
        <h1 id="hero-title">Building Businesses,<br>Building The Future.</h1>
        <p style="margin-top: var(--wk-space-6); color: rgba(255,255,255,0.7); max-width: 52ch;">
          Conectamos estrategia, capital y tecnología para construir negocios escalables.
        </p>
        <div style="margin-top: var(--wk-space-8); display: flex; gap: var(--wk-space-4); flex-wrap: wrap;">
          <a href="#" class="wk-btn-primary">Conoce Winter Kpital</a>
          <a href="#" class="wk-btn-secondary">Explorar portafolio</a>
        </div>
      </div>
    </section>

    <!-- Content section -->
    <section class="wk-section wk-section-white" aria-labelledby="about-title">
      <div class="wk-container-narrow">
        <h2 id="about-title">Estrategia con capital y ejecución.</h2>
        <p style="margin-top: var(--wk-space-4); color: var(--wk-color-text-muted);">
          Winter Kpital actúa en la intersección de estrategia corporativa, inversión de capital
          y transformación tecnológica para acelerar negocios de alto impacto.
        </p>
      </div>
    </section>

    <!-- Cards section -->
    <section class="wk-section wk-section-yellow" aria-labelledby="services-title">
      <div class="wk-container">
        <h2 id="services-title" style="margin-bottom: var(--wk-space-10);">Áreas de enfoque</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--wk-space-6);">
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Capital</p>
            <h3 class="wk-card-title">Venture & Growth</h3>
            <p class="wk-card-body">Inversión directa y aceleración en startups y negocios en etapa de crecimiento.</p>
          </div>
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Estrategia</p>
            <h3 class="wk-card-title">Transformación</h3>
            <p class="wk-card-body">Rediseño estratégico y operativo de organizaciones con enfoque en resultados medibles.</p>
          </div>
          <div class="wk-card">
            <p class="wk-badge wk-badge-dark" style="margin-bottom: var(--wk-space-4);">Tecnología</p>
            <h3 class="wk-card-title">Infraestructura Digital</h3>
            <p class="wk-card-body">Construcción de plataformas, productos digitales e integración de inteligencia artificial.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA dark -->
    <section class="wk-section wk-section-dark" aria-labelledby="cta-title">
      <div class="wk-container-narrow" style="text-align: center;">
        <h2 id="cta-title">¿Listo para construir el siguiente negocio?</h2>
        <div style="margin-top: var(--wk-space-8);">
          <a href="#" class="wk-btn-primary">Habla con nosotros</a>
        </div>
      </div>
    </section>

  </main>

  <footer class="wk-footer" role="contentinfo">
    <div class="wk-container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--wk-space-4);">
      <img
        src="https://winterkpital.com/wp-content/uploads/2025/05/WinterKpitak-Blanco-1-scaled.png"
        alt="Winter Kpital"
        height="24"
        width="auto"
        loading="lazy"
      >
      <p>© 2026 Winter Kpital · winterkpital.com</p>
    </div>
  </footer>

</body>
</html>
```

***

# Final Checklist

Before delivering any output, verify every item:

- [ ] Only official brand colors are used
- [ ] CSS uses semantic tokens, not raw hex in components
- [ ] BDO Grotesk loaded with correct fallback stack
- [ ] Typography is dominantly light weight (300)
- [ ] Layout uses generous whitespace as a structural tool
- [ ] Correct logo version is applied for the background type
- [ ] One primary CTA per section or screen
- [ ] No gradients on buttons or backgrounds
- [ ] No icons in colored circles as section decoration
- [ ] No colored side borders on cards
- [ ] Maximum 2 non-neutral hues visible per viewport
- [ ] Body text at 16px minimum
- [ ] Contrast is sufficient on all surfaces
- [ ] The result feels structured, premium, and calm
- [ ] The result does not look like a generic template

***

# Short AI Reminder

You are generating a deliverable for Winter Kpital.

Apply structure first. Whitespace second. Hierarchy third. Color last.

When something looks too noisy, remove elements before adding effects.
When something looks too empty, improve hierarchy before adding decoration.
When something looks too generic, make it more strategic and restrained, not more colorful.

Never make it louder than it needs to be.

---
name: sapientia-capital-brand
description: Apply Sapientia Capital brand identity to ALL deliverables. Use this skill whenever creating ANY visual output for Sapientia Capital: HTML pages, presentations, documents, reports, dashboards, landing pages, components, emails, infographics, or any other designed artifact. This skill MUST be triggered whenever the user is working in the context of Sapientia Capital, mentions the brand, or asks to create something that will be used by or associated with Sapientia Capital. 
---

# Sapientia Capital Brand Skill

Apply the Sapientia Capital brand identity consistently across every deliverable. Read this
skill before writing any code or creating any file for this brand.

---

## Brand Essence

Sapientia Capital is a **Multifamily Office** focused on **Future Management**. The brand
personality is classic, sophisticated, and rooted in a "new heraldic" visual language — like
a wise, trustworthy mentor who has earned respect through experience and knowledge.

**Purpose:** Put knowledge and experience at the service of giving purpose to family assets.
**Pillars:** Conocimiento · Experiencia · Seguridad (Knowledge · Experience · Security)
**Tagline (emotional):** "Te guiamos por el camino que conduce a tus sueños."
**Tagline (functional):** Multifamily Office
**Claim:** "Hablamos de valor, no de dinero. El valor del futuro, de la familia y de lo que realmente importa."

The tone is calm, precise, professional — never pretentious or flashy. Think understated luxury,
classical references, and a sense of timeless gravitas.

---

## Brand Colors

### Web Palette

| Role              | Hex        | Usage                                                    |
|-------------------|------------|----------------------------------------------------------|
| Gris oscuro       | `#282828`  | Primary text, dark backgrounds, main structural color    |
| Verde Sapientia   | `#113337`  | Primary brand color, headers, accent backgrounds         |
| Gris claro        | `#DADADA`  | Light backgrounds, dividers, secondary surfaces          |
| Dorado            | `#CCB16A`  | Accents, star element, highlights (use sparingly)        |
| Blanco            | `#FFFFFF`  | Clean surfaces, text on dark backgrounds                 |

### Grayscale Secondary (from PANTONE Black 3 C)

Use these for subtle tonal variation in layouts:

| Opacity | Approximate Hex | Usage                          |
|---------|-----------------|--------------------------------|
| 10%     | `#E8E8E6`       | Lightest background tone       |
| 30%     | `#C4C4C0`       | Subtle dividers, card bgs      |
| 50%     | `#9E9E99`       | Secondary text, captions       |
| 70%     | `#787873`       | Medium emphasis elements       |
| 80%     | `#636360`       | Strong secondary elements      |

### Color Harmony Rules

- **Verde + Gris Claro** — Primary pairing for most layouts
- **Escala de Grises** — For elegant, neutral compositions
- **Gris Oscuro + Gris Claro** — Clean, corporate feel
- Dark bg (`#113337` or `#282828`) → white or light gray text
- Light bg (`#DADADA`, `#FFFFFF`) → dark text (`#282828`)
- Gold accents (`#CCB16A`) are reserved for the star element and small highlights — never use gold as a large background or for body text. It's a precious accent, treat it that way.

---

## Typography

Sapientia uses two typeface families:

### Cormorant (Display / Titles)

Used for titles, headlines, and special display text. It's a serif typeface with an elegant, classical feel.

```css
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
```

| Element             | Weight        | Style   | Usage                           |
|---------------------|---------------|---------|---------------------------------|
| `h1`                | Light (300)   | Normal  | Main titles, hero text          |
| `h2`                | Regular (400) | Normal  | Section titles                  |
| `h2` (special)      | Light (300)   | Italic  | Elegant callouts, claims        |
| Display quotes      | Light (300)   | Italic  | Brand phrases, taglines         |

### Satoshi (Body / UI)

Used for body text, subtitles, UI elements, and spaced-letter labels. Sans-serif, clean, modern.

```css
/* Satoshi is not on Google Fonts — use a fallback stack */
font-family: 'Satoshi', 'Inter', 'Helvetica Neue', Arial, sans-serif;
/* If Satoshi is available as a local/hosted file, load it. Otherwise fallback to Inter: */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
```

| Element             | Weight        | Usage                                    |
|---------------------|---------------|------------------------------------------|
| Body text           | Regular (400) | Paragraphs, descriptions                 |
| Subtitles           | Medium (500)  | Section subtitles, emphasis              |
| Labels (spaced)     | Medium (500)  | `letter-spacing: 0.2em; text-transform: uppercase;` for tags like "MULTIFAMILY OFFICE" |
| UI / Buttons        | Medium (500)  | Interactive elements                     |

**Key rule:** Cormorant is always serif, always for display. Satoshi/Inter is always sans-serif, always for body and UI. Never mix them up.

---

## Logo

Sapientia Capital has a logotype (symbol + wordmark) and a standalone logosymbol (shield/crest icon).

### Logo Structure

The full logo consists of:
1. **Logosymbol** — A heraldic crest/shield containing an intertwined S, a star (*), and the number 7, surrounded by "SAPIENTIA" at top and "CAPITAL" at bottom
2. **Wordmark** — "SAPIENTIA" in Cormorant with wide letter-spacing, and "CAPITAL" below in small caps

### Version Rules

| Background         | Logo version     | Text color  |
|--------------------|------------------|-------------|
| Dark (`#113337`, `#282828`) | Positive (light/white) | `#FFFFFF` or `#DADADA` |
| Light (`#DADADA`, `#FFFFFF`) | Negative (dark) | `#282828` or `#113337` |

### Fallback (when no image available)

Represent typographically using Cormorant:
```
SAPIENTIA
 C A P I T A L
```
- On dark bg: color `#DADADA` or `#FFFFFF`
- On light bg: color `#282828` or `#113337`
- Wordmark "SAPIENTIA" uses `letter-spacing: 0.15em`
- "CAPITAL" uses `letter-spacing: 0.35em; font-size: 0.45em`

### Protection Area

Maintain clear space around the logo equal to the height of the logosymbol on all sides. Do not place other elements within this zone.

### Incorrect Usage (never do these)

- Do not change proportions between symbol and wordmark
- Do not add decorations (hats, icons, etc.) to the logosymbol
- Do not change the typography of the wordmark
- Do not rotate or distort the logo

### Responsive / Minimum Size

- Full logo: minimum width 4 cm
- Logosymbol only: minimum width 0.8 cm
- Below these sizes, use only the logosymbol

---

## Graphic Elements

### The Star (★)

The star is a core brand element representing "the north" (el norte). Rules:
- Always rendered in **gold** (`#CCB16A`) in digital, or foil dorado in print
- Always used at **small dimensions** — it's a subtle accent, not a dominant element
- Place it as a small punctuation mark alongside headlines or in corners of compositions
- In CSS: `color: #CCB16A; font-size: 0.8em;` relative to the headline it accompanies

### Graphite Illustrations

The brand uses pencil/graphite-style illustrations for metaphorical storytelling — a horse, a path, a star, a nest, a tree. These are artistic, minimalist, and aspirational.

- Apply illustrations in **grayscale** or with a **multiply blend mode** over brand colors
- The verde Sapientia background can be adjusted in brightness for contrast
- Illustrations are independent objects (not compositions) that explain concepts through metaphor

### Gold Foil Accents

Small gold details can accent illustrations to reinforce key messages. Use very precisely — never overuse.

### Photography Style

- **Metaphorical photos**: Reference the brand storytelling (paths, horses, nature, journeys)
- **Literal photos**: Business/finance world but curated, classical, artistic
- Always apply in **grayscale** or with **multiply blend mode** over brand colors
- Never use full-color photography

---

## Design Principles

1. **Classical & Sophisticated** — Think heraldic crests, wax seals, fine stationery
2. **Restrained luxury** — Generous whitespace, minimal elements, high impact
3. **Tonal palette** — Lean into greens, grays, and grayscale; gold only as accent
4. **Serif for display, sans for body** — Cormorant titles + Satoshi/Inter body, always
5. **Dark structural chrome** — Headers and footers in `#113337` or `#282828`
6. **No gradients, no drop shadows** — Flat, elegant design language
7. **Photography always desaturated** — Grayscale or multiply-blended over green

---

## HTML/CSS Deliverables — Base Template

Always start from this structure for web deliverables:

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sapientia Capital</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

    :root {
      --sc-dark:    #282828;
      --sc-green:   #113337;
      --sc-gray:    #DADADA;
      --sc-gold:    #CCB16A;
      --sc-white:   #FFFFFF;
      --sc-gray-10: #E8E8E6;
      --sc-gray-30: #C4C4C0;
      --sc-gray-50: #9E9E99;
      --sc-gray-70: #787873;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-weight: 400;
      color: var(--sc-dark);
      background: var(--sc-white);
      line-height: 1.6;
    }

    h1, h2, h3 {
      font-family: 'Cormorant', 'Georgia', serif;
    }

    h1 {
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: 0.02em;
    }

    h2 {
      font-weight: 400;
      line-height: 1.2;
    }

    h3 {
      font-weight: 500;
      line-height: 1.3;
    }

    p {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      line-height: 1.7;
    }

    .sc-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
    }

    /* Star accent */
    .sc-star {
      color: var(--sc-gold);
      font-size: 0.8em;
    }

    /* Header */
    .sc-header {
      background: var(--sc-green);
      color: var(--sc-white);
      padding: 1.5rem 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sc-logo {
      font-family: 'Cormorant', serif;
      font-weight: 300;
      font-size: 1.4rem;
      letter-spacing: 0.15em;
      color: var(--sc-white);
    }

    .sc-logo-sub {
      font-family: 'Inter', sans-serif;
      font-size: 0.5rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--sc-gray);
      display: block;
      text-align: center;
    }

    /* Sections */
    .section-green  { background: var(--sc-green);   color: var(--sc-white);  padding: 5rem 3rem; }
    .section-dark   { background: var(--sc-dark);    color: var(--sc-white);  padding: 5rem 3rem; }
    .section-light  { background: var(--sc-gray);    color: var(--sc-dark);   padding: 5rem 3rem; }
    .section-white  { background: var(--sc-white);   color: var(--sc-dark);   padding: 5rem 3rem; }
    .section-warm   { background: var(--sc-gray-10); color: var(--sc-dark);   padding: 5rem 3rem; }

    /* Buttons */
    .btn-primary {
      background: var(--sc-green);
      color: var(--sc-white);
      border: none;
      padding: 0.85rem 2.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }

    .btn-secondary {
      background: transparent;
      color: var(--sc-dark);
      border: 1px solid var(--sc-dark);
      padding: 0.85rem 2.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }

    .section-green .btn-secondary,
    .section-dark .btn-secondary {
      color: var(--sc-white);
      border-color: var(--sc-white);
    }

    /* Cards */
    .sc-card {
      background: var(--sc-white);
      padding: 2.5rem;
      border-left: 2px solid var(--sc-green);
    }

    /* Divider with pillars */
    .sc-pillars {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      border-top: 1px solid var(--sc-gray-30);
      border-bottom: 1px solid var(--sc-gray-30);
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sc-gray-50);
    }

    /* Footer */
    .sc-footer {
      background: var(--sc-green);
      color: var(--sc-gray);
      padding: 3rem;
      font-size: 0.8rem;
    }

    .sc-footer a {
      color: var(--sc-gray);
      text-decoration: none;
    }
  </style>
</head>
<body>
  <header class="sc-header">
    <div>
      <div class="sc-logo">SAPIENTIA</div>
      <span class="sc-logo-sub">C A P I T A L</span>
    </div>
    <nav class="sc-label" style="color: var(--sc-gray);">
      <!-- navigation items -->
    </nav>
  </header>

  <!-- Content sections here -->

  <footer class="sc-footer">
    <div class="sc-pillars" style="border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); margin-bottom: 2rem;">
      <span>Conocimiento</span>
      <span>Experiencia</span>
      <span>Seguridad</span>
    </div>
    <p>Tel: 321.701.6813 · Calle 2 # 20-50 / Oficina 1401 · www.sapientia.capital · info@sapientia.capital</p>
  </footer>
</body>
</html>
```

---

## React/JSX Deliverables

Use Tailwind for layout/spacing, inline styles for brand colors:

```jsx
const colors = {
  dark:   '#282828',
  green:  '#113337',
  gray:   '#DADADA',
  gold:   '#CCB16A',
  white:  '#FFFFFF',
  gray10: '#E8E8E6',
  gray30: '#C4C4C0',
  gray50: '#9E9E99',
  gray70: '#787873',
};

// Import fonts in the component
// Cormorant for headings, Inter for body
// <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />

// Heading example
<h1 style={{ fontFamily: "'Cormorant', Georgia, serif", fontWeight: 300, color: colors.dark }}>
  Sapientia Capital
</h1>

// Spaced label example
<span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: '0.75rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: colors.gray50 }}>
  MULTIFAMILY OFFICE
</span>

// Gold star accent
<span style={{ color: colors.gold, fontSize: '0.8em' }}>★</span>
```

---

## PPTX / Document Deliverables

- **Title slides**: `#113337` (verde) background with white text in Cormorant
- **Content slides**: `#FFFFFF` or `#DADADA` background with `#282828` text
- **Accent slides**: `#282828` background for dramatic emphasis
- **Pillar bar**: Include "Conocimiento — Experiencia — Seguridad" as a thin horizontal divider element on key slides
- **Star accent**: Place a small gold (★) element on title or closing slides
- **Font**: Cormorant for titles, Inter/Helvetica Neue for body
- **No gradients, no drop shadows** — flat, elegant design
- **Photography**: Always in grayscale if used
- **Letterhead header**: "Conocimiento — Experiencia — Seguridad" thin bar + logo centered below

---

## Seal & Stamp

Sapientia has two special graphic elements:
- **Ink stamp** (sello de tinta) — circular, line-art version of the logosymbol
- **Wax seal** (sello de lacre) — 3D teal/green wax seal version

These are used for premium collateral (folders, boxes, special documents). In digital contexts, reference them as decorative elements on closing slides or footer areas.

---

## Quick Reference Checklist

Before finalizing any deliverable, verify:
- [ ] Only brand colors used (`#282828`, `#113337`, `#DADADA`, `#CCB16A`, `#FFFFFF`, grayscale variants)
- [ ] Cormorant loaded for headings (serif)
- [ ] Inter/Satoshi loaded for body text (sans-serif)
- [ ] H1 = Cormorant Light 300, Body = Inter Regular 400, Labels = Inter Medium 500 spaced
- [ ] Header/footer use `#113337` (verde Sapientia) background
- [ ] Gold (`#CCB16A`) used sparingly — only for star accents and small highlights
- [ ] Logo text fallback uses proper letter-spacing ("SAPIENTIA" + "C A P I T A L")
- [ ] Generous whitespace — classical, uncluttered layouts
- [ ] Photography in grayscale or multiply-blend only
- [ ] No gradients, no drop shadows, no bright colors outside palette
- [ ] Three pillars ("Conocimiento · Experiencia · Seguridad") included where appropriate

Eres el asistente de memoria del equipo Winter Kpital. Tu trabajo es procesar reuniones y extraer todo lo que importa con síntesis de alto nivel — nunca respuestas escuetas.

CONTEXTO WK:
Equipo WK = Mauricio Jiménez, Natalia Arroyave, Esteban Higuita, Cristian Quiroz, Tala Alvarez, Sergio Zuluaga, Darío Solorzano.
Cualquier nombre fuera de esta lista = cliente o actor externo.

INSTRUCCIÓN:
Procesa el siguiente material de reunión (transcript, notas o audio) y genera el informe completo con estas secciones. Sé exhaustivo en los puntos clave y conclusiones — cada sección debe tener suficiente profundidad para que alguien que no estuvo en la reunión entienda exactamente qué pasó y qué sigue.


:clipboard: TÍTULO DE LA REUNIÓN
[Nombre descriptivo que refleje el propósito real, no solo "Reunión X"]

:busts_in_silhouette: PARTICIPANTES
[Nombre | Empresa | Rol en la reunión — distingue WK de cliente/externo]

:memo: DESCRIPCIÓN
[2-3 párrafos: qué tipo de reunión fue, cuál era el objetivo, cuál fue el tono general, qué tan alineadas estaban las partes. Incluye contexto que no está explícito pero se desprende de la conversación.]

:brain: PUNTOS CLAVE CONVERSADOS
[Mínimo 5-8 puntos. Para cada punto: qué se dijo, quién lo dijo, qué implicaciones tiene. No listes titulares — desarrolla cada punto con suficiente detalle para que sea accionable.]

:dart: CONCLUSIONES
[Las decisiones y acuerdos reales que quedaron de esta reunión. Distingue entre: (1) decisiones firmes, (2) acuerdos provisionales, (3) temas abiertos que siguen sin resolverse. Sé directo sobre lo que quedó claro y lo que no.]

:zap: ÍTEMS ACCIONABLES
[Todo lo que alguien se comprometió a hacer, aunque sea implícitamente. Incluye: qué, para qué sirve, cuál es el riesgo si no se hace.]

:white_check_mark: LISTA DE TAREAS
[Tabla con: Tarea | Responsable | Prioridad (Alta/Media/Baja) | Deadline | Notas]

Eres el asistente de memoria del equipo Winter Kpital. Tu trabajo es procesar documentos (presentaciones, modelos financieros, propuestas, reportes) y extraer todo lo que importa con síntesis ejecutiva de alto nivel — nunca respuestas escuetas.

CONTEXTO WK:
Equipo WK = Mauro Jiménez, Natalia Arroyave, Esteban Higuita, Cristian Quiroz, Tala Alvarez, Sergio Zuluaga, Darío Solorzano.

INSTRUCCIÓN:
Procesa el siguiente documento y genera el informe completo con estas secciones. Cada sección debe tener suficiente profundidad para que alguien que nunca vio el documento entienda su contenido, relevancia e implicaciones — sin necesidad de leerlo.

---

📄 TÍTULO DEL DOCUMENTO
[Título claro y descriptivo. Si el archivo tiene un nombre técnico, tradúcelo a lenguaje humano.]

📝 DESCRIPCIÓN
[2-3 párrafos: qué tipo de documento es, para qué sirve, en qué contexto fue creado o recibido, a quién va dirigido y qué decisión o acción busca provocar.]

🧠 PUNTOS CLAVE DEL DOCUMENTO
[Mínimo 5-8 puntos. Para cada punto: qué dice el documento, qué significa en la práctica, qué implicaciones tiene para WK o para el cliente. No copies texto — sintetiza e interpreta.]

⚠️ ASPECTOS IMPORTANTES QUE EL EQUIPO DEBE SABER
[Todo lo que no es obvio pero es crítico: supuestos implícitos, riesgos escondidos, información que podría cambiar una decisión, datos que contradicen expectativas, oportunidades que no se mencionan explícitamente pero se desprenden del contenido.]

🎯 CONCLUSIONES
[Qué dice este documento sobre el estado de la situación. Qué cambia o se confirma con este documento. Qué debería pasar como resultado de haberlo recibido o creado.]

---