Y
YoonVibe
돌아가기
랜딩페이지

SaaS 랜딩페이지

미니멀한 SaaS 제품 랜딩페이지. 비대칭 레이아웃과 강한 타이포그래피 위계.

라이트 모드 미리보기
다크 모드 미리보기
레퍼런스 사이트Stripe 스크린샷
Stripe
Linear 스크린샷
Linear

사이트의 성격과 주요 기능을 설명하면 프롬프트에 반영됩니다

테마(중복 선택 가능)
텍스트(중복 선택 가능)
스타일
시그니처 컬러
컬러 조합 미리보기
생성된 프롬프트
다음 규칙에 따라 SaaS 랜딩페이지를 만들어줘.

[사이트 설명]
(사이트 설명을 입력해주세요)

레이아웃:
- 히어로 섹션은 비대칭 2컬럼 (텍스트 60% / 비주얼 40%)
- 섹션 간 충분한 여백 (clamp(4rem, 8vw, 8rem))
- container query로 컴포넌트 레벨 반응형

타이포그래피:
- 모듈러 타입 스케일 (1.25 비율)
- clamp()로 유동적 사이즈
- 본문 텍스트는 #222, 보조 텍스트는 #333까지만

컬러:
- OKLCH 색상 함수로 팔레트 구성
- 뉴트럴 컬러도 브랜드 색조로 tint
- 순수 검정/흰색 단독 사용 금지

스타일:
- 보더 래디어스 2~4px (최대 8px)
- pill 형태 버튼 금지
- 글래스모피즘 사용 금지
- 애니메이션은 transform/opacity만 사용, 지수 감속 이징

금지 사항:
- Inter, Roboto, Arial 등 뻔한 폰트 사용 금지
- 보라-파랑 그라디언트, 네온 액센트 금지
- 카드 안에 카드 중첩 금지
- 그라디언트 텍스트 금지
- 모든 것을 중앙 정렬하지 말 것

테마: 라이트 모드
- 배경은 밝은 오프화이트 (OKLCH 기반, 순수 #fff 금지)
- 텍스트는 #111 ~ #333 범위
- 카드/섹션 구분은 미묘한 보더 또는 배경색 차이로

텍스트 크기: 기본
- 본문: clamp(0.875rem, 1vw, 1rem)
- 제목: clamp(1.5rem, 3vw, 2.5rem)
- 모듈러 스케일 비율 1.25

미적 방향: 미니멀
- 여백을 충분히 활용
- 장식 요소 최소화
- 타이포그래피와 공간으로 위계 표현
- 컬러는 모노톤 + 액센트 1개

시그니처 컬러:
- 메인 컬러: #4338ca
- 서브 컬러: #6366f1
- 액센트 컬러: #f59e0b
- 이 3가지 색상을 OKLCH로 변환하여 팔레트의 기반으로 사용
- 버튼, 링크, 히어로 배경, 로고에 메인 컬러 적용
- 보조 UI 요소, 호버 상태, 아이콘에 서브 컬러 적용
- 배지, CTA 강조, 알림에 액센트 컬러 적용