@wtfalch/house

The wtfalch house look: the Good Company identity and its theme.

Three layers, each falling back to the one under it.

| Layer | What it is | Where it lives | | --- | --- | --- | | System | the components and the base values | @wtfalch/design | | Identity | the two faces, the type scale, the corners, the density | here | | Palette | colour, and only colour | here, one theme for now |

The mark stays with the product. Manage's is four dots, in Manage's own repo, because a mark is the one thing an app does not share with its siblings.

import { bindProduct, defineProduct } from '@wtfalch/design'
import { GOOD_COMPANY, HOUSE_DEFAULT_THEME, HOUSE_THEMES } from '@wtfalch/house'
import { DOTS } from './marks'

export const product = defineProduct({
  name: 'Manage',
  mark: DOTS,
  identity: GOOD_COMPANY,
  themes: HOUSE_THEMES,
  defaultTheme: HOUSE_DEFAULT_THEME,
})

export const { Brand, productCss } = bindProduct(product)

Load the faces once, in the app's root layout:

import { GOOD_COMPANY_FONTS } from '@wtfalch/house'

<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link rel="stylesheet" href={GOOD_COMPANY_FONTS} />

A CSP, offline or privacy-constrained deployment that cannot make that one live call to Google Fonts self-hosts instead, with goodCompanyFontFace:

import { goodCompanyFontFace } from '@wtfalch/house'

const css = goodCompanyFontFace({
  figtree: { regular: '/fonts/figtree-400.woff2', strong: '/fonts/figtree-650.woff2' },
  bricolageGrotesque: {
    regular: '/fonts/bricolage-400.woff2',
    strong: '/fonts/bricolage-650.woff2',
  },
  jetbrainsMono: { regular: '/fonts/jetbrains-mono-400.woff2' },
})

<style dangerouslySetInnerHTML={{ __html: css }} />

It writes @font-face rules for the same three family names GOOD_COMPANY already expects, at the two weights the identity actually uses -- the files themselves (and their licence terms) are the consumer's own to source, this only wires them in place of the CDN call.

Density

GOOD_COMPANY_COMPACT is the same identity with --density at 0.85 instead of 1 -- the same fonts, corners and shadows, every --space-* step 15% tighter. Swap it in wherever an app wants the admin-grid-dense read (Manage, Operator) instead of the boards' comfortable default:

export const product = defineProduct({
  name: 'Manage',
  mark: DOTS,
  identity: GOOD_COMPANY_COMPACT,
  themes: HOUSE_THEMES,
  defaultTheme: HOUSE_DEFAULT_THEME,
})

Afterhours

The dark half of the palette: warm near-black, the same rust accent lifted to a bright orange so it still carries the primary button's label, the same four status hues lifted the same way. HOUSE_THEMES.afterhours -- Good Company stays HOUSE_DEFAULT_THEME until an app offers the choice; a theme nothing selects is a palette nobody has looked at.

The gate

pnpm test runs contrastFailures over every palette and asserts []. It measures the tints components actually draw text on, not just the base pairs. A hex changed without that suite re-run is a screen nobody has put through the ratio.