DESIRE PATH

About the system

Built from

Desire Path website

Components

43 in 7 groups, every state

Typefaces

Wix Madefor Display, Wix Madefor Text, DM Mono

Route

Every page knows two ways from an idea to software: the paved one that goes round the grid, and the line people actually walk. Long way draws every route along the paved grid in dashes, turns each cap's arrow round the corner, quotes months and leaves the wordmark whole. Cut across draws the worn line straight through, sends a walker along it, turns the arrows diagonal, quotes weeks in earth and cuts the wordmark.

Format

HTML, CSS and JavaScript with no dependencies, plus DESIGN.md

Version

1.0

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

In context

A project-planning page for a product studio, built only from the kit: compare the long way with the way across, walk the four stages over the painted valley and describe an idea that turns from a cloud of dots into an interface as the form fills. It ships as the starter, ready to rename.

In the kit

DESIGN.md

Rules for building with the system, written to hand to Claude, Lovable or a developer

tokens/tokens.json

Every colour, size, space and timing as named tokens

tokens/tokens.css

The same tokens as CSS variables, with the paper, moss and sage tones

css/desire-path.css

All components and their states, including both routes

js/desire-path.js

The grain print and its lens, Route, route figures, the idea plate, the seam, tabs, dialogs, toasts, the loader and the chrome. No dependencies

components.html

Every component in every state, side by side

starter/index.html

A project-planning page for a product studio, built only from the system

assets/imagery/

Overland, painted valley and fieldwork images at full resolution

LICENSE.md

Commercial use in your own and client projects

Building with an AI

1. Attach DESIGN.md

   Add it to your conversation in Claude, Lovable or any AI builder.

2. Describe your page

   In your own words, with your own brand and content.

3. Keep the code or port it

   Link the token and component CSS, or ask for React. The rules hold either way.

Components

Layout

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

Actions

Chip, Go button, Cap button, Text link

Input

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

Data

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

Status

Tag, Note, Steps, Toast, Loader

Content

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

Overlay and navigation

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