GoalDetails

Usage

Purpose of this style guide.

<ul>
  <li>Incorporate the highest accessibility standards</li>
  <li>Define intuitive User Interface components</li>
  <li>Produce a consistent visual language across products</li>
<li>Build off city’s current branding</li>
</ul>

Incorporate the highest accessibility standards
Define intuitive User Interface components
Produce a consistent visual language across products
Build off city’s current branding

Why Inclusive DesignDetails

Usage

Accessibility Principles

<blockquote>
  “Everyone should be able to access and enjoy the web.”
-Google
</blockquote>
<p>
1 billion people with disabilities
Making technology inclusive not only ensures equal access to the roughly 1 billion people in the world with disabilities, but also benefits people without disabilities by allowing them to customize their experiences.
</p>
<h1>Accessibility for All</h1>
<img src="/long-beach-styleguide/images/example1.png">
<img src="/long-beach-styleguide/images/example2.png">
<h1>Underrepresented Users</h1>
<img src="/long-beach-styleguide/images/underrepresented.png">

“Everyone should be able to access and enjoy the web.” -Google

1 billion people with disabilities Making technology inclusive not only ensures equal access to the roughly 1 billion people in the world with disabilities, but also benefits people without disabilities by allowing them to customize their experiences.

Accessibility for All

Underrepresented Users

Digital Mobile FirstDetails

Usage

Why design mobile first

<h1>Why Design Mobile First?</h1>
<ul>
  <li>Forces content and feature prioritization and therefore clearer hierarchy</li>
<li>Users are on-the-go and need mobile tech to go with them</li>
<li>A way for users to make good use of their 4th floor wait time</li>
<li>40% of traffic to the City’s website is from mobile devices.</li>
<li>Obama phones: free phones for low-income users. This means often low income users have access to mobile but not desktop</li>
<li>Free Wifi at the library</li>
<li>Trend of discontinuing home internet for mobile plan</li>
</ul>
<h1>Responsive Design: Mobile -> Desktop</h1>
<img src="/long-beach-styleguide/images/responsive.png">

Why Design Mobile First?

Forces content and feature prioritization and therefore clearer hierarchy
Users are on-the-go and need mobile tech to go with them
A way for users to make good use of their 4th floor wait time
40% of traffic to the City’s website is from mobile devices.
Obama phones: free phones for low-income users. This means often low income users have access to mobile but not desktop
Free Wifi at the library
Trend of discontinuing home internet for mobile plan

Responsive Design: Mobile -> Desktop

Web First, Print SecondDetails

Usage

Why it is important to have the gospel of truth be in web form first

<h1>Web / Digital First -> Print Second</h1>
<ul>Why housing information on PDFs in websites is not ideal
<li>Pdfs are not search friendly</li>
<li>Pdfs can't translate via google translate</li>
<li>Pdfs are not screenreader friendly</li>
<li>Confusing wayfinding to have content split between web pages and pdfs </li>
<li>Web is easier to update as information changes</li>
<li>Web materials can be accessed anywhere at anytime, while for print you have to be in a specific place physically to access the materials. </li>
</ul>

Web / Digital First -> Print Second

Pdfs are not search friendly
Pdfs can't translate via google translate
Pdfs are not screenreader friendly
Confusing wayfinding to have content split between web pages and pdfs
Web is easier to update as information changes
Web materials can be accessed anywhere at anytime, while for print you have to be in a specific place physically to access the materials.

Reading Grade LevelDetails

Usage

Accessible content

<ul>Why the Reading Grade Level of your content is important to consider
  <li>8th grade is the average reading grade level in America. </li>
  <li>The simpler the sentence structure, the better the translation will be through the Google Translate algorithm.</li>
<ul>
<p>  To have public facing written material be accessible to the widest population, we recommend using the free service <a href="http://www.hemingwayapp.com/">HemingwayApp.com</a>
  You can copy your text into the website and it will identify the reading grade level as well as specific ways to make it more accessible.
</p>

8th grade is the average reading grade level in America.
The simpler the sentence structure, the better the translation will be through the Google Translate algorithm.

To have public facing written material be accessible to the widest population, we recommend using the free service HemingwayApp.com You can copy your text into the website and it will identify the reading grade level as well as specific ways to make it more accessible.

