Product Roadmap

Want to be an early adopter?

Sign up below to be notified when the design system kit launches.

The Kit

For too long, I’ve been putting off designing and launching a UI kit framework that does two major things:

  1. Provide a valuable resource for bootstrapped entreprenerds to quickly mock, test and validate their digital product ideas to make agile development decisions before they build things nobody wants and add features nobody needs; and,
  2. Sell the shit out of it!

Having seen this method of transparency planning in a few other products (knowsi.com & are.na), I’m taking a leap of a calculated risk by combining Atomic Design Methodology by Brad Frost with Google’s Material Design thinking and Eric Ries’s classic lean startup teachings.

The Deliverable
Sketch App file + documentation

MVP: November 26, 2019

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

%

View Progress on Sketch Cloud

Features

last update: October 14, 2019

To Do

Menus
A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Navigation Drawers
Navigation drawers provide access to destinations in your app.
Cards
Cards contain content and actions about a single subject.

Doing

App Bars

MDC Top App Bar acts as a container for items such as application title, navigation icon, and action items.

Data Tables
Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.
Progress Indicators
Progress indicators express an unspecified wait time or display the length of a process.
Image Lists
An Image List consists of several items, each containing an image and optionally supporting content (i.e. a text label).

Done

Banners
A banner displays a prominent message and related optional actions.
Buttons
Buttons allow users to take actions, and make choices, with a single tap.
Chips
Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
Color
Color helps express hierarchy, establish brand presence, give meaning, and indicate element states.
Dialogs
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
Iconography
Icons made by Google Material Icons.
Layouts
Layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
Selection Controls
Selection controls allow the user to select options.
Sliders
Sliders allow users to make selections from a range of values.
Snackbars
Snackbars provide brief messages about app processes at the bottom of the screen.
Tabs
Tabs organize content across different screens, data sets, and other interactions.
Text Fields
Text fields let users enter and edit text.
Typography
Use typography to present your design and content as clearly and efficiently as possible.

Ready to be an early adopter?

Sign up below to be notified when the design system kit launches.

Shares
Share This