18F: Digital service delivery | 18F Folks: Adopting a new illustration library

<!DOCTYPE html> <html lang="en-US"> <head>  <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>18F: Digital service delivery | 18F Folks: Adopting a new illustration library</title> <meta property="og:title" content="18F: Digital service delivery | 18F Folks: Adopting a new illustration library" /> <meta name="description" content="" /> <meta property="og:description" content="" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@18F" /> <meta name="twitter:title" content="18F Folks: Adopting a new illustration library" /> <meta name="twitter:description" content="" /> <meta property="og:type" content="article" /> <link rel="canonical" href="/2024/10/21/18f-folks/" /> <meta property="og:url" content="/2024/10/21/18f-folks/" /> <script async="" src=/assets/js/uswds-init.js></script>  <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/img/favicons/favicon-192x192.png"> <link rel="icon" type="image/svg+xml" href="/img/favicons/favicon.svg"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/favicon-180x180.png">  <link href="https://unpkg.com/prismjs@1.20.0/themes/prism.css" rel="stylesheet"> <link rel="preload" as="style" href="/assets/styles/styles-UKMOJPRN.css" /> <link rel="stylesheet" href="/assets/styles/styles-UKMOJPRN.css" type="text/css" /> </head> <body class=" "> <a class="usa-skipnav" href="#main-content">Skip to main content</a> <div class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to main content</a> <div class="usa-banner"> <div class="usa-accordion"> <section id="gov-banner-header-section" aria-label="USA Gov banner section header" class="usa-banner__header" > <div class="usa-banner__inner"> <div class="grid-col-auto"> <img src="/img/us_flag_small-VKjpzbKpq_.png" class="usa-banner__header-flag" alt="U.S. flag" loading="lazy" decoding="async"> </div> <div class="grid-col-fill tablet:grid-col-auto"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action" aria-hidden="true"> Here’s how you know </p> </div> <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner" type="button" > <span class="usa-banner__button-text">Here's how you know</span> </button> </div> </section> <div class="usa-banner__content usa-accordion__content" id="gov-banner"> <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <div class="usa-media-block__body"> <p> <strong>The .gov means it’s official.</strong> <br /> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <div class="usa-media-block__body"> <p> <strong>The site is secure.</strong> <br /> The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely. </p> </div> </div> </div> </div> </div> </div> <div class="usa-overlay"></div> </div> <header class="usa-header usa-header--basic usa-header--basic-megamenu" role="banner"> <div class="usa-nav-container"> <div class="usa-navbar"> <div class="usa-logo" id="header-logo"> <a href="/" title="Home"> <img src="/img/18f-logo-60i14872OF.svg" class="usa-logo-img" alt="18F home page" loading="lazy" decoding="async"> </a> </div> <button type="button" class="usa-menu-btn">Menu</button> </div> <nav class="usa-nav" aria-label="Menu navigation" > <button type="button" class="usa-nav__close"> <img src="/img/close-xPu02brD0d.svg" class="" alt="close" loading="lazy" decoding="async"> </button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a class="usa-nav__link " href="/our-work/" > <span>Our work</span> </a> </li> <li class="usa-nav__primary-item"> <a class="usa-nav__link " href="/work-with-us/" > <span>Work with us</span> </a> </li> <li class="usa-nav__primary-item"> <a class="usa-nav__link " href="/about/" > <span>About 18F</span> </a> </li> <li class="usa-nav__primary-item"> <a class="usa-nav__link " href="/guides/" > <span>Guides</span> </a> </li> <li class="usa-nav__primary-item"> <a class="usa-nav__link usa-current " href="/blog/" > <span>Blog</span> </a> </li> <li class="usa-nav__primary-item"> <a class="usa-button an18f-button--dark margin-top-3 desktop:margin-top-0 desktop:margin-x-2 " href="/contact/" > <span>Contact</span> </a> </li> </ul> <a href="https://search.usa.gov/search?utf8=%E2%9C%93&affiliate=18F-site&query=&commit=" class="usa-button padding-x-2" > <img src="/img/search--white-ZVwKBtv5eC.svg" class="" alt="Search" loading="lazy" decoding="async"> </a> </nav> </div> </header> <main id="main-content"> <figure class="post-feature_image" role="img" title="An illustration of five diverse individuals" style="background-image: url('/assets/blog/18f-folks/blog_banner.jpg')" > </figure> <article id="main-content" class="post-article margin-top-6" itemscope itemtype="http://schema.org/BlogPosting"> <div class="grid-container"> <div class="grid-row"> <div class="tablet:grid-col-12"> <header> <h1 itemprop="name headline">18F Folks: Adopting a new illustration library</h1> <p class="margin-top-3 margin-bottom-0"> <span class="post-byline">By<span itemprop="author" itemscope itemtype="http://schema.org/Person"> <a href="/author/michelle-partogi/" itemprop="name">Michelle Partogi</a> </span> <span class="post-author-comma margin-left-neg-05">,</span><span itemprop="author" itemscope itemtype="http://schema.org/Person"> <a href="/author/austin-hernandez/" itemprop="name">Austin Hernandez</a> </span> </span> </p> <p class="margin-top-1"> Published on <time datetime="Mon Oct 21 2024 00:00:00 GMT+0000 (Coordinated Universal Time)" itemprop="datePublished">October 21, 2024</time> </p> <span class="post-tags display-flex flex-wrap" itemprop="keywords"> </span> </header> </div> </div> <hr class="hr-1-dark"> <div class="grid-row grid-gap margin-top-8"> <div class="tablet:grid-col-7"> <div class="post-content" itemprop="articleBody"> <p>Serving America’s diverse population is central to 18F’s mission. To help us further this effort, we’ve adopted a new illustration style to capture a broad spectrum of human experiences.</p> <p>Previously, we used Pablo Stanley’s <a href="https://blush.design/collections/rChdrB8vX8xQJunpDPp8/avatars" class="usa-link usa-link--external" rel="noreferrer">Avataaars</a> library to represent people.</p> <figure> <img src="/img/avataaar_sample-xNb98gaK3S.png" class="" alt="Cartoon representations of three people in a simple, vector style that shows their faces and bust." loading="lazy" decoding="async"> <figcaption>Previous 18F representations of people relied on Avataaars </figcaption> </figure> <p>While able to depict a range of skin tones and ages, the bust portraits ultimately proved limiting when trying to represent the vast collective of human experiences.</p> <p>Our new image style is based on Pablo Stanley’s open-source library <a href="https://www.openpeeps.com/" class="usa-link usa-link--external" rel="noreferrer">Open Peeps</a>. We call our version, which reflects the brand’s signature blue tones and flat forms, <em>18F Folks</em>.</p> <p>Now our graphics look like:</p> <figure> <img src="/img/slide0-mgATFnCsIm.png" class="" alt="A presentation slide showcasing a cartoon of a woman in a wheelchair holding a microphone. The text next to her says Hear, hear! We're transitioning to 18F Folks for our illustration style." loading="lazy" decoding="async"> <img src="/img/slide1-Mrsj-ZtEEL.png" class="" alt="A presentation slide with 3 vignettes of the same male in 18F Folks cartoon style. He progresses in expressions from happy, to confused, to frustrated. Underneath each of his portrait is text as to questions or blockers he has through a generic user journey." loading="lazy" decoding="async"> </figure> <p>With <em>18F Folks</em>, we’re able to construct vignettes of people interacting with each other and their environments. This helps us narrate stories about the world we want to build.</p> <figure class="no-margin"> <div class="grid-row"> <div class="grid-col-12 desktop:grid-col-6"> <img src="/img/dc-walking-TWauivNXfV.png" class="" alt="A cartoon vignette with two people walking, with government buildings and trees in the background" loading="lazy" decoding="async"> </div> <div class="grid-col-12 desktop:grid-offset-1 desktop:grid-col-5"> <img src="/img/us-map-fQa_5pnX43.png" class="" alt="Two people standing in front of a map of the US. One person appears pregnant, the other has a prosthetic leg." loading="lazy" decoding="async"> </div> </div> <figcaption>The illustration library can showcase diversity, connection, and context</figcaption> </figure> <p>As a government agency, we use branding to inform and engage the public. Relationships emerge from the content we share. For instance, government agencies have reached out after reading this blog, asking how to emulate software systems and service processes. Something as basic as our illustration style impacts how our audience perceives us.</p> <p>Consider this simple presentation slide.</p> <figure> <img src="/img/slide-confused-QsxUmxJaRA.png" class="border border-base-lighter" alt="A presentation slide showing a list on the left of common timekeep mistakes. Next to the list is a shrugging woman in the style of 18F Folks cartoon." loading="lazy" decoding="async"> </figure> <p>While the content presents a matter-of-fact list, the shrugging Peep conveys the body language equivalent of “I’m with you. This is confusing.” We opted for an illustration style that can cue understanding and trust—emotions more complex than the previous style would allow.</p> <p>Some organizations may delegate branding directives to a marketing team. At 18F, we leverage the combined strength of our multifaceted design team to bring ideas like <em>18F Folks</em> to life. Our content designer took inspiration from 18F’s written tone to inform our selection criteria, emphasizing qualities like “welcoming” and “conversational.” Service designers conducted research to determine ideal use cases for illustrations.</p> <p>The team then created a scorecard and conducted a comparative analysis of several illustration libraries. Open Peeps was selected as the basis of the <em>18F Folks</em> style because it balances professional with approachable.</p> <figure> <img src="/img/scorecard-OU5R4ml-2f.png" class="border border-base-lighter" alt="A spreadsheet grid. The left column has criteria such as open source, matches 18F's voice, etc. The following columns determine if different visual libraries meet the criteria. Green, yellow, and red cells suggest if criteria are met or not." loading="lazy" decoding="async"> <figcaption>We created a scorecard to narrow down our options for an illustration library</figcaption> </figure> <p>Product managers compiled a list of additional characteristics to make the 18F Folks library even more inclusive. Considerations included diverse religious dress, physical abilities, and body types.</p> <figure class="no-margin"> <div class="grid-row"> <div class="grid-col-12 desktop:grid-offset-1 desktop:grid-col-6 display-flex flex-row"> <img src="/img/custom2-kx8JlsNsnL.png" class="flex-align-self-center" alt="Two cartoon characters talking. One wears a shirt with 18F, the other a shirt with a rainbow flag." loading="lazy" decoding="async"> </div> <div class="grid-col-12 desktop:grid-col-5"> <img src="/img/custom-twUZSkY47f.png" class="" alt="A pregnant woman stands next to a child in 18F Folks illustration style" loading="lazy" decoding="async"> </div> </div> <figcaption> We added custom shirts, a hearing aid, as well as a pregnant person and a child. This is just the start. </figcaption> </figure> <p>On the surface, these depictions are simply bubbly cartoon characters. But we intentionally adopted an illustration style where more people can find themselves reflected in the content we share. When people can see themselves in media, they feel seen. That’s why it is so important for us to represent the diverse American public. We want every person to believe that they matter to us–that we are a government by the people, for the people. After all, good branding is the public celebration of a group's shared values.</p> <figure> <img src="/img/18f-design-custom-folk-Gr7eLm386L.png" class="" alt="Several cartoon illustrations that staff have made of themselves in 18F Folk style." loading="lazy" decoding="async"> <figcaption> 18F staff customizing their own Folk </figcaption> </figure> <h2 class="font-heading-md" id="disclaimer-of-endorsement" tabindex="-1">Disclaimer of endorsement<a href="#disclaimer-of-endorsement" class="heading-permalink" aria-label="Permalink for this section"><svg class="usa-icon" aria-hidden="true" focusable="false" role="img"><use xlink:href="#svg-link"></use></svg></a></h2> <p class="font-body-2xs">The GSA.gov website includes hypertext links, or pointers, to information created and maintained by other public and/or private organizations. We provide these links and pointers only for your information and convenience. When you select a link to an outside website, you are leaving the GSA.gov site and are subject to the privacy and security policies of the owners/sponsors of the outside website.</p> <ul> <li class="font-body-2xs">We do not control nor guarantee the accuracy, relevance, timeliness, or completeness of information contained on a linked website.</li> <li class="font-body-2xs">We do not endorse the organizations sponsoring linked websites and we do not endorse the views they express or the products/services they offer.</li> <li class="font-body-2xs">The content of external, non-Federal websites is not subject to Federal information quality, privacy, security, and related guidelines.</li> <li class="font-body-2xs">We cannot authorize the use of copyrighted materials contained in linked websites. Users must request such authorization from the sponsor of the linked website.</li> <li class="font-body-2xs">We are not responsible for transmissions users receive from linked websites.</li> <li class="font-body-2xs">We do not guarantee that outside websites comply with Section 508 (accessibility requirements) of the Rehabilitation Act.</li> </ul> </div> </div> <aside class="tablet:grid-offset-1 tablet:grid-col-4"> <div class="bg-primary-darker padding-3 text-white usa-dark-background radius-md"> <h2 class="font-sans-lg text-bold margin-bottom-2">Follow 18F</h2> <ul class="usa-list usa-list--unstyled"> <li class="margin-bottom-2"> <a href="https://github.com/18F" class="usa-link--alt usa-link--external" rel="noreferrer" > <img src="/img/github-lightest-dnvvdJeNxl.svg" class="maxw-3 margin-right-2 text-sub" alt="" loading="lazy" decoding="async">18F on GitHub </a> </li> <li class="margin-bottom-2"> <a href="https://twitter.com/18F" class="usa-link--alt usa-link--external" rel="noreferrer" > <img src="/img/twitter-lightest-MyHkS8cnLa.svg" class="maxw-3 margin-right-2 text-sub" alt="" loading="lazy" decoding="async">18F on Twitter </a> </li> <li class="margin-bottom-2"> <a href="https://www.linkedin.com/company/gsa18f" class="usa-link--alt usa-link--external" rel="noreferrer" > <img src="/img/linkedin-lightest-hDYpqtBBKD.svg" class="maxw-3 margin-right-2 text-sub" alt="" loading="lazy" decoding="async">18F on LinkedIn </a> </li> <li class="margin-bottom-2"> <a href="/feed.xml" class="usa-link--alt " > <img src="/img/rss-lightest-29xxdTjXfa.svg" class="maxw-3 margin-right-2 text-sub" alt="" loading="lazy" decoding="async">RSS feed </a> </li> </ul> </div> </aside> </div> </div> </article> <section class="margin-top-6 post-pagination"> <div class="grid-container"> <hr class="hr-1-base-lighter"> <div class="grid-row grid-gap"> <div class="grid-col-6"> <a href="/2024/10/08/18f-year-of-launches/" class="text-no-underline post-pagination__link" > <h2 class="post-pagination__heading"> <svg class="icon caret" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 444.531 444.531" style="enable-background:new 0 0 444.531 444.531;" xml:space="preserve" role="img" aria-hidden="true"> <title>Arrow left</title> <desc>Arrow pointing to the left</desc> <g> <path d="M213.13,222.409L351.88,83.653c7.05-7.043,10.567-15.657,10.567-25.841c0-10.183-3.518-18.793-10.567-25.835 l-21.409-21.416C323.432,3.521,314.817,0,304.637,0s-18.791,3.521-25.841,10.561L92.649,196.425 c-7.044,7.043-10.566,15.656-10.566,25.841s3.521,18.791,10.566,25.837l186.146,185.864c7.05,7.043,15.66,10.564,25.841,10.564 s18.795-3.521,25.834-10.564l21.409-21.412c7.05-7.039,10.567-15.604,10.567-25.697c0-10.085-3.518-18.746-10.567-25.978 L213.13,222.409z" fill="#046b99"/> </g> </svg> Previous Post </h2> <p class="measure-1 text-bold text-primary-darkest">18F’s year of launches</p> </a> </div> <div class="grid-col-6 text-right"> <a href="/2024/11/05/three-ways-to-write-fearless-spreadsheet-formulas/" class="text-no-underline post-pagination__link" > <h2 class="post-pagination__heading"> Next Post <svg class="icon caret" xmlns="http://www.w3.org/2000/svg" width="444.819" height="444.819" viewBox="0 0 444.819 444.819" role="img" aria-hidden="true"> <title>Arrow right</title> <desc>Arrow pointing to the right</desc> <path fill="#046b99" d="M352.025 196.712L165.885 10.848C159.028 3.615 150.468 0 140.185 0s-18.84 3.62-25.696 10.848l-21.7 21.416c-7.045 7.043-10.567 15.604-10.567 25.692 0 9.897 3.52 18.56 10.566 25.98L231.544 222.41 92.785 361.168c-7.04 7.043-10.563 15.604-10.563 25.693 0 9.9 3.52 18.566 10.564 25.98l21.7 21.417c7.043 7.043 15.612 10.564 25.697 10.564 10.09 0 18.656-3.52 25.697-10.564L352.025 248.39c7.046-7.423 10.57-16.084 10.57-25.98.002-10.09-3.524-18.655-10.57-25.698z"/> </svg> </h2> <p class="measure-1 float-right text-bold text-primary-darkest text-right">Three ways to write fearless spreadsheet formulas</p> </a> </div> </div> <hr class="hr-1-base-lighter"> </div> </section> <section class="margin-top-3 margin-bottom-6"> <div class="grid-container"> </div> </div> </section> </main> <footer> <div class="grid-container padding-y-6"> <hr class="hr-1-dark footer-hr-alignment"> <div class="grid-row grid-gap"> <div class="tablet:grid-col-3"> <img src="/img/18f-logo-60i14872OF.svg" class="maxw-5" alt="18F logo" loading="lazy" decoding="async"> <p> Work with us to plan successful projects, choose better vendors, build custom software, or learn how to work in new ways. </p> <a href="/contact/" class="usa-button an18f-button--dark" > Contact us </a> </div> <div class="tablet:grid-offset-1 tablet:grid-col-2"> <h2 class="font-heading-md text-medium margin-top-4 tablet:margin-top-0 margin-bottom-2 tablet:margin-bottom-4"> Pages </h2> <ul class="usa-list usa-list--unstyled font-sans-sm list-item-spacing-2"> <li><a href="/our-work/">Our work</a></li> <li><a href="/work-with-us/">Work with us</a></li> <li><a href="/about/">About 18F</a></li> <li><a href="/guides/">Guides</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> <div class="tablet:grid-col-2"> <h2 class="font-heading-md text-medium margin-top-4 tablet:margin-top-0 margin-bottom-2 tablet:margin-bottom-4"> Policies </h2> <ul class="usa-list usa-list--unstyled font-sans-sm list-item-spacing-2"> <li><a href="/linking-policy/">Linking policy</a></li> <li><a href="/open-source-policy/">Open source policy</a></li> <li><a href="/vulnerability-disclosure-policy/">Vulnerability disclosure</a></li> <li><a href="/code-of-conduct/">Code of conduct</a></li> </ul> </div> <div class="tablet:grid-col-2"> <h2 class="font-heading-md text-medium margin-top-4 tablet:margin-top-0 margin-bottom-2 tablet:margin-bottom-4"> Contact </h2> <ul class="usa-list usa-list--unstyled font-sans-sm list-item-spacing-2"> <li> <a href="/contact/" > Get in touch </a> </li> <li> <a href="/about/#for-press" > Press </a> </li> <li> <a href="https://github.com/18F/18f.gsa.gov/issues/new/choose" class="usa-link--external" > Report a bug </a> </li> <li> <a href="/join/" > Join 18F </a> </li> </ul> </div> <div class="tablet:grid-col-2"> <h2 class="font-heading-md text-medium margin-top-4 tablet:margin-top-0 margin-bottom-2 tablet:margin-bottom-4"> Social </h2> <ul class="usa-list usa-list--unstyled font-sans-sm list-item-spacing-2"> <li class="display-flex flex-align-center"> <a href="https://github.com/18F" class="usa-link--external" rel="noreferrer" > <img src="/img/github-dark-2-w9jCrv94IZ.svg" class="maxw-205 margin-right-1 text-tbottom" alt="" loading="lazy" decoding="async">GitHub</a> </li> <li class="display-flex flex-align-center"> <a href="https://twitter.com/18F" class="usa-link--external" rel="noreferrer" > <img src="/img/twitter-dark-Pq04PjchNH.svg" class="maxw-205 margin-right-1 " alt="" loading="lazy" decoding="async">Twitter</a> </li> <li class="display-flex flex-align-center"> <a href="https://www.linkedin.com/company/gsa18f" class="usa-link--external" rel="noreferrer" > <img src="/img/linkedin-dark-ILbHB_Cgfp.svg" class="maxw-205 margin-right-1 " alt="" loading="lazy" decoding="async">LinkedIn</a> </li> </ul> </div> </div> </div> <div class="usa-identifier padding-top-2"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier"> <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://www.gsa.gov/" class="usa-identifier__logo"> <img src="/img/gsa-logo-blue-YKGHyQURdg.svg" class="usa-identifier__logo-img" alt="gsa logo" loading="lazy" decoding="async"> </a> </div> <div class="usa-identifier__identity text-base-lightest"> <p class="usa-identifier__identity-domain">18f.gsa.gov</p> <p class="usa-identifier__identity-disclaimer text-base-lightest">An official website of the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services"> GSA’s Technology Transformation Services </a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links"> <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/about" title="About GSA"> About GSA </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/website-information/accessibility-aids" title="View accessibility statement"> Accessibility support </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/reference/freedom-of-information-act-foia" title="Submit a Freedom of Information Act (FOIA) request"> FOIA requests </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/reference/civil-rights-programs/the-no-fear-act" title="View No FEAR Act data"> No FEAR Act data </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsaig.gov/" title="Office of the Inspector General"> Office of the Inspector General </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/reference/reports/budget-performance" title="View budget and performance reports"> Performance reports </a> </li> <li class="usa-identifier__required-links-item"> <a class="usa-identifier__required-link usa-link" href="https://www.gsa.gov/website-information/website-policies" title="Our privacy policy"> Privacy policy </a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services"> <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description text-base-lightest">Looking for U.S. government information and services?</div> <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a> </div> </section> </div> </footer>  <script async src="/assets/js/app-IYN3AA5J.js"></script>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS,18F"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HBYXWFP794"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-HBYXWFP794', { 'anonymize_ip': true }); </script> </body> </html>

CINXE.COM

18F: Digital service delivery | 18F Folks: Adopting a new illustration library