Skills

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