Design KitDark ThemeDogfoodedv0.3.0

Neubrutalism Design Kit (MetalHatsCats)

A living, dogfooded design kit: tokens + UI components used across MetalHatsCats. Built for dark-theme readability, strong SEO surfaces, and fast shipping.

Published By MetalHatsCats
Component docsProduct landingContact

Versioning

Current version

v0.3.0 (tracked in-repo). The sellable package comes after the kit is stable under real production usage.

Rule of growth

We only add new components when a real page needs them. If it’s not used in production, it doesn’t ship in the kit.

Changelog

v0.3.0

2026-02-25
  • Split docs into /design-kit (overview) and /design-kit/components/* (scalable structure).
  • Added a shared catalog module so landing pages and docs stay consistent.
  • Switched the product page from noisy demo content to a credible landing + docs links.

v0.2.0

2026-02-24
  • Introduced multi-domain-safe URL helpers for metadata and JSON-LD usage in kit pages.
  • Standardized token naming for highlights and hard shadows in dark theme.

v0.1.0

2026-02-20
  • Initial public kit page with core components and patterns.

Tokens

Tokens are CSS variables that control borders, shadows, and highlights. Keep them centralized and theme-safe, then build components on top.

Border

Thick, high-contrast borders for legible separation on dark surfaces.

Value: var(--mhc-border) solid var(--mhc-border-color)

Shadow

Hard offset shadows (no blur) for a tactile, sticker-like feel.

Value: var(--mhc-shadow) / var(--mhc-shadow-sm)

Radius

Rounded corners that stay bold (not glossy) under heavy borders.

Value: var(--mhc-radius)

Highlight: Yellow

Primary emphasis token for inline highlights and CTAs.

Value: var(--mhc-hl-yellow)

Highlight: Pink

Secondary emphasis token for stamps, chips, and “hot” states.

Value: var(--mhc-hl-pink)

Highlight: Lavender

Tertiary emphasis token for calm focus (docs, meta, helper UI).

Value: var(--mhc-hl-lavender)

app/globals.css (tokens)
css
:root {
  --mhc-border: 4px;
  --mhc-radius: 14px;
  --mhc-hl-yellow: #FFEA7A;
  --mhc-hl-pink: #FF8BD0;
  --mhc-hl-lavender: #C7B9FF;
}

Components

Component docs are split into individual pages so the kit can scale without turning into one long page.

Browse all component docsOpen a component

People also ask

Is this a separate product or part of the site?

Today it’s the living kit used by MetalHatsCats (this repo). The commercial “exported kit” is planned, but the priority is dogfooding: building real pages, shipping real UX, keeping it fast and consistent.

Does it work in dark mode?

Yes. The site runs a dark-first theme and the tokens are designed for contrast and legibility on dark surfaces.

Where are the component docs?

Component docs live under /design-kit/components.

Next step

Want the sellable kit version?

If you want an exportable package (docs + components + tokens) with a license and versioning, let’s scope it.

ContactProduct landing