Notion에서 영감을 받은 디자인 시스템

Category: 생산성 & SaaS 올인원 워크스페이스. 따뜻한 미니멀리즘, 세리프 제목, 부드러운 표면.

1. 비주얼 테마 및 분위기

Notion의 웹사이트는 도구 자체의 철학을 구현합니다. 방해받지 않는 빈 캔버스입니다. 이 디자인 시스템은 차가운 회색이 아닌 따뜻한 중성 컬러를 기반으로 하여, 무균 유리가 아닌 고품질 종이처럼 느껴지는 독특하게 친근한 미니멀리즘을 만들어냅니다. 페이지 캔버스는 순수한 흰색(#ffffff)이지만 텍스트는 순수한 검정이 아닙니다. 독서 경험을 미세하게 부드럽게 만드는 따뜻한 근-검정색(rgba(0,0,0,0.95))입니다. 따뜻한 회색 스케일(#f6f5f4, #31302e, #615d59, #a39e98)은 미묘한 황갈색 언더톤을 지니며, 인터페이스에 촉감이 느껴지는 거의 아날로그적인 온기를 부여합니다.

커스텀 NotionInter 폰트(수정된 Inter)는 이 시스템의 근간입니다. 디스플레이 크기(64px)에서 공격적인 네거티브 자간(-2.125px)을 사용하여 압축되고 정밀한 헤드라인을 만들어냅니다. 웨이트 범위는 일반적인 시스템보다 넓습니다. 본문에 400, UI 요소에 500, 세미볼드 레이블에 600, 디스플레이 제목에 700을 사용합니다. OpenType 기능 "lnum"(라이닝 숫자)과 "locl"(지역화된 형태)은 큰 텍스트에서 활성화되어, 세심하게 읽을 때 알아챌 수 있는 타이포그래피적 세련미를 더합니다.

Notion의 비주얼 언어를 독특하게 만드는 것은 테두리 철학입니다. 무거운 테두리나 그림자 대신, Notion은 초박형 1px solid rgba(0,0,0,0.1) 테두리를 사용합니다. 속삭임처럼 존재하는 테두리, 무게감 없이 구조를 만드는 가까스로 눈에 띄는 분할선입니다. 그림자 시스템도 동일하게 절제되어 있습니다. 누적 불투명도가 0.05를 초과하지 않는 다중 레이어 스택으로, 보이지 않고 느껴지는 깊이를 만들어냅니다.

주요 특성:

• 디스플레이 크기에서 네거티브 자간을 사용하는 NotionInter(수정된 Inter) (64px에서 -2.125px)
• 따뜻한 중성 팔레트: 회색에 황갈색 언더톤 포함 (#f6f5f4 따뜻한 흰색, #31302e 따뜻한 어두운 색)
• rgba(0,0,0,0.95)를 통한 근-검정색 텍스트——순수한 검정이 아닌, 미세한 온기를 생성
• 초박형 테두리: 전반적으로 1px solid rgba(0,0,0,0.1)——속삭임 무게의 분할
• 깊이가 거의 느껴지지 않는 0.05 미만의 불투명도를 가진 다중 레이어 그림자 스택
• CTA 및 인터랙티브 요소를 위한 유일한 강조 색상으로서의 Notion Blue(#0075de)
• 상태 표시기를 위한 틴트된 파란 배경의 필 배지(9999px 반지름)
• 유기적이고 엄격하지 않은 스케일을 가진 8px 기본 간격 단위

2. 컬러 팔레트 및 역할

프라이머리

• Notion Black(rgba(0,0,0,0.95) / #000000f2): 프라이머리 텍스트, 제목, 본문. 95% 불투명도로 가독성을 희생하지 않고 순수한 검정을 부드럽게 함.
• 퓨어 화이트(#ffffff): 페이지 배경, 카드 표면, 파란색 위의 버튼 텍스트.
• Notion Blue(#0075de): 프라이머리 CTA, 링크 색상, 인터랙티브 강조——코어 UI 크롬에서 유일하게 채도 있는 색상.

브랜드 세컨더리

• 딥 네이비(#213183): 세컨더리 브랜드 색상, 강조 및 어두운 피처 섹션에 드물게 사용.
• 액티브 블루(#005bab): 버튼 활성/눌림 상태——Notion Blue의 어두운 변형.

따뜻한 중성 스케일

• 웜 화이트(#f6f5f4): 배경 표면 틴트, 섹션 교차 배치, 미묘한 카드 필. 노란 언더톤이 중요.
• 웜 다크(#31302e): 다크 표면 배경, 어두운 섹션 텍스트. 표준 회색보다 따뜻함.
• 웜 그레이 500(#615d59): 세컨더리 텍스트, 설명, 음소거된 레이블.
• 웜 그레이 300(#a39e98): 플레이스홀더 텍스트, 비활성화 상태, 캡션 텍스트.

시맨틱 강조 색상

• 틸(#2a9d99): 성공 상태, 긍정적 표시기.
• 그린(#1aae39): 확인, 완료 배지.
• 오렌지(#dd5b00): 경고 상태, 주의 표시기.
• 핑크(#ff64c8): 장식적 강조, 피처 하이라이트.
• 퍼플(#391c57): 프리미엄 기능, 깊은 강조.
• 브라운(#523410): 어시 강조, 따뜻한 피처 섹션.

인터랙티브

• 링크 블루(#0075de): 호버 시 밑줄이 있는 프라이머리 링크 색상.
• 링크 라이트 블루(#62aef0): 어두운 배경용 더 밝은 링크 변형.
• 포커스 블루(#097fe8): 인터랙티브 요소의 포커스 링.
• 배지 블루 배경(#f2f9ff): 필 배지 배경, 틴트된 파란 표면.
• 배지 블루 텍스트(#097fe8): 필 배지 텍스트, 가독성을 위한 진한 파란색.

그림자 및 깊이

• 카드 그림자(rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px): 다중 레이어 카드 높이.
• 딥 그림자(rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px): 모달 및 피처드 콘텐츠를 위한 5층 깊은 높이.
• 위스퍼 테두리(1px solid rgba(0,0,0,0.1)): 표준 분할 테두리——카드, 구분선, 섹션.

3. 타이포그래피 규칙

폰트 패밀리

• 프라이머리: NotionInter, 폴백: Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol
• OpenType 기능: 디스플레이 및 제목 텍스트에서 "lnum"(라이닝 숫자)과 "locl"(지역화된 형태) 활성화.

계층 구조

원칙

• 스케일에서의 압축: 디스플레이 크기의 NotionInter는 64px에서 -2.125px 자간을 사용하며, 26px에서 -0.625px, 16px에서 normal로 점진적으로 완화됩니다. 이 압축은 헤드라인에 밀도를 만들고 본문 크기에서 가독성을 유지합니다.
• 4웨이트 시스템: 400 (본문/읽기), 500 (UI/인터랙티브), 600 (강조/내비게이션), 700 (제목/디스플레이). 대부분의 시스템에 비해 넓은 웨이트 범위로 섬세한 계층이 가능합니다.
• 따뜻한 스케일링: 크기가 증가할수록 행간이 타이트해집니다——본문(16px)에서 1.50, 서브제목에서 1.231.27, 디스플레이에서 1.001.04. 이는 더 조밀하고 임팩트 있는 헤드라인을 만들어냅니다.
• 배지 마이크로 트래킹: 12px 배지 텍스트는 포지티브 자간(0.125px)을 사용합니다——시스템에서 유일한 포지티브 트래킹으로, 작은 텍스트를 더 넓고 읽기 쉽게 만듭니다.

4. 컴포넌트 스타일링

버튼

프라이머리 블루

• 배경: #0075de (Notion Blue)
• 텍스트: #ffffff
• 패딩: 8px 16px
• 반지름: 4px (서틀)
• 테두리: 1px solid transparent
• 호버: 배경이 #005bab로 어두워짐
• 활성: scale(0.9) 트랜스폼
• 포커스: 2px solid 포커스 아웃라인, var(--shadow-level-200) 그림자
• 사용: 프라이머리 CTA (“Get Notion free”, “Try it”)

세컨더리 / 터시어리

• 배경: rgba(0,0,0,0.05) (반투명 따뜻한 회색)
• 텍스트: #000000 (근-검정색)
• 패딩: 8px 16px
• 반지름: 4px
• 호버: 텍스트 색상 변화, scale(1.05)
• 활성: scale(0.9) 트랜스폼
• 사용: 세컨더리 액션, 폼 제출

고스트 / 링크 버튼

• 배경: 투명
• 텍스트: rgba(0,0,0,0.95)
• 장식: 호버 시 밑줄
• 사용: 터시어리 액션, 인라인 링크

필 배지 버튼

• 배경: #f2f9ff (틴트된 파란색)
• 텍스트: #097fe8
• 패딩: 4px 8px
• 반지름: 9999px (풀 필)
• 폰트: 12px 웨이트 600
• 사용: 상태 배지, 피처 레이블, “New” 태그

카드 및 컨테이너

• 배경: #ffffff
• 테두리: 1px solid rgba(0,0,0,0.1) (위스퍼 테두리)
• 반지름: 12px (표준 카드), 16px (피처드/히어로 카드)
• 그림자: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px
• 호버: 미묘한 그림자 강화
• 이미지 카드: 상단 12px 반지름, 이미지가 상단 절반을 채움

인풋 및 폼

• 배경: #ffffff
• 텍스트: rgba(0,0,0,0.9)
• 테두리: 1px solid #dddddd
• 패딩: 6px
• 반지름: 4px
• 포커스: 파란 아웃라인 링
• 플레이스홀더: 따뜻한 회색 #a39e98

내비게이션

• 흰색 바탕의 깔끔한 수평 내비게이션, 스티키 없음
• 브랜드 로고 좌측 정렬 (33x34px 아이콘 + 워드마크)
• 링크: NotionInter 15px 웨이트 500~600, 근-검정색 텍스트
• 호버: var(--color-link-primary-text-hover)로 색상 변화
• CTA: 파란 필 버튼 (“Get Notion free”) 우측 정렬
• 모바일: 햄버거 메뉴로 접힘
• 멀티 레벨 카테고리화된 메뉴를 가진 제품 드롭다운

이미지 처리

• 1px solid rgba(0,0,0,0.1) 테두리가 있는 제품 스크린샷
• 상단 모서리 라운드 이미지: 12px 12px 0px 0px 반지름
• 대시보드/워크스페이스 미리보기 스크린샷이 피처 섹션을 지배
• 히어로 일러스트레이션 뒤의 따뜻한 그라디언트 배경 (장식적 캐릭터 일러스트레이션)

특징적인 컴포넌트

일러스트레이션이 있는 피처 카드

• 대형 일러스트레이티브 헤더 (가나가와 해변의 큰 파도, 제품 UI 스크린샷)
• 위스퍼 테두리가 있는 12px 반지름 카드
• 제목은 22px 웨이트 700, 설명은 16px 웨이트 400
• 교차 섹션용 웜 화이트(#f6f5f4) 배경 변형

트러스트 바 / 로고 그리드

• 브랜드 색상의 기업 로고 (신뢰받는 팀 섹션)
• 팀 수를 표시하는 수평 스크롤 또는 그리드 레이아웃
• 지표 표시: 큰 숫자 + 설명 패턴

지표 카드

• 큰 숫자 표시 (예: “$4,200 ROI”)
• 지표용 NotionInter 40px+ 웨이트 700
• 따뜻한 회색 본문 텍스트로 아래에 설명
• 위스퍼 테두리 카드 컨테이너

5. 레이아웃 원칙

스페이싱 시스템

• 기본 단위: 8px
• 스케일: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
• 미세 조정을 위한 소수 값(5.6px, 6.4px)을 가진 엄격하지 않은 유기적 스케일

그리드 및 컨테이너

• 최대 콘텐츠 너비: 약 1200px
• 히어로: 넉넉한 상단 패딩(80~120px)을 가진 가운데 정렬 단일 컬럼
• 피처 섹션: 카드용 2~3 컬럼 그리드
• 교차 배치를 위한 전체 너비 웜 화이트(#f6f5f4) 섹션 배경
• 위스퍼 테두리로 둘러싸인 코드/대시보드 스크린샷

화이트스페이스 철학

• 넉넉한 수직 리듬: 주요 섹션 사이 64~120px. Notion은 광대한 수직 패딩으로 콘텐츠가 숨쉬게 합니다.
• 따뜻한 교차 배치: 흰색 섹션과 웜 화이트(#f6f5f4) 섹션이 교차하며, 강한 색상 단절 없이 부드러운 시각적 리듬을 만들어냅니다.
• 콘텐츠 우선 밀도: 본문 텍스트 블록은 촘촘하지만(행간 1.50) 충분한 여백으로 둘러싸여 있어, 흰 공간의 바다에 읽기 쉬운 콘텐츠 섬을 만들어냅니다.

테두리 반지름 스케일

• 마이크로 (4px): 버튼, 인풋, 기능적 인터랙티브 요소
• 서틀 (5px): 링크, 리스트 아이템, 메뉴 아이템
• 표준 (8px): 소형 카드, 컨테이너, 인라인 요소
• 편안한 (12px): 표준 카드, 피처 컨테이너, 이미지 상단
• 대형 (16px): 히어로 카드, 피처드 콘텐츠, 프로모션 블록
• 풀 필 (9999px): 배지, 필, 상태 표시기
• 원형 (100%): 탭 표시기, 아바타

6. 깊이 및 높이

그림자 철학: Notion의 그림자 시스템은 자연스럽게 보이는 부드러운 높이를 만들어내기 위해 누적되는 매우 낮은 개별 불투명도(0.01~0.05)를 가진 여러 레이어를 사용합니다. 4층 카드 그림자는 1.04px에서 18px 블러에 걸쳐 있어, 단일 하드 그림자가 아닌 깊이의 그라디언트를 만들어냅니다. 5층 딥 그림자는 0.05 불투명도에서 52px 블러까지 확장되어, 컴퓨터로 생성된 깊이가 아닌 자연광처럼 느껴지는 앰비언트 오클루전을 만들어냅니다. 이 레이어드 접근법은 요소가 위에 떠 있는 것이 아니라 페이지에 내장되어 있는 것처럼 느끼게 합니다.

장식적 깊이

• 히어로 섹션: 장식적 캐릭터 일러스트레이션 (유쾌하고 손으로 그린 스타일)
• 섹션 교차 배치: 흰색에서 웜 화이트(#f6f5f4)로의 배경 전환
• 하드 섹션 테두리 없음——분리는 배경 색상 변화와 간격에서 옵니다

7. 반응형 동작

브레이크포인트

터치 타겟

• 버튼은 편안한 패딩 사용 (수직 8px~16px)
• 내비게이션 링크는 15px, 적절한 간격 있음
• 필 배지는 탭 타겟을 위한 수평 8px 패딩 보유
• 모바일 메뉴 토글은 표준 햄버거 버튼 사용

접힘 전략

• 히어로: 64px 디스플레이 → 40px → 모바일에서 26px으로 스케일, 비례적인 자간 유지
• 내비게이션: 수평 링크 + 파란 CTA → 햄버거 메뉴
• 피처 카드: 3 컬럼 → 2 컬럼 → 단일 컬럼 스택
• 제품 스크린샷: 반응형 이미지로 종횡비 유지
• 트러스트 바 로고: 그리드 → 모바일에서 수평 스크롤
• 푸터: 멀티 컬럼 → 스택된 단일 컬럼
• 섹션 간격: 80px+ → 모바일에서 48px

이미지 동작

• 워크스페이스 스크린샷은 모든 크기에서 위스퍼 테두리 유지
• 히어로 일러스트레이션은 비례적으로 스케일
• 제품 스크린샷은 반응형 이미지와 일관된 테두리 반지름 사용
• 전체 너비 웜 화이트 섹션은 엣지-투-엣지 처리 유지

8. 접근성 및 상태

포커스 시스템

• 모든 인터랙티브 요소가 눈에 보이는 포커스 표시기를 받음
• 포커스 아웃라인: 포커스 색상 + 그림자 레벨 200의 2px solid
• 모든 인터랙티브 컴포넌트에서 탭 내비게이션 지원
• 높은 대비 텍스트: 흰색 위의 근-검정색은 WCAG AAA를 초과 (>14:1 비율)

인터랙티브 상태

• 기본: 위스퍼 테두리가 있는 표준 외관
• 호버: 텍스트에 색상 변화, 버튼에 scale(1.05), 링크에 밑줄
• 활성/눌림: scale(0.9) 트랜스폼, 더 어두운 배경 변형
• 포커스: 그림자 강화를 동반한 파란 아웃라인 링
• 비활성화: 따뜻한 회색(#a39e98) 텍스트, 불투명도 감소

색상 대비

• 흰색 위의 프라이머리 텍스트 (rgba(0,0,0,0.95)): 약 18:1 비율
• 흰색 위의 세컨더리 텍스트 (#615d59): 약 5.5:1 비율 (WCAG AA)
• 흰색 위의 파란 CTA (#0075de): 약 4.6:1 비율 (큰 텍스트에 대해 WCAG AA)
• 배지 배경(#f2f9ff) 위의 배지 텍스트(#097fe8): 약 4.5:1 비율 (큰 텍스트에 대해 WCAG AA)

9. 에이전트 프롬프트 가이드

빠른 색상 참조

• 프라이머리 CTA: Notion Blue (#0075de)
• 배경: 퓨어 화이트 (#ffffff)
• 대체 배경: 웜 화이트 (#f6f5f4)
• 제목 텍스트: 근-검정색 (rgba(0,0,0,0.95))
• 본문 텍스트: 근-검정색 (rgba(0,0,0,0.95))
• 세컨더리 텍스트: 웜 그레이 500 (#615d59)
• 음소거된 텍스트: 웜 그레이 300 (#a39e98)
• 테두리: 1px solid rgba(0,0,0,0.1)
• 링크: Notion Blue (#0075de)
• 포커스 링: 포커스 블루 (#097fe8)

컴포넌트 프롬프트 예시

• “흰색 배경의 히어로 섹션을 만드세요. 헤드라인은 NotionInter 64px 웨이트 700, 행간 1.00, 자간 -2.125px, 색상 rgba(0,0,0,0.95). 서브타이틀은 20px 웨이트 600, 행간 1.40, 색상 #615d59. 파란 CTA 버튼 (#0075de, 4px 반지름, 8px 16px 패딩, 흰색 텍스트)과 고스트 버튼 (투명 배경, 근-검정색 텍스트, 호버 시 밑줄).”
• “카드를 디자인하세요: 흰색 배경, 1px solid rgba(0,0,0,0.1) 테두리, 12px 반지름. 그림자 스택 사용: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. 제목은 NotionInter 22px 웨이트 700, 자간 -0.25px. 본문은 16px 웨이트 400, 색상 #615d59.”
• “필 배지를 만드세요: #f2f9ff 배경, #097fe8 텍스트, 9999px 반지름, 4px 8px 패딩, NotionInter 12px 웨이트 600, 자간 0.125px.”
• “내비게이션을 만드세요: 흰색 헤더. 링크에 NotionInter 15px 웨이트 600, 근-검정색 텍스트. 우측 정렬 파란 필 CTA ‘Get Notion free’ (#0075de 배경, 흰색 텍스트, 4px 반지름).”
• “교차 섹션 레이아웃을 디자인하세요: 흰색 섹션과 웜 화이트(#f6f5f4) 섹션이 교차합니다. 각 섹션은 수직 64~80px 패딩, 최대 너비 1200px 가운데 정렬. 섹션 제목은 48px 웨이트 700, 행간 1.00, 자간 -1.5px.”

반복 가이드

1. 항상 따뜻한 중성 컬러를 사용하세요——Notion의 회색은 황갈색 언더톤을 가집니다(#f6f5f4, #31302e, #615d59, #a39e98), 파란-회색은 사용하지 않음
2. 자간은 폰트 크기에 따라 스케일됩니다: 64px에서 -2.125px, 54px에서 -1.875px, 26px에서 -0.625px, 16px에서 normal
3. 4가지 웨이트: 400 (읽기), 500 (인터랙트), 600 (강조), 700 (선언)
4. 테두리는 속삭임입니다: 1px solid rgba(0,0,0,0.1)——더 무겁게 하지 않음
5. 그림자는 4~5 레이어를 사용하며 개별 불투명도는 0.05를 초과하지 않음
6. 따뜻한 흰색(#f6f5f4) 섹션 배경은 시각적 리듬에 필수적
7. 상태/태그에는 필(9999px), 버튼과 인풋에는 4px 반지름
8. Notion Blue(#0075de)는 코어 UI에서 유일하게 채도 있는 색상——CTA와 링크에 드물게 사용