Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • rtat.net/design.gitlab.com
  • michaelgusto14/design.gitlab.com
  • DylanGriffith/design.gitlab.com
  • gitlab-org/gitlab-services/design.gitlab.com
  • jellynina/design.gitlab.com
  • ynsmroztas/design.gitlab.com
  • gtsiolis/design.gitlab.com
  • jeaster121/design.gitlab.com
  • jjlorenzo/design.gitlab.com
  • b1n/design.gitlab.com
  • katokpara/design.gitlab.com
  • evhoffmann/design.gitlab.com
  • eysz7-x-x/design.gitlab.com
  • roufique/design.gitlab.com
  • michals2/design.gitlab.com
  • snegu/design.gitlab.com
  • tinahaibodi/design.gitlab.com
  • jagan.velpuri/design.gitlab.com
  • ndingding/design.gitlab.com
  • Kzai/design.gitlab.com
  • unaheidi/design.gitlab.com
  • jnwlkr/design.gitlab.com
  • Citizen_Drain/design.gitlab.com
  • Ali123123/design.gitlab.com
  • steve12312/design.gitlab.com
  • sarahill/design.gitlab.com
  • ms_bandral/design.gitlab.com
  • tmorehouse/design.gitlab.com
  • xeious/design.gitlab.com
  • siddheshpalande/design.gitlab.com
  • allenl/design.gitlab.com
  • gtrohel/design.gitlab.com
  • dyna-dot/design.gitlab.com
  • cmarinos/design.gitlab.com
  • jeanche/design.gitlab.com
  • splattael/design.gitlab.com
  • sarakhatri/design.gitlab.com
  • deuley/design.gitlab.com
  • davo3/design.gitlab.com
  • leetickett/design.gitlab.com
  • georgibakken/design.gitlab.com
  • veethika/design.gitlab.com
  • keviyne/design.gitlab.com
  • gitlab-renovate-forks/design.gitlab.com
  • FARESELLELL/design.gitlab.com
  • rastogi_saurav/design.gitlab.com
  • usApp-stAck/design.gitlab.com
  • WebDevAdminAlpha/design.gitlab.com
  • khalidhussain/design.gitlab.com
  • joe115/design.gitlab.com
  • mtrontz/design.gitlab.com
  • GregSong/design.gitlab.com
  • pintukumarkathrotiya/design.gitlab.com
  • ajish.kbn/design.gitlab.com
  • Jokerwin/design.gitlab.com
  • marvinrr322/design.gitlab.com
  • flayestelijah/design.gitlab.com
  • englotpiotr/design.gitlab.com
  • adithyaakrishna/design.gitlab.com
  • globat190/design.gitlab.com
  • techguy.plugins/design.gitlab.com
  • yashmaheshwari/design.gitlab.com
  • yasen2/design.gitlab.com
  • mikegreiling/design.gitlab.com
  • gdoyle/design.gitlab.com
  • monica_galletto/design.gitlab.com
  • tserkes/design.gitlab.com
  • NajahSoft/design.gitlab.com
  • Monthakan/design.gitlab.com
  • zillemarco/design.gitlab.com
  • mrgrafista/design.gitlab.com
  • francescosommella980/design.gitlab.com
  • ghostshell202/design.gitlab.com
  • roperera/design.gitlab.com
  • ropereralk/design.gitlab.com
  • JiannaMasmila/design.gitlab.com
  • shubhamahuja_/design.gitlab.com
  • nova44056/design.gitlab.com
  • xuweilong321/design.gitlab.com
  • raphaellandas/design.gitlab.com
  • armbiant/gitlab-pajamas-design-system
  • ondrejkonec/design.gitlab.com
  • arpitBhalla/design.gitlab.com
  • mirosss/design.gitlab.com
  • alejandro/design.gitlab.com
  • catinbag/design.gitlab.com
  • dediacc/design.gitlab.com
  • deerajhackerone/design.gitlab.com
  • joetakata/design.gitlab.com
  • nraj0408/design.gitlab.com
  • abeldmente/design.gitlab.com
  • mle/design
  • mle/pajamas-design-system-2
  • vakzz-h1/design.gitlab.com
  • gerwitz/design.gitlab.com
  • sahadat-sk/design.gitlab.com
  • M00njuic3/pahjamjams
  • ale3oula/design.gitlab.com
  • jamesrushford/pajamas-design-system-temp
  • wriozumi/design.gitlab.com
  • bucoleary/design.gitlab.com
  • interohm/design.gitlab.com
  • Garrybrayn/design.gitlab.com
  • SimoParashi/design.gitlab.com
  • Scmili/dycf-uh
  • paula.beatty1/design.gitlab.com
  • gitlab-community/gitlab-services/design.gitlab.com
  • Mohammadreza-Sarvari/design.gitlab.com
  • ollevche/design.gitlab.com
  • jendowns/design.gitlab.com
