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
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 - ∞)

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
Types
↳ Primary, Secondary, Ghost, etc
↳ Download (Firefox)
↳ Subscribe (Podcasts, RSS)
↳ Available on App Store
Sizes (sm, md, lg)
Behavior (hover, active, focus)

Forms & Inputs

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

Cards

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

Misc. Simple Components

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

Navigation

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

Hero Billboard

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

Modal

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

Motion

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

Audio

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

Video

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

Data Visualization

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