Neumorphism

# Neumorphism (Soft UI)

You are building a frontend UI. Apply the **Neumorphism** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

Elements share the exact color of the background and are shaped only by a light highlight at the top left and a dark shadow at the bottom right; inner shadows express recesses. The interface looks molded from a single piece of soft plastic or clay — quiet, gentle and tactile.

## Design tokens

### Colors

- `background` `#E4E9F0` — page background
- `surface` `#E4E9F0` — cards, panels and raised surfaces
- `text` `#2F3542` — primary text
- `muted` `#58627A` — secondary text, captions, placeholders
- `accent` `#4F5BD5` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#CBD3DF` — dividers, outlines, input borders
- `highlight` `#FFFFFF` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Nunito` (Google Fonts, weights 700 / 800) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Body text: `Nunito` (Google Fonts, weights 400 / 600) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Type scale (px): 12 · 14 · 16 · 18 · 24 · 34 · 48

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 12 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 12 / 20 / 32 px
- Border: no borders
- Shadows (sm / md / lg): `3px 3px 6px #A3B1C6, -3px -3px 6px #FFFFFF` / `6px 6px 12px #A3B1C6, -6px -6px 12px #FFFFFF` / `10px 10px 24px #A3B1C6, -10px -10px 24px #FFFFFF`

### Motion

- Durations (fast / base): 150ms / 300ms
- Easing: `cubic-bezier(0.25, 0.8, 0.25, 1)`

### Signature effects

- `--neu-inset`: `inset 4px 4px 8px #A3B1C6, inset -4px -4px 8px #FFFFFF`
- `--neu-inset-deep`: `inset 6px 6px 12px #A3B1C6, inset -6px -6px 12px #FFFFFF`

## Do

- Give elements exactly the same color as the background (e.g. #E4E9F0).
- Raise elements with dual outer shadows: light #FFFFFF to the top left, dark #A3B1C6 to the bottom right.
- Show inputs, selected items and pressed states as recesses with dual inner shadows.
- Use large 12–32px radii and no outlines.
- Use a single accent color for the most important actions and the focus glow.

## Don't

- Do not use outlines, hard shadows or saturated background colors.
- Do not use dual shadows on pure white or dark backgrounds.
- Do not use light grey for body text.
- Do not distinguish buttons from non-interactive cards with shadows alone.

## Components

- **Buttons**: Pill buttons the same color as the background with dual outer shadows, switching to inner shadows when pressed. The primary button may use accent-colored text or an accent fill with a soft shadow.
- **Cards**: Large-radius cards the same color as the background, raised with larger dual shadows; icons inside sit in recessed circular wells.
- **Forms**: Inputs are recessed troughs (dual inner shadows) with a thin accent glow on focus; checkboxes and switches also use raised and recessed states.
- **Navigation**: Navigation sits in a raised bar, with the current item as a recessed pill.
- **Layout**: Generous whitespace so shadows can spread; keep at least 24px between elements.
- **Imagery & icons**: Single-color line icons inside recessed or raised circles; avoid photos and colorful illustrations that break the single-material illusion.

## Accessibility

- Edges rely on shadows alone and contrast is very low — give important buttons accent text or an accent fill so they stay recognizable.
- Focus states need a clear outline or glow, not just a shadow change.
- Keep at least 4.5:1 contrast between text and background; never use light grey for body text.

_Generated by Style Museum._