Skip to content

HPE Design System Roadmap

Wally edited this page Apr 28, 2020 · 9 revisions

A high-level document that outlines the goals for the HPE Design System by identifying some initiatives and timing that can help it get there. This is a blueprint for action that aligns the Design System with short and longer term business objectives.

MVP (Minimum Viable Product) Target: April 2020

Website

https://design-system.hpe.design/

HPE Theme

https://github.com/grommet/grommet-theme-hpe

Community

Support email: [email protected]
Slack: https://grommet.slack.com/archives/G04LMJWQT
Github: https://github.com/hpe-design/design-system/issues

Design resources

Figma library
https://www.figma.com/files/815326206297160627/team/809540909651933422/HPE-Design-System

Stickersheet

Components

  • Accordion
  • Anchor
  • Box
  • Button
  • Checkbox
  • Grid
  • Layer
  • MaskedInput
  • Menu
  • RadioButtonGroup
  • RangeInput
  • Select
  • Stack
  • Tabs
  • TextArea
  • TextInput

Foundation

  • Branding
  • Color
  • Typography

Templates

Header

  • Branding
  • App context
  • Search
  • Actions
  • Navigation
  • Responsiveness

Footer

  • Content
  • Responsiveness

Dashboard

  • Tile
  • Information density
  • Interaction

Forms

  • Input components
  • Validation/failure
  • Help/guidance

Navigation

  • Persistant menu
  • Hub and spoke
  • Global nav
  • App nav
  • Responsiveness

Prioritized Backlog: May - Ongoing

For a more detailed view take a look at:
https://github.com/orgs/hpe-design/projects/1
https://github.com/hpe-design/design-system

Page layouts

  • Table centric
  • List centric
  • Grid centric
  • Document centric

List

  • Search/sort/filter
  • Selection
  • List navigation
  • Embedded actions
  • Summary
  • Information density

Table

  • End user configuration
  • Search/sort/filter
  • Selection
  • List navigation
  • Embedded actions
  • Summary
  • Information density

Data visualization

  • Chart
  • Meter
  • Legend
  • Information density
  • Interaction

Tile

  • Information density
  • Interaction

Modal/drop
TBD

Asynchronous notifications

  • API/task validation
  • API/task completion/failure
  • Asynchronous events

In-app marketing

  • Messages (mailbox)
  • Advertising 

Icons
Search