ColorsDetails

Usage

Our main color palette.

<h1>Color Palatte</h1>
<ul class="sg-colors">
  <p>WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. <br>Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.</p>
  <li>
    <div class="sg-swatch bg-darkest_blue"></div>
    <div class="sg-label">
      #08508A<br>
      AAA compliant<br>
      AAA compliant<br>
      Grow Section<br>
      $darkest_blue</div>
  </li>
  <li>
    <div class="sg-swatch bg-dark_blue"></div>
    <div class="sg-label">
      #136194<br>
      AA compliant<br>
      AAA compliant over 14pt (18px)<br>
      Apply Section<br>
      City Provided<br>
      $dark_blue</div>
  </li>
  <li>
    <div class="sg-swatch bg-medium_dark_blue"></div>
    <div class="sg-label">#167FAB<br>
      AA compliant<br>
      AAA compliant over 14pt (18px)<br>
      Plan Section<br>
      $medium_dark_blue</div>
  </li>
  <li>
    <div class="sg-swatch bg-long_beach_blue"></div>
    <div class="sg-label">#17B9D9<br>
      City Provided<br>
      $long_beach_blue</div>
  </li>
  <li>
    <div class="sg-swatch bg-light_blue"></div>
    <div class="sg-label">#8CDCEC<br>
    $light_blue</div>
  </li>
  <hr>
  <li>
    <div class="sg-swatch bg-dark-gray"></div>
    <div class="sg-label">#333333<br>
    AAA Compliant<br>
    AA Compliant<br>
    City Provided<br>
    $dark-gray</div>
  </li>
  <li>
    <div class="sg-swatch bg-medium-gray"></div>
    <div class="sg-label">#54595C<br>
      AAA Compliant<br>
      AA Compliant<br>
    $medium-gray</div>
  </li>
  <li>
    <div class="sg-swatch bg-gray"></div>
    <div class="sg-label">#778187<br>
    AA compliant over 14pt (18px)<br>
    City Provided<br>
    $gray</div>
  </li>
  <li>
    <div class="sg-swatch bg-light-gray"></div>
    <div class="sg-label">#9AA1A6<br>
    $light-gray</div>
  </li>
  <li>
    <div class="sg-swatch bg-extra-light-gray"></div>
    <div class="sg-label">#C8CDCE<br>
    $extra-light-gray</div>
  </li>
  <hr>
  <li>
    <div class="sg-swatch bg-white"></div>
    <div class="sg-label">#ffffff<br>
    rgb(255, 255, 255)<br>
    $white</div>
  </li>
  <li>
    <div class="sg-swatch bg-red"></div>
    <div class="sg-label">#C50000<br>
    Error State<br>
    $red</div>
  </li>
</ul>
<hr>
<h1>Text Contrast</h1>
<img src="/long-beach-styleguide/images/color_contrast_checker.jpg">
<p>Text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text. Our color palette combination fall within the range of Section 508 compliant foreground/background color contrast ratios. Mobile devices are often used in less-than-ideal lighting conditions which is even more reason to have higher contrast.

We used this color contrast tool, a useful resource for testing the compliance of any color combination:

<a href="http://webaim.org/resources/contrastchecker/">http://webaim.org/resources/contrastchecker/</a>
</p>

Color Palatte

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

#08508A
AAA compliant
AAA compliant
Grow Section
$darkest_blue
#136194
AA compliant
AAA compliant over 14pt (18px)
Apply Section
City Provided
$dark_blue
#167FAB
AA compliant
AAA compliant over 14pt (18px)
Plan Section
$medium_dark_blue
#17B9D9
City Provided
$long_beach_blue
#8CDCEC
$light_blue

#333333
AAA Compliant
AA Compliant
City Provided
$dark-gray
#54595C
AAA Compliant
AA Compliant
$medium-gray
#778187
AA compliant over 14pt (18px)
City Provided
$gray
#9AA1A6
$light-gray
#C8CDCE
$extra-light-gray

#ffffff
rgb(255, 255, 255)
$white
#C50000
Error State
$red

Text Contrast

Text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text. Our color palette combination fall within the range of Section 508 compliant foreground/background color contrast ratios. Mobile devices are often used in less-than-ideal lighting conditions which is even more reason to have higher contrast. We used this color contrast tool, a useful resource for testing the compliance of any color combination: http://webaim.org/resources/contrastchecker/

