General Intelligence Company

:root {
  --gic-bg: #F9FAF7;
  --gic-surface: #FFFFFF;
  --gic-surface-soft: #EEF1ED;
  --gic-text: #171717;
  --gic-text-secondary: #444141;
  --gic-text-muted: #646464;
  --gic-sky-500: #358CD7;
  --gic-sky-400: #52A3DE;
  --gic-leaf-700: #31552A;
  --gic-night-900: #1F1F29;
  --gic-border: #DEE2DE;
  --gic-border-strong: #B4B8B4;
  --gic-radius-sm: 8px;
  --gic-radius-md: 12px;
  --gic-radius-lg: 16px;
  --gic-radius-full: 999px;
  --gic-shadow-nav: 0 2px 6px 0 rgba(0,0,0,0.15);
  --gic-shadow-chip: 0 1.01px 1.01px 0 rgba(0,0,0,0.04);
  --gic-font-display: "Forum", Georgia, serif;
  --gic-font-body: "Instrument Sans", system-ui, sans-serif;
  --gic-font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@theme {
  --color-gic-bg: #F9FAF7;
  --color-gic-surface: #FFFFFF;
  --color-gic-surface-soft: #EEF1ED;
  --color-gic-text: #171717;
  --color-gic-text-secondary: #444141;
  --color-gic-text-muted: #646464;
  --color-gic-sky-400: #52A3DE;
  --color-gic-sky-500: #358CD7;
  --color-gic-sky-600: #287ACD;
  --color-gic-leaf-700: #31552A;
  --color-gic-night-900: #1F1F29;
  --color-gic-border: #DEE2DE;
  --color-gic-border-strong: #B4B8B4;

  --font-display: "Forum", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-nav: 0 2px 6px 0 rgba(0,0,0,0.15);
  --shadow-chip: 0 1.01px 1.01px 0 rgba(0,0,0,0.04);
}

{
  "brand": {
    "name": "General Intelligence Company",
    "source": "https://www.generalintelligencecompany.com/",
    "theme": "light",
    "colorFamily": "blue",
    "sections": ["Serif", "Dirección de Arte", "Moderno"]
  },
  "color": {
    "background": { "value": "#F9FAF7" },
    "surface": { "value": "#FFFFFF" },
    "surfaceSoft": { "value": "#EEF1ED" },
    "text": { "value": "#171717" },
    "textSecondary": { "value": "#444141" },
    "textMuted": { "value": "#646464" },
    "primary": { "value": "#358CD7" },
    "primarySoft": { "value": "#52A3DE" },
    "primaryActive": { "value": "#287ACD" },
    "secondary": { "value": "#31552A" },
    "accent": { "value": "#1F1F29" },
    "border": { "value": "#DEE2DE" },
    "borderStrong": { "value": "#B4B8B4" }
  },
  "font": {
    "display": {
      "rendered": "Forum",
      "original": "ppmondwest",
      "fallback": "Georgia, serif"
    },
    "body": {
      "rendered": "Instrument Sans",
      "original": "af",
      "fallback": "system-ui, sans-serif"
    },
    "mono": {
      "rendered": "IBM Plex Mono",
      "original": "Geist Mono",
      "fallback": "ui-monospace, monospace"
    }
  },
  "radius": {
    "sm": { "value": "8px" },
    "md": { "value": "12px" },
    "lg": { "value": "16px" },
    "full": { "value": "999px" }
  },
  "shadow": {
    "nav": { "value": "0 2px 6px 0 rgba(0,0,0,0.15)" },
    "chip": { "value": "0 1.01px 1.01px 0 rgba(0,0,0,0.04)" }
  },
  "spacing": {
    "base": { "value": "4px" },
    "xs": { "value": "8px" },
    "sm": { "value": "12px" },
    "md": { "value": "16px" },
    "lg": { "value": "20px" },
    "xl": { "value": "24px" },
    "2xl": { "value": "32px" }
  }
}

---
version: "1.0"
name: "General Intelligence Company"
description: "Sistema editorial-tech en modo claro: serif protagonista, paisaje ilustrado de Nueva York, UI neutral sobria y CTAs oscuros sobre una atmosfera optimista."
source_url: "https://www.generalintelligencecompany.com/"
captured_at: "2026-06-22"
analysis_mode: "homepage publica + CSS compilado + captura Microlink"
colors:
  primary: "#358CD7"
  primary-hover: "#52A3DE"
  primary-active: "#287ACD"
  secondary: "#31552A"
  accent: "#1F1F29"
  accent-soft: "#EEF1ED"
  neutral: "#F9FAF7"
  background: "#F9FAF7"
  background-alt: "#FEFFFC"
  surface: "#FFFFFF"
  surface-glass: "rgba(255, 255, 255, 0.12)"
  text-primary: "#171717"
  text-secondary: "#444141"
  text-muted: "#646464"
  text-on-primary: "#171717"
  text-on-accent: "#FFFFFF"
  border: "#DEE2DE"
  border-strong: "#B4B8B4"
  success: "#3F8A63 (derivado para completar el sistema)"
  success-bg: "#EAF4EE (derivado para completar el sistema)"
  warning: "#A76A1F (derivado para completar el sistema)"
  warning-bg: "#FFF2DE (derivado para completar el sistema)"
  error: "#B24848 (derivado para completar el sistema)"
  error-bg: "#FBE9E9 (derivado para completar el sistema)"
  info: "#358CD7"
  info-bg: "#E7F3FD (derivado para completar el sistema)"
typography:
  display-xl: { fontFamily: "ppmondwest -> Forum (Google substitute)", fontSize: "64px-132px", fontWeight: 400, lineHeight: 0.92, letterSpacing: "-0.03em" }
  display-md: { fontFamily: "ppmondwest -> Forum (Google substitute)", fontSize: "28px-40px", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.02em" }
  body-md: { fontFamily: "af -> Instrument Sans (Google substitute)", fontSize: "15px", fontWeight: 500, lineHeight: "140%" }
  body-lg: { fontFamily: "af -> Instrument Sans (Google substitute)", fontSize: "18px", fontWeight: 500, lineHeight: "150%" }
  label-md: { fontFamily: "af -> Instrument Sans (Google substitute)", fontSize: "15px", fontWeight: 500, lineHeight: "140%", letterSpacing: "-0.15px" }
  mono-sm: { fontFamily: "Geist Mono -> IBM Plex Mono (Google substitute)", fontSize: "11px-12px", fontWeight: 400, lineHeight: "140%", letterSpacing: "0.08em" }
rounded:
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px (derivado para contenedores editoriales)"
  full: "999px"
spacing:
  base: "4px"
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  section-padding: "64px-84px"
components:
  button-primary: { backgroundColor: "#1F1F29", textColor: "#FFFFFF", typography: "af -> Instrument Sans, 15px, 500", rounded: "8px", padding: "8px 16px 8px 16px" }
  button-secondary: { backgroundColor: "rgba(255,255,255,0.06)", textColor: "#171717", typography: "af -> Instrument Sans, 15px, 500", rounded: "8px", padding: "10px 16px" }
  glass-panel: { backgroundColor: "rgba(0,0,0,0.07) sobre blur", textColor: "#FFFFFF", rounded: "16px", border: "1px solid rgba(255,255,255,0.20)" }
  social-link: { backgroundColor: "#FFFFFF0F", textColor: "#2C2C2C", rounded: "8px", border: "hairline por sombra 0 0 0 1px #DEE2DE" }
  card: { backgroundColor: "#FFFFFF", textColor: "#171717", rounded: "16px", padding: "24px" }
---

# General Intelligence Company

Documento de sistema visual extraido desde `https://www.generalintelligencecompany.com/`.

El analisis se apoya en tres fuentes observables:
la homepage publica,
el CSS compilado servido por Next.js con banner de Tailwind v4.1.18,
y una captura real del hero obtenida por Microlink.

Cuando un valor no fue visible de forma directa se marca como `(no detectado)`.
Cuando un valor se completo para volver utilizable el sistema se marca como `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmosfera

General Intelligence Company no se presenta como una startup AI convencional.
Su home mezcla una puesta en escena ilustrada de Manhattan,
una tipografia serif con gesto casi cultural,
y una UI muy sobria de neutral claro, vidrio, blur y CTAs oscuros.

La sensacion dominante no es "dashboard futurista".
Es "institucion nueva con confianza de marca publica".
El cielo azul saturado y el follaje verde convierten la promesa de automatizacion en una escena urbana optimista.
Eso hace que la empresa suene ambiciosa sin caer en la iconografia tipica de chip, malla o neon.

La pieza visual mas fuerte es el contraste entre dos lenguajes:
arriba, una narrativa ilustrada y casi editorial;
encima, una navegacion flotante muy producto;
abajo, paneles transluidos con copy funcional y CTA concreto.
Ese cruce es el corazon del sistema.

La serif protagonista no actua como lujo clasico.
Actua como un sello de memoria.
Hace que el nombre de la marca y el claim principal se sientan menos efimeros y mas institucionales.
El sans de soporte mantiene todo aterrizado en producto.

Tambien hay una estrategia emocional clara:
el sitio no intenta demostrar tecnologia por complejidad visual.
Prefiere representar posibilidad.
Por eso el skyline, el avion con banner y los parques importan tanto como los componentes UI.
La automatizacion se comunica como algo que ya pertenece al mundo real.

### Palabras clave de personalidad

- editorial
- optimista
- serena
- aplicada
- urbana
- memorable
- moderna
- art-directed

### Densidad del layout

Media.
Mucho aire en hero y footer.
Densidad controlada en la navegacion y en los paneles de mensaje.

### Modo preferido

Claro.
El sistema base parte de `#F9FAF7` y blancos suaves.
Los elementos oscuros funcionan como contraste de accion, no como fondo permanente.

### Nivel de ornamentacion

Medio.
No hay decoracion gratuita en la UI.
La ornamentacion vive sobre todo en la ilustracion del hero y en las capas glass con blur.

### Audiencia visual objetivo

Fundadores,
operadores,
talento tech,
y usuarios que valoran una promesa de AI aplicada con una presentacion mas sofisticada que la del SaaS promedio.

### Regla atmosferica

Si una interfaz nueva para esta marca no logra sentirse simultaneamente institucional, optimista y util, se desvia del sistema.

---

## 2. Paleta de Colores y Roles Semanticos

La paleta observable tiene dos capas.
La base estructural es neutral y muy controlada.
La capa emocional viene de la ilustracion del hero: cielo azul, verdes orgánicos y sombras azul-gris.
La UI usa los neutros para casi todo y deja que la imagen aporte el color recordable.

### 2.1 Colores de marca

| Nombre | Variable CSS sugerida | Hex | Rol | Texto sobre el |
|---|---|---|---|---|
| Sky 500 | `--gic-sky-500` | `#358CD7` | color dominante emocional, usado para clasificacion y highlights | `#171717` pasa AA grande, `#1F1F29` pasa AA |
| Sky 400 | `--gic-sky-400` | `#52A3DE` | variante clara observada en el hero, transiciones de cielo | `#1F1F29` pasa AA |
| Sky 600 | `--gic-sky-600` | `#287ACD` | variante densa observada en el hero, version mas profunda del azul | `#F9FAF7` pasa AA grande |
| Leaf 700 | `--gic-leaf-700` | `#31552A` | soporte natural y contraste suave, visible en vegetacion del hero | `#FFFFFF` pasa AAA |
| Night 900 | `--gic-night-900` | `#1F1F29` | CTA principal y contraste premium | `#FFFFFF` pasa AAA |

### 2.2 Colores de superficie

| Nombre | Variable CSS sugerida | Hex / receta | Rol | Nota |
|---|---|---|---|---|
| Neutral 100 | `--gic-bg` | `#F9FAF7` | fondo general del sitio | observado en `--neutral-100` |
| White Warm | `--gic-surface` | `#FEFFFC` | superficie luminosa y fondos de degradado claros | observado en gradientes y fondos secundarios |
| White Pure | `--gic-card` | `#FFFFFF` | tarjetas limpias y zonas de legibilidad alta | observado |
| Frost | `--gic-glass` | `rgba(255,255,255,0.12)` | navegacion y paneles con blur | observado en nav |
| Neutral 300 | `--gic-surface-soft` | `#EEF1ED` | fondos de hover claros, strokes suaves | observado en `--neutral-300` |

### 2.3 Colores de texto

| Nombre | Variable CSS sugerida | Hex | Rol | Contraste sobre `#F9FAF7` |
|---|---|---|---|---|
| Ink | `--gic-text` | `#171717` | texto principal | `17.11:1` |
| Ink Soft | `--gic-text-secondary` | `#444141` | texto explicativo | alto, seguro para body |
| Muted | `--gic-text-muted` | `#646464` | metadata, labels, fine print | `5.65:1` |
| Neutral 900 | `--gic-text-strong` | `#2C2C2C` | titulos secundarios y alto contraste suave | `12.26:1` sobre `#EEF1ED` |
| On Accent | `--gic-text-on-accent` | `#FFFFFF` | texto sobre CTA oscuro | `16.33:1` sobre `#1F1F29` |

### 2.4 Colores de estado

| Nombre | Variable CSS sugerida | Hex | Fondo | Nota |
|---|---|---|---|---|
| Success | `--gic-success` | `#3F8A63` | `#EAF4EE` | derivado para completar el sistema |
| Warning | `--gic-warning` | `#A76A1F` | `#FFF2DE` | derivado para completar el sistema |
| Error | `--gic-error` | `#B24848` | `#FBE9E9` | derivado para completar el sistema |
| Info | `--gic-info` | `#358CD7` | `#E7F3FD` | alineado al azul dominante observado |

### 2.5 Roles semanticos resumidos

| Rol | Valor |
|---|---|
| Background principal | `#F9FAF7` |
| Background secundario | `#FEFFFC` |
| Surface elevada | `#FFFFFF` |
| Surface glass | `rgba(255,255,255,0.12)` |
| Texto primario | `#171717` |
| Texto secundario | `#444141` |
| Texto muted | `#646464` |
| CTA base | `#1F1F29` |
| CTA texto | `#FFFFFF` |
| Borde suave | `#DEE2DE` |
| Borde fuerte | `#B4B8B4` |
| Highlight emocional | `#358CD7` |

### 2.6 Regla de color

El sistema no depende de pintar la UI de azul.
Depende de mantener la UI neutral para que el azul y el verde del hero sean memorables.
Si se expande el azul a demasiados botones, backgrounds o badges, la marca pierde sofisticacion.

### 2.7 Escalas de tinte sugeridas

```css
--gic-sky-300: #8DC7EE; /* derivado para completar el sistema */
--gic-sky-400: #52A3DE; /* observado */
--gic-sky-500: #358CD7; /* observado */
--gic-sky-600: #287ACD; /* observado */
--gic-sky-700: #2163A8; /* derivado para completar el sistema */

--gic-neutral-100: #F9FAF7; /* observado */
--gic-neutral-200: #F3F5F2; /* observado en copy del hero */
--gic-neutral-300: #EEF1ED; /* observado */
--gic-neutral-600: #B4B8B4; /* observado */
--gic-neutral-700: #646464; /* observado */
--gic-neutral-900: #2C2C2C; /* observado */
```

### 2.8 Regla WCAG

El azul `#358CD7` no es color de body sobre `#F9FAF7`.
Sirve para acentos, grandes titulos o superficies con texto oscuro.
Para copy funcional el sitio descansa en negros suaves y grises medios.

---

## 3. Reglas de Tipografia

La jerarquia tipografica observable se sostiene en dos familias:
una serif display protagonista,
y un sans de interfaz muy funcional.
Hay una tercera familia mono para detalles tecnicos y numeracion interna del sistema.

### 3.1 Fuentes detectadas

- Display original detectada: `ppmondwest`
- Body / UI original detectada: `af`
- Mono original detectada: `Geist Mono`

### 3.2 Sustitucion curada para HTML autocontenido

- Display HTML: `Forum` como sustituto de `ppmondwest`
- Body HTML: `Instrument Sans` como sustituto de `af`
- Mono HTML: `IBM Plex Mono` como sustituto de `Geist Mono`

La sustitucion se hace porque la salida final debe abrir sin build local.
Las familias originales no se publican como Google Fonts en el sitio analizado.
`Forum` preserva un gesto fino y editorial sin irse al serif de lujo generico.
`Instrument Sans` mantiene un sans actual y contenido.
`IBM Plex Mono` conserva claridad tecnica para metadata y tokens.

### 3.3 Link de carga recomendado

```html
<link
  href="https://fonts.googleapis.com/css2?family=Forum&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
  rel="stylesheet"
/>
```

### 3.4 Variables CSS tipograficas

```css
:root {
  --font-heading: "Forum", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
```

### 3.5 Escala tipografica observada o consolidada

| Token | Rem | Px | Line-height | Uso |
|---|---|---|---|---|
| `display-xl` | `8.25rem` max | `132px` | `0.92` | nombre de marca en hero |
| `display-lg` | `2.5rem` | `40px` | `1.10` | titular del panel glass del hero |
| `heading-md` | `1.75rem` | `28px` | `1.20` | subtitulos editoriales |
| `title-sm` | `1.125rem` | `18px` | `1.50` | copy lead y parrafos protagonistas |
| `body-md` | `0.9375rem` | `15px` | `1.40` | navegacion, CTA, copy funcional |
| `label-sm` | `0.75rem` | `12px` | `1.40` | metadata y barras del frame |
| `mono-xs` | `0.6875rem` | `11px` | `1.40` | numeracion y tokens |

### 3.6 Pesos observados

| Familia | Pesos visibles | Nota |
|---|---|---|
| `ppmondwest` | `400`, `500` percibido | el hero se siente ligero pero firme |
| `af` | `500` muy frecuente | la UI usa medium de forma consistente |
| `Geist Mono` | `(no detectado en uso visible)` | detectada por variable, no por composicion visible |

### 3.7 Tracking observado

| Contexto | Tracking |
|---|---|
| Nav y CTA | `-0.15px` |
| Hero panel title | `-0.44px`, `-0.56px`, `-0.8px` segun escala |
| Display principal | `-0.03em` equivalente editorial |
| Kicker mono | `0.08em` a `0.14em` recomendado |

### 3.8 Muestras de uso

```css
.gic-wordmark {
  font-family: var(--font-heading);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.gic-panel-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gic-ui {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.15px;
  font-weight: 500;
}
```

### 3.9 Regla clave

La serif debe encargarse de memoria y tono.
El sans debe encargarse de orientacion y accion.
Si el sans intenta volverse expresivo, o la serif se usa masivamente en cuerpo, el sistema pierde nitidez.

### 3.10 Lo que no se detecto

- Ajuste exacto de `font-feature-settings`: `(no detectado)`
- Uso visible de italicas: `(no detectado)`
- Sistema completo de heading levels mas alla del hero y cards visibles: `(no detectado)`

---

## 4. Estilos de Componentes

Los componentes observables son pocos pero muy definidos.
No buscan volumen.
Buscan precision y claridad.
El sistema combina neutrales claros con una capa glass y un CTA oscuro muy contenido.

### 4.1 Boton primario

Corresponde al CTA `Get Cofounder`.

```css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  padding-right: 12px;
  border: 1px solid #282834;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.12) 100%), #1F1F29;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.15px;
  font-weight: 500;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

#### Hover

```css
.btn-primary:hover {
  opacity: 0.9;
}
```

#### Active

```css
.btn-primary:active {
  transform: scale(0.98); /* derivado para completar el sistema */
}
```

#### Focus

```css
.btn-primary:focus-visible {
  outline: 2px solid #358CD7; /* derivado para completar el sistema */
  outline-offset: 2px;
}
```

#### Disabled

```css
.btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}
```

### 4.2 Boton secundario claro

El CSS compilado revela una clase `.button-secondary` que activa un hover claro con degradado.
No se ve como CTA principal en la captura superior, pero si forma parte del sistema.

```css
.button-secondary {
  transition: background 300ms;
}

.button-secondary:hover {
  background: linear-gradient(-15deg, #FEFFFC 0, #EEF1ED 100%);
}
```

### 4.3 Link CTA subrayado

Visible en `Get to know us`.

```css
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.15px;
  font-weight: 500;
}

.cta-link__underline {
  border-bottom: 1px solid #B4B8B4;
  transition: border-color 200ms;
}

.cta-link:hover .cta-link__underline {
  border-color: #EEF1ED;
}
```

### 4.4 Navegacion flotante glass

```css
.nav-shell {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(249,250,247,0.12) 0%, rgba(249,250,247,0.18) 100%);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition:
    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

### 4.5 Panel glass del hero

```css
.hero-note {
  max-width: 500px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.20);
  background:
    linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.07) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);
  color: #FFFFFF;
}
```

### 4.6 Social link pill

```css
.social-link {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF0F;
  box-shadow: 0 0 0 1px #DEE2DE;
  transition: all 200ms;
}

.social-link::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(0deg, #FEFFFC 0, #EEF1ED 100%);
  transition: opacity 200ms;
}

.social-link:hover::before {
  opacity: 1;
}
```

### 4.7 Input sugerido para expansiones

No se observa un input de formulario principal en el hero.
Para completar el sistema sin traicionarlo, esta receta mantiene los mismos neutros.

```css
.input-default {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid #DEE2DE;
  border-radius: 8px;
  background: #FFFFFF;
  color: #171717;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

.input-default::placeholder {
  color: #646464;
}

.input-default:focus-visible {
  outline: 2px solid #358CD7;
  outline-offset: 2px;
}

.input-default[aria-invalid="true"] {
  border-color: #B24848; /* derivado para completar el sistema */
}
```

### 4.8 Card de contenido

```css
.content-card {
  padding: 24px;
  border: 1px solid #DEE2DE;
  border-radius: 16px;
  background: #FFFFFF;
  color: #171717;
}
```

### 4.9 Badges y chips

```css
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #DEE2DE;
  background: rgba(255,255,255,0.72); /* derivado para completar el sistema */
  color: #2C2C2C;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
```

### 4.10 Navegacion / header

El header no debe ser una barra pesada.
Debe sentirse como un objeto flotante.
El blur es importante, pero el borde blanco translúcido lo es aun mas.
Sin ese borde la capsula pierde definicion sobre fondos complejos.

### 4.11 Regla de componentes

Los componentes no deben competir con la ilustracion.
Su trabajo es aterrizar la marca y volverla accionable.
Oscuros si piden foco.
Claros si piden continuidad.
Nunca ruidosos.

---

## 5. Principios de Layout

La estructura del sitio favorece composiciones anchas y centricas.
Hay una sola narrativa principal por pantalla.
Cada bloque importante tiene suficiente aire para respirarse como escena, no como dashboard.

### 5.1 Escala de espaciado observada

```css
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px; /* derivado para completar el sistema */
  --space-12: 48px; /* derivado para completar el sistema */
  --space-16: 64px; /* derivado para completar el sistema */
  --space-20: 80px; /* derivado para completar el sistema */
}
```

### 5.2 Contenedores

| Contenedor | Ancho | Nota |
|---|---|---|
| Nav shell | `max-width: fit-content` | observado |
| Hero note panel | `max-width: 500px` | observado |
| Texto corto del hero | `max-width: 26ch` y `42ch` | observado |
| Container tipico Tailwind | hasta `80rem` | inferido por clases compiladas |

### 5.3 Filosofia de composicion

El hero usa apilamiento de capas:
imagen total,
nombre central,
panel funcional,
capsula de navegacion.
No es un grid visible.
Es una escena compuesta.

### 5.4 Alineacion

La UI utilitaria tiende a alineaciones limpias por fila.
La narrativa visual permite superposicion y offset.
Esa mezcla es parte del caracter.

### 5.5 Gaps observados

| Contexto | Gap |
|---|---|
| Links del nav | `24px` |
| CTA group | `16px` |
| Hero note stack | `16px` |
| Footer pills | `8px` a `12px` |

### 5.6 Secciones y paddings

El sitio trabaja bien con bloques verticales generosos.
Para expansiones del sistema:

```css
.section {
  padding-block: 72px;
}

.section--hero {
  padding-block-start: 88px;
  padding-block-end: 96px;
}
```

Esos valores finales son consistentes con el aire percibido, aunque no todos se puedan leer de una sola clase visible.

### 5.7 Grid recomendado

```css
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
```

Uso sugerido:
la narrativa visual ocupa 7 a 8 columnas,
los paneles funcionales 4 a 5.

### 5.8 Ritmo vertical

La pagina gana cuando alterna tres densidades:
una escena amplia,
un bloque claro de copy,
y un elemento funcional preciso.
Si todo el layout se iguala en altura y tratamiento, la marca se vuelve comun.

### 5.9 Regla de layout

No diagramar como dashboard.
Diagramar como manifiesto breve con puntos de accion.

---

## 6. Profundidad y Elevacion

General Intelligence Company no es flat puro.
Tampoco es skeuomorphic.
Su profundidad nace de tres recursos:
glass,
sombras cortas,
y superposiciones bien resueltas sobre imagen.

### 6.1 Sistema de sombras observado

```css
:root {
  --shadow-nav: 0 2px 6px 0 rgba(0,0,0,0.15);
  --shadow-chip-inner: 0 1.01px 1.01px 0 rgba(0,0,0,0.04);
  --stroke-card: 0 0 0 1px #DEE2DE;
}
```

### 6.2 Tabla de elevacion

| Nivel | Uso | Receta |
|---|---|---|
| E0 | fondo base | sin sombra |
| E1 | tarjetas claras | `0 0 0 1px #DEE2DE` |
| E2 | nav flotante, panel glass | `0 2px 6px 0 rgba(0,0,0,0.15)` |
| E3 | hero editorial | profundidad construida mas por layering que por sombra fuerte |

### 6.3 Blur y transparencia

| Elemento | Blur | Fill |
|---|---|---|
| Nav glass | `9px` | gradiente `rgba(249,250,247,0.12)` a `rgba(249,250,247,0.18)` |
| Hero note panel | `15px` | gradiente negro translúcido |
| Social links | `(no detectado blur)` | `#FFFFFF0F` |

### 6.4 Radios observados

```css
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
}
```

### 6.5 Materialidad

La marca no intenta parecer vidrio hiperrealista.
Usa blur suficiente para separar la UI del fondo.
Lo importante es la legibilidad, no la demostracion de efecto.

### 6.6 Regla de elevacion

Si un panel oscuro puede leerse sin blur, aun asi conviene mantener una minima capa glass.
Esa decision conecta el panel con la capsula de nav y mantiene coherencia material.

---

## 7. Lo que Si y lo que No

### 7.1 Si hacer

1. Usa una serif visible y memorable para encabezados principales, porque la marca depende de ese contraste cultural con la tecnologia.
2. Mantiene la UI base en neutros suaves, porque el color emocional ya vive en la ilustracion.
3. Usa CTAs oscuros con texto blanco cuando una accion deba destacar con elegancia.
4. Superpone paneles funcionales sobre fondos complejos solo si tienen blur, borde y contraste suficiente.
5. Da aire amplio a las escenas clave, porque la marca se siente mas manifiesto que panel de control.
6. Deja que el azul y el verde aparezcan como memoria visual, no como pintura sistematica de todo el producto.

### 7.2 No hacer

1. No conviertas la interfaz completa en un producto azul, porque destruye la sobriedad observada del sistema.
2. No reemplaces la serif por una grotesca neutra en el hero, porque la marca perderia su elemento mas recordable.
3. No uses sombras profundas tipo floating cards de fintech, porque el sitio trabaja con profundidad corta y limpia.
4. No satures de glassmorphism cada bloque, porque aqui el blur es recurso selectivo y no estilo total.
5. No cargues la pagina de iconos o ilustraciones secundarias si no cumplen una funcion narrativa clara.
6. No conviertas el tono editorial en lujo distante, porque la marca sigue hablando de negocio, ejecucion y herramientas reales.

### 7.3 Regla de criterio

La marca gana cuando parece una compania seria con una imaginacion visual inusual.
Pierde cuando se inclina demasiado a cualquiera de los extremos:
o demasiado corporativa y plana,
o demasiado decorativa y poco aplicable.

---

## 8. Comportamiento Responsive

La implementacion visible usa clases responsivas de Tailwind y adapta la escena hero con offsets y sticky placements.
La prioridad en mobile no es replicar desktop pixel por pixel.
Es preservar:
nombre,
promesa,
y accion primaria.

### 8.1 Breakpoints

```css
--bp-sm: 640px;   /* derivado por convencion Tailwind v4, no sobreescritura detectada */
--bp-md: 768px;   /* derivado por convencion Tailwind v4, no sobreescritura detectada */
--bp-lg: 1024px;  /* coherente con uso de clases lg en nav y hero */
--bp-xl: 1280px;  /* derivado por convencion Tailwind v4 */
--bp-2xl: 1536px; /* derivado por convencion Tailwind v4 */
```

### 8.2 Cambios observados por breakpoint

| Breakpoint | Cambio |
|---|---|
| `< 640px` | la capsula de nav ocupa ancho casi completo |
| `>= 768px` | el panel del hero gana mejor posicion sticky y mas aire |
| `>= 1024px` | aparece la navegacion horizontal principal y la capsula puede volverse mas compacta |
| `>= 1280px` | la tipografia display y el skyline respiran con mas autoridad |

### 8.3 Touch targets

```css
--touch-target-min: 36px observado en CTA;
--touch-target-recomendado: 44px derivado para formularios y pills futuras;
--nav-pill-height: 36px a 40px segun viewport.
```

### 8.4 Comportamiento del hero

En desktop la composicion puede tolerar capas mas complejas.
En mobile conviene mantener:
titulo visible,
panel funcional completo,
y CTA sin truncarse.
El skyline puede recortarse.
La promesa no.

### 8.5 Filosofia responsive

Recortar complejidad visual antes que comprimir tipografia.
Si un elemento decorativo compite con la lectura en mobile, se reduce o se omite.

### 8.6 Regla responsive

La marca debe seguir sintiendose art-directed en pantallas pequeñas,
pero con una direccion mas severa.
Menos capas.
La misma voz.

---

## 9. Guia de Prompts para Agentes

Los prompts de abajo sirven para producir nuevas pantallas o componentes fieles a este sistema sin caer en el molde de SaaS neutro.

### 9.1 Inicializacion de sesion

```text
Trabaja dentro del sistema visual de General Intelligence Company.
Modo base claro con fondo #F9FAF7, UI en neutrales suaves, acento emocional azul #358CD7, soporte verde #31552A y CTA oscuro #1F1F29.
Los headings principales deben sentirse editoriales y memorables con una serif fina.
La interfaz nunca debe parecer dashboard generico.
```

### 9.2 Crear una nueva pantalla

```text
Disena una nueva pantalla para General Intelligence Company con la misma mezcla de institucion nueva y producto util.
Usa una tipografia serif para la gran idea y un sans medio para accion y lectura.
Reserva el azul para atmosferas, highlights y contextos visuales.
Usa el oscuro #1F1F29 solo cuando una accion necesite foco fuerte.
```

### 9.3 Anadir un componente al UI kit

```text
Crea un componente nuevo para este sistema sin introducir colores ajenos.
Primero decide si vive sobre fondo claro, sobre glass o sobre imagen.
Despues aplica radios 8, 12 o 16 segun funcion.
Los bordes deben ser suaves (#DEE2DE o rgba blanco 20%).
Si el componente pide jerarquia visual alta, usa dark CTA.
```

### 9.4 Revision de consistencia

```text
Revisa esta interfaz como si perteneciera a General Intelligence Company.
Detecta cualquier exceso de azul en UI funcional, cualquier heading que no conserve un tono editorial, y cualquier sombra demasiado agresiva.
Verifica si la pagina sigue sintiendose optimista, aplicada y serena.
```

### 9.5 Variante de campana

```text
Genera una variante de campana para General Intelligence Company.
Puedes amplificar la narrativa visual, la escala del display y la presencia del azul del cielo.
No conviertas la UI en una pagina colorida.
Debe seguir sintiendose limpia y confiable, con foco en negocio y AI aplicada.
```

### 9.6 Variante de producto

```text
Genera una pantalla de producto dentro del sistema de General Intelligence Company.
Reduce la ilustracion y aumenta la claridad funcional, pero conserva la serif en los puntos de identidad.
La experiencia debe sentirse mas utilitaria sin perder el caracter editorial.
```

### 9.7 Regla de prompts

Pide siempre que la salida diferencie entre:
narrativa visual,
UI funcional,
y acentos emocionales.
Si esos tres planos se mezclan sin control, el sistema se diluye.

---

## 10. Movimiento (Motion)

El movimiento observable es contenido y practico.
No depende de grandes secuencias hero 3D visibles desde el CSS publico.
Se apoya en transiciones de opacidad, background, sticky shifts y micro-feedback.

### 10.1 Nivel de motion

Bajo a moderado.
Lo suficiente para confirmar interaccion y hacer que las capas glass se sientan vivas.

### 10.2 Duraciones observadas

```css
--motion-fast: 200ms;
--motion-ui: 250ms;
--motion-panel: 300ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
```

### 10.3 Patrones observados

| Elemento | Patron |
|---|---|
| Links del nav | hover por opacidad |
| CTA principal | hover por opacidad |
| Button secondary | hover por cambio de fondo |
| Nav shell | transicion de background, borde, sombra y backdrop-filter |
| Social link | reveal de capa `::before` |

### 10.4 Propiedades animadas

| Propiedad | Uso |
|---|---|
| `opacity` | links y CTA |
| `background` | botones secundarios |
| `box-shadow` | capsula flotante |
| `backdrop-filter` | estabilidad del material glass |
| `border-color` | transiciones suaves de foco o contexto |

### 10.5 Motion tokens sugeridos

```css
:root {
  --motion-fast: 200ms;
  --motion-base: 250ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* derivado para piezas editoriales */
}
```

### 10.6 Recomendaciones de uso

1. Usa fades cortos en nav y chips, no desplazamientos teatrales.
2. Usa micro-lift solo si el fondo es claro y el componente necesita separarse.
3. Mantiene el blur estable; no debe respirar como un efecto decorativo.
4. Reserva animaciones mas amplias para transiciones entre escenas o narrativa de campaña.

### 10.7 Prefers reduced motion

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

### 10.8 Regla de motion

La pagina no tiene que demostrar sofisticacion con animacion.
Ya la demuestra con composicion.
El movimiento solo debe confirmar respuesta y preservar continuidad material.

---

## Anexo - Stack tecnico detectado

| Area | Deteccion | Nota |
|---|---|---|
| Framework | Next.js | observado por `__next`, chunks `/_next/static/...` y metadata serializada |
| CSS | Tailwind CSS v4.1.18 | observado por el banner del CSS compilado |
| Fuentes | custom fonts `ppmondwest`, `af`, `Geist Mono` | observadas por variables `--font-mondwest`, `--font-af-foundary`, `--font-geist-mono` |
| Motion | transiciones CSS | observado directamente |
| Lottie | no verificable | no detectado de forma concluyente en la homepage analizada |
| GSAP / Framer | no detectado | no visible en los assets analizados |
| 3D / WebGL | no detectado | la puesta en escena principal es imagen ilustrada |
| Builder / CMS | no detectado | no verificable desde frontend publico |
| Imagen hero | ilustracion raster / arte digital | observada en captura real |
| Cookies banner | si | visible en la captura real |

### Valores clave de implementacion

1. Fondo principal `#F9FAF7`.
2. Texto principal `#171717`.
3. Serif display con peso ligero.
4. Sans medium para UI.
5. CTA oscuro `#1F1F29` con texto blanco.
6. Capsulas y paneles con blur y borde blanco 20%.
7. Azul `#358CD7` como memoria emocional, no como UI masiva.
8. Bordes claros `#DEE2DE`.
9. Radio base `8px`, radio de capsula `12px`, radio de panel `16px`.
10. Motion corto y muy controlado.

### Valores no detectados con certeza

- Sistema completo de formularios del producto interno: `(no detectado)`.
- Sombras adicionales fuera del nav, hero panel y social links: `(no detectado)`.
- Breakpoints custom redefinidos por la marca: `(no detectado)`.
- Uso real de `Geist Mono` en contenido visible de homepage: `(no detectado)`.
- Semanticos success / warning / error del producto: `(derivado para completar el sistema)`.

### Cierre

General Intelligence Company construye una identidad rara y eficaz.
No parece una startup que quiere gritar futuro.
Parece una compania que ya imagina ese futuro integrado a la ciudad, al trabajo y a la vida real.
Su sistema visual funciona porque mantiene la UI simple,
deja que la imagen cuente ambicion,
y usa la tipografia para convertir una promesa tecnica en algo recordable.