큐레이션 · 오픈 · 무료

Hygraph

엔터프라이즈 팀을 위해 콘텐츠 속도를 가속화하도록 설계된 AI 기반 Headless CMS입니다.

01

디자인 DNA

엔터프라이즈 콘텐츠 운영을 위한 고성능 엔진입니다.

02

컬러

핵심 동작과 상태 변화를 강조하기 위한 선명한 보라색 강조 포인트가 있는 깔끔하고 전문적인 톤입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display56px · 500
• headline40px · 500
• subtitle20px · 400
• body16px · 400
• label14px · 500

헤드라인은 기하학적 sans 폰트를 사용하여 현대적이고 구조적인 느낌을 줍니다. · 본문 텍스트는 높은 가독성을 위해 인간주의적 sans 폰트를 사용합니다. · 모노스페이스 폰트(Space Grotesk)는 코드 조각과 기술 세부사항에 사용됩니다. · 대문자 텍스트는 레이블과 내비게이션 요소에 절제하여 사용됩니다. · 대문자 텍스트의 자간은 가독성을 위해 약간 넓게 설정됩니다.

04

여백

패딩, 마진 및 레이아웃 간격에 4px 기본 그리드가 일관되게 사용됩니다.

05

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

1px solid rgba(231, 234, 239, 1.0)

None: rgba(0, 0, 0, 0.047) 0px 12px 12px 0px, rgba(0, 0, 0, 0.055) 0px 25px 25px 0px · None: rgba(91, 76, 255, 0.6) 0px 2px 4px 0px, rgb(91, 76, 255) 0px 0px 0px 1px

06

레이아웃

최대 너비 1280px의 표준 12열 그리드 시스템에 768px 및 1024px 반응형 브레이크포인트를 적용합니다.

07

모션과 인터랙션

인터랙티브 요소의 반동 있는 hover 상태를 위해 미세한 스프링 애니메이션(cubic-bezier(0.18, 0.89, 0.31, 1.57))을 사용합니다. · 색상, 배경색, 테두리색 변경을 위해 매끄러운 전환(0.15s)을 사용합니다. · 요소를 나타내기 위해 페이드 인(0.3s) 효과를 사용합니다.

버튼과 링크 같은 인터랙티브 요소는 hover 시 미세한 색상 또는 배경 변화를 가지며, 종종 미세한 스프링 애니메이션이 동반됩니다. · 요소를 클릭하면 약간의 변환 또는 색상 변화가 발생하여 피드백을 제공할 수 있습니다.

08

컴포넌트

• button Primary 버튼은 pill 형태(9999px radius)이며, 보라색(#685CEF) 배경에 화이트 텍스트를 사용합니다. Secondary 버튼은 연한 라벤더 배경(#E8E9FF)에 보라색 텍스트를 사용합니다.
• card 카드는 미세한 테두리, 화이트 배경, 최소한의 그림자가 적용된 간결한 컨테이너입니다.
• chip 태그나 레이블로 사용되는 작은 pill 형태 요소로, 종종 연한 배경과 미세한 테두리를 사용합니다.
• input 텍스트 입력 필드는 미세한 테두리, 둥근 모서리, 깔끔한 화이트 배경을 가집니다.
• hero 두드러진 헤드라인, 보조 텍스트, 명확한 call-to-action이 있는 대형 중앙 정렬 히어로 섹션입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 미래지향적입니다.
• 헤드라인 명확한 가치 제안을 전달하는 크고 임팩트 있는 헤드라인입니다.
• CTA '문의하기' 또는 '시작하기'와 같이 직접적이고 행동 지향적인 표현을 사용합니다.

• 확립된 보라색 팔레트 외의 거칠고 높은 채도의 색상을 사용하지 마세요.
• 헤드라인에 무거운 블랙레터 또는 과도하게 장식적인 폰트를 사용하지 마세요.
• 스크린샷에 밝고 통풍이 잘되는 인터페이스가 나타나므로 완전한 다크 모드 테마를 사용하지 마세요.
• 버튼이나 카드에 날카로운 90도 모서리를 사용하지 마세요. 이 디자인은 더 부드럽고 둥근 형태를 선호합니다.
• 메인 콘텐츠에 밀집된 다단계 텍스트 레이아웃을 사용하지 마세요. 이 디자인은 깔끔하고 중앙 정렬된 읽기 경로를 선호합니다.
• 텍스트 콘텐츠와 경쟁하는 크고 복잡한 배경 이미지를 사용하지 마세요.
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 맥락 없는 기술 용어
• 피하기: 수동태 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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