Néo-brutalisme

neubrutalism est de la couleur franche et de l’encre épaisse : chaque surface est cernée, et tout ce qui se détache de la page projette une ombre dure, sans flou. Un appui enfonce le contrôle dans sa propre ombre, et un interrupteur activé y reste. Les remplissages doux sont des pastels vifs portant un texte sombre, les pleins restent assez sombres pour porter un libellé blanc, et en mode sombre l’encre devient crème, car une ombre noire ne se verrait pas sur une page sombre.

L’utiliser

import { styles } from 'sitelo/ui'

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

Peignez aussi la page avec var(--su-bg) : elle prend alors le crème du préréglage, sur lequel les surfaces blanches se détachent.

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

Vos propres couleurs

theme() fonctionne toujours par-dessus : un préréglage est un point de départ, pas un fork. Celui-ci ajoute deux jetons à lui : --su-nb-ink, la couleur de chaque trait et de chaque ombre, et --su-nb-lift, la distance à laquelle un contrôle en relief se tient de la page — et donc celle dont un appui le déplace.

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