design-system/index.html at gh-pages · FADHATECHNOLOGY/design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
---
permalink: /
layout: homepage
title: USAJOBS Design System
---

<a class="usa-skipnav" href="#main-content">Skip to main content</a>

<header class="usajobs-site-header" role="banner" aria-label="header">
  <!-- Gov banner BEGIN -->
  <div class="usa-banner">
    <div class="usa-accordion">
      <header class="usa-banner-header">
        <div class="usa-grid usa-banner-inner usajobs-nav__banner-inner">
        <img src="{{ site.baseurl }}/img/favicons/favicon-57.png" alt="U.S. flag">
        <p>An official website of the United States government</p>
        <button class="usa-accordion-button usa-banner-button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner-button-text">Here's how you know</span>
        </button>
        </div>
      </header>
      <div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner">
        <div class="usa-banner-guidance-gov usa-width-one-half">
          <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/img/icon-dot-gov.svg" alt="Dot gov">
          <div class="usa-media_block-body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites always use a .gov or .mil domain. Before sharing sensitive information online, make sure you’re on a .gov or .mil site by inspecting your browser’s address (or “location”) bar.
              <br />
              <br />
              There are some exceptions to this rule. During the USAJOBS application process, you may be sent to an agency specific application system that DOES NOT contain a .mil or .gov. Rest assured, if you apply to any job through USAJOBS.gov your information is safe and secure.
            </p>
          </div>
        </div>
        <div class="usa-banner-guidance-ssl usa-width-one-half">
          <img class="usa-banner-icon usa-media_block-img" src="{{ site.baseurl }}/img/icon-https.svg" alt="SSL">
          <div class="usa-media_block-body">
            <p>This site is also protected by an SSL (Secure Sockets Layer) certificate that’s been signed by the U.S. government. The <strong>https://</strong> means all transmitted data is encrypted  — in other words, any information or browsing history that you provide is transmitted securely.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Gov banner END -->
  <nav class="usajobs-nav" role="navigation" aria-label="main navigation" data-object="nav">
    <div class="usajobs-nav__body">
      <div class="usajobs-nav__header-container">
        <div class="usajobs-nav__header">
          <div class="usajobs-nav__brand-container">
            <a class="usajobs-nav__brand" href="https://www.usajobs.gov/">
              <span class="logo" title="USAJOBS logo"></span>
            </a>
          </div>
          <div class="usajobs-nav__menu" id="usajobs-menu">
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

<div class="usajobs-ds-home-banner">
  <div class="usajobs-ds-home-banner__body">
    <h1 class="usajobs-ds-home-banner__title" id="title">
      USAJOBS Design System
    </h1>
    <p class="usajobs-ds-home-banner__desc">
      The central source for the style and interaction guidelines for the next generation of USAJOBS.
    </p>
    <ul class="usajobs-ds-home-banner__actions">
      <li>
        <a class="usa-button usa-button-big usa-button-secondary" href="{{ site.baseurl }}/getting-started/">
          View the Design System
        </a>
      </li>
      <li>
        <a class="usa-button usa-button-big usa-button-outline-inverse" href="{{ site.repository.url }}">
          View on GitHub
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="usajobs-shell">
  <section class="usajobs-content-gutter">
    <h2>Creating the next generation of USAJOBS</h2>
    <p>This design system represents the start of the next generation of USAJOBS. A design system describes the base visual language, using UI elements and style guidelines, upon which the site can be built. It will also include examples and usage guidelines of new components.</p>

    <h3>Rapid prototyping</h3>
    <p>Because the design system is brand new it also acts as a prototyping toolkit. This allows us to quickly explore new ideas in code and iterate on our designs. New projects within USAJOBS will leverage and potentially extend the design system further.</p>

    <h3>Based on the U.S. Web Design Standards</h3>
    <p>The USAJOBS design system starts with the <a class="usajobs-permalink" href="https://standards.usa.gov/">U.S. Web Design Standards</a> and extends them to meet the needs of the USAJOBS next generation project. This repo allows the team working on USAJOBS to:</p>

    <ol>
      <li>Document where we have intentionally deviated from an existing guildeline in the U.S. Web Design Standards and provide a platform for contributing back to those standards.</li>
      <li>Document where we have unintentionally deviated from an existing guideline in the U.S. Web Design Standards and want to track getting back inline with the standards.</li>
      <li>Design new components or elements that are not yet a part of the U.S. Web Design Standards. These components or elements may or may not be appropriate to contribute back to the standards given their potential for reuse elsewhere.</li>
    </ol>
  </section>

  <div class="usajobs-ds-home-research-pillars">
    <h2 class="usajobs-ds-home-research-pillars__title">
      Design Pillars: Grounded in research
    </h2>
    <p class="usajobs-ds-home-research-pillars__description">
      USAJOBS joined forces with OPM’s Innovation Lab to conduct qualitative user interviews with applicants and HR specialists. From the research, we developed 6 design pillars to keep in mind as we improve <a href="https://www.usajobs.gov">usajobs.gov</a>.
    </p>
    <ul class="usajobs-ds-home-research-pillars__list">
      <li class="usajobs-ds-home-research-pillars__pillar p1">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p1">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 1: Helping Hands
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Clearly guide applicants to the information they need to make confident job search and application decisions.
          </p>
        </div>
      </li>
      <li class="usajobs-ds-home-research-pillars__pillar p2">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p2">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 2: Keep It Simple
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Set clear application expectations and present a unified and simplified application process.
          </p>
        </div>
      </li>
      <li class="usajobs-ds-home-research-pillars__pillar p3">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p3">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 3: Where's Waldo
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Provide opportunities for applicants to showcase their unique qualities.
          </p>
        </div>
      </li>
      <li class="usajobs-ds-home-research-pillars__pillar p4">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p4">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 4: Speak my Language
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Convey information in a language that every applicant can understand.
          </p>
        </div>
      </li>
      <li class="usajobs-ds-home-research-pillars__pillar p5">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p5">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 5: One Stop Shop
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Serve as the most trusted resource for Federal hiring information.
          </p>
        </div>
      </li>
      <li class="usajobs-ds-home-research-pillars__pillar p6">
        <div class="usajobs-ds-home-research-pillars__figure">
          <div class="usajobs-ds-home-research-pillars__icon p6">
            <i class="fa fa-compass"></i>
          </div>
        </div>
        <div class="usajobs-ds-home-research-pillars__body">
          <h4 class="usajobs-ds-home-research-pillars__pillar-title">
            Design Pillar 6: Looks Matter
          </h4>
          <p class="usajobs-ds-home-research-pillars__pillar-desc">
            Provide a thoughtfully crafted experience that helps users accomplish their intended goals.
          </p>
        </div>
      </li>
    </ul>
  </div>
</div>

<footer class="usa-footer usa-footer-big usajobs-footer--v1" role="contentinfo" aria-label="footer" data-object="footer">
  <div class="usa-grid usa-footer-return-to-top">
    <a href="#title">Return to top</a>
  </div>
  <div class="usa-footer-secondary_section usa-footer-big-secondary-section">
    <div class="usa-grid">
      <div class="usa-footer-logo usa-width-one-half">
        <span class="logo"></span>
        <p class="usajobs-footer--v1__note">
          USAJOBS is a <a href="https://www.opm.gov">United States Office of Personnel Management</a> website.
        </p>
      </div>
    </div>
  </div>
</footer>