Building better websites faster with Noctua Technology and
US Web Design System
Learn more

A standardized design system for U.S. federal websites that ensures accessibility, responsiveness, and a consistent user experience. Built with flexible components, templates, and design tokens, it integrates seamlessly with modern frameworks. Pre-built UI elements like buttons, forms, and navigation follow best practices for usability and accessibility, helping teams deliver high-quality, scalable digital services faster and more efficiently.

Approach

At Noctua Technology, we recognize that every project is unique, with specific needs that demand tailored solutions. While the US Web Design System (USWDS) provides a solid foundation for building accessible and responsive websites, we saw an opportunity to create a version that better addresses the unique challenges faced by our clients. Our custom implementation of USWDS combines the reliability of the original framework with key enhancements that improve performance, flexibility, and scalability.

📦

Small

Streamlined for faster load times, ensuring that high-traffic websites perform efficiently without sacrificing user experience.

Reduced CSS and JavaScript overhead to minimize load time and improve overall site responsiveness.

⚡

Fast

Optimized for quick page loads, ensuring high performance even on complex and high-traffic government websites.

Faster response times and seamless interactions by reducing unnecessary processing and focusing on the user experience.

♿

Accessible

Built with strong accessibility support, including screen reader compatibility, keyboard navigation, and ARIA roles for a seamless user experience.

Designed to meet accessibility standards like Section 508 and WCAG, providing a user-friendly experience across a wide range of devices and user abilities.

🔄

Flexible

Modular components that can be used immediately without additional setup, enabling developers to get started quickly.

Seamless integration with modern development frameworks, providing flexibility to adapt to specific project requirements, workflows, and design preferences.

Getting Started

1. Install USWDS

Either install USWDS directly from NPM.

npm install @noctuatech/uswds

Or from a CDN.

<script type="module" src="https://esm.sh/@noctuatech/uswds/define.js?bundle"></script>

2. Use components directly in your HTML

After installing USWDS, you can start using the components in your HTML. The example below shows a basic form with various USWDS components including:

Alert component for notifications
Input fields with labels
Phone number input with masking
State selection dropdown
Submit button

<!-- USWDS needs to be told where to find static assets such as icons -->
<usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
  <form>
    <usa-input name="name" placeholder="Bob Smith">Name</usa-input>
    <usa-input name="email" placeholder="my@email.com">Email</usa-input>

    <usa-input-mask mask="(999) 999-9999">
      <usa-input name="phone" placeholder="(xxx) xxx-xxxx">
        Phone
      </usa-input>
    </usa-input-mask>
    
    <usa-button type="submit">Submit</usa-button>
  </form>
</usa-config>

Our Commitment to the USWDS Community

At Noctua Technology, we believe in continuous improvement and collaboration with the development community. That's why we're proud to be active contributors to the USWDS project. Our team participates in continued enhancement of USWDS, ensuring that the framework continues to evolve with the needs of government websites and their users.

By contributing to the USWDS project, we not only stay on the cutting edge of web development practices but also help shape the future of digital accessibility and user experience for government services.

Building better websites faster with Noctua Technology and US Web Design System Learn more