Neubrutalism

neubrutalism is flat colour and thick ink: every surface is outlined, and anything that stands off the page casts a hard shadow with no blur. A press pushes a control down into its own shadow, and a toggle that is on stays there. The soft fills are bright pastels with dark text on them, the solids stay dark enough to carry a white label, and in dark mode the ink turns cream, since a black shadow on a dark page would not show.

Using it

import { styles } from 'sitelo/ui'

head(
  title('My site'),
  styles({ preset: 'neubrutalism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neubrutalism-3f1a9c42.css">

Paint the page with var(--su-bg) too, and it takes the preset’s cream, with the white surfaces standing out from it.

body {
  background: var(--su-bg);
}

Your own colours

theme() still works on top, so a preset is a starting point rather than a fork. The preset adds two tokens of its own: --su-nb-ink, the colour every line and shadow is drawn in, and --su-nb-lift, how far a raised control stands off the page and so how far a press moves it.

head(
  styles({ preset: 'neubrutalism' }),
  theme({
    primary: { base: '#c2185b', hover: '#a8144e', active: '#8e1042', soft: '#ffb3d0', softFg: '#5c0a2a' },
    '--su-nb-lift': '6px',
  }),
)