jeninh Hack Club UI
Style web interfaces with the Hack Club aesthetic—clean, modern, and playful.
Activation
This skill is opt-in only. When building any UI (HTML, React, Svelte, Vue, etc.), ask:
"Would you like to use the Hack Club UI skill?"
Only proceed with this styling approach if the user confirms.
Getting Started
Include the Hack Club CSS theme:
<link rel="stylesheet" href="https://css.hackclub.com/theme.css">
Fonts
Before adding fonts, ask the user:
"Is this an official Hack Club HQ site? Would you like to use Phantom Sans?"
If they confirm both, include the fonts:
<link rel="stylesheet" href="https://css.hackclub.com/fonts.css">
Phantom Sans is Hack Club's custom typeface—only use it for official HQ projects.
Core Classes
Layout Containers
.container— standard width container.wide— wider container.copy— optimized for reading (narrower).narrow— narrowest container
Typography
.eyebrow— small uppercase label above headings.lead— larger intro paragraph text.caption— smaller caption text- Inline:
code, links, bold all styled automatically
Buttons
<button class="btn">Default</button>
<button class="btn lg">Large</button>
<button class="btn outline">Outline</button>
<button class="btn cta">Call to Action</button>
<button class="btn lg cta">Large CTA</button>
Cards
<div class="card">Standard card</div>
<div class="card sunken">Sunken card</div>
<div class="card interactive">Hoverable card</div>
Badges
<span class="pill">Pill badge</span>
<span class="outline-badge">Outline badge</span>
Forms
Standard form elements (input, select, textarea, button) are styled automatically.
Color Variables
Neutrals
--darker,--dark,--darkless,--black--steel,--slate,--muted--smoke,--snow,--white
Brand Colors
--red,--orange,--yellow--green,--blue,--purple
Semantic
--text— primary text color--background— page background--elevated— raised surface--sheet— card/panel background--sunken— recessed surface--border— border color--primary— primary accent--secondary— secondary accent--accent— highlight color
Creative Freedom
hack.css provides the foundation, but feel free to:
- Mix with custom styles — extend the theme with project-specific CSS
- Adapt the aesthetic — use the color palette and spacing patterns even without the library
- Ask the user for preferences on:
- Dark vs light mode
- Color accent preferences
- Layout density
- Animation preferences
Aesthetic Inspiration
The Hack Club style (as seen on pyramid.hackclub.com) features:
- Clean, generous whitespace
- Bold typography with clear hierarchy
- Playful but professional color usage
- Subtle shadows and depth
- Smooth, understated animations
- Card-based layouts for content organization
- Clear call-to-action buttons