npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@nasa-hds/core

v0.10.0

Published

NASA Horizon Design System (HDS) Core — design tokens, base styles, and USWDS theme configuration.

Downloads

466

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

abbybowmanabbybowmanegyptiankarimegyptiankarim

Keywords

nasahdshorizon-design-systemuswdsdesign-tokenssass

Readme

@nasa-hds/core

Status: Pre-1.0 Release npm USWDS: 3.13+

Pre-1.0: API and class names may change between minor versions.

What is HDS Core?

NASA Horizon Design System (HDS) Core is a CSS design system built as a theme layer on top of the U.S. Web Design System (USWDS). It applies NASA brand typography, color, spacing and component styling as required by NASA's web modernization policy NID 2800.147 and design standards.

HDS Core is intended for standalone NASA websites, applications and platforms approved to operate outside of the agency's flagship content management system (www.nasa.gov and science.nasa.gov), as well as microapps and embeds within the flagship that aren't styled by the CMS theme.

Before adopting HDS Core, please read our Getting Started guide to confirm your project aligns with NASA's web modernization and consolidation strategy. Interagency, non-.gov, and other non-NASA-branded sites should use USWDS instead.

Requirements

  • Node.js 20+
  • npm 10+
  • Peer dependency: @uswds/uswds 3.13+

Browser support: > 2%, last 2 versions, not dead (matches USWDS targets; IE not supported)

Documentation

Full documentation, component examples, and integration guides are published in a Storybook at https://nasa.github.io/hds-core/. Key pages include:

Installation

npm install --save-exact @nasa-hds/core

Pin the exact version while HDS is pre-v1.0: minor releases can rename custom properties and change component styling, so you want upgrades to happen when you choose.

@uswds/uswds is a peer dependency that npm 7 and later installs for you automatically. Install it explicitly (npm install --save-exact @nasa-hds/core @uswds/uswds) only when you want to pin its version yourself, or when your tooling does not auto-install peers. See Installation for the full setup.

What Ships

dist/
  css/
    hds.min.css         # Required: all USWDS components + HDS theme
    hds-uswds.min.css   # Optional: USWDS utility classes (.padding-*, etc.)
    hds-dataviz.min.css # Optional: data visualization color palettes
  assets/
    fonts/              # Inter, DM Mono, Public Sans (woff2)
    img/                # USWDS images and HDS icons
  js/
    uswds-init.min.js   # Runs early in <head>; readies interactive components (unmodified USWDS)
    uswds.min.js        # Component behavior; loaded deferred (unmodified USWDS)
src/
  scss/                 # Public Sass API: tokens, mixins, theme config

Usage

Required (all sites)

<link rel="stylesheet" href="node_modules/@nasa-hds/core/dist/css/hds.min.css" />

Optional: USWDS utility classes

For sites that rely on USWDS utility classes (.padding-2, .margin-top-3, etc.):

<link rel="stylesheet" href="node_modules/@nasa-hds/core/dist/css/hds-uswds.min.css" />
<link rel="stylesheet" href="node_modules/@nasa-hds/core/dist/css/hds.min.css" />

Load order does not matter. All styles use CSS cascade layers.

Optional: Data visualization

<link rel="stylesheet" href="node_modules/@nasa-hds/core/dist/css/hds-dataviz.min.css" />

Can be loaded standalone without hds.min.css for embedded chart contexts.

Sass API

Forward HDS Core once in your entry point:

@forward '@nasa-hds/core/scss';

Then @use '@nasa-hds/core/scss' as *; in each of your own Sass files to reach HDS tokens, USWDS functions, and HDS mixins. Configure the two Sass load paths and forward before your own USWDS-touching Sass. See the Sass Configuration guide for the full setup.

Bundle Sizes (gzipped)

| File | Size | Notes | | --------------------- | ------ | ----------------------------------------- | | hds.min.css | 46 KB | Required; HDS/USWDS styles and components | | hds-uswds.min.css | 47 KB | Optional; USWDS utility classes | | hds-dataviz.min.css | 1.2 KB | Optional; HDS data visualization styles |

Contributing to HDS Core

npm install
npm run dev    # Sass watch + Storybook
npm test       # Unit tests + USWDS version checks

See CONTRIBUTING.md for guidelines on submitting changes, the public API contract and the versioning policy.

For architecture details and build pipeline documentation, see ARCHITECTURE.md.

License

HDS Core is released into the public domain under CC0 1.0, except for bundled fonts (SIL OFL 1.1) and NASA trademarks/insignia. See LICENSE.md for full terms and attribution.