Progress Chart

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 In progress
Soon	Before May 7
🌹 PDX	During May 7 - May 11
Later	After 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