00Identidad
Capa a capa,
contigo.
Stackapital es un estudio de software y negocio para pymes y startups. Su identidad nace de una idea sencilla: los proyectos buenos se construyen juntos, paso a paso y sin tecnicismos. El isotipo, el color y el movimiento cuentan esa historia.
01Concepto
Tú, nosotros y lo que hacemos juntos
Dos capas: tú y nosotros
Las dos capas en tinta son las dos partes del equipo: quien conoce el negocio y quien sabe construirlo. Bien alineadas, una sobre otra.
Una capa que se eleva
La capa superior, en albero, es tu proyecto. Se separa un poco del resto porque es lo que nace cuando las otras dos trabajan juntas.
Colores cálidos
Cal, albero, azulejo y olivo. El lugar se sugiere solo con el color; nunca se nombra ni se recurre a motivos decorativos.
02Logotipo
Isotipo y logotipo
Área de respeto
Deja libre alrededor del logotipo, como mínimo, la altura de una capa del isotipo (x). Nada de texto ni bordes dentro de ese margen.
Tamaño mínimo
Isotipo: 16 px. Logotipo completo: 24 px de alto en pantalla, 8 mm en impresión.
No hacer
No estirar, no recolorear la capa del proyecto, no rotar, no añadir sombras ni contornos, no cambiar la tipografía del logotipo.
03Color
Albero sobre cal
Paleta clara y cálida. La cal es la pared, el albero es el protagonista (acciones, cifras, la capa del proyecto) y el azulejo pone el contrapunto frío, siempre escaso. Para texto pequeño en albero se usa «Albero tinta», que cumple contraste. Haz clic para copiar.
Proporción orientativa de uso: 60 · 20 · 12 · 6 · 2
04Tipografía
Tres voces
Hecho contigo · 48 h
Construimos contigo la herramienta que necesitas, te lo explicamos todo sin tecnicismos y seguimos a tu lado.
01 / Servicios · Por tramos de 2 semanas · Tu proyecto ↑
05Movimiento
Todo se apila, todo sube
Apilar
Los elementos entran cayendo en cascada y se asientan con un ligero rebote. Retraso de 60–120 ms entre piezas.
Emerger
El texto sube desde una máscara. Curva expo.out, 1,1–1,3 s. Cálido, pero sin rebotes: cercanos no es infantiles.
Avanzar
Líneas y cifras crecen ligadas al scroll, como un proyecto que avanza paso a paso: despacio al principio, con paso firme después.
- ease-out
- cubic-bezier(.16, 1, .3, 1)
- ease-in-out
- cubic-bezier(.65, 0, .35, 1)
- ease-back
- cubic-bezier(.34, 1.56, .64, 1) · solo isotipo
- reducido
- prefers-reduced-motion → estático
06Interfaz
La marca vestida de herramienta
El backoffice no es un escaparate: es la herramienta de trabajo diario de un autónomo que no sabe contabilidad, de móvil y con prisa. Por eso la marca ahí se disciplina — claridad antes que belleza, densidad media, una sola acción primaria por pantalla y el movimiento solo si es funcional (el grano y las cascadas se quedan aquí, en la web). La paleta es la misma pero se usa por roles: cal de fondo, tinta de texto, albero para LA acción, azulejo escaso.
Tres voces, mismas tareas
Fraunces 500 para títulos de página y de tarjeta; Geist para todo lo demás; Geist Mono con cifras tabulares para el dinero — los céntimos caen siempre en la misma vertical.
Cinco hojas, sin build
tokens → base → layout → components → utilities, escritas a mano y servidas tal cual. tokens.css es la única fuente de verdad de color, tipo y forma: esta web y el producto beben del mismo pozo.
Se lee y se toca
Foco visible siempre (albero tinta, 4,76:1), texto de estado ≥ 4,5:1 sobre cal y blanco, objetivo táctil de 44 px en móvil y prefers-reduced-motion respetado.
El catálogo completo del sistema de diseño — cada componente con todas sus variantes y estados, los tokens con sus ratios de contraste impresos y los cuatro patrones de pantalla — vive en el catálogo vivo de /marca/sistema/: carga las mismas hojas que el producto, así nunca se desincroniza.
07Estados
Los colores que hablan
La marca no tenía estados y la herramienta los necesita. Se definen sobre sus pigmentos y un teja nuevo — un rojo terroso, pariente del terracota de los errores del formulario de esta web. Cada estado trae fondo suave, borde y texto; el texto cumple ≥ 4,5:1 sobre cal y sobre blanco (ratios reales verificados con script WCAG).
- Éxito · confirmación, deducible, al díatexto #4F5A26 · olivo · 6,97 sobre cal
- Aviso · requiere tu atención, plazo cercatexto #8C4A18 · albero burn · 6,33 sobre cal
- Info · contexto accionable (Import@ss)texto #2C55A8 · azulejo · 6,62 sobre cal
- Error · fuera de plazo, no deducible, roturatexto #A03A22 · teja · 6,30 sobre cal
- Neutro · sin estado (categoría de otro año)texto #554B3E · tinta 2 · 7,99 sobre cal
Rellenos sólidos solo con parejas verificadas (tinta sobre albero 9,25; blanco sobre teja 5,63; blanco sobre azulejo 6,96). Blanco sobre albero-burn no llega (3,83): el aviso nunca se pinta sólido con texto pequeño. El color nunca va solo: cada estado lleva su palabra.
08Iconografía
Un trazo, un significado
El set es de trazo coherente — Lucide (ISC), 413 SVG sueltos autoalojados, sin CDN ni librería JS: se incrustan inline con {% icon %}, heredan el color del texto y acompañan, nunca sustituyen, a la palabra. Se eligen por significado, no por gusto:
Cómo ampliar el set, en docs/06-sistema-diseno.md §Iconografía. Un icono de otro set no entra: mezclar trazos es mezclar voces.
09Voz
Cercanos, claros y sinceros
«Cuéntanos qué tienes en la cabeza, aunque todavía no esté claro.»
«Te explicamos cada paso con palabras normales.»
«Cuando el proyecto sale, no nos vamos.»
«Soluciones disruptivas de transformación digital end-to-end.»
«Optimizamos el ROI de tu stack tecnológico.»
«¡Lleva tu negocio al siguiente nivel! 🚀»
- Botones con verbo: «Añadir el gasto», no «Aceptar».
- Errores que dicen qué hacer: «Escribe tu email completo», no «Campo inválido».
- Confirmaciones humanas: «Gasto apuntado».
- El vacío invita: «Aún no tienes clientes; añade el primero y factura en un minuto».
- La jerga fiscal, como paréntesis: «El IVA de tu trimestre (modelo 303)». Sin emojis, sin anglicismos (dashboard→panel, feedback→respuesta).
10Archivos
