01 — Hero

Calm · Soft · Tactile

소프트한 입체감.

두 개의 그림자 (밝은 highlight + 어두운 lowlight) 가 만드는 embossed/depressed 환영. 저채도 단일 컬러 + 큰 radius + soft plastic 톤. 명상 · 웰니스 · 미니멀 dashboard.

02 — Typography

Display XL · 4rem

Display XL

Display · 3rem

Display Default

Title LG · 32px

Title LG

Title · 24px

Title default

Body · 1rem

Body 1rem regular. The quick brown fox jumps over the lazy dog.

Mono · 0.875rem

$ meditate --duration 10min
03 — Buttons
04 — Form

Email

Reflection

진행률 · 72%

05 — Tags
Default Accent Success Warning Danger Inverted
06 — Cards
07 — Stats

Visitors

12,489

↑ 18.4% this week

Conversion

3.2%

↓ 0.6%p yesterday

Revenue

₩42.5M

↑ 7.1% MTD

08 — Article

Design Trend

The softening of UI.

By Alexander Plyuto · 2019 · 4 min read

Neumorphism 은 skeuomorphism 의 미니멀 후예입니다. 두 개의 그림자 (밝은 highlight + 어두운 lowlight) 가 만드는 입체 환영을 핵심으로 합니다. 저채도 단일 컬러 + 큰 반경 (18px) + dual shadow 메커니즘.

접근성 약점 (대비 낮음) 으로 비판받았지만, 명상 · 웰니스 · 미니멀 시계 같은 차분한 톤 product 에 적합합니다. 모든 element 가 같은 surface color 를 공유하는 게 시그니처.

Tactile UI 는 사용자의 *손가락 기억* 을 깨운다.

참고: Wikipedia — Skeuomorph

09 — Signature

Neumorphism 시그니처: pressed container + raised icon buttons + soft toggle slider.

Pressed container with raised icons

외부 컨테이너는 *depressed* · 내부 아이콘은 *raised* — dual shadow direction 의 대비

이 디자인, 내 프로젝트에 바로 쓸 수 있어요

크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.

Creator OS 사용 중이라면

에이전트에게 말 한마디면 끝

테마 선택·CSS 세팅·컴포넌트 배치까지 자동이에요. 코드 한 줄 안 봐도 돼요.

"Neumorphism으로 대시보드 만들어줘"
Creator OS 시작하기 →
직접 적용하고 싶다면

2단계로 즉시 적용

① HTML 파일 <head> 안에 아래 2줄 붙여넣기

<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-tokens.css">
<link rel="stylesheet"
  href="https://design-tokens.creator-os.app
        /design-components.css">

② <body> 태그에 테마 한 줄 추가

<body data-theme="neumorphism">

버튼·카드·폼·태그가 모두 소프트 Neumorphism 디자인으로 바뀌어요. Framer · Wix 커스텀 코드에도 동일하게 작동해요.