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 Currently being worked on
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
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