# Recursos y directrices de marca

Descarga el logotipo, la marca gráfica y el icono de startupkit; copia los colores y ajustes tipográficos exactos; y consulta cómo se usa la marca. También disponible en Markdown para agentes.

Descarga el logotipo, copia un color y no cambies nada. Archivos, colores y ajustes tipográficos para quien incluya Kit en una página: un artículo de un socio, una diapositiva, una nota de prensa o una instrucción para un agente.

## Logotipo y marca gráfica

Dos archivos contienen toda la identidad: el logotipo en minúsculas y la marca ciruela. Cada descarga conserva el trazado usado en el producto.

### Logotipo, tinta

Sobre fondos claros. En minúsculas, «startup» en peso normal y «kit» en negrita, en un solo trazado.

- SVG transparente: https://startupkit.app/assets/brand/startupkit-wordmark-ink-454577a0.svg
- PNG transparente: https://startupkit.app/assets/brand/startupkit-wordmark-ink-ffa3d255.png
- PNG sobre blanco: https://startupkit.app/assets/brand/startupkit-wordmark-ink-on-white-d8cc7a7f.png

### Logotipo, blanco

Sobre fondos oscuros y fotografías. El mismo trazado en blanco.

- SVG transparente: https://startupkit.app/assets/brand/startupkit-wordmark-white-14002263.svg
- PNG transparente: https://startupkit.app/assets/brand/startupkit-wordmark-white-92cc5bff.png
- PNG sobre tinta: https://startupkit.app/assets/brand/startupkit-wordmark-white-on-ink-4b3b0d48.png

### Marca gráfica

El único vector plano de la marca: letras #fafafc sobre ciruela. Úsala cuando el logotipo sea demasiado pequeño.

- SVG: https://startupkit.app/assets/brand/startupkit-mark-2eff5e07.svg
- PNG: https://startupkit.app/assets/brand/startupkit-mark-95ae2aac.png

### Icono de la aplicación

El favicon y el icono de la pantalla de inicio. Solo en mapa de bits; úsalo en fichas de aplicaciones, no en impresiones.

- PNG: https://startupkit.app/assets/brand/startupkit-app-icon-040ff0d0.png

### Avatar

La marca con espacio alrededor para que las letras sobrevivan a un recorte circular. Para fotos de perfil.

- PNG: https://startupkit.app/assets/brand/startupkit-avatar-dd9d3658.png

### Descargar todo

Todos los archivos de esta página en un ZIP. https://startupkit.app/assets/brand/startupkit-brand-assets-6ba93399.zip

### Mantén su forma reconocible

- Deja espacio libre alrededor equivalente a la mitad de la altura del logotipo por cada lado.
- Tamaño mínimo: 96 px de ancho en pantalla y 24 mm en impresión. Por debajo, usa la marca gráfica.
- Tinta sobre claro, blanco sobre oscuro. Nada más.
- Nunca: Cambiarle el color
- Nunca: Estirarlo o girarlo
- Nunca: Añadirle un contorno, sombra, brillo o degradado
- Nunca: Volver a componerlo con Inter u otra fuente
- Nunca: Meterlo en un recuadro que no sea el cuadrado de la propia marca

## Color

Siete funciones cromáticas cubren toda la interfaz. En el sitio, nada está más saturado que la marca ciruela y los dos colores de los trazos.

| Modo claro | Hex | Modo oscuro | Role |
|---|---|---|---|
| Tinta | `#0c090c` | `#f8f6f8` | Texto, botón principal y logotipo sobre fondo claro |
| Papel | `#fafafa` | `#0c090c` | Fondo de página |
| Bruma | `#f3f1f3` | `#1d161e` | Navegación y superficies elevadas |
| Atenuado | `#594c5b` | `#a89ea9` | Texto secundario y segunda línea del encabezado |
| Ciruela | `#3b0f46` | `#3b0f46` | La marca, el avatar y los acentos de los correos de Kit |
| Resaltador | `#fde68a` | `#f7b93b` | Destacado detrás de la idea final de un titular |
| Trazo | `#b45309` | `#f7b93b` | Subrayado a mano bajo una acción |

### La escala de malvas

Todos los grises del sitio tienen un matiz malva. El tono 50 es el fondo de página; el 100, la navegación y las superficies; el 600, el texto secundario; el 950, la tinta.

- mauve-50: `#fafafa`
- mauve-100: `#f3f1f3`
- mauve-200: `#e7e4e7`
- mauve-300: `#d7d0d7`
- mauve-400: `#a89ea9`
- mauve-500: `#79697b`
- mauve-600: `#594c5b`
- mauve-700: `#463947`
- mauve-800: `#2a212c`
- mauve-900: `#1d161e`
- mauve-950: `#0c090c`

### Modo oscuro

La escala se invierte. El papel pasa a malva 950, la tinta a #f8f6f8, y el botón principal usa malva 300 con texto en tinta. El resaltador y el subrayado pasan a #f7b93b.

### Índigo anterior

El índigo #4f46e5 sigue apareciendo en prendas de fotos antiguas. Es anterior a esta paleta y ya no forma parte de la identidad cromática. No tomes una muestra de una fotografía.

## Tipografía

Dos tipografías de código abierto. Fraunces para la línea que debe sentirse escrita a mano; Inter para todo lo que hay que leer de un vistazo.

