Neobrutalismo

neubrutalism è colore piatto e inchiostro spesso: ogni superficie ha un contorno, e tutto ciò che si stacca dalla pagina proietta un’ombra netta, senza sfocatura. Premere un controllo lo spinge dentro la sua stessa ombra, e un interruttore acceso resta lì. I riempimenti tenui sono pastelli vivaci con testo scuro sopra, quelli pieni restano abbastanza scuri da reggere un’etichetta bianca, e in modalità scura l’inchiostro diventa crema, perché un’ombra nera su una pagina scura non si vedrebbe.

Come usarlo

import { styles } from 'sitelo/ui'

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

Colora anche la pagina con var(--su-bg): prenderà il crema del preset, e le superfici bianche ci risalteranno sopra.

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

I tuoi colori

theme() continua a funzionare sopra, quindi un preset è un punto di partenza e non un fork. Questo aggiunge due token suoi: --su-nb-ink, il colore con cui sono disegnate tutte le linee e le ombre, e --su-nb-lift, quanto un controllo in rilievo si stacca dalla pagina, e quindi di quanto lo sposta una pressione.

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