# Design System: Skeumorphism 擬物質感

> Direction from TypeUI's Skeumorphism design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Interfaces that behave like real objects. Buttons look pressable because they're built from the same light logic as a physical switch — a raised surface, a light source from above-left, a shadow that changes when you push it. The system mimics real-world materials (brushed plastic, warm metal, soft rubber) to make every control feel graspable and its state instantly legible, without tipping into pastiche.

**Atmosphere Keywords:** Tactile, Warm, Pressable, Layered, Playful, Physical, Grippy, Confident

**Visual Anchors:**
- Layered material surfaces — a panel sits on a panel sits on a base, each with its own light/shadow pair
- Buttons with a real "pressed" state: raised shadow at rest, inset shadow when active
- Warm fiery-orange primary + amber secondary — the palette itself feels warm to the touch
- Soft, rounded geometry (12–20px radii) — nothing skeuomorphic should have a sharp edge
- Dual-shadow technique: a light highlight (top-left) paired with a dark shadow (bottom-right) on every raised surface

**Mood Board References:**
- 早期 iOS／webOS 的擬物化控制介面（撥號盤、開關、儀表板）
- 音響設備與家電的實體按鍵與旋鈕
- 縫線皮革與磨砂塑膠質感
- 儀表板指示燈（LED）與撥動開關

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟠 | 熾焰橙 Ember Orange | `#FA3C00` | Primary — primary actions, key accents |
| 🟡 | 暖琥珀 Warm Amber | `#F08321` | Secondary — secondary actions, warm fills |
| ⬛ | 炭墨黑 Charcoal Ink | `#111827` | Text — body, headings |
| ⬜ | 瓷面白 Porcelain White | `#FFFFFF` | Surface — card and page background |

### Derived Palette（材質色，原創設計）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟫 | 陶土灰 Clay Gray | `#E7E1D4` | Base panel material — the "casing" behind every raised control |
| ⚙️ | 磨砂銀 Brushed Silver | `#C7C2B4` | Inset-shadow tone, knob/dial rim, secondary material |
| 🌘 | 壓紋深棕 Pressed Umber | `#7A6F5C` | Deep shadow tone for pressed/inset states |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#16A34A` | Confirmations, "on" LED state |
| Warning 警示 | `#D97706` | Caution states |
| Danger 危險 | `#DC2626` | Errors, destructive actions |

**Rule:** Every colored surface (orange, amber, or neutral) gets the same dual-shadow treatment — a light highlight and a dark shadow — so material logic stays consistent whether the surface is warm or neutral.

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | `'Germania One', 'Noto Sans TC', sans-serif` | Headings, panel labels, hero — bold engraved-plate character for Latin glyphs, CJK fills via font-fallback |
| `--font-body` | `'Roboto', 'Noto Sans TC', sans-serif` | Body copy, UI labels, forms |
| `--font-mono` | `'JetBrains Mono', monospace` | Code, data readouts, stat displays |

**Pairing logic:** Germania One reads like text engraved into a metal plate — used only for headings and panel titles where that weight earns its keep. Roboto keeps every-day UI (buttons, forms, body copy) clean and universally legible, exactly the contrast the reference calls for between "clean readable body" and "bold characterful headline voice."

### Scale

| Element | Size | Font | Weight |
|---------|------|------|--------|
| h1 | 32px | display | 400 (Germania One is single-weight) |
| h2 | 24px | display | 400 |
| h3 | 20px | body | 700 |
| Body | 16px | body | 400 |
| Lead body | 20px | body | 400 |
| Caption | 12–14px | body | 500 |

### Link Style

- Links: Ember Orange, no underline
- Hover: underline appears + text nudges to full-opacity Warm Amber

---

## 4. Component Stylings

### Dual-Shadow Material Token（系統核心 token）

```css
--raised: 6px 6px 12px rgba(122,111,92,0.35), -4px -4px 10px rgba(255,255,255,0.9);
--inset:  inset 4px 4px 8px rgba(122,111,92,0.4), inset -3px -3px 6px rgba(255,255,255,0.7);
--radius-tactile: 16px;
```

Every raised control uses `--raised`; every pressed/active/toggled-on state swaps to `--inset`. This single pair of tokens is what makes the whole system read as "physical."

### Buttons (Pressable)

- Default: Clay Gray or Ember Orange fill, `--raised` shadow, `--radius-tactile`
- `:active` / `.pressed`: shadow swaps to `--inset`, content shifts `translateY(2px)` — the button visibly sinks
- Primary buttons: Ember Orange fill, white text; Secondary: Warm Amber fill

