Documentación

Documentación de Kanonly

Kanonly es una aplicación de gestión de proyectos gratuita para Windows, pensada para freelancers y emprendedores que necesitan organizar su trabajo sin depender de servicios en la nube ni pagar suscripciones mensuales.

Esta documentación reúne todo lo necesario para entender la app: cómo descargarla, cómo usarla, dónde está el código y cuál es el Design System que define su interfaz.

Kanonly es 100% gratis. No hay funciones bloqueadas ni planes ocultos. El código fuente, los tokens de diseño y la documentación están disponibles para la comunidad.

Descarga

La app está disponible para Windows 10 y Windows 11 (x64) a través de Microsoft Store. No requiere registro ni cuenta para usarla.

Requisitos: Windows 10/11, arquitectura x64. La app guarda todos los datos localmente en tu PC.

Cómo usar Kanonly

Kanonly se organiza en tres pilares principales que cubren el flujo de trabajo diario:

  • Tablero Kanban: creá tableros, columnas y tickets ilimitados. Mové tareas entre estados con arrastrar y soltar.
  • Tickets completos: cada ticket puede tener título, descripción larga, deadline, prioridad, imágenes y comentarios internos.
  • Anotador organizado: guardá notas con imágenes, prioridades y estilo de texto para no perder ideas ni información de soporte.

Todo se almacena de forma local. No hay límites de tickets, tableros ni notas en la versión actual.

Repositorio

El código de la landing page, la documentación y el Design System están en Kanonly-web. La app de escritorio tiene su propio repositorio.

  • Kanonly-web — landing page, documentación, assets y tokens de diseño.
  • Kanonly-app-public — base del código de la aplicación de escritorio para Windows.

Design System

El sistema de diseño de Kanonly fue creado desde cero para mantener la interfaz coherente, escalable y fácil de mantener. Todos los valores visuales están definidos como tokens y no hay valores hardcodeados en los componentes.

Filosofía de diseño

Kanonly sigue una interfaz dark-first, minimalista y orientada a la productividad. Los principios que guían cada decisión visual son:

  • Claridad por encima de todo. La información debe escanearse rápidamente, sin distracciones.
  • Jerarquía por contraste. Usamos una escala de grises profundos combinada con un acento cian para guiar la atención.
  • Consistencia sistemática. Cada color, espaciado y tipografía proviene de un token.
  • Local-first y privacidad. Al igual que la app, el design system no depende de servicios externos.
  • Escalable. La arquitectura primitive → semantic → component permite crecer sin perder coherencia.

Acento principal

El color de acento #54E8F3 (cian) se usa para acciones primarias, estados de foco, badges y elementos interactivos. Se combina con fondos oscuros para garantizar un contraste agradable y accesible.

Cómo usar el Design System

En diseño

Los tokens están definidos en kanonly-tokens.json siguiendo el estándar W3C Design Tokens Community Group (DTCG). Podés importarlos manualmente a Figma como variables o usar cualquier plugin o herramienta compatible con archivos JSON de tokens.

  1. Descargá kanonly-tokens.json desde esta documentación.
  2. Importá el JSON en Figma como variables o estilos.
  3. Usá los tokens en tus diseños; cualquier cambio en el JSON se puede re-importar.

En código

El build genera automáticamente variables CSS en css/tokens.css. Podés usarlas directamente en tus hojas de estilo: 

.my-button {
  background: var(--semantic-color-accent);
  color: var(--component-button-text-primary);
  border-radius: var(--primitive-border-radius-md);
  padding: var(--component-button-padding-y) var(--component-button-padding-x);
}

Si preferís generar tus propias variables, el JSON es compatible con Style Dictionary, Tokens Studio y otras herramientas que soporten W3C DTCG.

Estructura de tokens

Los tokens se organizan en tres niveles:

  • Primitive: valores base sin significado de interfaz (colores neutros, acentos, spacing, tipografía).
  • Semantic: abstracciones con significado (background, text-primary, border, danger).
  • Component: valores específicos de componentes (button.background-primary, card.padding).

Tokens primitivos

Son los cimientos del sistema. No deben usarse directamente en componentes; en su lugar, los tokens semánticos y de componente los referencian.

Tokens semánticos

Describen el significado de un valor en la interfaz. Todos apuntan a primitivos, lo que permite cambiar un color base y propagar el cambio en toda la app.

Tokens de componentes

Definen propiedades concretas de los componentes de Kanonly. Apuntan a tokens semánticos o, en casos puntuales, directamente a primitivos.

Colores

La paleta se divide en neutros y acentos. Los neutros construyen la estructura de la interfaz; los acentos comunican estado y jerarquía.

Primitivos

Semánticos

Componentes

Tipografía

La tipografía principal es Roboto. Para código o datos técnicos se usa una familia monoespaciada del sistema. La escala tipográfica cubre desde anotaciones pequeñas (2XS) hasta títulos grandes (3XL).

Familias

Tamaños

Pesos

Interlineados

Espaciado entre letras

Spacing y sizing

El spacing sigue una escala de 4px. Los valores semánticos definen los espaciados más comunes entre secciones, componentes y contenido interno.

Spacing semántico

Sizing

Bordes y radios

Los radios de borde mantienen una escala coherente. En la documentación mostramos solo los dos valores más usados en la interfaz.

Border radius

Efectos y transiciones

Las transiciones mantienen la interfaz responsiva sin ser distractibles. El desenfoque se usa con moderación en overlays y fondos modales.

Opacidad

Transiciones

Easing

Blur