Skip to content

Progress Chart

Michael McCombie edited this page Apr 20, 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
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