LogosDetails

Usage

Logos.

<ul class="sg-logos">
  <li>
    <div class="img-swatch">
<img src="/long-beach-styleguide/images/CityOfLongBeachLogo48inx9in300dpi.png">
<br>
    </div>
    <div class="sg-label">City Text<br>
    <a href="">Source File</a></div>
  </li>

  <li>
    <div class="img-swatch">
  <img src="/long-beach-styleguide/images/skyline_opacity_low.png">
  <br>
    </div>
    <div class="sg-label">Skyline Line Art<br>
    <a href="">Source File</a></div>
  </li>

    <li>
      <div class="img-swatch">
    <img src="/long-beach-styleguide/images/video_thumbnail.jpg">
    <br>
      </div>
      <div class="sg-label">Hero Image / Video Thumbnail<br>
        Width: 1280px<br>
        Height: 780px<br>
      <a href="">Source File</a></div>
    </li>

    <li>
      <div class=img-swatch">
    <img src="/long-beach-styleguide/images/long_beach_seal.jpg">
    <br>
      </div>
      <div class="sg-label">City Seal<br>
      <a href="">Source File</a></div>
    </li>


</ul>

City Text
Source File
Skyline Line Art
Source File
Hero Image / Video Thumbnail
Width: 1280px
Height: 780px
Source File
City Seal
Source File

IconsDetails

Usage

Stylized symbols used throughout our work.

<ul class="sg-icons">
<h2><a href="https://drive.google.com/folderview?id=0B6V6JxtkVuf9ZjcxS1pmVDBEdHc&usp=sharing" target="_blank">Open Icon Folder</a></h2>
  <p>All icons are from TheNounProject.com</p>
  <h1>Plan Section</h1>
  <li>
    <div class="sg-swatch" style="background: #167FAB;"></div>
    <div class="sg-label">#167FAB<br>
      AA compliant<br>
      AAA compliant over 14pt (18px)<br>
      $medium_dark_blue</div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/idea_403891-200_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #167FAB;">
<img src="/long-beach-styleguide/images/idea_403891-200_white.png">
<br>
    </div>
    <div class="sg-label">Idea<br>
      ID: 403891-200<br>
    <a href="https://thenounproject.com/search/?q=idea&i=403891">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/support_icon_66723-200_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #167FAB;">
<img src="/long-beach-styleguide/images/support_icon_66723-200_white.png">
<br>
    </div>
    <div class="sg-label">Support<br>
      ID: 66723-200<br>
    <a href="https://thenounproject.com/term/coaching/66723/">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/plan_icon_173995-200_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #167FAB;">
<img src="/long-beach-styleguide/images/plan_173995-200_white.png">
<br>
    </div>
    <div class="sg-label">Business Plan<br>
      ID: 173995-200<br>
    <a href="https://thenounproject.com/search/?q=strategy&i=173995">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/dollar_strategy_362000-200_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #167FAB;">
<img src="/long-beach-styleguide/images/dollar_strategy_362000-200_white.png">
<br>
    </div>
    <div class="sg-label">Financial Plan<br>
      ID: 362000-200<br>
    <a href="https://thenounproject.com/search/?q=financial+plan&i=362000">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/license_154111_plan_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #167FAB;">
<img src="/long-beach-styleguide/images/license_154111_Register_white.png">
<br>
    </div>
    <div class="sg-label">Business License<br>
      ID: 154111<br>
    <a href="">Source File</a></div>
  </li>
  <hr>
  <h1>Apply Section</h1>
  <li>
    <div class="sg-swatch" style="background: #136194;"></div>
    <div class="sg-label">
      #136194<br>
      AA compliant<br>
      AAA compliant over 14pt (18px)<br>
      Apply Section<br>
      city provided<br>
      $dark_blue</div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/store_87343-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/store_87343-200_white.png">
      <br>
    </div>
    <div class="sg-label">Brick and Mortar<br>
      ID: 87343-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/apply/freelance_icon_151727-200_dark_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
<img src="/long-beach-styleguide/images/apply/freelance_151727-200_white.png">
<br>
    </div>
    <div class="sg-label">Home Office<br>
      ID: 151727-200 <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/apply/location_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/location_white.png">
