@gomiui/theme-gothic

Dark-only atmospheric gothic theme for Gomiui — deep blue-gray surfaces, distressed display heading, and pastel categorical accents that glow against the dark page like illuminated panels. Uses Manufacturing Consent for headings, Fustat for body text, and Lucide icons.

Gothic is a single-mode theme: it always renders dark, regardless of the user's system color preference. For best browser-chrome integration (scrollbars, native form controls), pass mode="dark" to your XDSTheme provider.

Install

npm install @gomiui/theme-gothic

Usage

Wrap your app with XDSTheme and pass the theme:

import {XDSTheme} from '@gomiui/core/theme';
import {gothicTheme} from '@gomiui/theme-gothic/built';

function App() {
  return (
    <XDSTheme theme={gothicTheme} mode="dark">
      {/* your app */}
    </XDSTheme>
  );
}

Import paths

| Path | Use case | | ----------------------------- | ------------------------------------------------------ | | @gomiui/theme-gothic | Source build (StyleX compilation via @gomiui/build) | | @gomiui/theme-gothic/built | Pre-built dist (Tailwind, plain CSS, or no build step) | | @gomiui/theme-gothic/theme.css | Pre-built CSS file (import in your stylesheet) |

If you're using @gomiui/build for StyleX source compilation, import from the bare path. Otherwise, use /built.

CSS import

Add the theme CSS to your stylesheet:

@import '@gomiui/theme-gothic/theme.css';

Aesthetic

Gothic is dark-only by design: every token is a single value, and the output CSS contains no light-dark(), so the theme renders identically whether the user prefers light or dark.

| Aspect | Choice | | ------------ | ------------------------------------------------------ | | Mode | Dark only, no light variant | | Neutral | Cool blue-gray (#101314 → #E8F1F6) | | Status | Forest moss, blood crimson, candlelight amber | | Categorical | Pastel-on-dark: light backgrounds, dark text | | Radius | Subtle rounding (2–24px) | | Motion | Slower / theatrical (150ms → 800ms, 0.75 ratio) | | Type scale | 14px base, 1.2 ratio |

Fonts

This theme uses custom typefaces:

| Role | Font | Vibe | | ------- | --------------------- | -------------------------- | | Body | Fustat | Clean modern sans | | Heading | Manufacturing Consent | Distressed display | | Code | JetBrains Mono | Crisp, monospaced |

These fonts must be loaded separately. The theme references them by name but does not bundle the font files.

Add this to your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Manufacturing+Consent&display=swap" />

Without this, the theme falls back to system fonts (heading falls through Manufacturing Consent → UnifrakturMaguntia → Old English Text MT → serif).

Tonal palettes

The theme exports raw tonal palettes for custom components or data visualization. Each palette has 21 tone steps (0–100 in 5s):

import {gothicPalettes} from '@gomiui/theme-gothic';

// e.g. cathedral plum at tone 50
const plum = gothicPalettes.purple[50]; // '#a363bd'

// or use the metadata for derived tools
const {hue, chroma} = gothicPalettes.neutral; // {hue: 210, chroma: 4}

Available palettes: neutral, blue, cyan, green, orange, pink, purple, red, teal, yellow.