Databricks Style Guide
This style guide reflects the patterns and components of the current Databricks product. It aims to provide a unified language and consistent look and feel within the Databrick ecosystem.
Design Principles
Clarity: People must be able to recognize and understand what it is, predict what will happen when they use it.
Simplicity: Reduce cognitive load.
Efficiency: Optimize workflows. Provide shortcuts to help people work faster.
Styles
Color
Icons
Workspacefa-folder-open-o
Recentfa-clock-o
Tablefa-table
Clusterfa-sitemap
Jobfa-calendar
Appfa-th
Searchfa-search
Helpfa-question
Activityfa-clock-o
Guidefa-book
Contact Usfa-envelope
Shortcutfa-keyboard-o
Upgradefa-arrow-circle-up
Supportfa-phone
Notificationfa-bell
Training fa-graduation-cap
Guidefa-question
Sharedfa-share-alt-square
Usersfa-users
Folderfa-folder-o
Owner's Folderfa-folder
Libraryfa-book
Homefa-home
Actionsfa-chevron-down
Pinfa-thumb-tack
Viewfa-image
Filefa-file-text-o
Run Allfa-play-circle-o
Permissionfa-lock
Unlockfa-unlock-alt
Shortcutfa-keyboard-o
Publishfa-share-square-o
Commentsfa-comments
Revisionfa-history
Githubfa-github
Importfa-cloud-upload
Actionsfa-chevron-down
Minimizefa-minus
Deletefa-remove
Editfa-pencil
Presentfa-play
Deletefa-trash
Settingsfa-gear
Zoom infa-search-plus
Zoom outfa-search-minus
Expandfa-expand
Paste cellfa-clipboard
Comments-ofa-comment-o
Downloadfa-download
Clonefa-clone
Restartfa-refresh
Terminatefa-close
Show advancedfa-angle-double-down
Hide advancedfa-angle-double-up
External Linkfa-external-link
Selectorfa-unsorted
Sort upfa-arrow-up
Sort downfa-arrow-down
Dettachfa-chain-broken
Editfa-edit
Caret-downfa-caret-down
Caret-rightfa-caret-right
Selectedfa-check
Runningfa-circle
No permissionfa-ban
Infofa-info-circle
Exclamationfa-exclamation-circle
Tooltipfa-question-circle
Warningfa-exclamation-triangle
Databasefa-database
Cloud downloadfa-cloud-download
Movefa-arrows
Hide panelfa-caret-square-o-right
Show panelfa-caret-square-o-left
Forkfa-code-fork
Filterfa-filter
2-Factorfa-mobile
Typography
Spacing
- The 8px Grid: Spacing on the site is based on a 4px grid. Use multiples of 8 to define margin of blocks, multiples of 4 for element paddings. Learn more about 8-pt Grid.
- Proximity: When items are in close proximity to each other, they become one visual unit. For separate units, their distance should be large.
Writing
Capitalization:
- Title case: Capitalize the first letter of every word except for articles (a, an, the), prepositions of less than three letters(of, in), or conjunctions (and, or). One exception: The first or last world should always be capitalized. Learn more on Title Case vesus Sentence Case.
- Use title case for: All the titles (page, dialog, and section titles), button, input labels, tab labels, table column labels, and group headings.
- Use sentence case for: Tooltips, intro paragraphs, and checkbox labels. Learn more on Patternfly writing guidelines.
Write simple, concise and direct messages, some guidelines: Writing from Google material design, How to design words.
Components (work in progress)
Alerts
An email has been sent with further instructions.You have made changes that you need to confirm.Invalid email address.
Badge
Invitation 2
Invitation 2
Breadcrumb
Buttons
Notes: For scrollable dropdown, remember to add more right paddings to avoid overlap.
Dialog
code for mode
Form
code for form
State Indicator
Pending
No permission
Terminating
Terminated
code for status
Table
When implementing a new table, please use this abstraction.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
code for table
Tabs
The tabs logocially chunk the content and allow the users to alternate between views where they don't need to simultaneously see content from multiple tabs.
Tooltips