← OpenDesign 큐레이션 · 오픈 · 무료
Cal
개인 및 기업을 위한, 완벽하게 사용자 정의 가능한 개발자 친화적 일정 관리 소프트웨어.
Productivity SaaS Calendar Clean Product
01
디자인 DNA
일정 관리 캘린더 미팅 생산성 사용자 정의
깔끔하고 현대적인瑞士 철도 시간표를 디지털 일정 관리 플랫폼으로 재해석한 것.
02
컬러
#000000Ink
#292929Ink soft
#FFFFFFBG
#F4F4F4BG soft
#E1E2E3BG quiet
#898989Muted
rgba(0,0,0,0.16)Line
고대비의 단일색상 구성. 순수한 흰색 배경에 검정색을 사용하고, 계층과 구조를 위해 중성 회색을 활용합니다.
03
타이포그래피
geometric-sans · humanist-sans · monospace
display 48px · 500h2 32px · 600body 16px · 400caption 12px · 400헤드라인은 -0.2px의 타이트한 자간을 사용합니다 · 본문 텍스트는 편안한 1.5행 높이를 사용합니다 · 버튼과 내비게이션은 강조를 위해 500 웨이트를 사용합니다 · 캘린더 날짜와 작은 라벨은 400 웨이트를 사용합니다
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
일관된 4px 기본 격자는 UI 컴포넌트의 타이트한 정렬과 콘텐츠 영역의 여유로운 여백을 보장합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
카드 테두리에는 rgba(0,0,0,0.16) 또는 밝은 회색의 섬세한 1px 실선 테두리를 사용합니다.
rgba(34, 42, 53, 0.08) 0px 0px 0px 1px · rgba(34, 42, 53, 0.05) 0px 4px 8px 0px · rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
텍스트와 UI 모형이 나란히 배치된 넓은 히어로 섹션을 특징으로 하는 중앙 정렬 컨테이너 레이아웃.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.46, 0.45, 0.94) easing
버튼과 링크에 섬세한 hover 전환 · 인터랙티브한 캘린더 요소들의 부드러운 레이아웃 이동
버튼과 인터랙티브 요소의 배경색 변화 또는 미세한 높이 변화. · 색상 변화나 포커스 링을 통한 즉각적인 시각적 피드백.
08
컴포넌트
button 주요 액션에는 검정색으로 채워진 둥근 직사각형 또는 알약 모양 버튼, 보조 액션에는 흰색/투명한 채우기 버튼을 사용합니다. card 캘린더 UI 또는 통합 그리드를 표시하는, 섬세한 그림자나 밝은 테두리가 있는 흰색 카드. chip 'App store' 또는 'Cal.com launches v6.5'와 같은 태그를 위한 작은 둥근 알약 모양. input 예약 위젯의 일부로 자주 사용되는, 둥근 테두리와 섬세한 그림자가 있는 깔끔한 텍스트 입력 필드. hero 왼쪽에는 큰 타이포그래피, 오른쪽에는 상세한 일정 관리 위젯 모형을 배치한 두드러진 상단 영역. 09
보이스와 금지 목록
톤 전문적이고 명료하며 직접적입니다. 효율성과 사용자 정의에 초점을 맞춥니다. 헤드라인 가치 제안을 먼저 내세우는 굵고 간결한 진술. CTA 행동 지향적이고 간결한 표현 (예: 'Sign up with Google', 'Get started'). 고채도 원색을 사용하지 마세요 — 스크린샷은 철저한 단일색상 흑백 팔레트를 보여줍니다. 장식용 세리프 서체를 사용하지 마세요 — 스크린샷은 전체적으로 깔끔한 기하학적 산세리프 타이포그래피를 보여줍니다. 카드에 과도한 드롭 섀도우를 추가하지 마세요 — 스크린샷은 밝은 테두리를 사용한 매우 섬세하고 거의 플랫한 높이감을 보여줍니다. 버튼에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 일관되게 둥근 또는 알약 모양 버튼 디자인을 보여줍니다. 너무 많은 요소로 레이아웃을 복잡하게 하지 마세요 — 스크린샷은 넉넉한 여백과 집중된 콘텐츠 계층을 보여줍니다. 본문 텍스트에 전부 대문자를 사용하지 마세요 — 스크린샷은 가독성을 위해 혼합 대소문자 텍스트를 보여줍니다. 라벨 없는 아이콘에 의존하지 마세요 — 스크린샷은 모든 UI 요소에 명확하고 설명적인 텍스트를 동반합니다. 피하기: 헤드라인에 지나치게 기술적인 전문 용어 사용 피하기: 과도하거나 형광색의 액센트 색상 사용 피하기: 제품 모형보다 장식적인 이미지에 의존 10
팩 안의 실제 스크린샷
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Cal.com은 하이엔드, 사용자 정의 가능한 일정 관리 소프트웨어 플랫폼입니다. 그 디자인 DNA는 검정, 흰색, 중성 회색의 깔끔한 단일색상 팔레트를 기반으로 하며, 디스플레이에는 기하학적 산세리프 서체, 본문에는 휴머니스트 산세리프 서체를 사용합니다. 레이아웃은 넓고 구조화되어 있으며, 12컬럼 격자와 4px 기본 간격을 특징으로 합니다. 주요 컴포넌트에는 알약 모양 버튼과 제품 기능을 보여주는 섬세한 카드가 포함됩니다. 핵심 제약 조건: 화려한 액센트 색상은 피하고, 세리프 서체는 사용하지 않으며, 고대비의 전문적인 미학을 유지합니다. 지나치게 붐비는 레이아웃은 피하고 명료성과 여백을 우선시합니다. 전반적인 느낌은 프리미엄하고 개발자 중심적이며, 신뢰성과 정확성을 강조합니다.
더 보기 en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 디자인은 단색, 개발자 중심의 미학이 어떻게 프리미엄 있고 매우 기능적으로 느껴질 수 있는지를 보여주는 강력한 예시입니다.
