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.

Deliverables

Code	Sketch	Definition
Design Tokens	Sketch Plugin	The small choices that affect most components (color, typography, spacing, etc.)
CSS Framework	Symbol Library	A central location to find components
Templates	UI Kit(s)	Examples used for creating web pages

Labels

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
↳ Units
↳ Margins and Padding
Grid System
↳ Columns
↳ Gutters
Breakpoints

Typography

	Design Tokens	CSS Framework	Sketch Plugin	Symbol Library	Written Guidelines	Design Decisions
Fonts
↳ Mozilla Fonts
↳ Other Fonts
Styles
↳ Scale
↳ Color
↳ Emphasis
↳ Links
↳ Lists

Assets

	Design Tokens	CSS Framework	Sketch Plugin	Symbol Library	Written Guidelines	Design Decisions
Icons
↳ Action
↳ Social
Logos
Pictograms
Devices

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