\ No newline at end of file
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:
-
-
-
-
-### Contrast and background
-**Logos should be high contrast on a transparent background**
-
-
-
-
-### 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
-
-
-
Resolution
-
Max width
-
Max height
-
Dots per square inch (dpi)
-
File name
-
-
-
-
-
2x
-
171px
-
40px
-
@144dpi
-
my-agency-logo.png
-
-
-
-
-### svg
-**Export .svg files**
-set **Styling** using **Presentations Attributes**
-
-## Login logo
-
-
diff --git a/_pages/user-experience/getting-started.md b/_pages/user-experience/getting-started.md
index 1b225f66..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/"
@@ -52,13 +55,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 +69,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..1e1fdc52 100644
--- a/_pages/user-experience/sign-in-sign-out.md
+++ b/_pages/user-experience/sign-in-sign-out.md
@@ -20,4 +20,201 @@ 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" %}
+
+
+### 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.
+
+
+
+
+
+
+
+
+ Do: Place a sign-in button at the top right of website headers.
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+ 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-green" %}
+
+
+ {% 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Do: The Sign-out button style should match the Sign-in button.
+
+
+
-
-
-### Contrast and background
-**Logos should be high contrast on a transparent background**
-
-
-
-
-### File formats accepted
-You will be able to use a `.png` or `.svg` logo.
-#### png
-Provide a file that meets these requirements
-
diff --git a/_pages/user-experience/getting-started.md b/_pages/user-experience/getting-started.md
index 1b225f66..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/"
@@ -52,13 +55,13 @@ Optional: [Add FAQ content to inform users about Login.gov]({{site.baseurl}}/use
@@ -66,13 +69,13 @@ Optional: [Add FAQ content to inform users about Login.gov]({{site.baseurl}}/use
diff --git a/_pages/user-experience/sign-in-sign-out.md b/_pages/user-experience/sign-in-sign-out.md
index f9591fcb..1e1fdc52 100644
--- a/_pages/user-experience/sign-in-sign-out.md
+++ b/_pages/user-experience/sign-in-sign-out.md
@@ -20,4 +20,201 @@ 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 %}
+
+
+
+
+
+### 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 %}
+
+
+
+
+
+### Login.gov logos
+
+
+ 
+ ![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]"]({{ site.baseurl }}/assets/img/global-sign-in.png)
+ 
+ 
+