Skip to content
Snippets Groups Projects
Select Git revision
  • move-gl-dropdown
  • improve-table-pagination-spec
  • move-markdown-preview
  • winh-fix-merge-request-spec
  • master default
  • index-namespaces-lower-name
  • winh-single-karma-test
  • 10-3-stable
  • 36782-replace-team-user-role-with-add_role-user-in-specs
  • winh-modal-internal-state
  • tz-ide-file-icons
  • 38869-milestone-select
  • update-autodevops-template
  • jivl-activate-repo-cookie-preferences
  • qa-add-deploy-key
  • docs-move-article-ldap
  • 40780-choose-file
  • 22643-manual-job-page
  • refactor-cluster-show-page-conservative
  • dm-sidekiq-versioning
  • v10.4.0.pre
  • v10.3.0
  • v10.3.0-rc5
  • v10.3.0-rc4
  • v10.3.0-rc3
  • v10.3.0-rc2
  • v10.2.5
  • v10.3.0-rc1
  • v10.0.7
  • v10.1.5
  • v10.2.4
  • v10.2.3
  • v10.2.2
  • v10.2.1
  • v10.3.0.pre
  • v10.2.0
  • v10.2.0-rc4
  • v10.2.0-rc3
  • v10.1.4
  • v10.2.0-rc2
40 results

basics.md

Blame Permalink
Forked from GitLab.org / GitLab FOSS
9922 commits behind the upstream repository.
basics.md 3.57 KiB

Basics

Contents

Responsive

GitLab is a responsive experience that works well across all screen sizes, from mobile devices to large monitors. In order to provide a great user experience, the core functionality (browsing files, creating issues, writing comments, etc.) must be available at all resolutions. However, due to size limitations, some secondary functionality may be hidden on smaller screens. Please keep this functionality limited to rare actions that aren't expected to be needed on small devices.

Typography

Primary typeface

GitLab's main typeface used throughout the UI is Source Sans Pro. We support both the bold and regular weight.

Source Sans Pro sample

Monospace typeface

This is the typeface used for code blocks. GitLab uses the OS default font.

  • Menlo (Mac)
  • Consolas (Windows)
  • Liberation Mono (Linux)

Monospace font sample

Icons

GitLab uses Font Awesome icons throughout our interface.
Trash icon The trash icon is used for destructive actions that deletes information.
Edit icon The pencil icon is used for editing content such as comments.
Notification icon The bell icon is for notifications, such as Todos.
Subscribe icon The eye icon is for subscribing to updates. For example, you can subscribe to a label and get updated on issues with that label.
RSS icon The standard RSS icon is used for linking to RSS/atom feeds.
Close icon An 'x' is used for closing UI elements such as dropdowns.
Add icon A plus is used when creating new objects, such as issues, projects, etc.

TODO: update this section, add more general guidance to icon usage and personality, etc.

Color

State Action
Blue Primary and active (such as the current tab) Organizational, managing, and retry commands
Green Opened Create new objects
Orange Warning Non destructive action
Red Closed Delete and other destructive commands
Grey Neutral Neutral secondary commands

TODO: Establish a perspective for color in terms of our personality and rationalize with Marketing usage.

Cursors

The mouse cursor is key in helping users understand how to interact with elements on the screen.
Default cursor Default cursor
Pointer cursor Pointer cursor: used to indicate that you can click on an element to invoke a command or navigate, such as links and buttons
Move cursor Move cursor: used to indicate that you can move an element around on the screen
Pan opened cursor Pan cursor (opened): indicates that you can grab and move the entire canvas, affecting what is seen in the view port.
Pan closed cursor Pan cursor (closed): indicates that you are actively panning the canvas.
I-beam cursor I-beam cursor: indicates that this is either text that you can select and copy, or a text field that you can click into to enter text.