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 Decision
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
Patterns Later -

Layout

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decision
Spacing
↳ Units
↳ Margins and Padding
Grid System
↳ Columns
↳ Gutters
Breakpoints

Typography

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

Assets

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

Buttons

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decision
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 Decision
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 Decision
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 Decision
Accordion
Breadcrumb
Dropdown
Language Toggle
Pagination
Tabs
Tags
Tooltips

Navigation

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

Hero Billboard

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

Modal

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

Motion

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

Audio

Design Tokens CSS Framework Sketch Plugin Symbol Library Written Guidelines Design Decision
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 Decision
Player
Container

Data Visualization

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