<br>
    </div>
    <div class="sg-label">Business Location<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
<img src="/long-beach-styleguide/images/apply/zoning_156645-200_blue.png">
<br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
<img src="/long-beach-styleguide/images/apply/zoning_156645-200_white.png">
<br>
    </div>
    <div class="sg-label">Zoning<br>
      ID: 156645-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/lease_150021-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/lease_150021-200_white.png">
      <br>
    </div>
    <div class="sg-label">Lease<br>
      ID: 150021-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/cali_174136-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/cali_174136-200_white.png">
      <br>
    </div>
    <div class="sg-label">CA Registration<br>
      ID: 174136-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/license_154111_apply_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/license_white.png">
      <br>
    </div>
    <div class="sg-label">Business License<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/plan_15641-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/plan_15641-200_white.png">
      <br>
    </div>
    <div class="sg-label">Site Plan Check<br>
      ID: 87343-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/permit_231568-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/permit_231568-200_white.png">
      <br>
    </div>
    <div class="sg-label">Permits<br>
      ID:<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/apply/inspector_397573-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #136194;">
      <img src="/long-beach-styleguide/images/apply/inspector_397573-200_white.png">
      <br>
    </div>
    <div class="sg-label">Inspections<br>
      ID: 397573-200<br>
    <a href="">Source File</a></div>
  </li>
  <hr>
    <h1>Grow Section</h1>
    <li>
      <div class="sg-swatch" style="background: #08508A;"></div>
      <div class="sg-label">
        #08508A<br>
        AAA compliant<br>
        AAA compliant<br>
        Grow Section<br>
        $darkest_blue</div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/hire_33096-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/hire_33096-200_white.png">
        <br>
      </div>
      <div class="sg-label">Hire Employees<br>
        ID: 33096-200<br>
      <a href="">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/tax_43686-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/tax_43686-200_white.png">
        <br>
      </div>
      <div class="sg-label">Taxes<br>
        ID: 43686-200 <br>
      <a href="">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/grow_29976-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/grow_29976-200_white.png">
        <br>
      </div>
      <div class="sg-label">Grow / Funding<br>
        ID: 29976-200<br>
      <a href="https://thenounproject.com/search/?q=grow&i=29976">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/marketing_169007-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/marketing_169007-200_white.png">
        <br>
      </div>
      <div class="sg-label">Marketing<br>
        ID: 169007-200<br>
      <a href="">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/government_143672-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/government_143672-200_white.png">
        <br>
      </div>
      <div class="sg-label">City Vendor<br>
        ID: 143672-200<br>
      <a href="">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/networking_122209-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/networking_122209-200_white.png">
        <br>
      </div>
      <div class="sg-label">Networking<br>
        ID: 122209-200<br>
      <a href="">Source File</a></div>
    </li>
