큐레이션 · 오픈 · 무료

Cargo

플랫폼 장식보다 타이포그래피와 창의 작업을 우선시하는 미니멀 사이트 빌더입니다.

01

디자인 DNA

창작자를 위한 갤러리급 디지털 캔버스

02

컬러

엄격히 단색이고 중립적이며, 높은 대비의 흰색 배경을 사용하여 사용자의 다채로운 창의 작업이 유일한 초점이 되도록 합니다.

03

타이포그래피

humanist-sans

• display80px · 400
• heading40px · 400
• body14px · 400

표시 크기에서 견고한 자간을 사용하여 정교하고 맞춤 글꼴 같은 느낌을 줍니다 · 중간 무게(500)를 인터랙티브 요소에 전용으로 사용하여 명확한 사용 가능성을 제공합니다

04

여백

선형 수직 리듬이 아닌 명시적인 격자 배치에 의해 주도되는 비대칭 레이아웃입니다.

05

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

히어로에 보이는 테두리는 없습니다. 분리에는 오직 간격과 타이포그래피에만 의존합니다.

06

레이아웃

데스크톱에서 왼쪽 정렬 브랜딩과 오른쪽 정렬 액션이 있는 비대칭 분할 격자입니다.

07

모션과 인터랙션

hover 상태에서 즉각적인 전환 · 단계적 페이지 진입 애니메이션

텍스트 링크에서 보이는 배경 변경 없이 커서가 포인터로 변경됩니다. · 인지되는 지연 없이 즉각적인 상태 변경이 있습니다.

08

컴포넌트

• button 단단한 파란색 채워진 버튼(반전 상태) 또는 밑줄이 있는 텍스트 전용 링크입니다.
• card 테두리 반경이 제로이고 이미지 유출을 많이 사용하는 템플릿 미리보기 카드입니다.
• chip 콘텐츠 뷰를 분리하는 탭 유형의 단순 구분선입니다.
• input 기본 패딩이 있는 표준 테두리 텍스트 입력 필드입니다.
• hero 반대 모서리에 고정된 대형 타이포그래피가 있는 전체 화면 비대칭 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 정교하고 직접적이며 약간 불경스럽습니다.
• 헤드라인 강렬하고 미니멀한 두 단어 명령문 또는 진술문입니다.
• CTA 괄호로 감싸거나 단순한 텍스트 링크 형태의 행동 지향적 텍스트입니다.

• 주요 컨테이너에 border-radius를 사용하지 마세요 — 스크린샷은 완전히 사각형 모서리를 보여줍니다
• 깊이를 위해 드롭 섀도우를 사용하지 마세요 — 스크린샷은 완전히 평평한 표면을 보여줍니다
• 본문에 세리프 글꼴을 사용하지 마세요 — 스크린샷은 전체적으로 인간주의 산세리프를 보여줍니다
• 큰 텍스트 블록을 중앙 정렬하지 마세요 — 스크린샷은 엄격한 왼쪽 정렬 또는 오른쪽 정렬 배치를 보여줍니다
• 화려한 배경 색상을 사용하지 마세요 — 스크린샷은 엄격히 흰색 또는 비색 캔버스를 보여줍니다
• 헤더에 넓은 자간을 사용하지 마세요 — 스크린샷은 견고한 음수 자간을 보여줍니다
• 피하기: 마케팅 용어
• 피하기: 장식적 그라데이션
• 피하기: 상업적 느낌의 감탄사

10

팩 안의 실제 스크린샷

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

11

System Prompt

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