shinen-designlisted

# SHIN-EN 深淵 — Design System Dark Japanese minimal luxury, monochrome absolute. One stylesheet (`shinen.css`, bundled next to this file) + one signature move (ghosted step numerals). Designed for internal tool dashboards: forms, logs, step-by-step pipelines. **Constraint:** Vanilla HTML/CSS/JS only. No frameworks, no build step. The CSS can be linked, inlined in a `<style>` tag, or served from a stdlib HTTP server. ## When to apply - User asks for a dashboard / control panel / local tool UI with a dark, minimal, premium look - User says "SHIN-EN", "monochrome UI", "dark Japanese minimal" - A project already uses `.sn-*` classes — extend it, never restyle it ## 1. Design Principles 1. **Monochrome by choice.** No color accents. Hierarchy via weight, size, opacity, whitespace. 2. **Numerals are architecture.** Giant ghosted step numbers (01, 02) act as watermarks behind content blocks — the signature move. 3. **Whitespace is premium.** Negative space > density. One idea per screen-height. 4. **Strict ink tiers.** 3 text brightness levels only. Never 5. 5. **Motion is meaning.** Reveal animations trigger on scroll; micro-interactions confirm user action. 6. **Mobile-first always.** `clamp()` for fluid type. Safe-area for notch. ≥48px touch targets. ## 2. Tokens ### Surfaces (5-step scale, darkest → lightest) | Token | Hex | Usage | |---|---|---| | `--sumi` | `#0a0a0a` | Page background (primary) | | `--kuro` | `#141414` | Elevated card / section bg | | `--hair` | `#1f1f