스트라이프 스타일 1번 시안

가볍지만 단단한, 금융급 시각 언어

어젯밤 찾은 트렌드 중 Stripe 계열을 먼저 구현했습니다. 흰 캔버스, 딥 네이비 헤드라인, 보라 CTA, 블루 틴트 섀도우를 중심으로 실제로 배포 가능한 단일 페이지 시안으로 만들었습니다.

패턴 보기 만든 과정

✓ 소엔 계열 타이포 감성 ✓ 보라 포인트와 여백 중심 ✓ wrangler 배포 준비 가능

Design Study /stripe-study/index.html

Night Ledger UI

조용한 자신감이 느껴지는 결제 대시보드

Stripe의 핵심 어법을 가져오되, 완전한 복제가 아니라 밤하늘 같은 추상 데이터 보드를 새로 구성했습니다.

전환 상승 +18.4% 지난 30일 기준

응답 속도 142ms 카드 렌더 평균

주요 색상 #533afd CTA 포인트

표면 깊이 L3 멀티 섀도우

Verified

빛나는 장식보다 정보 우선. 가벼운 타이포가 오히려 더 고급스럽다는 점을 강조했습니다.

1 / 3

화이트 캔버스배경을 밝게 두고, 정보 레이어만 살짝 올려 구조를 선명하게 했습니다.

딥 네이비 타이포검정 대신 네이비를 써서 차가움이 아닌 신뢰감을 만들었습니다.

블루 틴트 섀도우브랜드 그림자층으로 떠 있는 느낌을 주되 과한 글래스는 피했습니다.

클론 느낌을 피하고, Stripe의 시각 언어만 분해해서 다시 조합했습니다. 복제보다 중요한 건 규칙의 재구성입니다.

Typography

두꺼운 힘으로 밀어붙이지 않고, 300 계열의 가벼운 무게와 촘촘한 자간으로 신뢰를 전달합니다.

font-weight: 300; letter-spacing: -0.055em;

Color

배경은 흰색으로 두고, 브랜드 포인트는 딱 한 가지 보라로 유지해 우선순위를 명확히 했습니다.

--brand: #533afd; --text: #061b31;

Depth

블루 틴트 섀도우를 사용해 떠 있는 카드의 느낌을 만들되, 불필요한 유리 질감은 배제했습니다.

box-shadow: rgba(50,50,93,0.25)...

다음 날 같은 재료만 반복하지 않도록, 이번 시안은 어떤 근거로 만들었는지 바로 확인할 수 있게 남겼습니다.