큐레이션 · 오픈 · 무료

Carrd

원페이지 사이트 빌더를 위한 미니멀하고 그라디언트 기반의 랜딩 페이지.

01

디자인 DNA

디지털 툴킷을 위한 차분하고 기하학적인 환영 화면.

02

컬러

다크하고 저채도의 그라디언트 위에 높은 대비의 흰색 텍스트를 적용하고, 단 하나의 선명한 틸 악센트를 사용합니다.

03

타이포그래피

grotesque-sans

• display56px · 700
• heading34px · 700
• body-lg24px · 400
• body16px · 400
• caption12px · 400

04

여백

기본 4px 스케일에 큰 섹션에는 넉넉한 패딩(32-64px)을 적용합니다.

05

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

불투명도(0.4에서 0.75)가 변하는 미세한 1-2px 흰색 테두리 또는 단색 흰색 스트로크.

rgba(0, 0, 0, 0.1) 0px 8px 16px 0px

06

레이아웃

히어로 센터 중앙 정렬 단일 컬럼 레이아웃이 기능을 위해 2열 그리드로 전환됩니다.

07

모션과 인터랙션

호버 및 포커스 시 색상과 불투명도 트랜지션 · 페이지 섹션 페이드인

인터랙티브 요소에서의 색상 트랜지션과 미세한 불투명도 변화. · 해당 없음

08

컴포넌트

• button 주요 작업을 위한 단색 틸 채우기가 적용된 둥근 직사각형과 보조 작업을 위한 얇은 흰색 테두리.
• card 이미지와 미세한 그림자가 있는 카드로, 템플릿 미리보기에 자주 사용됩니다.
• chip 해당 없음
• input 해당 없음
• hero 큰 로고, 헤드라인, 서브헤드라인, 그리고 주요 CTA 버튼이 포함된 전폭 중앙 정렬 레이아웃.

09

보이스와 금지 목록

• 톤 도움이 되고, 미니멀하며, 접근하기 쉬운.
• 헤드라인 굵고, 크고, 깔끔하며, 종종 'Responsive' 또는 'Free' 같은 단어 하나를 사용합니다.
• CTA 직접적이고 행동 지향적이며, 'Choose a Starting Point' 같은 구문을 사용합니다.

• 경쟁하는 여러 악센트 색상을 사용하지 마세요 — 스크린샷은 유일한 선명한 색상으로 단 하나의 틸(#33ada9)만 보여줍니다.
• 복잡한, 다층 그라디언트를 사용하지 마세요 — 스크린샷은 간단한 2색 리니어 그라디언트 오버레이를 보여줍니다.
• 장식적이거나 세리프 타이포그래피를 사용하지 마세요 — 스크린샷은 깔끔한 표준 grotesque-sans(Arial/Helvetica)를 보여줍니다.
• 무거운, 단색 검정 배경을 사용하지 마세요 — 스크린샷은 메인 배경으로 다크 차콜(#24252d)을 보여줍니다.
• 버튼에 사각, 날카로운 모서리를 사용하지 마세요 — 스크린샷은 일관된 6px 둥근 모서리를 보여줍니다.
• 넓고 퍼지는 레이아웃을 사용하지 마세요 — 스크린샷은 좁고 중앙 정렬된 컬럼으로 제한된 콘텐츠를 보여줍니다.
• 피하기: 전문 용어가 가득한 기술적 언어
• 피하기: 지나치게 복잡한 문장
• 피하기: 공격적이거나 긴박한 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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