<hr>
    <h2>Opportunity Matching</h2>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/funding_215987-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/funding_215987-200_white.png">
        <br>
      </div>
      <div class="sg-label">Funding<br>
        ID: 215987-200<br>
      <a href="https://thenounproject.com/search/?q=find+money&i=472826">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/grow/advice_33097-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/grow/advice_33097-200_white.png">
        <br>
      </div>
      <div class="sg-label">Advice<br>
        ID: 33097-200<br>
      <a href="">Source File</a></div>
    </li>
    <hr>
      <h2>Other Pages</h2>
      <li>
        <div class="icon-swatch">
          <img src="/long-beach-styleguide/images/checklist_blue.png">
          <br>
        </div>
        <div class="icon-swatch" style="background: #08508A;">
          <img src="/long-beach-styleguide/images/checklist_white.png">
          <br>
        </div>
        <div class="sg-label">Checklist<br>
          ID:<br>
        <a href="">Source File</a></div>
      </li>
      <li>
        <div class="icon-swatch">
          <img src="/long-beach-styleguide/images/survey_315147-200_blue.png">
          <br>
        </div>
        <div class="icon-swatch" style="background: #08508A;">
          <img src="/long-beach-styleguide/images/survey_315147-200_white.png">
          <br>
        </div>
        <div class="sg-label">Survey<br>
          ID: 315147-200<br>
        <a href="">Source File</a></div>
      </li>
      <li>
        <div class="icon-swatch">
          <img src="/long-beach-styleguide/images/congrats_101491-200_blue.png">
          <br>
        </div>
        <div class="icon-swatch" style="background: #08508A;">
          <img src="/long-beach-styleguide/images/congrats_101491-200_white.png">
          <br>
        </div>
        <div class="sg-label">Congrats<br>
          ID: 101491-200<br>
        <a href="">Source File</a></div>
      </li>
    <hr>
        <h1>Contact</h1>
        <li>
          <div class="icon-swatch">
            <img src="/long-beach-styleguide/images/contact_75084-200_blue.png">
            <br>
          </div>
          <div class="icon-swatch" style="background: #08508A;">
            <img src="/long-beach-styleguide/images/contact_75084-200_white.png">
            <br>
          </div>
          <div class="sg-label">Contact<br>
            ID: 75084-200<br>
          <a href="">Source File</a></div>
        </li>

          <li>
            <div class="icon-swatch">
              <img src="/long-beach-styleguide/images/phone_341134-200_blue.png">
              <br>
            </div>
            <div class="icon-swatch" style="background: #08508A;">
              <img src="/long-beach-styleguide/images/phone_341134-200_white.png">
              <br>
            </div>
            <div class="sg-label">Phone<br>
              ID: 341134-200<br>
            <a href="">Source File</a></div>
          </li>
          <li>
            <div class="icon-swatch">
              <img src="/long-beach-styleguide/images/email_32727-200_blue.png">
              <br>
            </div>
            <div class="icon-swatch" style="background: #08508A;">
              <img src="/long-beach-styleguide/images/email_32727-200_white.png">
              <br>
            </div>
            <div class="sg-label">Email<br>
              ID: 32727-200<br>
            <a href="">Source File</a></div>
          </li>
          <li>
            <div class="icon-swatch">
              <img src="/long-beach-styleguide/images/map_363253-200_blue.png">
              <br>
            </div>
            <div class="icon-swatch" style="background: #08508A;">
              <img src="/long-beach-styleguide/images/map_363253-200_white.png">
              <br>
            </div>
            <div class="sg-label">Map / Directions<br>
              ID: 363253-200<br>
            <a href="">Source File</a></div>
          </li>
          <li>
            <div class="icon-swatch">
              <img src="/long-beach-styleguide/images/hours_125560-200_blue.png">
              <br>
            </div>
            <div class="icon-swatch" style="background: #08508A;">
              <img src="/long-beach-styleguide/images/hours_125560-200_white.png">
              <br>
            </div>
            <div class="sg-label">Hours<br>
              ID: 125560-200<br>
            <a href="">Source File</a></div>
          </li>
          <li>
            <div class="icon-swatch">
              <img src="/long-beach-styleguide/images/help_chat_2036-200_white.png">
              <br>
            </div>
            <div class="icon-swatch" style="background: #08508A;">
              <img src="/long-beach-styleguide/images/help_chat_2036-200_white.png">
              <br>
            </div>
            <div class="sg-label">Help Chat<br>
              ID: 2036-200<br>
            <a href="">Source File</a></div>
          </li>
<hr>
  <h1>Web Navigation and Action Buttons</h1>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/menu_356890-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/menu_356890-200_white.png">
      <br>
    </div>
    <div class="sg-label">Menu<br>
      ID: 356890-200<br>
    <a href="https://thenounproject.com/search/?q=menu&i=356890">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/search_378067-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/search_378067-200_white.png">
      <br>
    </div>
    <div class="sg-label">Search<br>
      ID: 378067-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/back_white.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/back_white.png">
      <br>
    </div>
    <div class="sg-label">Back<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/more_70936-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/more_70936-200_white.png">
      <br>
    </div>
    <div class="sg-label">More<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/share_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/share_white.png">
      <br>
    </div>
    <div class="sg-label">Share<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/favicon.ico">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/favicon.ico">
      <br>
    </div>
    <div class="sg-label">LB Favicon<br>
      ID: <br>
    <a href="">Source File</a></div>
  </li>
  <hr>
