Design.gitlab.com Phase One
Phase one of design.gitlab.com will involve:
-
Creating a new repo to house the design system: https://gitlab.com/gitlab-org/design.gitlab.com -
Getting started with storybook so it can be updated and edited by frontend and design: https://gitlab.com/gitlab-org/design.gitlab.com/commit/da4640ece4ce88feb169a9def9eafc50899278b8 -
Crafting the information architecture of the design system -
Include getting started section with basic principles -
Include style section. This will include perceptual patterns (colors, grid, icons, typography, etc.) -
Include component section. This will include functional patterns (breadcrumbs, checkboxes, buttons, inputs, etc.) -
Include resource section. This will include tools (sketch file and brand.ai component library)
-
For each section added in phase one, the goal is to create the overall structure and not necessarily include each component with full documentation. This will continue to evolve in phase 2.
-
Getting Started -
Component structure -
Personas -
Tooling -
Contributing
-
-
Style -
Color -
Grid -
Iconography -
Illustration -
Motion -
Typography
-
-
Components -
Avatar -
Badges -
Breadcrumb -
Button -
Code Snippet -
Data Tables -
Data Visualization -
Date Picker -
Dropdown -
File Uploader -
Form (checkbox, radio, input w/label, help text, validation) -
Label (Issuable Labels vs other labels) -
List -
Modal -
Notifications (banners, toast messages) -
Pagination -
Popover -
Search -
Skeleton Loaders -
Tabs -
Toggle -
Tooltip -
Validations
-
-
Content -
Capitalization -
Punctuation -
Voice and tone
-
-
Usability -
Accessibility -
Internationlization
-
-
Resources -
Design Repository -
Brand.ai -
GitLab Elements -
GitLab SVGs -
Research Panel
-
Edited by Taurie Davis