Sample / Neumorphism ← Hub

Neumorphism

A minimalist look that keeps the same color as the background and relies solely on light and shadow embossing for depth.

Volume Form

Input fields and backgrounds use inner shadows for an inset structure, while buttons use drop shadows for a raised embossed structure.

AI Request Prompt

Design a clean Neumorphism-style control panel / controller UI.

Requirements:
1) Colors: Use the same blue-gray background (#e0e5ec) for background, cards, and buttons. Text is #344055, muted is #8a96a8.
2) No borders: Achieve depth using only box-shadow, no border properties.
3) Raised (convex): 10px 10px 20px rgba(163,177,198,0.6), -10px -10px 20px rgba(255,255,255,0.5)
4) Inset (concave): inset 8px 8px 16px rgba(163,177,198,0.6), inset -8px -8px 16px rgba(255,255,255,0.5)
5) Interaction: Buttons default to raised, slightly enlarge on hover, switch to inset on active (0.2s transition).
6) Rounded: Apply 20-40px rounded corners to all elements.
7) Font: Poppins (300/400/600), letter-spacing -0.02em.
8) Layout: Hero (center-aligned) + 2-column inset panel grid.

Responsive:
- Mobile (~768px): 2 columns to 1-column stack
- Desktop: max-width 1000px

Restrictions:
- No border property allowed (box-shadow only)
- No colorful backgrounds or gradients
- No dark mode

Output:
1) Raised/inset CSS variables (shadow-out, shadow-in) and color tokens
2) Hero / inset panel grid / button set structure
3) HTML/CSS code with responsive support

깔끔한 Neumorphism(뉴모피즘) 스타일의 제어판 / 컨트롤러 UI를 디자인해줘.

요구사항:
1) 컬러: 배경·카드·버튼 모두 동일한 회청색 배경(#e0e5ec)만 사용. 텍스트는 #344055, 뮤트는 #8a96a8.
2) 보더 금지: 요소 경계선(border) 없이 오직 box-shadow로만 입체감 구현.
3) 양각(볼록): 10px 10px 20px rgba(163,177,198,0.6), -10px -10px 20px rgba(255,255,255,0.5)
4) 음각(파인): inset 8px 8px 16px rgba(163,177,198,0.6), inset -8px -8px 16px rgba(255,255,255,0.5)
5) 상호작용: 버튼 기본=양각, hover 시 살짝 커짐, active 시 음각으로 전환(0.2s 전환).
6) 라운드: 모든 요소에 20~40px 라운드 코너 적용.
7) 폰트: Poppins(300/400/600), letter-spacing -0.02em.
8) 레이아웃: 히어로(중앙 정렬) + 2열 인셋 패널 그리드.

반응형:
- 모바일(~768px): 2열 → 1열 스택
- 데스크톱: max-width 1000px

금지사항:
- border 속성 사용 금지(box-shadow만 허용)
- 컬러풀한 배경이나 그라데이션 사용 금지
- 다크 모드 적용 금지

출력:
1) 양각/음각 CSS 변수(shadow-out, shadow-in)와 컬러 토큰
2) 히어로 / 인셋 패널 그리드 / 버튼 세트 구조
3) 반응형 대응이 포함된 HTML/CSS 코드

クリーンなNeumorphism（ニューモーフィズム）スタイルのコントロールパネル / コントローラーUIをデザインしてください。

要件:
1) カラー: 背景・カード・ボタンすべて同一のブルーグレー背景（#e0e5ec）のみ使用。テキストは#344055、ミュートは#8a96a8。
2) ボーダー禁止: 要素の境界線（border）なしで、box-shadowのみで立体感を実現。
3) 凸（浮き出し）: 10px 10px 20px rgba(163,177,198,0.6), -10px -10px 20px rgba(255,255,255,0.5)
4) 凹（くぼみ）: inset 8px 8px 16px rgba(163,177,198,0.6), inset -8px -8px 16px rgba(255,255,255,0.5)
5) インタラクション: ボタンのデフォルトは凸、hoverで少し拡大、activeで凹に切り替え（0.2sトランジション）。
6) ラウンド: すべての要素に20〜40pxの角丸を適用。
7) フォント: Poppins（300/400/600）、letter-spacing -0.02em。
8) レイアウト: ヒーロー（中央揃え）+ 2列インセットパネルグリッド。

レスポンシブ:
- モバイル（〜768px）: 2列→1列スタック
- デスクトップ: max-width 1000px

禁止事項:
- borderプロパティの使用禁止（box-shadowのみ許可）
- カラフルな背景やグラデーションの使用禁止
- ダークモード適用禁止

出力:
1) 凸/凹CSS変数（shadow-out、shadow-in）とカラートークン
2) ヒーロー / インセットパネルグリッド / ボタンセット構造
3) レスポンシブ対応を含むHTML/CSSコード