큐레이션 · 오픈 · 무료

Beau To

Beau는 모든 문서 인터랙션에 스마트 자동화를 도입하여, 고객 대면 프로세스를 재정의합니다.

01

디자인 DNA

데이터 추출과 검증을 자동화하는 지능형 문서 처리 엔진.

02

컬러

명확성을 위한 고대비 흑백과 역동적인 에너지를 위한 활기찬 그라디언트 악센트.

03

타이포그래피

humanist-sans · monospace

• display56px · 500
• display-sm40px · 500
• heading28px · 500
• body17px · 400
• caption14px · 400

04

여백

명확성을 강조하기 위해 넉넉한 여백을 둔 4px 그리드 기반.

05

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

구분을 위한 미세한 1px solid 선.

0px 2px 6px 0px rgba(0, 0, 0, 0.06)

06

레이아웃

중앙 정렬된 히어로 섹션 뒤에 교차 분할 레이아웃과 3열 기능 그리드가 배치됩니다.

07

모션과 인터랙션

hover 및 상태 변경 시 부드러운 투명도 전환.

미세한 색상 또는 투명도 전환이 적용된 커서 포인터. · 즉각적인 시각적 피드백.

08

컴포넌트

• button 고대비 검정 배경에 흰색 텍스트가 적용된 알약 모양의 기본 버튼.
• card 미세한 테두리와 부드러운 그림자가 있는 카드로, 종종 데이터 검증 예제를 포함합니다.
• chip 상태 표시기 (유효함은 초록색, 경고는 주황색, 무효는 빨간색 텍스트).
• input 데이터 입력을 위한 깔끔한 텍스트 기반 입력 필드.
• hero 데이터 검증을 보여주는 복잡한 UI 목업과 함께하는 큰 중앙 정렬 헤드라인과 보조 부제목.

09

보이스와 금지 목록

• 톤 전문적이고 효율적이며 자신감 있는 어조.
• 헤드라인 직접적이고 혜택을 강조하며, 종종 크고 볼드한 타이포그래피를 사용합니다.
• CTA '데모 요청'과 같이 명확하고 행동 지향적인 문구.

• 여러 기본 악센트 색상을 사용하지 마세요 — 스크린샷은 단계별 강조에 단일 그라디언트만 사용하는 것을 보여줍니다
• 복잡한 장식적 배경을 사용하지 마세요 — 스크린샷은 최소한의 노이즈가 있는 대체로 깔끔한 흰색 배경을 보여줍니다
• 본문 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 설명의 가독성을 위해 왼쪽 정렬 텍스트를 사용합니다
• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 일부 UI 목업은 날카로운 모서리를, 버튼은 둥근 모서리를 사용하는 것을 보여줍니다
• 무거운 드롭 그림자를 사용하지 마세요 — 스크린샷은 매우 미세하고 거의 평면에 가까운 그림자를 보여줍니다
• 코드에 산세리프 폰트를 사용하지 마세요 — 스크린샷은 문서 데이터 추출에 모노스페이스 폰트를 사용합니다
• 피하기: 불필요한 말
• 피하기: 전문 용어
• 피하기: 수동태

10

팩 안의 실제 스크린샷

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

11

System Prompt

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