Stripe
불투명 유리 위에 남색 잉크로 쓰인 회계 장부
Stripe 금융 상품에 거의 단색에 가까운 디자인을 사용합니다. 부드럽고 시원한 흰색 바탕에 짙은 파란색 제목, 거의 없는 크롬 장식, 그리고 버튼, 링크 또는 아이콘 테두리로 사용될 수 있을 만큼 밝은 남색(#533afd) 하나만을 사용합니다. 글꼴은 56px 크기에서도 300포인트의 매우 얇은 두께로, 노골적으로 기업적인 느낌보다는 자신감 넘치는 절제미를 보여줍니다. 글자 크기는 커질수록 급격히 줄어듭니다. 버튼은 작고 정사각형(4px)이며, 보라색 바탕 또는 아주 얇은 보라색 테두리를 사용합니다. 그림자는 전혀 사용하지 않고, 입체감을 표현하기보다는 배경색의 변화(흰색 → #f8fafd → #e5edf5 → 보라색 계열)를 통해 깊이감을 표현합니다. 전체 인터페이스는 마치 회계 장부나 터미널처럼 작동합니다. 빽빽한 정보, 명확한 선, 각 섹션 사이의 충분한 간격, 그리고 색상은 작업이 필요할 때만 나타납니다.
흰색 캔버스에 가운데 정렬된 콘텐츠 열의 최대 너비는 약 1320px입니다. 히어로 영역은 왼쪽 정렬된 전체 크기(56px)의 텍스트 블록이며, 그 아래에 두 개의 클릭 유도 버튼이 있습니다. 히어로 이미지는 없으며, 타이포그래피 자체가 히어로 영역입니다. 섹션들은 96px의 동일한 간격과 1px의 #e5edf5 색상 구분선을 사용하여 세로로 배열되어 있으며, 밝은 색과 어두운 색이 번갈아 나타나는 줄무늬는 없습니다. 각 섹션은 반복되는 패턴을 따릅니다. 작은 대문자 섹션 제목(옅은 색상, 12px), 32~48px 크기의 제목, 22px 크기의 단락, 그리고 제품 카드 그리드(데스크톱에서는 3열) 또는 시각 자료가 포함된 2열 텍스트 블록이 차례로 나타납니다. 클라이언트 로고는 왼쪽 정렬된 좁은 세로 막대 안에 표시됩니다. 푸터는 #f8fafd 색상의 넓은 막대 안에 여러 열로 된 링크 목록이 있습니다. 전체적인 흐름은 느리고 차분하며 주로 텍스트 중심입니다. 스크롤 길이가 길지만 정보 밀도는 낮습니다.
이미지는 절제된 다큐멘터리 스타일로 구성되어 있습니다. 전면 사진은 사례 연구 섹션(예: Hertz의 항공 교통 사진)에만 사용되며, 위에서 또는 극적인 각도에서 촬영하고 자연스러운 색상을 사용합니다. 듀오톤이나 색상 보정은 사용하지 않습니다. 제품 사용자 인터페이스의 스크린샷은 기능 카드에 사용되며, 장치 프레임 없이 선명한 각도와 깔끔한 테두리로 표시됩니다. 파트너 로고는 별도의 테두리 없이 각 파트너의 색상으로 표시됩니다. 일러스트레이션, 3D 렌더링 또는 장식적인 추상 그래픽 요소는 사용하지 않습니다. 아이콘은 모두 동일한 선 굵기(1, 2)로 흰색 배경에 기하학적 선(셰브론, 화살표, 체크 표시, 문서 기호)으로 표시됩니다. 페이지는 주로 텍스트와 여백으로 구성되며, 이미지는 전체 화면 영역의 3% 미만을 차지합니다.
팔레트
상표
- Indigo Ink
#533afd— 보라색은 채워진 버튼, 선택된 탐색 상태 및 포커스 기반 전환 순간에 사용됩니다. - Indigo Hover
#7389ff— 보라색은 링크, 태그 및 짧은 문구를 강조하는 데 사용됩니다. 클릭 유도 문구의 주요 색상으로 사용해서는 안 됩니다.
중립적
- Midnight Ink
#061b31— 제목과 본문 텍스트는 시원한 푸른빛이 감도는 짙은 검정색에 가까운 색상으로, 전체 글꼴 시스템의 기본이 됩니다. - Slate
#64748d— 회색 텍스트는 링크, 태그 및 짧은 문구를 강조 표시합니다. - Steel
#50617a— 추가 텍스트 및 보조 자료는 하위 라이선스에 사용되는 회색과 은은한 보라색 톤 사이에 배치됩니다. - Smoke
#839bc8— 크고 장식적인 제목과 그에 딸린 텍스트에는 은은한 보라색 계열을 사용하며, 본문 단락에는 절대 사용하지 않습니다. - Pure White
#ffffff— 페이지의 바탕면과 카드의 볼록한 표면; 모든 것이 측정되는 기본 배경. - Mist
#f8fafd— 푸터 배경과 섹션 구분선은 은은한 시원한 색조로, 눈에 띄는 테두리 없이 영역을 구분합니다.
타이포그래피
12픽셀에서 56픽셀로 · 9단계
- sohne-var — 대사: Inter Tight (variable · 요점 300, 400 · 전체 인터페이스에서 사용되는 글꼴은 제목, 본문, 탐색 메뉴, 버튼 및 레이블에만 사용됩니다. 300 두께의 글꼴은 56px의 화면 크기에서도 일관되게 유지되는데, 이는 제목에 강조를 두어 소리치기보다는 속삭이듯 표현하고, 절제를 통해 권위를 확립하는 독특한 특징입니다. 400 두께의 글꼴은 탐색 메뉴와 버튼 텍스트의 14~16px 영역에서만 사용되는데, 이는 작은 화면에서도 가독성을 높이기 위해 획을 하나 더 추가하기 위함입니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 넓은 |
| 기본 단계 | 8px |
| 버튼 반경 | 4px |
| 카드 반경 | 4px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 96px |
| 페이지 너비 | 1320px |
AI가 Stripe 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Ui — 무광택 용지에 인쇄된 임상 계획서
- monopo saigon — 편집자의 침묵 뒤에서 흐르는 액체처럼 영롱한 빛—녹아내리는 빛 위에 떠 있는 흑백의 편집 갤러리
- Ventriloc — 따뜻한 종이 위에 펼쳐진 편집 데이터 관측소 - 흑백의 정밀함을 강조하는 하나의 주황색 불씨
- Hyer Aviation — 조종석의 황혼녘, 양피지 위로 희미한 새벽 하늘이 동체 크기의 세리프체 로고와 어우러지고, 따뜻한 흙빛 포인트 하나가 단조로운 단색의 분위기를 깨뜨린다.
- Family — 크림색 양피지에 그려진 동화책의 한 페이지
- OFF+BRAND. — 따뜻한 양피지 위에 놓인 무지갯빛 구체
- Geniestudio — 은은한 햇살이 비치는 노트, 여백이 넓고 펜으로 굵게 한 줄 써진 그런 노트
- xAI — 따뜻한 크림 랩과 블랙 필
- Seed — 실험실 유리 아래에 있는 살아있는 유기체
- Cosmos — 린넨으로 벽면을 덮고 폴라로이드 사진들을 걸어놓은 갤러리
- Cal — 단색의 실용성과 인간미. 엄격한 흑백 색상 팔레트를 통해 명확성과 기능성을 최우선으로 하되, 친근한 타이포그래피와 둥근 형태로 부드러움을 더한 시스템입니다.
- T1 Energy — 따뜻한 양피지에 그려진 생산 시설의 그림은 산업적인 규모와 섬세한 타이포그래피가 브랜드 전체를 담아내는 조용하고 흑백의 장면입니다.