missiondesign

Mission Design System: the design system for United States government websites. Tokens, self-hosted typefaces, a theme for each agency, component styles and the machine-readable data, built by MetaPhase.

npm install missiondesign

/* Everything: typefaces, tokens, font switches, mission themes, components */
@import 'missiondesign/mds.css';

Or take only what you need:

| Import | Contents | |---|---| | missiondesign/typefaces.css | Instrument Serif, Inter and Geist Mono, self-hosted | | missiondesign/tokens.css | Core tokens and the America theme, light and dark | | missiondesign/fonts.css | data-font-display and data-font-sans switches | | missiondesign/themes.css | Every mission theme, scoped by data-mission | | missiondesign/themes/<id>.css | One agency theme as a standalone :root theme | | missiondesign/components.css | Component styles (mds-* classes) | | missiondesign/data/* | Manifest, tokens, components, templates, patterns, rules and the theme index (themes/index.json), and the page templates as HTML and React source under templates/ | | missiondesign/assets/seals/*, assets/logos/* | Agency seals and logos, credited in each mission record |

Set the theme on <html>:

<html data-theme="light" data-mission="usda">

Documentation: https://missiondesign.us

License

Protoware License v1.0. Built by MetaPhase.