# @nasa-hds/core v0.10.0 > NASA Horizon Design System (HDS) Core — design tokens, base styles, and USWDS theme configuration. HDS Core ships compiled CSS and Sass. It is not a component library and adds no JavaScript of its own. Components are applied as classes on standard HTML markup, and each page below includes the markup for every example. - HDS Core is for NASA-branded `*.nasa.gov` websites only. Other federal sites should use USWDS directly. - HDS Core is a theme layer on USWDS, not a replacement. Use the markup on these pages instead of USWDS markup from memory: HDS adds classes and changes defaults, and components without HDS theming ship USWDS defaults. - Class prefixes: `usa-*` for components that map to a USWDS component, `hds-*` for HDS-only components. All classes within one component share its prefix (`usa-accordion__*`, `hds-blockquote__*`), but components with different prefixes can nest inside each other and sit on the same page. - Examples show the markup to write. Interactive components (accordion, in-page navigation, sortable tables, mobile menu) also need the unmodified USWDS scripts, `uswds-init.min.js` in `` and `uswds.min.js` loaded `defer`, which generate the rest at runtime. Do not hand-write the generated parts. - Never hard-code a value that a design token covers (spacing, color, font, line height, letter spacing, border). Use the CSS custom property (`var(--hds-spacing-2)`) or, in Sass, the matching variable (`$hds-spacing-2`). When a design calls for a value close to a token, such as 15px where `--hds-spacing-2` is 16px, use the token. When no token is close, tell the human instead of inventing a value. Every token is listed on the Design Tokens page. - Whole-number spacing steps (`--hds-spacing-1`, `-2`, `-3`) are for layout. Fractional steps (`-0-5`, `-1-5`, `-2-5`) are for spacing inside a component only. Data visualization color tokens (`--hds-dataviz-*`) are for charts only. - To change a section background, put an `hds-palette-*` class (`white`, `light`, `midtone`, `dark`, `blue`, `black`) on its container and the components inside adapt. Do not hard-code colors. ## Overview - [Design Standards](https://nasa.github.io/hds-core/llms/overview-design-standards.md): These standards define what every standalone NASA website must achieve visually to comply with NID 2800.147. - [Design Tokens](https://nasa.github.io/hds-core/llms/overview-design-tokens.md): The complete HDS Core token reference. - [Getting Started](https://nasa.github.io/hds-core/llms/overview-getting-started.md): This page helps you figure out whether HDS Core is the right tool for your project and where to go next. - [Installation](https://nasa.github.io/hds-core/llms/overview-installation.md): Technical setup for integrating HDS Core into your project. - [Introduction](https://nasa.github.io/hds-core/llms/overview-introduction.md): HDS is NASA's unified visual language for public-facing websites. - [Roadmap](https://nasa.github.io/hds-core/llms/overview-roadmap.md): HDS Core is working toward a **v1.0 release**. ## Foundations - [Accessibility](https://nasa.github.io/hds-core/llms/foundations-accessibility.md): HDS meets **WCAG 2.1 AA** standards, targeting **AAA (7.0:1)** for body text and headings. - [Color](https://nasa.github.io/hds-core/llms/foundations-color.md): Color is used in restrained and purposeful ways throughout HDS. - [Color Contrast Tool](https://nasa.github.io/hds-core/llms/foundations-color-contrast-tool.md): Check the contrast ratio between any two HDS primitive colors. - [Color Palettes](https://nasa.github.io/hds-core/llms/foundations-color-palettes.md): HDS provides six color palettes that automatically adapt typography, links, buttons, icons, and borders to their background. - [Data Visualization](https://nasa.github.io/hds-core/llms/foundations-data-visualization.md): Guidance for creating charts and data visualizations that are consistent with HDS and accessible to all users. - [Data Visualization Palettes](https://nasa.github.io/hds-core/llms/foundations-data-visualization-palettes.md): Color palettes for use in charts and data visualizations. - [Grid](https://nasa.github.io/hds-core/llms/foundations-grid.md): The basis of NASA.gov is a strong foundation for positioning elements on screen. - [Icons](https://nasa.github.io/hds-core/llms/foundations-icons.md): Icons are recognizable visual symbols that communicate messages at a glance. - [Spacing](https://nasa.github.io/hds-core/llms/foundations-spacing.md): All elements, components, and modules should align to an **8px baseline grid** whenever possible. - [Typography](https://nasa.github.io/hds-core/llms/foundations-typography.md): Typography helps create clear hierarchies, organize information, provide visual interest, and guide users through the site. ## Components - [Accordion](https://nasa.github.io/hds-core/llms/components-accordion-guidance.md): Expandable sections that let users show and hide content, reducing vertical scrolling on long pages. - [Blockquote](https://nasa.github.io/hds-core/llms/components-blockquote-guidance.md): Blockquotes highlight quotes with a bold typographic treatment. - [Breadcrumb](https://nasa.github.io/hds-core/llms/components-breadcrumb-guidance.md): Breadcrumbs are a secondary navigation component that helps visitors understand where the current page is in the site hierarchy. - [Button](https://nasa.github.io/hds-core/llms/components-button-guidance.md): A button draws attention to important actions with a large selectable surface. - [Checkbox](https://nasa.github.io/hds-core/llms/components-checkbox-guidance.md): Checkboxes allow users to select zero, one, or multiple options from a list. - [Form](https://nasa.github.io/hds-core/llms/components-form-guidance.md): Forms are groups of related input fields that allow users to enter information or configure options. - [Icon Button](https://nasa.github.io/hds-core/llms/components-icon-button-guidance.md): Circle-shaped buttons containing a single icon and no visible text. - [In Page Navigation](https://nasa.github.io/hds-core/llms/components-in-page-navigation-guidance.md): A fixed sidebar for navigating long-form content. - [Intro Text](https://nasa.github.io/hds-core/llms/components-intro-text-guidance.md): Intro text is a larger, lighter lead paragraph that introduces a page or section. - [Link](https://nasa.github.io/hds-core/llms/components-link-guidance.md): Links direct visitors to other pages on and off the NASA website. - [List](https://nasa.github.io/hds-core/llms/components-list-guidance.md): Lists group related text items. - [Pagination](https://nasa.github.io/hds-core/llms/components-pagination-guidance.md): Pagination allows users to move between pages of content. - [Prose](https://nasa.github.io/hds-core/llms/components-prose-guidance.md): Prose applies HDS styling to a block of bare HTML elements using the `.usa-prose` wrapper class. - [Radio Button](https://nasa.github.io/hds-core/llms/components-radio-button-guidance.md): Radio buttons allow users to select exactly one option from a list. - [Select](https://nasa.github.io/hds-core/llms/components-select-guidance.md): Select fields allow users to choose one option from a dropdown list. - [Side Navigation](https://nasa.github.io/hds-core/llms/components-side-navigation-guidance.md): The side navigation component is a vertical list of links used for navigating between pages within a section or topic. - [Site Alert](https://nasa.github.io/hds-core/llms/components-site-alert-guidance.md): HDS site alerts use standard USWDS `.usa-site-alert` markup with HDS theming applied automatically. - [Table](https://nasa.github.io/hds-core/llms/components-table-guidance.md): A table shows information in columns and rows. - [Text Input](https://nasa.github.io/hds-core/llms/components-text-input-guidance.md): Text inputs and textareas capture text from users. ## Guides - [Existing USWDS Site](https://nasa.github.io/hds-core/llms/guides-existing-uswds-site-guidance.md): HDS Core adopts onto an existing USWDS 3.x site. - [No-Build Environments](https://nasa.github.io/hds-core/llms/guides-no-build-environments.md): HDS Core works without a build step. - [React Setup](https://nasa.github.io/hds-core/llms/guides-react-setup.md): This guide covers HDS Core integration for React projects. - [Sass Configuration](https://nasa.github.io/hds-core/llms/guides-sass-configuration.md): The Sass path lets you build your own components in the HDS design language. ## About - [Changelog](https://nasa.github.io/hds-core/llms/about-changelog.md) - [Contributing](https://nasa.github.io/hds-core/llms/about-contributing.md): HDS Core is NASA's design system for public-facing websites on `*.nasa.gov` domains. - [Credits](https://nasa.github.io/hds-core/llms/about-credits.md): HDS Core exists because of the work of many people across NASA, the federal government, and the open-source community. - [Section 508 Conformance](https://nasa.github.io/hds-core/llms/about-section-508-conformance.md): Accessibility conformance documentation for the NASA software release process.