From d51040b34a7b7b5258f4da66214811902da6acac Mon Sep 17 00:00:00 2001 From: Nadya Primak Date: Tue, 12 Dec 2023 16:35:36 -0500 Subject: [PATCH 1/5] first sections --- .../{green_icon.html => check_icon.html} | 3 +- _pages/user-experience/getting-started.md | 12 ++-- _pages/user-experience/sign-in-sign-out.md | 70 ++++++++++++++++++- 3 files changed, 77 insertions(+), 8 deletions(-) rename _includes/{green_icon.html => check_icon.html} (85%) diff --git a/_includes/green_icon.html b/_includes/check_icon.html similarity index 85% rename from _includes/green_icon.html rename to _includes/check_icon.html index 72bb070e..a034a7e0 100644 --- a/_includes/green_icon.html +++ b/_includes/check_icon.html @@ -1,8 +1,9 @@ {% comment %} include +- style - content {% endcomment %} -
+
diff --git a/_pages/user-experience/getting-started.md b/_pages/user-experience/getting-started.md index 1b225f66..b6fe0b00 100644 --- a/_pages/user-experience/getting-started.md +++ b/_pages/user-experience/getting-started.md @@ -52,13 +52,13 @@ Optional: [Add FAQ content to inform users about Login.gov]({{site.baseurl}}/use
  • - {% include green_icon.html content=button_ux %} + {% include check_icon.html content=button_ux style="text-green" %}
  • - {% include green_icon.html content=failure_to_proof_ux %} + {% include check_icon.html content=failure_to_proof_ux style="text-green" %}
  • - {% include green_icon.html content=faq_ux %} + {% include check_icon.html content=faq_ux style="text-green" %}
@@ -66,13 +66,13 @@ Optional: [Add FAQ content to inform users about Login.gov]({{site.baseurl}}/use
  • - {% include green_icon.html content=logo_ux %} + {% include check_icon.html content=logo_ux style="text-green" %}
  • - {% include green_icon.html content=cancel_url_ux %} + {% include check_icon.html content=cancel_url_ux style="text-green" %}
  • - {% include green_icon.html content=dashboard_failure_to_proof %} + {% include check_icon.html content=dashboard_failure_to_proof style="text-green" %}
diff --git a/_pages/user-experience/sign-in-sign-out.md b/_pages/user-experience/sign-in-sign-out.md index f9591fcb..94133c61 100644 --- a/_pages/user-experience/sign-in-sign-out.md +++ b/_pages/user-experience/sign-in-sign-out.md @@ -20,4 +20,72 @@ sidenav: --- -## Sign in Sign Out \ No newline at end of file +## Design your application's sign-in and sign-out buttons + +The sign-in button on your application initiates authentication with Login.gov, and takes users to the initial screen on Login.gov to sign in or create an account. + +### Requirements for all buttons + +{% capture do_button_label %} +Do use “Sign in” or “Sign in with Login.gov” as the label for the sign-in button. This is consistent with calls-to-action across Login.gov and in our user support documentation. If most users of your application do not have Login.gov accounts, you may also use the label “Get started with Login.gov”. +{% endcapture %} +{% capture do_state_styling %} +Do ensure that all buttons have default, hover, active, and focus state styling and required color contrast. The [U.S. Web Design System](https://designsystem.digital.gov/components/button/) offers code examples of button state styling and accessibility guidelines. +{% endcapture %} +{% capture do_font_styling %} +Do use [sans serif](https://designsystem.digital.gov/utilities/font-size-and-family/) and neutral fonts for your sign in button. +{% endcapture %} +{% capture dont_external_link %} +Don't use the [external-link icon](https://fontawesome.com/icons/external-link?style=solid/) that might suggest a link to another website and confuse users, especially those using screen readers. +{% endcapture %} +{% capture dont_icon %} +Don't use an icon instead of a text label. Buttons may include the Login.gov logo or shield in addition to a text label; any logos or images require alt text (see [button and logo styling]({{site.baseurl}}/user-experience/sign-in-sign-out/#button-and-logo-styling)). +{% endcapture %} + +
    +
  • + {% include check_icon.html content=do_button_label style="text-green" %} +
    • +
  • + {% include check_icon.html content=do_state_styling style="text-green" %} +
    • +
  • + {% include check_icon.html content=do_font_styling style="text-green" %} +
    • +
  • + {% include check_icon.html content=dont_external_link style="text-red" %} +
    • +
  • + {% include check_icon.html content=dont_icon style="text-red" %} +
    • +
+ + +### Button and logo styling +{% capture do_button_height %} +Do use one of the two button heights provided. +{% endcapture %} +{% capture do_button_center %} +Do center the label and Login.gov logo within the button. Minimum left and right padding is 1.25 rem or 20 px. +{% endcapture %} +{% capture do_contrast %} +Do provide sufficient contrast between the button and your applications’ background color. Use the dark blue button on light backgrounds and the light blue button on dark backgrounds. +{% endcapture %} +{% capture do_button_white %} +Do use the white button with an outline on light backgrounds that don’t provide sufficient contrast to use the light blue button. +{% endcapture %} + +
    +
  • + {% include check_icon.html content=do_button_height style="text-green" %} +
    • +
  • + {% include check_icon.html content=do_button_center style="text-green" %} +
    • +
  • + {% include check_icon.html content=do_contrast style="text-green" %} +
    • +
  • + {% include check_icon.html content=do_button_white style="text-green" %} +
    • +
\ No newline at end of file From 95c5b0e9c07aca9c315c1e0840ba07700799bf6e Mon Sep 17 00:00:00 2001 From: Nadya Primak Date: Fri, 12 Jan 2024 16:21:01 -0500 Subject: [PATCH 2/5] functional with updated text and lookbook embed --- _includes/green_icon.html | 10 ++ _pages/user-experience/sign-in-sign-out.md | 135 ++++++++++++++++++++- assets/img/global-sign-in.png | Bin 0 -> 23572 bytes assets/img/logo-white.svg | 1 + assets/img/logo.svg | 1 + assets/img/sign-in-button.svg | 28 +++++ assets/img/sign-in-menu.svg | 15 +++ assets/img/sign-out-button.png | Bin 0 -> 4306 bytes assets/img/sign-out-menu.png | Bin 0 -> 5066 bytes assets/scss/main.css.scss | 66 ++++++---- 10 files changed, 227 insertions(+), 29 deletions(-) create mode 100644 _includes/green_icon.html create mode 100644 assets/img/global-sign-in.png create mode 100644 assets/img/logo-white.svg create mode 100644 assets/img/logo.svg create mode 100644 assets/img/sign-in-button.svg create mode 100644 assets/img/sign-in-menu.svg create mode 100644 assets/img/sign-out-button.png create mode 100644 assets/img/sign-out-menu.png diff --git a/_includes/green_icon.html b/_includes/green_icon.html new file mode 100644 index 00000000..72bb070e --- /dev/null +++ b/_includes/green_icon.html @@ -0,0 +1,10 @@ +{% comment %} +include +- content +{% endcomment %} +
+ +
+
+{{ include.content | markdownify }} +
\ No newline at end of file diff --git a/_pages/user-experience/sign-in-sign-out.md b/_pages/user-experience/sign-in-sign-out.md index 94133c61..6d131213 100644 --- a/_pages/user-experience/sign-in-sign-out.md +++ b/_pages/user-experience/sign-in-sign-out.md @@ -42,7 +42,8 @@ Don't use the [external-link icon](https://fontawesome.com/icons/external-link?s Don't use an icon instead of a text label. Buttons may include the Login.gov logo or shield in addition to a text label; any logos or images require alt text (see [button and logo styling]({{site.baseurl}}/user-experience/sign-in-sign-out/#button-and-logo-styling)). {% endcapture %} -
    + +
    • {% include check_icon.html content=do_button_label style="text-green" %}
      • @@ -75,7 +76,7 @@ Do provide sufficient contrast between the button and your applications’ backg Do use the white button with an outline on light backgrounds that don’t provide sufficient contrast to use the light blue button. {% endcapture %} -
        +
        • {% include check_icon.html content=do_button_height style="text-green" %}
          • @@ -88,4 +89,132 @@ Do use the white button with an outline on light backgrounds that don’t provid
        • {% include check_icon.html content=do_button_white style="text-green" %}
          • -
        \ No newline at end of file +
      + +
      + +
      + +### Login.gov logos + +
      +dark blue logo +dark blue logo +
      +
      +Download dark blue logo| +Download white logo +
      + +### Global sign in button + +When using Login.gov to authenticate your users, we recommend implementing one official button using “Sign in” as the call-to-action. Users are familiar with the sign-in button placed on the top right of website headers. Placing your sign-in button in this location takes advantage of this common pattern and can be carried throughout the entire application. We also recommend placing the global sign-in button at the top on mobile devices, either within or next to the mobile menu. + +
      +
      + An example agency website header with the button "Sign in with Login.gov" at top right +
      + +
      +
      + Do: Place a sign-in button at the top right of website headers. +
      +
      +
      +
      +
      + An example agency website header with two buttons labeled "Menu options" and "Sign in" at top right" +
      + +
      +
      + Do: Use your own site’s global navigation styling if “Sign in” appears within a list of menu options in the header. +
      +
      +
      + +After a user signs in, a sign-out button labeled “Sign out” replaces the sign-in button on the website header. + +### Optional: Sign-in options on a page + +Some agency partners decide to implement a sign-in page on their application prior to redirecting their users to Login.gov, especially to present multiple sign-in options. + +
      + An example agency website page with the heading "Sign in" and three full width buttons labeled "Sign in with Login.gov" and "Sign in with [alternate provider]" +
      + +
      +
      + Do: Design sign-in options that are equal in size. Stacked, solid-colored buttons work best because the stacking supports responsive layouts and mobile views. +
      +
      + +{% capture do_button_styling %} +Do use Login.gov’s preferred button style or primary button styling, since signing in is the main action and helps your users know that it is the next step in the process. +{% endcapture %} +{% capture do_sign_in_label %} +Do use the label “Sign in with Login.gov” to differentiate from other sign-in options you may have on your application. +{% endcapture %} +{% capture do_equal_size %} +Do design sign-in options that are uniform in width and height. Consistency and uniform sizes helps users easily scan information. +{% endcapture %} +{% capture do_list_style %} +Do style each button in a list with a different background color and center-justify the text in the buttons.  +{% endcapture %} +{% capture dont_extra_text %} +Don’t add too much text or imagery above the sign-in button that might push your users’ primary action out of view, especially on mobile devices. +{% endcapture %} + +
        +
      • + {% include check_icon.html content=do_button_styling style="text-green" %} +
        • +
      • + {% include check_icon.html content=do_sign_in_label style="text-green" %} +
        • +
      • + {% include check_icon.html content=do_equal_size style="text-green" %} +
        • +
      • + {% include check_icon.html content=do_list_style style="text-red" %} +
        • +
      • + {% include check_icon.html content=dont_extra_text style="text-red" %} +
        • +
      + +### Sign out + +Users need a clearly marked button to sign out after a user has signed in to your application. This button replaces the Sign-in button on the interface, preferably in the same location. The Sign-out button style should match the Sign-in button. + +
      +
      + An example agency website header with the button "Sign out" at top right +
      +
      + +
      + An example agency website header with two buttons labeled "Menu options" and "Sign out" at top right +
      + +
      +
      + Do: The Sign-out button style should match the Sign-in button. +
      +
      + +[Next step: Add your agency logo]({{ site.baseurl }}/user-experience/agency-logo/) \ No newline at end of file diff --git a/assets/img/global-sign-in.png b/assets/img/global-sign-in.png new file mode 100644 index 0000000000000000000000000000000000000000..95cc0444cb8820f9ba4d7931959b4e20d55dd55e GIT binary patch literal 23572 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
      E1Z z<mRI{B zr-NPoJZF_6Gn{?ggG{PLtl#7OEKyGgO0y9eF3k0?PZ`dNPxJK2)2GEV(O*yQx32p7 z+;gw<7wJ42-}hiIhmDCb(9__duI9nftDvinVw?5JddH}6Yo>Ke^Uxq?F%s3_80BX{ zcwbJcgTXk-$_fEe->wge=7nUNXr~XHKa-GhHqwl)j?6gZ1}IY;-uv%29$&0Ub?NH`&wu?0%U|?A&p?FU%bSQoQe-g^DNk#((NH(-L*l$ zI*~u!FD$Shn8!4=N>jzWWG@N4%JJns(}{cAUC)|&(Bbj(^P;dN(=qK@lXps9rtTUY zOgReTgx?ep8ElhwgYCM~-C?5dZx&^t*Pk7uliUKs#N1W^+ayHyi$$O9F;%G101-dU z!a+Byc*wV^`CYYuiwajL&rPTqo5f+~mMY&ou?*;#WsQ!NJ@MW-G~F@>o0sX$+%tNhk$^#y(T zPZN>f(HJqk2bQ(b_53tFb4oZP8~-dA5=k)U4o{FriukvK>Jjop=0V+<~a(}_5 zAgcawG-G`e18#X(MP2jRKXj~3%Ysxdx@<4h(q*WmgbV`OReas1QOlyh z&!XoeBm*wHBFRZuj_EUk?K4{UhRHw3=Y)1INibdt@r5`W#N2$gJo%k_=Wv{L1k40Y zxp4E03%@^BwI-YVQz^LYvp?oz0pMUrk@arAztJ^ioUEvH^s|I2|AO}Dnx_1ac7ro1 zJi0-9s+*quY|AMUY)KE4>qRx{zO@^4Bz0CA;7GTy4ngS|d2Ait2kX`02maxRH=K

      >YvMdOGuq>2s9g$q-e#J^ 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 \ No newline at end of file diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 00000000..d6a1abd9 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/sign-in-button.svg b/assets/img/sign-in-button.svg new file mode 100644 index 00000000..8cae346d --- /dev/null +++ b/assets/img/sign-in-button.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/sign-in-menu.svg b/assets/img/sign-in-menu.svg new file mode 100644 index 00000000..a30960f7 --- /dev/null +++ b/assets/img/sign-in-menu.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/img/sign-out-button.png b/assets/img/sign-out-button.png new file mode 100644 index 0000000000000000000000000000000000000000..5e5425fdd3b5f3215ef920387e7d9c68300dcaa8 GIT binary patch literal 4306 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 BJXQbz literal 0 HcmV?d00001 diff --git a/assets/img/sign-out-menu.png b/assets/img/sign-out-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..9a474942c29db8ce2e85d50ab3a7b09140dcf75d GIT binary patch literal 5066 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 B&i4QS literal 0 HcmV?d00001 diff --git a/assets/scss/main.css.scss b/assets/scss/main.css.scss index f0eacbb5..1edf5a6f 100644 --- a/assets/scss/main.css.scss +++ b/assets/scss/main.css.scss @@ -87,32 +87,6 @@ button.code-button:hover { @include u-font-family("mono"); } - -@media (min-width: 1024px) { - - .markdown > .highlighter-rouge > .highlight > pre { - overflow-wrap: break-word; - text-wrap: wrap; - word-break: inherit; - white-space-collapse: preserve-breaks; - } - - .hero { - max-width: 60rem; - margin-left: auto; - margin-right: auto; - } - - .usa-navbar.usa-navbar__full-width { - max-width: 100%; - } - - .usa-header--extended .usa-nav__inner.usa-nav__inner__no-margin { - margin-left: 0px; - max-width: 100%; - } -} - .usa-layout-docs__sidenav { top: 2rem; } @@ -149,6 +123,24 @@ button.code-button:hover { max-height: 480px; } +.lookbook-embed-container { + position: relative; + overflow: hidden; + width: 100%; + height: 400px; +} + +.lookbook-embed { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; +} + + .return-to-top-section { position: absolute; height: 100%; @@ -196,4 +188,26 @@ button.code-button:hover { margin-top: -4rem; bottom: -15rem; } + + .markdown > .highlighter-rouge > .highlight > pre { + overflow-wrap: break-word; + text-wrap: wrap; + word-break: inherit; + white-space-collapse: preserve-breaks; + } + + .hero { + max-width: 60rem; + margin-left: auto; + margin-right: auto; + } + + .usa-navbar.usa-navbar__full-width { + max-width: 100%; + } + + .usa-header--extended .usa-nav__inner.usa-nav__inner__no-margin { + margin-left: 0px; + max-width: 100%; + } } From 4889ea42c4ba786f4bf73685c7bc55f2d755b2c8 Mon Sep 17 00:00:00 2001 From: Nadya Primak Date: Tue, 16 Jan 2024 09:31:59 -0500 Subject: [PATCH 3/5] remove old guidelines and update redirect urls --- _pages/design-guidelines.md | 142 ---------------------- _pages/user-experience/getting-started.md | 3 + 2 files changed, 3 insertions(+), 142 deletions(-) delete mode 100644 _pages/design-guidelines.md diff --git a/_pages/design-guidelines.md b/_pages/design-guidelines.md deleted file mode 100644 index bc206ece..00000000 --- a/_pages/design-guidelines.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: User Experience -lead: > - Integrate with Login.gov in a user-friendly manner. -sidenav: - - text: User Experience - href: "#overview" - - text: Sign-in guidelines - href: "#sign-in-guidelines" - - text: Buttons - href: "#buttons" - - text: Copy guidelines - href: "#copy-guidelines" - - text: Agency logos - href: "#agency-logo-guidelines" - - text: Use of Login.gov logo - href: "#login-logo" - ---- - -## Overview -In order to create a great user experience with your Login.gov integration, we have some suggested integration guidelines that you may use on your site. - -## Sign-in guidelines -Apply the following standards for your Sign-in button to create a simple and consistent experience for users. - -### Single sign-in option -When using Login.gov to authenticate your users, we recommend implementing one official button using “Sign in” as the call-to-action. The styling and placement of the Sign-in button supports the recognition of the user interface component and helps your users know that this is the next step in the process. This single button enables the findability of both the Sign-in and Sign-up tasks on the part of the flow Login.gov owns once an application externalizes authentication. After a user signs in, a Sign- out button labeled “Sign out” replaces the Sign-in button on the interface. - -#### Placement -Users are familiar with the Sign-in button placed on the top right of the website headers. Placing your Sign-in button in this location of your site’s header takes advantage of the familiarity with this common pattern and can be carried throughout the entire site/app. - - -#### Buttons -The Sign-in button should use your primary or important button color. Since it is a primary action, it is recommended to use a solid button instead of text links, or text and icon combinations. Buttons with a solid colored background help your users know that this is the next step in the process. This styling also clearly shows the button’s clickable target area because of the padding around the label that creates a larger tappable area. This also supports mobile users. Avoid using outline-only buttons since they do not communicate a primary action. - -Additionally the Sign-out button style should match the Sign-in button. - -The [U.S. Web Design System](https://designsystem.digital.gov/components/button/) offers code examples of default, static, hover and active button states styling and accessibility guidelines. - -#### Icons -The Sign-in button may also use icon, but it should not in exclude the use of a label. The icon should adhere to accessibility alt-tag guidelines. - -We recommend using the [Sign-in icon](https://fontawesome.com/icons/sign-in?style=solid) from the [Font Awesome](https://fontawesome.com/) icon set. This icon is frequently used to suggest an entry into a system. Be careful **not** to use the [external-link icon](https://fontawesome.com/icons/external-link?style=solid) that might suggest a link to another website and confuse users, especially those using screen readers. The order of icon or label first in the button itself is flexible to match your site’s design. - -#### Labeling -“Sign in” is the preferred label for the Sign-in button. This is consistent with the Sign-in call-to-actions in headlines, links, and buttons on Login.gov’s screens and in our end user support documentation. - -#### Linking -The Sign-in button link initiates authentication with Login.gov. This starts the Login.gov experience where the user signs in or creates an account. - -#### Color -The [U.S. Web Design System](https://designsystem.digital.gov/components/button/) offers some default button styles that use a solid colored background for the button implemented with no border color and white colored text. This styling creates a strong, easy-to-read contrast to meet Section 508 guidelines for using colors that contrast well with white text and work with your site’s palette. - -We recommend you use the primary action color from your site’s design system or style guide for the Sign-in button. - -#### Font -Sans serif and neutral typefaces are recommended for your Sign in button. A heavier than normal font weight is recommended for enhanced visual hierarchy. - -### Multiple sign-in options -Sometimes agencies have more than one way users can sign in. Although this is not the preferred experience, here are some suggestions to accommodate this scenario. - -### Global sign-in button -Consider maintaining a single Sign-in button on your site’s header, placing it in the top right corner. When tapped, the button takes the user to a screen with the multiple Sign-in button options. - -#### Multiple Sign-in options in one screen -Ensure that the screen with multiple Sign-in options has the following elements: -- The agency's or app’s logo -- A title guiding the user to the purpose of the page, for example “Sign in to [name of your app]” -- Individual buttons for each Sign-in option -- The site’s footer - -Take into account common patterns to support usability. We recommend that links to all Sign-in options be equal in size. Stacked, solid colored buttons work best because the stacking supports responsive layouts and mobile views. Consistency and equal sizes also supports scanning of information, a common way users consume content. And it minimizes the cognitive load for users so they can focus on evaluating the options as opposed to evaluating the differences of the user interface controls. - -From top to bottom, this is the order we encourage for multiple sign in options listed under the title: -1. Custom text and notifications, including instructions -2. Email input field, if using, followed by password input field -3. Checkbox to remember device, if using -4. A link to recover password of email password combo -5. Sign-in button -6. The label “Or” to separate the email and password boxes from the the Sign-in buttons -7. Sign-in buttons for each option labeled “Sign in with [name of authentication option]” - -Style each button with a different background color. For Login.gov we recommend using the color hexadecimal value of #0071bb. Center-justify the text inthe button. Follow the same font recommendations as the single button option. - -### Sign-out -Users need a clearly marked button to sign out. After a user has signed in to your app, support the sign out interaction with a button labeled “Sign out”. This button replaces the Sign-in button on the interface, preferably in the same location. The [Sign-out icon](https://fontawesome.com/icons/sign-out?style=solid) from Font Awesome is suggested for the Sign-out button. - -## Copy guidelines -When you first integrate with Login.gov you may want to indicate to your users that your application uses Login.gov for authentication or proofing. If you decide to do so, please use the following language: - -### What is Login.gov? -Login.gov is a service that offers secure and private online access to government programs, such as federal benefits, services and applications. With a Login.gov account, you can sign into multiple government websites with the same email address and password. - -### Why is `YOUR APPLICATION` using Login.gov? -Login.gov uses two-factor authentication, and stronger passwords, that meet new National Institute of Standards and Technology requirements for secure validation and verification. By using Login.gov, you’ll get an extra layer of security to help protect your account against password compromises. - -## Agency logo guidelines -We will publish your agency logo on Login.gov to help users understand that partnership between the services. Please follow these guidelines when submitting a logo: - -Agency logo guidelines to be displayed on Login.gov- 171px x 40px - - -### Contrast and background -**Logos should be high contrast on a transparent background** - -Agency logo guidelines should have high contrast - - -### File formats accepted -You will be able to use a `.png` or `.svg` logo. -#### png -Provide a file that meets these requirements - - - - - - - - - - - - - - - - - - - - -
      PNG file requirements
      ResolutionMax widthMax heightDots per square inch (dpi)File name
      2x171px40px@144dpimy-agency-logo.png
      - -### svg -**Export .svg files** -set **Styling** using **Presentations Attributes** - -## Login logo - -Login.gov logo diff --git a/_pages/user-experience/getting-started.md b/_pages/user-experience/getting-started.md index b6fe0b00..075f2ff9 100644 --- a/_pages/user-experience/getting-started.md +++ b/_pages/user-experience/getting-started.md @@ -2,6 +2,9 @@ title: User Experience lead: > Create a simple and consistent experience for your Login.gov users +redirect_from: + - /user-experience/ + - /design-guidelines/ sidenav: - text: Getting started href: "user-experience/getting-started/" From bfdb4742e7ee4eb12174568ec65a9687df2de955 Mon Sep 17 00:00:00 2001 From: Nadya Primak Date: Tue, 16 Jan 2024 11:14:35 -0500 Subject: [PATCH 4/5] update yaml navigation --- _data/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_data/nav.yml b/_data/nav.yml index d46e246d..f15af844 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -10,7 +10,7 @@ primary: - text: Attributes href: /attributes/ - text: User Experience - href: /design-guidelines/ + href: /user-experience/getting-started/ - text: Testing href: /testing/ - text: Production From c9e86daaa7ec4ee0e6065bb5e22f53e5a84bbdc6 Mon Sep 17 00:00:00 2001 From: Nadya Primak Date: Tue, 16 Jan 2024 15:18:54 -0500 Subject: [PATCH 5/5] fix wrong icon in list item --- _pages/user-experience/sign-in-sign-out.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_pages/user-experience/sign-in-sign-out.md b/_pages/user-experience/sign-in-sign-out.md index 6d131213..1e1fdc52 100644 --- a/_pages/user-experience/sign-in-sign-out.md +++ b/_pages/user-experience/sign-in-sign-out.md @@ -186,7 +186,7 @@ Don’t add too much text or imagery above the sign-in button that might push yo {% include check_icon.html content=do_equal_size style="text-green" %}

    • - {% include check_icon.html content=do_list_style style="text-red" %} + {% include check_icon.html content=do_list_style style="text-green" %}
    • {% include check_icon.html content=dont_extra_text style="text-red" %}