110 results
Show changes
Commits on Source (29)
Showing
with 234 additions and 191 deletions
# [2.151.0](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v2.150.0...v2.151.0) (2023-02-20)
### Bug Fixes
* **deps:** update dependency @gitlab/ui to v55.3.1 ([97c51c7](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/97c51c70cf59cbb837f3ffe3684b233d7f6c7063))
* Add missing "Contribute" tabs ([0fbce90](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/0fbce90ccde6de11a2f761382a57f8d0cfe0ed30))
* **deps:** update dependency nuxt to v2.16.1 ([a225056](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/a225056184466d859dc355c17b926fcdb73749a4))
* Add figure-img component ([b9b2a33](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/b9b2a33cb10f701f377781cace2d799b4152828d))
* Update or remove broken links ([0593427](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/0593427580639de9f38882e9ba64899e8192b40c))
### Features
* **BrandMotion:** Embed video samples ([05b61d7](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/05b61d7c32958f078a39da4add9854b1885ef969))
* **Link:** include truncation reference ([8878cfa](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/8878cfaa24da6a544012749673faa33fe5e230bc))
* **Modal:** specify dropdown usage in modal window version two ([56d4092](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/56d40929dea05644785fa3b4e2d83ce9b9dd2313))
* **Tooltip:** Add tooltip structure diagram ([fb6f50a](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/commit/fb6f50a0f7a54b74c36f4d705dc54dc8c8f9d813))
# [2.150.0](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/compare/v2.149.0...v2.150.0) (2023-02-13)
......
......@@ -49,20 +49,30 @@ We're in the process of migrating non-CSF examples to CSF so that we can use Sto
[Learn how to embed component stories](/doc/embed-gitlab-ui-stories.md).
### Component labels
Each component should have a corresponding [label](https://gitlab.com/gitlab-org/gitlab/-/labels?subscribed=&search=component:) that is prefixed with 'component:'. Components that are part of a larger group in Pajamas, like form elements or dropdowns, can be also include the group name as a prefix. For example, 'component:form-checkbox'.
In the 'Contribute' tab found on a component page, issues and merge requests are automatically linked to the correct component label. However, in some instances the label may not be a 1:1 and need to be manually referenced in the component page frontmatter. To do this, add `componentLabel:` followed by the label name without 'component:' to the frontmatter. For example, `componentLabel: dropdown-disclosure` will correctly reference items using the 'component:dropdown-disclosure' label.
Communicate widely any additions or changes to these labels, as other projects and tools rely on them and may need to be updated. Such projects and tools include:
- [Pajamas Adoption Scanner](https://gitlab.com/gitlab-org/frontend/pajamas-adoption-scanner)
- [GitLab UI](https://gitlab.com/gitlab-org/gitlab-ui)
- User bookmarks
- Spreadsheets
### Adding images
- When adding images to documentation, wrap the image in a `<figure>` element with a nested `<figcaption>` that explains the figure content in text form for all users.
- If using an `svg` in an `img`, be sure to add `role="img"` to the element.
- The `aria-label` on the `<figure>` and `<figcaption>` should be the same content.
- `<figcaption>` is not a replacement for `alt` text, and when an image is present it must contain meaningful `alt` text.
When adding images to documentation, use the `<figure-img>` component to:
For more background on the following example structure, refer to ["How do you figure?"](https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html), by Scott O'Hara.
- Wrap the image in a `<figure>` element with a nested `<figcaption>` that explains the figure content in text form for all users.
- If using an `svg` in an `img`, add `role="img"` to the element.
- Ensure `aria-label` on the `<figure>` and `<figcaption>` are the same content.
```
<figure class="figure" role="figure" aria-label="Brief explanation on the figure content (same as figcaption)">
<img class="figure-img" src="/img/file-name.svg" alt="Description of the visual" role="img" />
<figcaption class="figure-caption">Brief explanation on the figure content (same as figure aria-label)</figcaption>
</figure>
For more background on the desired HTML structure, refer to ["How do you figure?"](https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html), by Scott O'Hara.
```js
<figure-img src="/path/to/image.png" alt="Alt text" label="Label text" width="360"></figure-img>
```
### Linting
......
......@@ -129,6 +129,15 @@
.typography {
a {
text-decoration: underline;
&:hover,
&:focus {
color: $blue-600;
}
&:active {
color: $blue-700;
}
}
}
......@@ -155,9 +164,7 @@ kbd {
.figure {
border-radius: $border-radius;
display: block;
margin: 0;
// Using padding instead of margin because of the .md styles
padding-bottom: $gl-spacing-7;
margin: $gl-spacing-7 auto;
text-align: center;
&--dark {
......@@ -177,6 +184,7 @@ kbd {
.figure-caption {
font-size: $base-font-size;
line-height: 1.5;
margin-top: $gl-spacing-3;
}
// Figma embeds
......
......@@ -24,6 +24,16 @@ a {
&:hover {
text-decoration: underline;
}
&:focus {
@include gl-focus;
}
}
button {
&:focus {
@include gl-focus;
}
}
code {
......
......@@ -37,6 +37,17 @@ export default {
default: false,
},
},
methods: {
getShadeClasses(shade) {
const classes = [`${this.backgroundClassPrefix}${shade.name}`];
if (shade.classes) {
classes.push(...shade.classes);
}
return classes;
},
},
};
</script>
......@@ -47,10 +58,7 @@ export default {
</slot>
<div class="distributed palette">
<div v-for="shade in shades" :key="shade.name" class="color">
<div
class="color-overview gl-px-5 gl-py-3"
:class="[`${backgroundClassPrefix}${shade.name}`, ...shade.classes]"
>
<div class="color-overview gl-px-5 gl-py-3" :class="getShadeClasses(shade)">
<span class="variable">${{ shade.name }}</span>
<span class="hex f-small">{{ shade.code }}</span>
</div>
......
<script>
export default {
props: {
alt: {
type: String,
required: false,
default: '',
},
dark: {
type: Boolean,
default: false,
required: false,
},
label: {
type: String,
required: true,
},
src: {
type: String,
default: '',
required: false,
},
width: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
loaded: false,
};
},
computed: {
altText() {
return this.alt || this.label;
},
hasCaptionSlot() {
return Boolean(this.$scopedSlots.caption);
},
style() {
return this.width ? `width:100%; max-width:${this.width}px` : '';
},
},
};
</script>
<template>
<figure
:aria-label="label"
class="figure"
:class="{
'figure--dark': dark,
}"
role="figure"
>
<slot></slot>
<img v-if="src" class="figure-img" :src="src" :alt="altText" role="img" :style="style" />
<figcaption class="figure-caption">
<template v-if="!hasCaptionSlot">{{ label }}</template>
<slot name="caption"></slot>
</figcaption>
</figure>
</template>
<script>
export default {
props: {
title: {
default: '',
required: false,
type: String,
},
videoId: {
required: true,
type: String,
},
},
data() {
return {
/**
* Vimeo player embed options
* https://developer.vimeo.com/player/sdk/embed
*/
options: {
color: '7b58cf',
title: false,
byline: false,
portrait: false,
},
};
},
computed: {
src() {
const params = new URLSearchParams(this.options).toString();
return `https://player.vimeo.com/video/${this.videoId}?${params}`;
},
},
};
</script>
<template>
<div class="gl-relative" style="padding-top: 56.25%">
<iframe
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
class="gl-absolute gl-top-0 gl-right-0 gl-bottom-0 gl-left-0 gl-w-full gl-h-full"
frameborder="0"
:src="src"
:title="title"
></iframe>
</div>
</template>
......@@ -29,23 +29,20 @@ If you're testing in Safari or Firefox in macOS, you'll likely have to update a
1. Go to **System Preferences > Keyboard > Shortcuts**.
1. Check the "Use keyboard navigation to move focus between controls" option.
<img class="gl-display-block gl-mx-auto gl-my-7" style="width:100%; max-width:668px;" src="/img/a11y-keyboard-macos.png" alt="macOS keyboard settings" />
<figure-img label="macOS keyboard settings" src="/img/a11y-keyboard-macos.png" width="668"></figure-img>
**For Safari:**
1. Open **Preferences > Advanced**.
1. Check the "Press Tab to highlight each item on a webpage" option.
<img class="gl-display-block gl-mx-auto gl-my-7" style="width:100%; max-width:792px;" src="/img/a11y-keyboard-safari.png" alt="Safari browser advanced settings" />
<figure-img label="Safari browser advanced settings" src="/img/a11y-keyboard-safari.png" width="792"></figure-img>
## Focus order
The focus order is the sequence that a keyboard user tabs through focusable elements. In most cases the focus order and DOM order should be the same. Visually reordering elements with CSS, such as with floats, flexbox, or grid, can be problematic for focus order, so ensure content makes sense both visually and linearly in the markup. To learn more about what elements should be focusable by default read this [Introduction to Focus](https://developers.google.com/web/fundamentals/accessibility/focus/).
<figure class="figure" role="figure" aria-label="Example tab order moving through navigation">
<img class="figure-img" src="/img/a11y-tab-order.png" alt="Example navigation with tab order overlays" role="img" style="width:100%; max-width:640px; height:auto" />
<figcaption class="figure-caption">Example tab order moving through navigation</figcaption>
</figure>
<figure-img alt="Example navigation with tab order overlays" label="Example tab order moving through navigation" src="/img/a11y-tab-order.png" width="640"></figure-img>
Some HTML elements, like form elements and buttons, receive focus by default because they have native event handling. In these cases nothing has to be done for them to be in the focus order. That being said, it’s possible to use the `tabindex` attribute to make elements focusable.
......@@ -88,10 +85,7 @@ Some HTML elements, like form elements and buttons, receive focus by default bec
Every focusable element must have a visible focus state for keyboard navigation. Typically a focused element has a stronger border, glow, or shadow to highlight it. Browsers provide a focus ring by default, but this can be removed or enhanced with CSS.
<figure class="figure" role="figure" aria-label="Buttons with custom and default focus rings">
<img class="figure-img" src="/img/a11y-focus-ring.png" alt="One button with a custom focus ring, and another with browser default" role="img" style="width:100%; max-width:299px; height:auto" />
<figcaption class="figure-caption">Buttons with custom and browser default focus rings</figcaption>
</figure>
<figure-img alt="One button with a custom focus ring, and another with browser default" label="Buttons with custom and default focus rings" src="/img/a11y-focus-ring.png" width="299"></figure-img>
### Expected behavior
......@@ -108,10 +102,7 @@ An element has focus, but there’s no visual indication.
A keyboard trap keeps the focus order looping within a section. A modal, for example, uses a keyboard trap to prevent a user from focusing on content elsewhere in the page — content that could even be hidden by the modal itself. There should never be a keyboard trap that a user can’t get out of.
<figure class="figure" role="figure" aria-label="A modal with a keyboard trap and multiple ways to dismiss">
<img class="figure-img" src="/img/a11y-keyboard-trap.png" alt="A modal with overlays showing how focus is trapped within the modal" role="img" style="width:100%; max-width:560px; height:auto" />
<figcaption class="figure-caption">A modal with a keyboard trap and multiple ways to dismiss</figcaption>
</figure>
<figure-img alt="A modal with overlays showing how focus is trapped within the modal" label="A modal with a keyboard trap and multiple ways to dismiss" src="/img/a11y-keyboard-trap.png" width="560"></figure-img>
### Expected behavior
......@@ -129,10 +120,7 @@ A keyboard trap keeps the focus order looping within a section. A modal, for exa
Skip links are anchor links placed before a section that allow a user to bypass blocks of repeating page sections (typically navigation), and "skip" to the main content. They’re typically not visible until they receive focus, and then they’re visible for all users.
<figure class="figure" role="figure" aria-label="Skip link with focus in GitLab’s primary navigation">
<img class="figure-img" src="/img/a11y-skip-link.png" alt="Skip link visible when focused in the GitLab header navigation" role="img" style="width:100%; max-width:816px; height:auto" />
<figcaption class="figure-caption">Skip link with focus in GitLab’s primary navigation</figcaption>
</figure>
<figure-img alt="Skip link visible when focused in the GitLab header navigation" label="Skip link with focus in GitLab’s primary navigation" src="/img/a11y-skip-link.png" width="816"></figure-img>
### Expected behavior
......
......@@ -10,10 +10,7 @@ Proper color proportions are essential to maintaining GitLab’s look and feel.
[Color swatches](https://drive.google.com/drive/folders/19GvtyyW638cq4p96hj8w5yloSNuIBFjg?usp=sharing) are denoted with a _P_ (for primary palette), _G_ (for gradients), or _S_ (for secondary palette, which is reserved for illustration usage). Refer to the [color usage](#color-usage) section for more information on when to use digital vs. print colors.
<figure class="figure" role="figure" aria-label="Color use ratios">
<img class="figure-img gl-p-5" src="/img/brand/color-usage.svg" alt="GitLab color usage" role="img" />
<figcaption class="figure-caption">Color use ratios</figcaption>
</figure>
<figure-img label="Color use ratios" src="/img/brand/color-usage.svg"></figure-img>
### Primary color palette
......
......@@ -2,10 +2,7 @@
name: Marketing illustrations
---
<figure class="figure" role="figure" aria-label="Illustration sample">
<img class="figure-img gl-p-5" src="/img/brand/marketing-illustrations.png" alt="GitLab illustration banner sample" role="img" />
<figcaption class="figure-caption">Illustration banner sample</figcaption>
</figure>
<figure-img alt="GitLab illustration banner sample" label="Illustration sample" src="/img/brand/marketing-illustrations.png"></figure-img>
Illustrations are the primary visual tool that we use throughout our marketing materials to depict GitLab’s values, features, user outcomes, and abstract concepts. The illustrations are an extension of our unique iconography system, and both reinforce our brand personality and are inspired by our values in the following ways:
......@@ -32,10 +29,7 @@ When building illustrations, use this [template](https://drive.google.com/file/d
1. **Corners** use a mix of angles and curves. Rounded corners are used sparingly as a small addition of personality; the radius should be consistent throughout the illustration.
1. **Color** is used intentionally, with white and purples from the [secondary palette](https://drive.google.com/file/d/1kCcvxYMKPkDCEFQd6imQcHhFGC14Hgte/view?usp=sharing) making up the majority of the composition. The remaining colors in that palette are used as highlights and accents to differentiate objects within the illustration.
<figure class="figure" role="figure" aria-label="Illustration sample">
<img class="figure-img gl-p-5 img-50" src="/img/brand/illustrations.svg" alt="GitLab illustration sample" role="img" />
<figcaption class="figure-caption">Illustration sample</figcaption>
</figure>
<figure-img alt="GitLab illustration sample" label="Illustration sample" src="/img/brand/illustrations.svg" width="480"></figure-img>
## Marketing icons
......@@ -49,7 +43,4 @@ The marketing icons are created using the 8px grid system found within this [tem
[This specific set of icons](https://drive.google.com/drive/folders/1AkJxuyB8kIGvV7e0dH6sbq5alLshuG-i?usp=sharing) represents each stage of our software development lifecycle at each stage of the process. They are designed to be presented as a set when referring to the entire journey of the lifecycle or individually when referring to a specific stage.
<figure class="figure" role="figure" aria-label="Software development lifecycle icon set">
<img class="figure-img gl-p-5" src="/img/brand/sdlc-icon-set.svg" alt="10 icons, one for each development stage" role="img" />
<figcaption class="figure-caption">Software development lifecycle icon set</figcaption>
</figure>
<figure-img alt="10 icons, one for each development stage" label="Software development lifecycle icon set" src="/img/brand/sdlc-icon-set.svg"></figure-img>
......@@ -13,21 +13,15 @@ Video producers can create large-scale, custom illustrations as part of a video
- Each layer can have its own unique motion type which combine to create harmony.
- Strokes and lines are animated independently with a stroke reveal effect.
<figure class="figure" role="figure" aria-label="Illustration animation example">
<img class="figure-img gl-p-5" src="/img/brand/illustration-animation-example.png" alt="Illustration animation example with motion details" role="img" />
<figcaption class="figure-caption">Illustration animation example</figcaption>
</figure>
<figure-img alt="Illustration animation example with motion details" label="Illustration animation example" src="/img/brand/illustration-animation-example.png"></figure-img>
<todo>Add motion sample of illustration animation.</todo>
<vimeo-player title="Illustration" video-id="791344150"></vimeo-player>
#### Easing
Both interactive and expressive motion come with unique parameters to create scalable consistency in their use.
<figure class="figure" role="figure" aria-label="Illustration easing example">
<img class="figure-img gl-p-5 img-50" src="/img/brand/illustration-easing-specs.svg" alt="Illustration easing example with After Effects specs" role="img" />
<figcaption class="figure-caption">Illustration easing example</figcaption>
</figure>
<figure-img alt="Illustration easing example with After Effects specs" label="Illustration easing example" src="/img/brand/illustration-easing-specs.svg" width="480"></figure-img>
### Iconography
......@@ -37,7 +31,7 @@ Both interactive and expressive motion come with unique parameters to create sca
- Motion should be swift at 0.65 seconds.
- Purposeful motion embraces the design elements and formulates a short visual narrative.
<todo>Add iconography animation example.</todo>
<vimeo-player video-id="791341802"></vimeo-player>
### Dot animations
......@@ -48,7 +42,7 @@ Both interactive and expressive motion come with unique parameters to create sca
Voice over example: “No more stitching point solutions. All you need is GitLab.”
<todo>Add dot animation motion sample.</todo>
<vimeo-player title="Dot animations" video-id="791329958"></vimeo-player>
## Frame composition
......@@ -59,7 +53,7 @@ Voice over example: “No more stitching point solutions. All you need is GitLab
**Motion sample:** The text above is in section 1-2 while iconography occupies space in sections 2-2 and 2-3.
<todo>Add frame composition motion sample that demonstrates the frame grid and movement within different sections.</todo>
<vimeo-player title="Frame composition" video-id="791336183"></vimeo-player>
## Tanuki + DevOps loop
......@@ -67,9 +61,7 @@ Voice over example: “No more stitching point solutions. All you need is GitLab
- It should animate on using a stroke reveal using Interactive Ease.
- Don't use any other reveals such as fading on logo, having the logo move in from outside the frame, or scaling to reveal the logo.
<todo>Add reference for _interactive ease_.</todo>
<todo>Add trace logo animation example.</todo>
<todo>Add link to trace logo animation file.</todo>
<vimeo-player title="Tanuki" video-id="791334272"></vimeo-player>
## Gradients
......@@ -85,10 +77,7 @@ Voice over example: “No more stitching point solutions. All you need is GitLab
[Download the gradient file](https://drive.google.com/file/d/13PPVVsDp6ySALH-14pQrzcDXYWD6qRwU/view)
<figure class="figure" role="figure" aria-label="Gradient example">
<img class="figure-img gl-p-5" src="/img/brand/gradient-1.png" alt="Soft gradient example" role="img" />
<figcaption class="figure-caption">Gradient example</figcaption>
</figure>
<figure-img alt="Soft gradient example" label="Gradient example" src="/img/brand/gradient-1.png"></figure-img>
### Option 2
......@@ -96,10 +85,7 @@ Voice over example: “No more stitching point solutions. All you need is GitLab
- Blur at 71% with 3 iterations.
- Animate turbulent displacement evolution to create subtle animation.
<figure class="figure" role="figure" aria-label="Gradient example">
<img class="figure-img gl-p-5" src="/img/brand/gradient-2.png" alt="Organic gradient example" role="img" />
<figcaption class="figure-caption">Gradient example</figcaption>
</figure>
<figure-img alt="Organic gradient example" label="Gradient example" src="/img/brand/gradient-2.png"></figure-img>
### Gradients on text
......@@ -107,10 +93,7 @@ Voice over example: “No more stitching point solutions. All you need is GitLab
- The gradient can be used on keywords, whole phrases, and text repetitions.
- The text masks out the gradient.
<figure class="figure" role="figure" aria-label="Gradient text example">
<img class="figure-img gl-p-5" src="/img/brand/gradient-type.png" alt="Gradient on text example" role="img" />
<figcaption class="figure-caption">Gradient text example</figcaption>
</figure>
<figure-img alt="Gradient on text example" label="Gradient text example" src="/img/brand/gradient-type.png"></figure-img>
### Incorrect use of gradients
......@@ -149,10 +132,7 @@ The example below uses the following steps:
1. The stroke begins to animate as “innovation” moves to meet the other words.
1. Once in place the opacity transitions from 30% to 100%.
<figure class="figure" role="figure" aria-label="Outline reveals example">
<img class="figure-img gl-p-5" src="/img/brand/outline-reveal-tech-spec.png" alt="Outline reveals on text example" role="img" />
<figcaption class="figure-caption">Outline reveals example</figcaption>
</figure>
<figure-img alt="Outline reveals on text example" label="Outline reveals example" src="/img/brand/outline-reveal-tech-spec.png"></figure-img>
<todo>Add outline reveal motion samples.</todo>
......@@ -161,10 +141,7 @@ The example below uses the following steps:
- Type repetitions add visual interest while drawing attention to areas of emphasis. They are a more dynamic, spirited way to emphasize text. They can be used to emphasize a single word or a whole phrase and can animate in a variety of ways.
- Slide the text lines upward into position behind masks one line at a time, transitioning opacity from 0-100 using our interactive ease.
<figure class="figure" role="figure" aria-label="Type repetitions">
<img class="figure-img gl-p-5" src="/img/brand/type-repetitions-motion.svg" alt="Type repetition with breakdown specs" role="img" />
<figcaption class="figure-caption">Type repetitions</figcaption>
</figure>
<figure-img alt="Type repetition with breakdown specs" label="Type repetitions" src="/img/brand/type-repetitions-motion.svg"></figure-img>
<todo>Add reference for _interactive ease_.</todo>
<todo>Add type repetition motion sample.</todo>
......@@ -198,9 +175,6 @@ The example below uses the following steps:
- Lower third remains onscreen for 4-5 seconds.
- **Transition out:** Animate opacity from 100% to 0% over 1 second.
<figure class="figure" role="figure" aria-label="Lower thirds example">
<img class="figure-img gl-p-5" src="/img/brand/lower-thirds.png" alt="Lower thirds motion example with specs" role="img" />
<figcaption class="figure-caption">Lower thirds example</figcaption>
</figure>
<figure-img alt="Lower thirds motion example with specs" label="Lower thirds example" src="/img/brand/lower-thirds.png"></figure-img>
<todo>Add motion sample.</todo>
......@@ -6,27 +6,18 @@ name: Photography
## Customer and contributor portraits
<figure class="figure" role="figure" aria-label="Customer portrait samples">
<img class="figure-img gl-p-5" src="/img/brand/adobe-stock-portrait-samples.jpg" alt="Portraits of smiling individuals" role="img" />
<figcaption class="figure-caption">Customer portrait samples</figcaption>
</figure>
<figure-img alt="Portraits of smiling individuals" label="Customer portrait samples" src="/img/brand/adobe-stock-portrait-samples.jpg"></figure-img>
Customers and contributors are our heroes, so their portraits should feel heroic. We capture this by photographing people at eye-level on a neutral background with soft, natural lighting. A shallow depth of field minimizes background distractions and draws the viewer’s attention to the person.
## Metaphors
<figure class="figure" role="figure" aria-label="Metaphor photo samples">
<img class="figure-img gl-p-5" src="/img/brand/stock-metaphor-samples.jpg" alt="Aerial views that create abstract patterns and representations" role="img" />
<figcaption class="figure-caption">Metaphor photo samples</figcaption>
</figure>
<figure-img alt="Aerial views that create abstract patterns and representations" label="Metaphor photo samples" src="/img/brand/stock-metaphor-samples.jpg"></figure-img>
Metaphorical photography allows us to convey intricate ideas in an abstract way. These photos are primarily shot top-down, with a focus on texture, patterns, or paths. The imagery should bring feelings of innovation, sustainability, positivity, and/or repetition. Images featuring infrastructure, people, nature, and structural repetition are excellent starting points.
## Collaboration
<figure class="figure" role="figure" aria-label="Collaboration photo samples">
<img class="figure-img gl-p-5" src="/img/brand/stock-collaboration-samples.jpg" alt="Overhead views of people collaborating around various devices and technology" role="img" />
<figcaption class="figure-caption">Collaboration photo samples</figcaption>
</figure>
<figure-img alt="Overhead views of people collaborating around various devices and technology" label="Collaboration photo samples" src="/img/brand/stock-collaboration-samples.jpg"></figure-img>
Collaboration is a common theme at GitLab, as it highlights our mission that _everyone can contribute_. Capture collaborative scenes top-down or over a subject’s shoulder to show their working environment in a positive light. Subjects should be using their devices in a natural, candid way to show GitLab and DevOps as a normal part of everyday life. This technique draws attention to the working environment, rather than to the individual.
......@@ -22,19 +22,13 @@ Refer to the guidelines below when working with typography:
- Captions and labels should use Inter Italic with 135% leading, 0 tracking, and auto kerning.
- Call-to-actions and buttons should use Inter Semi Bold.
<figure class="figure" role="figure" aria-label="Inter typography samples">
<img class="figure-img gl-p-5" src="/img/brand/typography.svg" alt="Typography samples" role="img" />
<figcaption class="figure-caption">Inter typography samples</figcaption>
</figure>
<figure-img alt="Typography samples" label="Inter typography samples" src="/img/brand/typography.svg"></figure-img>
## Type repetitions
Type repetitions are a stylistic expression of GitLab’s commitment to iteration. It is reserved for moments of emphasis and adding visual interest.
<figure class="figure" role="figure" aria-label="Type repetitions mockup">
<img class="figure-img img-50" src="/img/brand/devops-shirt-mockup.png" alt="Type repetitions mockup" role="img" />
<figcaption class="figure-caption">Type repetitions mockup</figcaption>
</figure>
<figure-img alt="Type repetitions mockup" label="Type repetitions mockup" src="/img/brand/devops-shirt-mockup.png" width="480"></figure-img>
### Construction
......@@ -46,7 +40,4 @@ Follow these guidelines to properly achieve the type repetitions effect:
1. Ensure that the vertical spacing between each repetition equals 75% of the bottom portion that was removed.
1. Keep the font weight and color the same throughout, although opacity changes can be applied to the repetitions.
<figure class="figure" role="figure" aria-label="Type repetition settings">
<img class="figure-img gl-p-5" src="/img/brand/type-repetitions-construction.svg" alt="Type repetitions" role="img" />
<figcaption class="figure-caption">Type repetition settings</figcaption>
</figure>
<figure-img alt="Type repetitions" label="Type repetition settings" src="/img/brand/type-repetitions-construction.svg"></figure-img>
......@@ -13,10 +13,7 @@ Co-branded lockups are created by the Brand Design team for approved GitLab part
Ensure proper clear space (x-height equal to the height of the letter 'a' from our wordmark) around all sides of both logos.
<figure class="figure" role="figure" aria-label="Co-branding lockup with clear space equal to the width of the lowercase 'a' from the wordmar">
<img class="figure-img gl-p-5" src="/img/brand/co-branding.svg" alt="Co-branding guidelines" role="img" />
<figcaption class="figure-caption">Co-branding lockup with clear space equal to the width of the lowercase 'a' from the GitLab wordmark</figcaption>
</figure>
<figure-img label="Co-branding lockup with clear space equal to the width of the lowercase 'a' from the wordmark" src="/img/brand/co-branding.svg"></figure-img>
## Program lockups
......@@ -33,13 +30,7 @@ For GitLab team members looking to create a lockup for their program, please acc
Ensure proper clear space (x-height equal to the height of the logomark) around all sides of the lockup. Program lockups should always be accompanied by the GitLab logo and never exceed 75% of the width of the GitLab logo on any given asset.
<figure class="figure" role="figure" aria-label="Program lockup">
<img class="figure-img gl-p-5 img-50" src="/img/brand/program-lockup-clearspace.svg" alt="Program lockup" role="img" />
<figcaption class="figure-caption">Program lockup with clear space equal to the height of the logomark</figcaption>
</figure>
<figure-img label="Program lockup with clear space equal to the height of the logomark" src="/img/brand/program-lockup-clearspace.svg" width="480"></figure-img>
<figure class="figure" role="figure" aria-label="Program lockup mockup">
<img class="figure-img gl-p-5 img-50" src="/img/brand/program-lockup-mockup.png" alt="Logomark construction" role="img" />
<figcaption class="figure-caption">Mockup of program lockup paired with the GitLab logo and branding</figcaption>
</figure>
<figure-img label="Mockup of program lockup paired with the GitLab logo and branding" src="/img/brand/program-lockup-mockup.png" width="480"></figure-img>
......@@ -10,10 +10,7 @@ The name GitLab is inspired by the name of the Git open source version control s
The wordmark is a modified version of [Inter Semi Bold](https://fonts.google.com/specimen/Inter). The wordmark can’t be used independently and should always be presented alongside the logomark.
<figure class="figure" role="figure" aria-label="GitLab logo anatomy">
<img class="figure-img gl-p-5 img-50" src="/img/brand/gitlab-logo-anatomy.svg" alt="Anatomy of the GitLab logo" role="img" />
<figcaption class="figure-caption">GitLab logo anatomy</figcaption>
</figure>
<figure-img alt="Anatomy of the GitLab logo" label="GitLab logo anatomy" src="/img/brand/gitlab-logo-anatomy.svg" width="480"></figure-img>
## Clear space
......@@ -21,10 +18,7 @@ Clear space is the area, equal to the x-height, surrounding the entire logo; the
This area should be kept free of any visual elements, including text, graphics, borders, patterns, and other logos. Ensuring proper clear space between the logo and surrounding elements preserves the visual integrity of our brand.
<figure class="figure" role="figure" aria-label="with clear space equal to the width of the lowercase 'a' from the wordmark">
<img class="figure-img gl-p-5 img-50" src="/img/brand/core-logo-clearspace.svg" alt="GitLab logo with clear space" role="img" />
<figcaption class="figure-caption">GitLab logo with clear space equal to the width of the lowercase 'a' from the wordmark</figcaption>
</figure>
<figure-img label="GitLab logo with clear space equal to the width of the lowercase 'a' from the wordmark" src="/img/brand/core-logo-clearspace.svg" width="480"></figure-img>
## Scalability
......@@ -32,10 +26,7 @@ When scaling either the logo or logomark, it should take up no more than 20% of
The minimum size is 20px for digital and 0.4” (11mm) for print.
<figure class="figure" role="figure" aria-label="GitLab logo sizing">
<img class="figure-img gl-p-5" src="/img/brand/core-logo-scalability.svg" alt="GitLab logo sizing" role="img" />
<figcaption class="figure-caption">GitLab logo sizing</figcaption>
</figure>
<figure-img label="GitLab logo sizing" src="/img/brand/core-logo-scalability.svg"></figure-img>
## Placement
......@@ -54,17 +45,11 @@ The full color logo is the default logo to be used, however, there are times tha
- Restricted to a single-color use (i.e. print/merchandise applications)
- Additional logo brand awareness needed in combination with the the full color logo (i.e. large event booths)
<figure class="figure" role="figure" aria-label="Single color GitLab logo variations">
<img class="figure-img gl-p-5" src="/img/brand/core-logo-logo-variations.svg" alt="Single color logo use" role="img" />
<figcaption class="figure-caption">Single color GitLab logo variations</figcaption>
</figure>
<figure-img label="Single color GitLab logo variations" src="/img/brand/core-logo-logo-variations.svg"></figure-img>
## Incorrect usage
<figure class="figure" role="figure" aria-label="GitLab logo incorrect usage">
<img class="figure-img gl-p-5" src="/img/brand/core-logo-incorrect-usage.png" alt="GitLab logo incorrect usage" role="img" />
<figcaption class="figure-caption">GitLab logo incorrect usage</figcaption>
</figure>
<figure-img label="GitLab logo incorrect usage" src="/img/brand/core-logo-incorrect-usage.png"></figure-img>
1. Do not apply a stroke to the logo
1. Do not recolor any part of the logo
......
......@@ -10,10 +10,7 @@ The tanuki is known for being fast, efficient, and collaborative. It is thought
The tanuki logomark can be used when the core logo has already been presented to provide context. It should never be obscured or hard to recognize.
<figure class="figure" role="figure" aria-label="Tanuki logomark sizing">
<img class="figure-img gl-p-5 img-75" src="/img/brand/tanuki-scalability.svg" alt="Logomark sizing" role="img" />
<figcaption class="figure-caption">Tanuki logomark sizing</figcaption>
</figure>
<figure-img label="Tanuki logomark sizing" src="/img/brand/tanuki-scalability.svg" width="720"></figure-img>
## Construction
......@@ -21,10 +18,7 @@ DevOps is at our core, and the logomark represents adaptability, iteration, deve
The construction of the GitLab tanuki was based on an infinity loop, representing the limitless possibilities of The DevOps Platform.
<figure class="figure" role="figure" aria-label="Logomark construction">
<img class="figure-img gl-p-5 img-50" src="/img/brand/tanuki-construction.svg" alt="Logomark construction" role="img" />
<figcaption class="figure-caption">Logomark construction</figcaption>
</figure>
<figure-img label="Logomark construction" src="/img/brand/tanuki-construction.svg" width="480"></figure-img>
## Clear space
......@@ -32,14 +26,11 @@ Like the logo, the clear space for the tanuki logomark is measured by the x-heig
Ensuring proper clear space between the logomark and surrounding elements preserves the visual integrity of our brand; this area should be kept free of any visual elements, including text, graphics, borders, patterns, and other logos.
<figure class="figure" role="figure" aria-label="Clear space around the logomark equal to the lowercase 'a' from the wordmark">
<img class="figure-img gl-p-5 img-50" src="/img/brand/tanuki-clearspace.svg" alt="Logomark clear space" role="img" />
<figcaption class="figure-caption">Clear space around the logomark equal to the lowercase "a" from the wordmark</figcaption>
</figure>
<figure-img label="Clear space around the logomark equal to the lowercase 'a' from the wordmark" src="/img/brand/tanuki-clearspace.svg" width="480"></figure-img>
## Incorrect usage
<img class="gl-display-block gl-mx-auto gl-my-7" src="/img/brand/tanuki-incorrect-usage.svg" alt="Logomark incorrect usage" role="img" />
<figure-img label="Logomark incorrect usage" src="/img/brand/tanuki-incorrect-usage.svg"></figure-img>
1. Do not apply a stroke to the mark
1. Do not apply color to the mark
......
......@@ -17,9 +17,7 @@ related:
## Structure
<figure class="figure" role="figure" aria-label="Accordion structure">
<img class="figure-img" src="/img/accordion-structure.svg" alt="Numbered diagram of an accordion structure" role="img" />
</figure>
<figure-img alt="Numbered diagram of an accordion structure" label="Accordion structure" src="/img/accordion-structure.svg"></figure-img>
1. **Caret**: Identifies when the accordion is open or closed. Pointing down in open. Pointing right is closed.
1. **Title**: Identifies the title of the accordion.
......
......@@ -19,9 +19,7 @@ related:
## Structure
<figure class="figure" role="figure" aria-label="Alert structure">
<img class="figure-img" src="/img/alert-structure.svg" alt="Numbered diagram of an alert structure" role="img" />
</figure>
<figure-img alt="Numbered diagram of an alert structure" label="Alert structure" src="/img/alert-structure.svg"></figure-img>
1. **Container**: Wraps the content.
1. **Icon**: Supports the variant meaning.
......@@ -92,20 +90,11 @@ related:
### Placement
- **Global**: Impacts the entire experience, is full-width, and is placed directly below the navigation bar.
<figure class="figure" role="figure" aria-label="Full-width danger alert under the global navigation and above the contextual navigation">
<img class="figure-img" src="/img/alert-global.png" alt="Global alert position" role="img" style="width:100%; max-width:332px; height:auto" />
<figcaption class="figure-caption">Full-width danger alert under the global navigation and above the contextual navigation</figcaption>
</figure>
<figure-img alt="Global alert position" label="Full-width danger alert under the global navigation and above the contextual navigation" src="/img/alert-global.png" width="332"></figure-img>
- **Page-level**: Appears at the top of a page, directly below the navigation bar and above the breadcrumbs, and restricted to the content container width which can be either fixed or fluid, depending on user’s preference.
<figure class="figure" role="figure" aria-label="Page-level alert in the main content area with space above and below">
<img class="figure-img" src="/img/alert-page-level.png" alt="Page-level alert position" role="img" style="width:100%; max-width:332px; height:auto" />
<figcaption class="figure-caption">Page-level alert in the main content area with space above and below</figcaption>
</figure>
<figure-img alt="Page-level alert position" label="Page-level alert in the main content area with space above and below" src="/img/alert-page-level.png" width="332"></figure-img>
- **In-page**: Within a section of the page when the message is specific to that content.
<figure class="figure" role="figure" aria-label="In-page alert contextually placed with space above and below">
<img class="figure-img" src="/img/alert-in-page.png" alt="In-page alert position" role="img" style="width:100%; max-width:332px; height:auto" />
<figcaption class="figure-caption">In-page alert contextually placed with space above and below</figcaption>
</figure>
<figure-img alt="In-page alert position" label="In-page alert contextually placed with space above and below" src="/img/alert-in-page.png" width="332"></figure-img>
#### Sticky positioning
......
......@@ -23,9 +23,7 @@ related:
## Structure
<figure class="figure" role="figure" aria-label="Avatar structure">
<img class="figure-img" src="/img/avatar-structure.svg" alt="Numbered diagram of an avatar structure" role="img" />
</figure>
<figure-img alt="Numbered diagram of an avatar structure" label="Avatar structure" src="/img/avatar-structure.svg"></figure-img>
1. **Image or identicon**: A unique image or fallback representing the object.
1. **Label and sub-label** (optional): Text corresponding to the image or identicon.
......@@ -73,10 +71,7 @@ The following only applies to circle avatars.
- Use "+{#} more" to expand the group. Replace "#" with the number of avatars that aren't visible.
- Use "- show less" to collapse the group.
<figure class="figure" role="figure" aria-label="Collapsed and expanded avatar group">
<img class="figure-img" src="/img/avatar-group.svg" alt="Two avatar group examples, one collapsed with an action to show more, and the other expanded with an action to show less." role="img" />
<figcaption class="figure-caption">Collapsed and expanded avatar group</figcaption>
</figure>
<figure-img alt="Two avatar group examples, one collapsed with an action to show more, and the other expanded with an action to show less." label="Collapsed and expanded avatar group" src="/img/avatar-group.svg"></figure-img>
#### Stack
......@@ -84,10 +79,7 @@ The following only applies to circle avatars.
- The number of avatars in a stack is variable, but should never cause wrapping.
- Use a [badge](/components/badge) after the last avatar to display the number of avatars that aren't visible. It can optionally be an action that leads a user to more context for all associated avatars. The badge and avatar sizes should be the same.
<figure class="figure" role="figure" aria-label="A horizontal avatar stack">
<img class="figure-img" src="/img/avatar-stack.svg" alt="Three avatars slightly overlap each other in a horizontal row. A badge at the end includes the number of additional avatars that aren't visible" role="img" />
<figcaption class="figure-caption">A horizontal avatar stack</figcaption>
</figure>
<figure-img alt="Three avatars slightly overlap each other in a horizontal row. A badge at the end includes the number of additional avatars that aren't visible" label="A horizontal avatar stack" src="/img/avatar-stack.svg"></figure-img>
### Accessibility
......
......@@ -23,9 +23,7 @@ related:
## Structure
<figure class="figure" role="figure" aria-label="Badge structure">
<img class="figure-img" src="/img/badge-structure.svg" alt="Numbered diagram of a badge structure" role="img" />
</figure>
<figure-img alt="Numbered diagram of a badge structure" label="Badge structure" src="/img/badge-structure.svg"></figure-img>
1. **Container**: Wraps the content.
1. **Icon** (optional): Supports or directly communicates the metadata meaning, always left aligned.
......