Skip to content

Progress Chart

Michael McCombie edited this page Apr 21, 2018 · 36 revisions

This is still a WIP. The idea for the chart is to track the status of all the different sections of the design system across our different deliverables.

Key

Label Definition
✅ Done Completed
🚧 WIP Work currently in progress
Soon Before PDX Work Week (April 20 - May 7)
🌹 PDX During PDX Work Week (May 7 - May 11)
Later After PDX Work Week (May 11 - ∞)
- Not Planned

Colors

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Solid Colors ✅ Done - ✅ Done ✅ Done Later 🚧 WIP
↳ Brand Colors ✅ Done - ✅ Done ✅ Done Later 🚧 WIP
↳ UI Colors 🚧 WIP - Soon Soon Later 🚧 WIP
↳ Other Colors - - Later - - -
Gradients ✅ Done - ✅ Done Later Later Later
Patterns Later - Later Later Later Later

Layout

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Spacing ✅ Done - Later ✅ Done Later 🚧 WIP
↳ Units ✅ Done - Later ✅ Done Later 🚧 WIP
↳ Margins and Padding ✅ Done - Later ✅ Done Later 🚧 WIP
Grid System ✅ Done - Later ✅ Done Later 🚧 WIP
↳ Columns ✅ Done - Later ✅ Done Later 🚧 WIP
↳ Gutters ✅ Done - Later ✅ Done Later 🚧 WIP
Breakpoints ✅ Done - Later ✅ Done Later 🚧 WIP

Typography

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Fonts Later ✅ Done Later - Later ✅ Done
↳ Mozilla Fonts Later ✅ Done Later - Later ✅ Done
↳ Other Fonts Later - Later - - ✅ Done
Styles Soon Soon Later 🚧 WIP Later 🚧 WIP
↳ Scale Soon Soon Later 🚧 WIP Later 🚧 WIP
↳ Color Soon Soon Later 🚧 WIP Later 🚧 WIP
↳ Emphasis Soon Soon Later 🚧 WIP Later 🚧 WIP
↳ Links Soon 🚧 #47 Later 🚧 WIP Later 🚧 WIP
↳ Lists Soon Soon Later 🚧 WIP Later 🚧 WIP

Assets

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Icons 🚧 WIP - - 🚧 WIP Later 🚧 WIP
↳ Action 🌹 PDX - - 🌹 PDX Later 🌹 PDX
↳ Social ✅ Done - - ✅ Done Later ✅ Done
Logos Soon - - Soon Later ✅ Done
Pictograms Later - - Later Later Later
Devices Later - - 🌹 PDX Later ✅ Do
↳ Browser - 🌹 PDX - 🌹 PDX Later ✅ Do
↳ Laptop - Later - Later Later Later
↳ Phone - Later - Later Later Later

Buttons

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Style - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Types - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Primary, Secondary, Ghost, etc - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Download (Firefox) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Subscribe (Podcasts, RSS) - Later - Later Later Later
↳ Available on App Store - Later - Later Later Later
Sizes (sm, md, lg) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Behavior (hover, active, focus) - 🌹 PDX - 🌹 PDX Later 🌹 PDX

Forms & Inputs

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Inputs - Later - Later Later Later
↳ Labels - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Text Input - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Default - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Other (Search, Filter, etc.) - Later - Later Later Later
↳ Checkboxes - Later - Later Later Later
↳ Radios - Later - Later Later Later
↳ Disabled State - Later - Later Later Later
Style - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Inputs - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Buttons - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Hints - 🌹 PDX - 🌹 PDX Later 🌹 PDX
↳ Validation - 🌹 PDX - 🌹 PDX Later 🌹 PDX

Cards

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Images (1:1, 4:3) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Title - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Description - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Icon(s) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Sizes (sm, md, lg) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Behavior (hover, active, focus) - 🌹 PDX - 🌹 PDX Later 🌹 PDX
Link Preview - Later - 🌹 PDX Later 🌹 PDX

Misc. Simple Components

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Accordion - Later - Later Later Later
Breadcrumb - Later - Later Later Later
Dropdown - Later - Later Later Later
Language Toggle - Later - Later Later Later
Pagination - Later - Later Later Later
Tabs - Later - Later Later Later
Tags - Later - Later Later Later
Tooltips - Later - Later Later Later

Navigation

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Global
↳ Header
↳ Footer
Local
↳ Horizontal - Later - Later Later Later
↳ Vertical

Hero Billboard

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
- Later - Later Later Later

Modal

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Confirmation Modal - Later - Later Later Later
Tour Modal - Later - Later Later Later
↳ Container - Later - Later Later Later
↳ Navigation - Later - Later Later Later
↳ Image(s) - Later - Later Later Later

Motion

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Progress Indicator - Later - Later Later Later
Transitions - Later - Later Later Later
Loading States - Later - Later Later Later

Audio

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Player - Later - Later Later Later
↳ Tracking - Later - Later Later Later
↳ Actions (Play, Pause, etc.) - Later - Later Later Later
Container - Later - Later Later Later
↳ Image - Later - Later Later Later
↳ Title - Later - Later Later Later
↳ Description - Later - Later Later Later
↳ Actions (Share, Subscribe, etc) - Later - Later Later Later

Video

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
Player - Later - Later Later Later
Container - Later - Later Later Later

Data Visualization

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decisions
- Later - Later Later Later