<h1>Business Types</h1>
<li>
  <div class="icon-swatch">
    <img src="/long-beach-styleguide/images/mobile_icon_128876-200_dark_blue.png">
    <br>
  </div>
  <div class="icon-swatch" style="background: #08508A;">
    <img src="/long-beach-styleguide/images/mobile_icon_128876-200_dark_blue.png">
    <br>
  </div>
  <div class="sg-label">Mobile Business<br>
    ID: 128876-200<br>
  <a href="">Source File</a></div>
</li>
<li>
  <div class="icon-swatch">
    <img src="/long-beach-styleguide/images/short_term_icon_399532-200_dark_blue.png">
    <br>
  </div>
  <div class="icon-swatch" style="background: #08508A;">
    <img src="/long-beach-styleguide/images/short_term_icon_399532-200_dark_blue.png">
    <br>
  </div>
  <div class="sg-label">Short Term Business<br>
    ID: 399532-200<br>
  <a href="">Source File</a></div>
</li>
  <hr>
<h1>Transportation</h1>
  <li>
    <div class="icon-swatch">
      <img src="/long-beach-styleguide/images/transportation/bike_449496-200_blue.png">
      <br>
    </div>
    <div class="icon-swatch" style="background: #08508A;">
      <img src="/long-beach-styleguide/images/transportation/bike_449496-200_white.png">
      <br>
    </div>
    <div class="sg-label">Bike<br>
      ID: 449496-200<br>
    <a href="">Source File</a></div>
  </li>
  <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/transportation/bus_146906-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/transportation/bus_146906-200_white.png">
        <br>
      </div>
      <div class="sg-label">Bus<br>
        ID: 146906-200<br>
      <a href="">Source File</a></div>
    </li>
    <li>
      <div class="icon-swatch">
        <img src="/long-beach-styleguide/images/transportation/parking_149224-200_blue.png">
        <br>
      </div>
      <div class="icon-swatch" style="background: #08508A;">
        <img src="/long-beach-styleguide/images/transportation/parking_149224-200_white.png">
        <br>
      </div>
      <div class="sg-label">Parking<br>
        ID: 149224-200<br>
      <a href="">Source File</a></div>
    </li>

</ul>

Open Icon Folder

All icons are from TheNounProject.com

Plan Section

#167FAB
AA compliant
AAA compliant over 14pt (18px)
$medium_dark_blue
Idea
ID: 403891-200
Source File
Support
ID: 66723-200
Source File
Business Plan
ID: 173995-200
Source File
Financial Plan
ID: 362000-200
Source File
Business License
ID: 154111
Source File

Apply Section

#136194
AA compliant
AAA compliant over 14pt (18px)
Apply Section
city provided
$dark_blue
Brick and Mortar
ID: 87343-200
Source File
Home Office
ID: 151727-200
Source File
Business Location
ID:
Source File
Zoning
ID: 156645-200
Source File
Lease
ID: 150021-200
Source File
CA Registration
ID: 174136-200
Source File
Business License
ID:
Source File
Site Plan Check
ID: 87343-200
Source File
Permits
ID:
Source File
Inspections
ID: 397573-200
Source File

Grow Section

#08508A
AAA compliant
AAA compliant
Grow Section
$darkest_blue
Hire Employees
ID: 33096-200
Source File
Taxes
ID: 43686-200
Source File
Grow / Funding
ID: 29976-200
Source File
Marketing
ID: 169007-200
Source File
City Vendor
ID: 143672-200
Source File
Networking
ID: 122209-200
Source File

Opportunity Matching

Funding
ID: 215987-200
Source File
Advice
ID: 33097-200
Source File

Other Pages

Checklist
ID:
Source File
Survey
ID: 315147-200
Source File
Congrats
ID: 101491-200
Source File

Contact

Contact
ID: 75084-200
Source File
Phone
ID: 341134-200
Source File
Email
ID: 32727-200
Source File
Map / Directions
ID: 363253-200
Source File
Hours
ID: 125560-200
Source File
Help Chat
ID: 2036-200
Source File

Web Navigation and Action Buttons

Menu
ID: 356890-200
Source File
Search
ID: 378067-200
Source File
Back
ID:
Source File
More
ID:
Source File
Share
ID:
Source File
LB Favicon
ID:
Source File

Business Types

Mobile Business
ID: 128876-200
Source File
Short Term Business
ID: 399532-200
Source File

Transportation

