Type fundamentals

Typeface

GitLab utilizes a system font stack, which references the default system fonts used by any given OS. Using system fonts helps performance by eliminating the need to download font files, and maintains the language support of the user’s system.

The body font stack is used for all UI elements, except for code-related elements, which use the monospace font stack. Examples of code-related elements are: branch name, commit ID, and pipeline ID.

Body font stack

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell,
  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

Monospace font stack

'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
  'Courier New', 'andale mono', 'lucida console', monospace;

Font weight

GitLab uses two font weights within the application: normal and bold. A bold font weight can be used to emphasize specific UI elements, such as a title or input label.

Weight Variable Value Demo
Normal $gl-font-weight-normal 400 The platform for modern developers
Bold $gl-font-weight-bold 600 The platform for modern developers

Text color

There are a number of text colors defined in GitLab. Which color is used when depends on the location and purpose of the text.

Type Variable HEX value Demo
Primary $gray-900 #303030 Main titles and body
Secondary $gray-500 #666666 Accompanying help text or menu subtitles
Tertiary $gray-400 #868686 Placeholder or disabled

Last updated at: