From design to application, with a foundation to start from.

Two foundations to design and build applications. Try the example flow.Foundation brings together a design foundation and an implementation foundation. Create an account to try the example flows.

Create an account and try it Explore the foundations

Email and password · Free plan with up to 5 tasksEmail and password access · Free plan with up to 5 tasks

LandingAccessTasksProfile and planIllustrative preview of the task demonstration.

The two foundationsTwo foundations working together

Design in Pencil and implementation on the web.Design starts in Pencil, in this repository. Implementation starts in the other one, already configured for these screens.

Design

This repository · Pencil

Reusable components and wireframes.Wireframes, components and shared foundations in Pencil.

Create taskCompletedFree plan

Wireframes to validate structureWireframes to validate structure and flow
Design system with tokens and themesDesign system with tokens, themes and components
Desktop and mobile screensExample screens for desktop and mobile

Implementation

Other repository · code

Back end and mobile/desktop website configured.Back end and mobile/desktop website configured as a starting point.

/* design system tokens */
--color-action-primary: #1447E6;
--radius-control: 6px;
--space-4: 16px;

Configured back endConfigured back end
Website for mobile and desktopWebsite for mobile and desktop
Starting point for the designsStarting point for implementing the designs

Explore the implementation foundation