### Toggle Switch

- Track: inset Clay Gray groove (`--inset`)
- Thumb: raised white circle (`--raised`) that slides and gains an Ember Orange fill + green LED dot when "on"

### Knob / Dial

- Circular Brushed Silver base with a radial gradient (light top-left, dark bottom-right) and a single indicator notch that rotates with value — a direct analog-control metaphor

### LED Indicator

- 10px circle, off-state = Pressed Umber with faint inset shadow; on-state = Success green with a soft outer glow (`0 0 6px`) — the one place in the system a glow is allowed, because real LEDs glow

### Cards

- Clay Gray casing, white inner panel inset with `--inset`, `--radius-tactile`
- Hover: inner panel shadow deepens slightly, no color change — cards don't "float," they sit in their housing

### Tags & Badges

- Small pill, `--raised` at reduced scale (`3px 3px 6px` / `-2px -2px 4px`), semantic fill colors

---

## 5. Layout Principles

- **4px spacing scale** (4/8/12/16/24/32) — fine enough to align dual-shadow offsets precisely to the grid
- **Panel-within-panel composition** — group related controls inside a Clay Gray casing so the material hierarchy (casing → control) is always visible
- **Light source consistency** — every `--raised`/`--inset` pair in the page assumes the same top-left light source; never mix directions
- **Generous rounding** — 12–20px radii throughout; skeuomorphism reads as "molded," not "cut"
- **Warm neutral background** — page canvas can sit on Clay Gray or white; never cool gray, which breaks the warm material language

---

## 6. Depth & Elevation

Depth is the entire point of this system — it's built from exactly two states:

1. **Raised (at rest):** light highlight top-left + dark shadow bottom-right — the surface sits above its casing
2. **Inset (pressed/active/on)**: shadows invert inward — the surface sits below its casing

There is no third "floating" level — cards don't hover with soft ambient shadow the way a flat-design system would. Everything is either popped out or pressed in, like a real control surface.

Motion: `transform` + `box-shadow` transition at 0.1s ease — fast, because a physical button responds instantly.

---

## 7. Do's and Don'ts

### Do's ✅

- Pair every raised surface with an inset counterpart for its active state
- Keep the light source top-left consistently across the entire page
- Use Ember Orange and Warm Amber as fills, not as shadow colors (shadows stay neutral/umber)
- Round generously (12–20px) — sharp corners break the "molded" feel
- Reserve glow effects for LED indicators only

### Don'ts ❌

- ❌ Flat, shadowless buttons — defeats the entire premise of the system
- ❌ Mixing light-source directions between components on the same screen
- ❌ Cool grays for casing/panel material — warm neutrals only (Clay Gray, Brushed Silver)
- ❌ Glow/blur on anything except LED indicators
- ❌ Germania One at body-copy length — single-weight display font, headings only

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | Control panels stack to 1 column; knob/dial components shrink 20% but keep shadow ratios |
| ≤480px | Buttons go full-width within their casing; font sizes step down one tier (h1 32→26px) |
| Touch | `:active` inset state must trigger on `touchstart`, not only mouse `:active`, so mobile presses still feel tactile |

---

## 9. Agent Prompt Guide

```
Create a page in the "Skeumorphism 擬物質感" style — tactile, pressable UI:

- Palette: ember orange #FA3C00 (primary), warm amber #F08321 (secondary),
  clay gray #E7E1D4 / brushed silver #C7C2B4 (material neutrals),
  charcoal ink #111827 (text), porcelain white #FFFFFF (surface),
  success #16A34A / warning #D97706 / danger #DC2626
- Fonts: 'Germania One' for headings/panel labels only, 'Roboto' for all
  body/UI text, 'JetBrains Mono' for data/code
- Core technique: every raised surface uses a dual box-shadow — light
  highlight top-left `-4px -4px 10px rgba(255,255,255,.9)` + dark shadow
  bottom-right `6px 6px 12px rgba(122,111,92,.35)`. Pressed/active states
  swap to the inset version of the same shadow pair
- Buttons visibly sink on :active (translateY(2px) + inset shadow)
- Border-radius 12-20px everywhere — generous, molded, never sharp
- Keep light source top-left consistent across every component
- Reserve glow effects for LED-style status indicators only
- Spacing: 4px base scale (4/8/12/16/24/32)
```

---

*Direction: typeui.sh · 2026*