# Skeuomorphism — AI design spec

> Mimics real-world materials, textures, and shadows for a realistic feel.
>
> Style page: https://www.aiwebstyle.com/styles/skeuomorphism.html · Live preview: https://www.aiwebstyle.com/previews/skeuomorphism.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

Skeuomorphism is an interface design method whose core lies in imitating the appearance, material, texture, and interaction methods of corresponding objects in the real world, striving to create a realistic and familiar feeling on the digital interface.

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#e5d9b3` | Page background (solid fallback) |
| `--page-bg-gradient` | `none` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#3b2f2f` | Body text |
| `--heading-color` | `#6b4423` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#8b4513` | Link and inline accent |
| `--link-hover-color` | `#a0522d` | Link hover |

### Borders

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

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#d2b48c` | Card surface |
| `--card-border-radius` | `6px` | Card corner radius |
| `--card-shadow` | `var(--skeuo-shadow-outset), 0 3px 5px rgba(0,0,0,0.2)` | Card at rest |
| `--card-hover-shadow` | `var(--skeuo-shadow-outset), 0 5px 8px rgba(0,0,0,0.3)` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#8b4513` | Sticky header surface |
| `--header-text-color` | `#f5f5dc` | Header text and nav links |
| `--header-shadow` | `inset 0 -3px 5px rgba(0,0,0,0.3)` | Header elevation (usually `none`) |

### Footer

| Token | Value | Purpose |
|---|---|---|
| `--footer-bg` | `#e5d9b3` | Footer surface |
| `--footer-text-color` | `#6b4423` | Footer text |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `linear-gradient(to bottom, #b8860b, #cd853f)` | Primary button fill |
| `--button-text-color` | `white` | Primary button label |
| `--button-hover-bg` | `linear-gradient(to bottom, #cd853f, #b8860b)` | Primary button hover fill |
| `--button-border` | `1px solid #8b4513` | Primary button border |
| `--button-secondary-bg` | `linear-gradient(to bottom, #f0e68c, #eee8aa)` | Secondary button fill |
| `--button-secondary-text-color` | `#5e3a1d` | Secondary button label |
| `--button-secondary-hover-bg` | `linear-gradient(to bottom, #eee8aa, #f0e68c)` | Secondary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#f5f5dc` | Code / prompt block surface |
| `--prompt-text-color` | `#4a3c2a` | Code / prompt block text |
| `--prompt-shadow` | `var(--skeuo-shadow-inset)` | Code / prompt block elevation |

### Type

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

### Other tokens in this theme

| Token | Value |
|---|---|
| `--skeuo-texture-dark` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")` |
| `--skeuo-texture-light` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a0522d' fill-opacity='0.05' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E")` |
| `--card-bg-image` | `var(--skeuo-texture-light)` |
| `--button-shadow` | `var(--skeuo-shadow-outset)` |
| `--button-hover-shadow` | `var(--button-shadow)` |
| `--button-secondary-border` | `1px solid #bdb76b` |
| `--prompt-bg-image` | `none` |
| `--button-border-radius` | `4px` |

## 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 skeuomorphic UI element, like a leather-bound notebook app interface. Use realistic leather texture, stitching details, drop shadows, and maybe a textured paper background. Font like Georgia or a classic serif.
```

---

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