큐레이션 · 오픈 · 무료

Balsa

소프트웨어 구축을 위한 문서화 및 프로젝트 추적 도구입니다.

01

디자인 DNA

제품 팀이 목표와 작업을 조율하기 위한 깔끔하고 집중된 작업 공간.

02

컬러

핵심 UI 카드 및 콜아웃을 강조하기 위해 단일의 고채도 노란색 악센트를 사용하는 고대비 흑백입니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display48px · 700
• heading24px · 700
• body16px · 400
• caption12px · 400

UI 레이블과 상태 표시기에는 대문자를 사용합니다. · 메인 헤드라인은 굵은 굵기와 좁은 자간을 사용합니다.

04

여백

히어로 섹션에 넉넉한 여백을 포함한 일관된 4px 그리드 베이스입니다.

05

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

미세한 구분을 위한 얇고 불투명도가 낮은 검정 테두리 (rgba(0,0,0,0.09))입니다.

rgba(0,0,0,0.05) 0px 1px 0px 0px · rgba(0,0,0,0.15) 0px 0.7px 0.7px -0.625px, rgba(0,0,0,0.145) 0px 1.8px 1.8px -1.25px, rgba(0,0,0,0.05) 0px 30px 30px -3.75px

06

레이아웃

마케팅 사이트는 단일 컬럼 중앙 정렬 레이아웃이고, 제품 UI 스크린샷은 복잡한 다중 컬럼 그리드입니다.

07

모션과 인터랙션

hover 및 focus 상태에서의 매끄러운 트랜지션.

인터랙티브 요소에 대한 미세한 색상 변경 또는 그림자 이동. · 상태 변경을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 작업을 위한 검정 타원형 채우기 버튼과 보조 작업을 위한 테두리가 있는 타원형 버튼입니다.
• card 부드러운 그림자가 적용된 흰색 카드 (예: 메인 제품 UI 스크린샷)와 기능을 강조하기 위한 노란색 악센트 카드입니다.
• chip 둥근 모서리와 배경 색상이 있는 상태 표시기입니다.
• input 미세한 그림자가 있는 깔끔하고 테두리가 있는 입력 필드입니다.
• hero 큰 헤드라인, 서브 텍스트 및 그 아래에 눈에 띄는 제품 UI 스크린샷이 있는 중앙 정렬 텍스트 중심 히어로 섹션입니다.

09

보이스와 금지 목록

• 톤 직설적이고 전문적이며 팀 효율성에 초점을 맞춥니다.
• 헤드라인 대문자, 볼드체, 고대비.
• CTA 명확하고 행동 지향적이며 종종 타원형 버튼 안에 포함됩니다.

• 바쁜 배경을 사용하지 마세요 — 스크린샷은 깔끔한 단색 흰색 (#FFFFFF) 배경을 보여줍니다.
• 저대비 악센트 색상을 사용하지 마세요 — 스크린샷은 강조를 위해 고채도 노란색 (#FFB700)을 보여줍니다.
• 밝은 회색 주요 텍스트 색상을 사용하지 마세요 — 스크린샷은 메인 헤드라인을 위해 순수 검정 (#000000)을 보여줍니다.
• 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 주요 카드와 컨테이너에 둥근 모서리 (12px)를 보여줍니다.
• 다크 모드 인터페이스를 사용하지 마세요 — 스크린샷은 주로 흰색/밝은 테마를 보여줍니다.
• 장식적이고, 필기체이거나, 지나치게 스타일화된 글꼴을 사용하지 마세요 — 스크린샷은 깔끔하고 기능적인 sans-serif 및 monospace 카테고리를 보여줍니다.
• 피하기: 격식 없는 언어
• 피하기: 복잡한 전문 용어
• 피하기: 지나치게 밀집된 텍스트 블록

10

팩 안의 실제 스크린샷

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

11

System Prompt

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