Bike
ID: 449496-200
Source File
Bus
ID: 146906-200
Source File
Parking
ID: 149224-200
Source File

InteractiveDetails

Usage

Clickable vs. Static

<p>Allows user to scan the different sections and a sampling of the content. Then they can deep dive by expanding the section. </p>
<ul class="sg-logos">
  <li>
<div class="img-swatch">
  <img src="/long-beach-styleguide/images/clickable_static.jpg">
<br>
  Checklist<br>
  Fill color:#;<br>
  <img src="/long-beach-styleguide/images/expand_collapse.jpg">
</div>
</li>
</ul>
<p>Accordions only show the user the section headers and don’t allow the user to sample the content and get the context until they click. This ok to use if the user has a clear sense of the content will be under the header.
</p>

Allows user to scan the different sections and a sampling of the content. Then they can deep dive by expanding the section.

Checklist
Fill color:#;

Accordions only show the user the section headers and don’t allow the user to sample the content and get the context until they click. This ok to use if the user has a clear sense of the content will be under the header.

FontsDetails

Usage

The main body font is Open Sans, imported from Google Web Fonts. The font for headings is Montserrat, also imported from Google Web Fonts.

<h1>Secondary font: 'Raleway', sans-serif;</h1>
<p>Used for headers. The curvature of this font is warm and welcoming. However its treatment of numbers is wonky so we may switch. Ex. Step 5:
</p>
<h2>Primary font: "Open Sans", "Arial", sans-serif;</h2>
<p><em>Primary font italic: "Open Sans", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "Open Sans", "Arial", sans-serif;</strong></p>
<p>Commissioned by Google, Open Sans is one of the most widely used open-source fonts on the Web. It is a humanist sans-serif that is used often in flat design. </p>
<h3>Logo Font: Century Gothic</h3>
<h3>Press Release Fonts: Avenir and Ariel</h3>

Secondary font: 'Raleway', sans-serif;

Used for headers. The curvature of this font is warm and welcoming. However its treatment of numbers is wonky so we may switch. Ex. Step 5:

Primary font: "Open Sans", "Arial", sans-serif;

Primary font italic: "Open Sans", "Arial", sans-serif;

Primary font bold: "Open Sans", "Arial", sans-serif;

Commissioned by Google, Open Sans is one of the most widely used open-source fonts on the Web. It is a humanist sans-serif that is used often in flat design.

Logo Font: Century Gothic

Press Release Fonts: Avenir and Ariel

LinksDetails

Usage

Links are bold and $ben-franklin-blue. External links are indicated by using the exernal class.

<img src="/long-beach-styleguide/images/links.jpg">

FormsDetails

Usage

Information collection interface

<ul class="sg-logos">
  <li>
<div class="img-swatch">
  <img src="/long-beach-styleguide/images/checklist.jpg">
<br>
  Checklist<br>
  Fill color:#;<br>
</div>
</li>
</ul>

Checklist
Fill color:#;

ContactDetails

Usage

Card to display interactive contact info.

  <img src="/long-beach-styleguide/images/contact_info_card_default.jpg">
  <img src="/long-beach-styleguide/images/contact_info_card_hover.jpg">
<br>
  Default State<br>
    Interactive Contact Info Card<br>
    Phone CTA: Opens phone app to call<br>
  Email CTA: Opens up email app<br>
  Icon and Font color:#136194;<br>
  <br>
Hover State
  Interactive Contact Info Card<br>
Hover: #17B9D9;

Default State
Interactive Contact Info Card
Phone CTA: Opens phone app to call
Email CTA: Opens up email app
Icon and Font color:#136194;

Hover State Interactive Contact Info Card
Hover: #17B9D9;

BlockquoteDetails

Usage

A section of text that is quoted from another source.

<blockquote>
  The medium, or process, of our time - electric technology is reshaping and restructuring patterns of social interdependence and every aspect of our personal life. It is forcing us to reconsider and re-evaluate practically every thought, every action, and every institution formerly taken for granted.
<cite>The Medium is The Massage, Marshall McLuhan</cite>
</blockquote>

The medium, or process, of our time - electric technology is reshaping and restructuring patterns of social interdependence and every aspect of our personal life. It is forcing us to reconsider and re-evaluate practically every thought, every action, and every institution formerly taken for granted. The Medium is The Massage, Marshall McLuhan

