큐레이션 · 오픈 · 무료

Groq

빠르고 저렴한 AI 추론 인프라.

01

디자인 DNA

산업적 정밀함과 접근 가능한 개발자 도구를 결합한 AI용 고성능 엔진룸.

02

컬러

따뜻하고 부드러운 중립색은 고대비 오렌지 강조색과 어두운 가독성 높은 타이포그래피를 위한 차분한 캔버스를 제공합니다.

03

타이포그래피

geometric-sans · monospace

• display46px · 500
• body15px · 400
• caption12px · 400

헤드라인은 미묘한 강조를 위해 두께 500을 사용합니다. · 대문자 텍스트는 기술적 레이블을 위해 12px 크기와 12px의 자간을 사용합니다. · 본문 텍스트는 최적의 가독성을 위해 15px를 사용합니다.

04

여백

기본 4px를 기준으로 하며, 넉넉한 32-48px의 수평 패딩과 수직 간격을 사용합니다.

05

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

미묘한 카드 및 입력 테두리를 위해 1px solid rgb(45, 47, 51)를 사용합니다.

06

레이아웃

전체 폭의 히어로 블록과 나란히 배치된 기능 카드를 포함하는 표준 중앙 정렬 컨테이너입니다.

07

모션과 인터랙션

인터랙티브 요소에서의 색상 및 transform 전환. · hover 상태를 위한 background-size 애니메이션. · 모달 또는 오버레이 전환을 위한 가시성 및 불투명도 조절.

150ms ease-in-out으로 미묘한 background-size 또는 색상 전환. · transform 또는 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 작업을 위해 고대비 오렌지(#F43E01)에 흰색 텍스트를 사용하며, 둥근 형태(border-radius: 999px)입니다.
• card 가벼운 배경(#F3F3EE)에 12px의 border-radius를 적용하며, 눈에 띄는 드롭 섀도우는 없습니다.
• chip 카테고리 태그를 위한 인라인 대문자 레이블과 고정폭 서체 스타일입니다.
• input 부드러운 테두리를 사용하는 최소 스타일링의 표준 텍스트 입력입니다.
• hero 데스크톱에서는 좌우 분할 레이아웃을 사용하며, 왼쪽에는 큰 타이포그래피, 오른쪽에는 비디오를 배치합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 기술적이며 성능 지향적입니다.
• 헤드라인 직설적이고 임팩트 있게 작성하며, 속도와 신뢰성에 초점을 맞춥니다.
• CTA '시작하기' 또는 '구축 시작하기'와 같은 행동 지향적 동사.

• 배경에 순수 블랙(#000000)을 사용하지 않습니다 — 스크린샷에서는 대신 따뜻한 부드러운 베이지(#E8E8DE)를 보여줍니다.
• 강조색에 밝은 빨간색을 사용하지 않습니다 — 스크린샷에서는 대신 특별한 생동감 있는 오렌지(#F43E01)를 보여줍니다.
• 넓은 다중 열 텍스트 레이아웃을 사용하지 않습니다 — 스크린샷에서는 대신 약 680px로 제한된 단락 폭을 보여줍니다.
• 카드에 무거운 드롭 섀도우를 사용하지 않습니다 — 스크린샷에서는 대신 최소한 또는 섀도우 없는 평면적 표면을 보여줍니다.
• 기술적 레이블에 소문자를 사용하지 않습니다 — 스크린샷에서는 대신 넓은 자간의 대문자를 보여줍니다.
• 공격적인 다크 모드 미학을 사용하지 않습니다 — 스크린샷에서는 대신 밝고 따뜻한 톤의 인터페이스를 보여줍니다.
• 피하기: 모호한 마케팅 용어
• 피하기: 지나치게 장난스럽거나 캐주얼한 언어
• 피하기: 헤더 내의 복잡한 아키텍처 다이어그램

10

팩 안의 실제 스크린샷

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

11

System Prompt

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