탐색LandingUI 킷 템플릿 목록 페이지 — 라이트·다크 미리보기 쌍

1 / 1

템플릿 목록 페이지를 위에서 아래로 스크롤하는 화면 녹화다. 항목마다 좌측 설명과 두 개의 버튼, 우측에 라이트·다크 미리보기 카드 2장이 반복된다.

Landing

UI 킷 템플릿 목록 페이지 — 라이트·다크 미리보기 쌍

2024-12-18 · 동영상 1

AI 분석

웹 템플릿 목록을 좌측 설명·우측 미리보기 2열로 나열한 마케팅 페이지다.

상단 그라데이션 공지 바와 둥근 흰색 카드형 내비게이션 바가 화면 머리를 잡고, 그 아래 넓은 여백의 페이지 제목 블록이 이어진다. 본문은 좌측 텍스트, 우측 미리보기 2장으로 나뉜 스플릿 구조가 항목마다 반복되며, 각 항목은 라이트 모드와 다크 모드 스크린샷을 나란히 붙여 같은 템플릿의 두 테마를 한 번에 보여 준다. 타이포그래피는 굵은 검정 제목과 회색 부제를 한 줄에 섞어 대비를 만들고, 색은 거의 무채색으로 억제한 채 상단 바의 파랑–자홍 그라데이션만 강조로 남긴다. 검정 채움 버튼과 흰색 외곽선 버튼을 짝지은 CTA 패턴, 그리고 제품 스크린샷을 카드 안에 액자처럼 배치하는 방식이 템플릿·디자인 시스템 판매 페이지 레퍼런스로 유용하다.

minimal · light-mode · high-contrast · corporate

button card dark-mode design-system landing light-mode minimal navbar product-showcase saas split-screen typography-focused

claude-opus-5 · 2026-09-07 21:59 · 신뢰도 0.78

Toby

@tobybelhome · 팔로워 5,471

작가 페이지 X

원본 트윗

I have sent 3 website templates so far 🥳. My goal for 2025 is to take the quality to the next level and make this number 20. Of course with Figma files 😇. It's free for those who have the Pro.

좋아요 4 · 리트윗 0

x.com/tobybelhome/status/1869298135136362849