User TestingDetails

Usage

Ensure intuitive design and content comprehension by testing it with actual users

<h1>User Testing</h1>
<p>If you don't have time to solicit users for in person user tests. We used and recommend <a href="https://www.usertesting.com/">UserTesting.com</a>

User Testing

If you don't have time to solicit users for in person user tests. We used and recommend UserTesting.com

Inspiration Style GuidesDetails

Usage

Learning from other guides.

<ul>
  <li>USDS: US Digital Services: https://standards.usa.gov/getting-started/</li>
  <li>Long Beach Style Guide:http://codeforamerica.github.io/long-beach-styleguide/#p-buttons</li>
  <li>CFA: http://style.codeforamerica.org/</li>
  <li>Oakland</li>
  <li>Boston Business Portal</li>
  <li>SF Business Portal</li>
  <li>LA Business Portal</li>
  <li>Typeform</li>
  <li>MailChimp: http://styleguide.mailchimp.com/</li>
  <li>View our Peer Audit of Business Portals: https://docs.google.com/presentation/d/1DjwM0Oq6XnQKQUZdVBKtn_EYWCw5JW6nAc2lubLbo8I/edit</li>
</ul>

USDS: US Digital Services: https://standards.usa.gov/getting-started/
Long Beach Style Guide:http://codeforamerica.github.io/long-beach-styleguide/#p-buttons
CFA: http://style.codeforamerica.org/
Oakland
Boston Business Portal
SF Business Portal
LA Business Portal
Typeform
MailChimp: http://styleguide.mailchimp.com/
View our Peer Audit of Business Portals: https://docs.google.com/presentation/d/1DjwM0Oq6XnQKQUZdVBKtn_EYWCw5JW6nAc2lubLbo8I/edit

ResourcesDetails

Usage

Helpful articles

<ul>
  <li>https://www.w3.org/TR/WCAG20/</li>
<li>WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device.</li>
<li>https://18f.gsa.gov/2016/04/19/looking-at-the-different-ways-to-test-content/</li>
<li>https://www.washingtonpost.com/news/the-switch/wp/2016/04/18/new-data-americans-are-abandoning-wired-home-internet/</li>
<li>http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it</li>
<li>https://pages.18f.gov/content-guide/plain-language/</li>
<li>https://www.google.com/accessibility/</li>
<li>https://www.google.com/loon/</li>
<li>https://www.gov.uk/design-principles/accessiblepdfs</li>
</ul>

https://www.w3.org/TR/WCAG20/
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device.
https://18f.gsa.gov/2016/04/19/looking-at-the-different-ways-to-test-content/
https://www.washingtonpost.com/news/the-switch/wp/2016/04/18/new-data-americans-are-abandoning-wired-home-internet/
http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it
https://pages.18f.gov/content-guide/plain-language/
https://www.google.com/accessibility/
https://www.google.com/loon/
https://www.gov.uk/design-principles/accessiblepdfs

Getting Started

Purpose

GoalDetails

Usage

Why Inclusive DesignDetails

Usage

Accessibility for All

Underrepresented Users

Principles

Digital Mobile FirstDetails

Usage

Why Design Mobile First?

Responsive Design: Mobile -> Desktop

Web First, Print SecondDetails

Usage

Web / Digital First -> Print Second

Writing Content

Reading Grade LevelDetails

Usage

Visual Design

ColorsDetails

Usage

Color Palatte

Text Contrast

LogosDetails

Usage

IconsDetails

Usage

Open Icon Folder

Plan Section

Apply Section

Grow Section

Opportunity Matching

Other Pages

Contact

Web Navigation and Action Buttons

Business Types

Transportation

InteractiveDetails

Usage

FontsDetails

Usage

Secondary font: 'Raleway', sans-serif;

Primary font: "Open Sans", "Arial", sans-serif;

Logo Font: Century Gothic

Press Release Fonts: Avenir and Ariel

LinksDetails

Usage

FormsDetails

Usage

ContactDetails

Usage

BlockquoteDetails

Usage

User Testing

User TestingDetails

Usage

User Testing

Resources

Inspiration Style GuidesDetails

Usage

ResourcesDetails

Usage