Marca
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.
Logotipo, blanco
Sobre fondos oscuros y fotografías. El mismo trazado en blanco.
La cuadrícula muestra la transparencia. No forma parte de los archivos.
Marca gráfica
El único vector plano de la marca: letras #fafafc sobre ciruela. Úsala cuando el logotipo sea demasiado pequeño.
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.
Avatar
La marca con espacio alrededor para que las letras sobrevivan a un recorte circular. Para fotos de perfil.
Mantén su forma reconocible
- Tinta sobre claro, blanco sobre oscuro. Nada más.
- Tamaño mínimo: 96 px de ancho en pantalla y 24 mm en impresión. Por debajo, usa la marca gráfica.
Nunca
- Cambiarle el color
- Estirarlo o girarlo
- Añadirle un contorno, sombra, brillo o degradado
- Volver a componerlo con Inter u otra fuente
- 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.
Haz clic en una muestra para copiar su código hexadecimal. El trazo señala el último color que copiaste.
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.
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.
Tu equipo ve quién debe hacer qué después.
Fraunces
100–900 variable, optical size 9–144Titulares. El encabezado principal y los títulos de sección, peso 480, tamaño óptico 144, WONK activado.
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;
Jordan consulta su candidatura y responde a la oferta en el portal del candidato.
Inter
100–900 variableTexto e interfaz. Cuerpo 400, botones y etiquetas 500, titulares de los mosaicos 600 con −0,03 em.
font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif; font-feature-settings: "liga", "cv02", "cv03", "cv04", "cv11"; font-weight: 400;
El código y los valores hexadecimales usan la pila monoespaciada del sistema. Ambas fuentes usan la licencia SIL Open Font License 1.1. Descárgalas de sus proyectos originales; no distribuimos los archivos.
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.
Como aparece en la página de inicio
Jordan envía su CV y sigue su candidatura. Tu equipo ve quién debe hacer qué después.
El marcado
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.
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.
Haz esto
- Manos con mangas de punto ciruela haciendo una tarea real
- Papel color avena, capas en malva empolvado y ciruela oscuro, grano fino
- El logotipo negro arriba a la izquierda, sin más texto
Evita esto
- Manos flotantes decorativas ni apretones de manos
- Texto de interfaz inventado ni capturas falsas
- 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
- startupkit, cuando debe encontrarse como una sola palabra (startupkit.app, @StartupKit_app)
- startupkit, en minúsculas, en el logotipo
Nunca
- Startup Kit
- KIT
- Kit.app
- 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. /brand/llms.txt lleva al mismo contenido.
Una instrucción para pegar
Lee https://startupkit.app/brand.md y utiliza el logotipo, los colores y la tipografía de startupkit tal como se documentan allí.
El logotipo y la marca de startupkit identifican a Kit. Úsalos para referirte a Kit, sin dar a entender que Kit respalda tu producto.