Neumorphism

neumorphism is soft UI: every surface is the page itself, and a control stands out by light and shade alone — raised from the page, or pressed into it. It keeps two things the look usually gives up, text that clears WCAG AA and the focus outline, and it follows dark mode like everything else. It does need the page’s own background to be var(--su-bg), since the effect rests on the two being one colour.

A card

The same markup, restyled by one sheet.

  1. Account

  2. Profile

  3. Confirm

Progress50%
50
Saved
Your changes are live.
Copied to clipboard
What is a preset?
A second sheet that restyles every component at once.
Does it follow dark mode?
Yes — try the toggle at the top of the page.
Can I still use theme()?
Yes, and it wins over the preset.

  1. Today

    Preset shipped

    The whole look, in one call.

  2. Yesterday

    Docs written

  3. Monday

    First sketch

The whole look, in one call.
Link it after the core sheet.
One option: preset.
DraftLiveArchived
AL312GH

Using it

import { styles } from 'sitelo/ui'

head(
  title('My site'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

Your own colours

theme() still works on top, so a preset is a starting point rather than a fork. This one adds a tenth slot to each palette, glow — the colour a progress bar or a switch fades into at its far end — so a new primary can bring its own.

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)