DESIRE PATH

Sobre el sistema

Creado a partir de

La web Desire Path

Componentes

43 en 7 grupos, con todos sus estados

Tipografías

Wix Madefor Display, Wix Madefor Text, DM Mono

Ruta

Cada página conoce dos caminos de una idea al software: el pavimentado, que rodea la cuadrícula, y la línea que la gente pisa de verdad. Camino largo dibuja cada ruta por la cuadrícula en trazos, gira la flecha de cada tapa en la esquina, habla en meses y deja entero el logotipo. Atajo traza recta la línea gastada, hace que un caminante la recorra, pone las flechas en diagonal, cuenta semanas en tierra y corta el logotipo.

Formato

HTML, CSS y JavaScript sin dependencias, más DESIGN.md

Versión

1.0

• Paper#E8EAE0
• Moss#2B3222
• Ink#1F2419
• Ink 2#5B6450
• Chalk#F4F3EA
• Black#0C0D09
• Lichen#DCE2B4
• Earth#9C5D3C
• Sage#AEB79E
• Bramble#9E3B2C

En contexto

Una página para planificar un proyecto, hecha solo con el kit: compara el camino largo con el atajo, recorre las cuatro etapas sobre el valle pintado y describe una idea que pasa de una nube de puntos a una interfaz mientras rellenas el formulario. Se incluye como página base, lista para cambiarle el nombre.

En el kit

DESIGN.md

Las reglas para construir con el sistema, escritas para pasárselas a Claude, a Lovable o a un desarrollador

tokens/tokens.json

Cada color, tamaño, espacio y tiempo como tokens con nombre

tokens/tokens.css

Los mismos tokens como variables CSS, con los tonos papel, musgo y salvia

css/desire-path.css

Todos los componentes y sus estados, con las dos rutas

js/desire-path.js

La impresión en grano y su lupa, Ruta, las figuras de ruta, la placa de la idea, la costura, pestañas, diálogos, avisos, el loader y el marco de navegación. Sin dependencias

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Una página para planificar un proyecto de un estudio de producto, hecha solo con el sistema

assets/imagery/

Imágenes de campo abierto, del valle pintado y de trabajo de campo a resolución completa

LICENSE.md

Uso comercial en tus proyectos y en los de tus clientes

Construir con una IA

1. Adjunta DESIGN.md

   Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.

2. Describe tu página

   Con tus palabras, tu marca y tu contenido.

3. Quédate con el código o llévalo a otro stack

   Enlaza el CSS de tokens y componentes, o pide React. Las reglas se mantienen igual.

Componentes

Estructura

Viewport frame, Paper, moss and sage sheets, Twelve-column grid, Section head, Route figure, Survey ring, Grain print

Acciones

Chip, Go button, Cap button, Text link

Entrada

Text field, Select, Textarea, Checkbox, Option rows, Switch, Segmented chips, Range

Datos

Stage tabs, Path index with peek, Figures, Weeks bar, Route plan, Stage table

Indicadores

Tag, Note, Steps, Toast, Loader

Contenido

Plate panel, Black card, Idea plate, Seam, Facts, Answers, Caption

Capas y navegación

Dialog, Navigation bar, Menu, Chapter and motion bar, Footer with cut wordmark