# Neomorphism — AI design spec

> A style that uses soft shadows and highlights to create an illusion of elements extruding from or receding into the background, giving a soft, plastic-like feel.
>
> Style page: https://www.aiwebstyle.com/styles/neomorphism.html · Live preview: https://www.aiwebstyle.com/previews/neomorphism.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

A style that uses soft paired shadows — one light, one dark — to make elements appear extruded from or pressed into the background, producing a soft, moulded-plastic feel.

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `var(--neo-bg)` | Page background (solid fallback) |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `var(--neo-text-color)` | Body text |
| `--heading-color` | `#484848` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#337ab7` | Link and inline accent |
| `--link-hover-color` | `#23527c` | Link hover |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#d1d1d1` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `var(--neo-bg)` | Card surface |
| `--card-border-radius` | `20px` | Card corner radius |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `var(--neo-bg)` | Sticky header surface |
| `--header-text-color` | `var(--neo-text-color)` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `var(--neo-bg)` | Primary button fill |
| `--button-text-color` | `var(--neo-text-color)` | Primary button label |
| `--button-border` | `1px solid #cacaca` | Primary button border |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#d1d1d1` | Code / prompt block surface |
| `--prompt-text-color` | `#666` | Code / prompt block text |
| `--prompt-shadow` | `inset 3px 3px 5px var(--neo-shadow-dark), inset -3px -3px 5px var(--neo-shadow-light)` | Code / prompt block elevation |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-pop)` | Body font stack |
| `--heading-font` | `var(--font-pop)` | Heading font stack |

### Other tokens in this theme

| Token | Value |
|---|---|
| `--neo-bg` | `#e0e0e0` |
| `--neo-text-color` | `#5c5c5c` |
| `--neo-shadow-light` | `#ffffff` |
| `--neo-shadow-dark` | `#a3b1c6` |
| `--card-shadow-extrude` | `8px 8px 15px var(--neo-shadow-dark), -8px -8px 15px var(--neo-shadow-light)` |
| `--card-shadow-press` | `inset 5px 5px 10px var(--neo-shadow-dark), inset -5px -5px 10px var(--neo-shadow-light)` |
| `--button-shadow` | `5px 5px 10px var(--neo-shadow-dark), -5px -5px 10px var(--neo-shadow-light)` |
| `--button-hover-shadow` | `3px 3px 7px var(--neo-shadow-dark), -3px -3px 7px var(--neo-shadow-light)` |
| `--button-border-radius` | `10px` |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a web interface using Neomorphism. Elements should appear as if they are extruding from the background or pressed into it, using subtle inner and outer shadows. Use a monochromatic color scheme with soft, rounded shapes.
```

---

*Generated from the `neomorphism` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*