표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Organic & Natural
자연에서 영감을 받은 부드럽고 유기적인 형태를 사용합니다.
- YEAR
- 2019
- MOOD
- 내추럴 · 따뜻한
- PRIMARY#8BC34A
- SECONDARY#4CAF50
- ACCENT#CDDC39
- BG#F1F8E9
- SURFACE#FFFFFF
취급 표시
- 크게 둥근 모서리
- 가는 테두리
- 그레인 바탕
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 5단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 내추럴
- 따뜻한
어디에 쓰나
실제로 쓰는 곳
- Headspace
- Whole Foods 웹사이트
- Airbnb (일부 요소)
사용 사례
- 헬스케어·웰니스 앱
- 음식·요리 서비스
- 환경·지속가능성 브랜드
- 명상·마음챙김 앱
이런 프로젝트에 맞습니다
- 헬스케어·웰니스
- 음식·요리
- 환경 브랜드
- 명상·마음챙김 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 자연스러움
- 조화
- 편안함
주요 특징
- 곡선형 요소
- 자연적 색상
- 부드러운 전환
- 유기적 형태
- 편안한 느낌
장점과 한계
장점
- 친근하고 편안한 느낌
- 웰니스·환경 브랜드와 완벽히 어울림
- 과도한 기술적 느낌을 중화
한계
- 현대적 테크 제품엔 다소 어울리지 않을 수 있음
- 곡선 도형은 CSS 구현이 복잡
- 정보 밀도 높은 UI에 부적합
컬러 시스템
자연에서 영감받은 흙·초록·하늘 계열. 채도 낮은 earth tone이 기반
색의 역할
- earth: 갈색·베이지·샌드 계열 — 기반 배경색
- green: 식물·자연 연상 녹색 — 주 강조색
- sky: 하늘·바다 연상 파랑/청록
- text: 어두운 갈색 또는 짙은 초록
제약
- 형광·네온 색상 사용 금지
- 채도 높은 vivid 색 금지 — 자연스러운 무광 채도로
- 무채색만 사용 금지 — 반드시 자연 연상 색조 포함
다크모드 — 짙은 숲 녹색 또는 밤하늘 어두운 파랑을 배경으로. earth tone은 어두운 버전으로
명도 대비 — earth tone 계열 저채도 색상은 대비 낮을 수 있음 — 텍스트 색상 신중히
타이포그래피
둥글거나 자연스러운 곡선 산세리프. 또는 슬랩세리프. 딱딱한 기하학 폰트 지양
글꼴은 최대 2종 · 스케일 비율 1.25 (Major Third) — 부드러운 리듬
- Angular·condensed 폰트 금지
- line-height 넉넉하게 (1.6~1.8) — 숨 쉬는 느낌
설계 제약
반드시 포함
- 자연 소재 이미지 또는 텍스처
- 유기적 곡선 요소 (blob, leaf shape 등)
- 넉넉한 여백 — 자연의 호흡
하지 말 것
- 직선·각진 레이아웃만 사용 금지 — 유기적 곡선·blob 형태 포함
- 플라스틱·금속 질감 사용 금지
- 형광·vivid 색 사용 금지
모션 — 부드럽고 느린 모션. ease-in-out 500ms 이상. 바람에 흔들리는 듯한 gentle animation.
자주 묻는 질문
Organic & Natural이란 무엇인가요?
자연에서 영감을 받은 부드럽고 유기적인 형태를 사용합니다.
Organic & Natural의 핵심 디자인 원칙은 무엇인가요?
Organic & Natural의 핵심 원칙은 자연스러움, 조화, 편안함입니다.
Organic & Natural은 어떤 프로젝트에 적합한가요?
Organic & Natural은 헬스케어·웰니스 앱, 음식·요리 서비스, 환경·지속가능성 브랜드, 명상·마음챙김 앱, 헬스케어·웰니스, 음식·요리, 환경 브랜드, 명상·마음챙김 앱 등의 프로젝트에 적합합니다.
Organic & Natural의 장단점은 무엇인가요?
장점으로는 친근하고 편안한 느낌, 웰니스·환경 브랜드와 완벽히 어울림, 과도한 기술적 느낌을 중화이 있습니다. 단점으로는 현대적 테크 제품엔 다소 어울리지 않을 수 있음, 곡선 도형은 CSS 구현이 복잡, 정보 밀도 높은 UI에 부적합이 있습니다.
Organic & Natural에서 색상은 어떻게 사용하나요?
자연에서 영감받은 흙·초록·하늘 계열. 채도 낮은 earth tone이 기반 색상 역할은 earth: 갈색·베이지·샌드 계열 — 기반 배경색, green: 식물·자연 연상 녹색 — 주 강조색, sky: 하늘·바다 연상 파랑/청록입니다. 주의사항: 형광·네온 색상 사용 금지, 채도 높은 vivid 색 금지 — 자연스러운 무광 채도로.
Organic & Natural에 어울리는 폰트 스타일은 무엇인가요?
Organic & Natural에는 둥글거나 자연스러운 곡선 산세리프. 또는 슬랩세리프. 딱딱한 기하학 폰트 지양 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: Angular·condensed 폰트 금지, line-height 넉넉하게 (1.6~1.8) — 숨 쉬는 느낌.
Organic & Natural 디자인에서 하면 안 되는 것은 무엇인가요?
Organic & Natural에서 피해야 할 것: 직선·각진 레이아웃만 사용 금지 — 유기적 곡선·blob 형태 포함, 플라스틱·금속 질감 사용 금지, 형광·vivid 색 사용 금지.
Organic & Natural을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Organic & Natural을 적용한 대표적인 제품·서비스로는 Headspace, Whole Foods 웹사이트, Airbnb (일부 요소) 등이 있습니다.