### Fraunces (100–900 variable, optical size 9–144)

Titulares. El encabezado principal y los títulos de sección, peso 480, tamaño óptico 144, WONK activado.

```css
font-family: "Fraunces", ui-serif, Georgia, serif;
font-weight: 480;
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
line-height: 1.08;
letter-spacing: -0.005em;
```

- GitHub: https://github.com/undercasetype/Fraunces
- Google Fonts: https://fonts.google.com/specimen/Fraunces

### Inter (100–900 variable)

Texto e interfaz. Cuerpo 400, botones y etiquetas 500, titulares de los mosaicos 600 con −0,03 em.

```css
font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "liga", "cv02", "cv03", "cv04", "cv11";
font-weight: 400;
```

- rsms.me/inter: https://rsms.me/inter/

El código y los valores hexadecimales usan la pila monoespaciada del sistema. `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

Ambas fuentes usan la licencia SIL Open Font License 1.1. Descárgalas de sus proyectos originales; no distribuimos los archivos.

## Botones

Un botón principal, una sola forma. Tinta sobre fondos claros; malva pálido sobre oscuros. El botón de registro siempre dice «Empieza gratis».

- Radio: 9999px
- Espaciado interior: 12px 20px
- Tipografía: Inter 15px / 500 / 24px
- Espacio entre icono y texto: 8px
- Sobre fondo claro: fondo `#0c090c`, texto `#ffffff`, al pasar el cursor `#2a212c`
- Sobre fondo oscuro: fondo `#d7d0d7`, texto `#0c090c`, al pasar el cursor `#f3f1f3`

## Trazos

El rasgo propio de Kit. Un titular destaca su idea final con un resaltado y subraya a mano cada acción. Ambos trazos se dibujan con CSS, así que el texto sigue siendo texto.

```html
Jordan <em>envía su CV</em> y <em>sigue su candidatura</em>. Tu equipo ve <mark>quién debe hacer qué después</mark>.
```

- Un resaltado por titular, siempre sobre la idea final
- Subrayados bajo verbos, nunca bajo sustantivos
- Solo en titulares. Nunca en párrafos, botones ni navegación
- Resaltador #fde68a, subrayado #b45309. Ambos pasan a #f7b93b en modo oscuro

## Imágenes

Dos tipos de imagen, cada uno con su función. Las tarjetas sociales parecen recortes de papel; las portadas del blog son fotografías.

### Tarjetas sociales

Recortes de papel sobre un fondo cálido color avena, capas en malva empolvado y ciruela oscuro, y el logotipo negro arriba a la izquierda. Unas manos ilustradas hacen una tarea real: sujetan una tarjeta, mueven una ficha.

- https://startupkit.app/assets/opengraph/hiring-20ba841b.png
- https://startupkit.app/assets/opengraph/home-4cb8c4db.png
- https://startupkit.app/assets/opengraph/trust-925ce79b.png

### Fotografía del blog

Fotografía editorial de 35 mm, personas con prendas de startupkit, luz cálida y un logotipo pequeño en la ropa, no en la pared.

- https://startupkit.app/es/blog-images/founder-led-hiring-without-recruiter/cover.jpg
- https://startupkit.app/es/blog-images/hire-specialists-not-generalists-lean-teams-2026/cover.jpg

- Haz esto: Manos con mangas de punto ciruela haciendo una tarea real
- Haz esto: Papel color avena, capas en malva empolvado y ciruela oscuro, grano fino
- Haz esto: El logotipo negro arriba a la izquierda, sin más texto
- Evita esto: Manos flotantes decorativas ni apretones de manos
- Evita esto: Texto de interfaz inventado ni capturas falsas
- Evita esto: El logotipo como protagonista de una foto

## Voz

Cinco reglas para escribir sobre Kit. Son las mismas que seguimos en el sitio.

- **Nombra lo concreto, no el beneficio.** Señala algo que exista. Un enlace, una fila del libro mayor, una columna CSV, un reloj en marcha.
- **Admite un límite real.** Una frase que un competidor se negaría a publicar da credibilidad a las demás.
- **Empieza por quien está fuera.** Empieza por quien no tiene cuenta. El candidato, el investigador, el alumno o el auditor.
- **Evita las palabras vacías.** Evita «plataforma», «solución», «fluido», «optimizar», «robusto», «de principio a fin» y «potenciado por IA».
- **Una frase, una función.** Corta la frase que repite la anterior. Usa siempre mayúscula solo al inicio.

### Nombre

- Escribe: Kit, en las frases
- Escribe: startupkit, cuando debe encontrarse como una sola palabra (startupkit.app, @StartupKit_app)
- Escribe: startupkit, en minúsculas, en el logotipo
- Nunca: Startup Kit
- Nunca: KIT
- Nunca: Kit.app
- Nunca: StartupKit dentro de una frase

## Para agentes

La misma página en Markdown, con todos los valores hexadecimales y ajustes tipográficos. Puedes pasarle este archivo a un agente en lugar de describirle la marca. https://startupkit.app/es/brand/llms.txt lleva al mismo contenido.

El logotipo y la marca de startupkit identifican a Kit. Úsalos para referirte a Kit, sin dar a entender que Kit respalda tu producto.

[Marca](https://startupkit.app/es/brand)