큐레이션 · 오픈 · 무료

Gusto

중소기업을 위한 간소화된 급여, 인사 및 복리후생 플랫폼.

01

디자인 DNA

중소기업 인사 관리 운영 체제

02

컬러

접근성과 친근함을 위해 주요 틸 악센트와 따뜻한 중성색을 조화시킨, 고대비 팔레트.

03

타이포그래피

didone-serif · humanist-sans

• display56px · 500
• display42px · 500
• body18px · 400
• body16px · 400
• body14px · 400

헤드라인은 좁은 자간의 고대비 세리프를 사용합니다. · 본문은 높은 가독성의 휴머니스트 산세리프를 사용합니다. · 모든 본문에 일정한 1.5 줄 높이를 유지합니다.

04

여백

일정한 4px 기본 격자와 표준 8px, 16px, 24px, 32px 증분.

05

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

1px solid rgba(28,28,28,0.12)

0px -2px 16px 0px rgba(28, 28, 28, 0.08) · 0px 12px 24px 0px rgba(28, 28, 28, 0.12) · 0px 8px 16px 0px rgba(28, 28, 28, 0.08)

06

레이아웃

24px 거터를 가진 12열 격자의 중앙 정렬 최대 폭 컨테이너.

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 0.2초 배경색 및 색상 전환. · hover 상태에서의 미세한 0.1초 ease-out transform.

배경색이 약간 어두워지고, 커서가 포인터로 변경됩니다. · 촉각 피드백을 위한 미세한 0.1초 ease-out transform.

08

컴포넌트

• button 8px-12px 패딩을 가진 둥근 알약 형태로, 솔리드 틸 프라이머리 및 화이트-온-틸 반전 변형이 있습니다.
• card 화이트 배경, 8px border-radius, 미세한 0.08-0.12 투명도 드롭 섀도우.
• chip 보조 태그 또는 상태를 위한 작은 둥근 알약 형태.
• input 포커스 시 미세한 섀도우가 있는 깔끔한 보더 인풋.
• hero 큰 세리프 헤드라인, 산세리프 보조 텍스트 및 이중 액션 버튼을 가진 중앙 정렬 타이포그래피 히어로.

09

보이스와 금지 목록

• 톤 전문적이고, 친근하며, 안심시키는 어조.
• 헤드라인 고전적인 세리프의 권위를 가진 명확하고 혜택 중심적인 진술.
• CTA '생성', '비교', '보기'와 같은 직접적이고 행동 지향적인 동사.

• 네온이나 채도 높은 기본색을 사용하지 마세요 — 스크린샷은 차분하고 전문적인 틸을 보여줍니다.
• 히드라인에 초현대적 기하학적 산세리프를 사용하지 마세요 — 스크린샷은 고전적인 세리프를 보여줍니다.
• 날카롭고 모서리가 각진 형태를 사용하지 마세요 — 스크린샷은 일정한 8px border-radius를 보여줍니다.
• 강한 드롭 섀도우나 3D 효과를 사용하지 마세요 — 스크린샷은 미세하고 낮은 투명도의 높이 효과를 보여줍니다.
• 좁은 줄 높이를 사용하지 마세요 — 스크린샷은 본문에 편안한 1.5 비율을 보여줍니다.
• 본문에 굵은 글꼴 두께를 사용하지 마세요 — 스크린샷은 400 두께를 표준으로 보여줍니다.
• 피하기: 전문 용어가 많은 재무 용어
• 피하기: 공격적이거나 지나치게 긴박한 판매 언어
• 피하기: 차갑고 개인적이지 않은 기업적 말투

10

팩 안의 실제 스크린샷

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

11

System Prompt

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