Winter-system-design

---
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.