큐레이션 · 오픈 · 무료

Granola

쉬는 시간 없이 연속 회의에 몸담은 사람들을 위한 AI 노트패드입니다.

01

디자인 DNA

하루를 조용히 정리하는 차분하고 영리한 어시스턴트.

02

컬러

차분한 올리브 그린 액센트와 어우러진 지적이고 유기적인 중성색 팔레트.

03

타이포그래피

transitional-serif · geometric-sans

• display56px · 400
• h236px · 400
• body16px · 400

디스플레이 타입은 차분한 편집 느낌을 위해 전환형 세리프를 사용합니다. · 본문 타입은 가독성을 위해 깔끔한 기하학적 산세리프를 사용합니다. · 헤드라인은 현대적이고 자신감 있는 느낌을 위해 좁은 자간을 적용합니다. · 글꼴 두께는 주로 400을 사용하여 절제된 느낌을 줍니다.

04

여백

4px 기반의 명확한 수직 리듬과 함께 넉넉한 여백을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(227, 227, 227, 1)

rgba(0, 0, 0, 0.03) 0px 0px 2px 0px inset · rgba(0, 0, 0, 0.03) 0px 0px 36px 0px · rgba(0, 0, 0, 0.15) 0px 8px 48px 0px

06

레이아웃

넉넉한 padding을 갖춘 중앙 정렬 단일 컬럼 콘텐츠 흐름.

07

모션과 인터랙션

인터랙티브 요소에서 부드러운 색상 전환. · hover 시 배경색 및 색상 전환. · 포커스 상태를 위한 box-shadow 전환.

버튼과 링크에서 은은한 색상 변화. · 눌린 상태로 부드러운 전환.

08

컴포넌트

• button 높은 대비를 가진 알약 형태의 주요 버튼.
• card 은은한 그림자와 가벼운 테두리가 있는 부드럽게 둥근 카드.
• chip 기능이나 레이블을 위한 알약 형태의 태그.
• input 깔끔하고 미니멀한 입력 필드.
• hero 명확한 단일 CTA를 갖춘 크고 중앙 정렬된 세리프 헤드라인.

09

보이스와 금지 목록

• 톤 도움이 되고, 명료하며, 약간 장난스러운 느낌.
• 헤드라인 큰 세리프 타이포그래피를 사용하여 직접적이고 혜택을 강조하는 스타일.
• CTA 행동을 유도하고, 명확하며, 높은 대비의 스타일.

• 채도 높은 네온 색상을 사용하지 마세요 — 스크린샷은 차분한 지구색 그린과 따뜻한 그레이를 보여줍니다.
• 굵고 무거운 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 가볍고 일반 두께의 우아한 세리프 헤드라인을 보여줍니다.
• 복잡하고 밀집된 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 깔끔한 중앙 정렬 흐름을 보여줍니다.
• 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 부드럽고 둥근 모서리 (8px, 12px, 알약 형태)를 보여줍니다.
• 다크 모드 또는 무거운 어두운 배경을 사용하지 마세요 — 스크린샷은 밝고 따뜻한 오프화이트 (#FBFBF6) 테마를 보여줍니다.
• 복잡하고 소음이 많은 그라데이션을 사용하지 마세요 — 스크린샷은 깔끔한 단색 영역과 은은한 그림자를 보여줍니다.
• 피하기: 지나치게 기술적인 전문 용어 사용.
• 피하기: 과도하게 밀어붙이거나 공격적인 어조.
• 피하기: 복잡하고 여러 줄에 걸친 헤드라인 사용.

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko