Hack Club design system

The design system behind Hack Club's website, available as tokens, CSS and web components. Works with any framework, or none at all.

<link
  rel="stylesheet"
  href="https://unpkg.com/@hackclub/theme@2/dist/hackclub.css"
/>
<script
  type="module"
  src="https://unpkg.com/@hackclub/theme@2/dist/hackclub.js"
></script>

<hc-button arrow>Join Hack Club</hc-button>

Documentation → design.hackclub.com

Packages

Package	What it is
@hackclub/theme	Everything in one install, plus a single-file CDN bundle
@hackclub/tokens	Design tokens as JS, JSON, CSS custom properties and a Tailwind CSS v4 theme
@hackclub/css-base	Phantom Sans & Zarathustra, element defaults, prose styles, utility classes
@hackclub/components	Web components (<hc-button>, <hc-nav>, <hc-footer>…) built with Lit
@hackclub/meta	React component for generating social tags for <head>

Looking for the Theme UI theme for the previous version of hackclub.com? It's @hackclub/theme@1 on npm, and in this repo's history before v2.

Development

This is a Bun workspace managed with Lerna.

bun install          # also builds every package
bun run build        # rebuild packages (in dependency order)
bun run test         # unit tests (happy-dom)
bun run test:e2e     # clean build, tests, dist smoke test and docs build
bun run docs:dev     # design.hackclub.com on localhost

The docs site in /docs is built with Astro and deployed on Vercel. It imports the built packages, so run bun run build after changing a package.

License

Code is MIT. The Phantom Sans and Zarathustra font files in packages/css-base/fonts are Hack Club's brand typefaces, taken from hackclub.com, and are not covered by the MIT license.