큐레이션 · 오픈 · 무료

Brex

카드, 뱅킹, AI 기반 경비 관리를 결합한 엔터프라이즈급 금융 소프트웨어.

01

디자인 DNA

현대 기업을 위한 고성능 금융 운영 체제.

02

컬러

전환 행동을 유도하기 위한 단일 강렬한 강조색이 있는 고대비 기반.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display48px · 400
• heading36px · 400
• body16px · 400

프리미엄 느낌을 주기 위해 디스플레이 텍스트에 타이트한 음수 자간 적용 · 모든 크기에서 최대 가독성을 위해 일관된 400 웨이트 사용 · 본문 텍스트의 스캔 편의성을 위해 넉넉한 행간

04

여백

일관된 4px 그리드와 넉넉한 여백 패딩(72px 수평 컨테이너)으로 깔끔한 정렬을 유지합니다.

05

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

구조 요소에 다크 뉴트럴(#15191E)의 미니멀 1px solid 보더 사용.

0px 1px 0px 0px rgba(66, 87, 138, 0.15) · 0px 1px 1px 0px rgba(0, 0, 0, 0.04)

06

레이아웃

히어로 섹션 단일 컬럼에서 시작하여 텍스트/일러스트레이션이 교차하는 기능 행으로 이어집니다.

07

모션과 인터랙션

상태 변화를 위한 미세한 선형 트랜지션 · 복잡한 시각적 전환을 위한 표준 ease-in-out

인터랙티브 요소에 미세한 투명도 또는 색상 변화. · 최소한의 애니메이션 지연으로 즉각적인 상태 변화.

08

컴포넌트

• button 주요 액션에는 솔리드 강조색 채움, 보조 내비게이션에는 고스트 또는 텍스트 스타일 사용.
• card 기능 하이라이트를 위해 둥근 모서리(12px)와 부드러운 그레이(#F3F3F7) 배경 사용.
• chip 통합 파트너를 위한 표준화된 태그 스타일.
• input 둥근 모서리와 통합된 주요 CTA가 있는 깔끔한 보더 필드.
• hero 중립적인 기반 위에 고품질 3D 제품 렌더링과 함께 사용되는 큰 디스플레이 타이포그래피.

09

보이스와 금지 목록

• 톤 권위적이고 효율적이며 매우 전문적.
• 헤드라인 속도와 규모를 강조하는 직접적이고 혜택 중심의 진술.
• CTA 행동 지향적이고 간결함(예: '시작하기', '데모 보기').

• 따뜻하거나 장난스러운 색상 팔레트를 사용하지 마세요 — 스크린샷은 엄격한 검정/흰색/주황색 체계를 보여줍니다.
• UI 카드에 과도한 드롭 섀도우나 3D 효과를 적용하지 마세요 — 스크린샷은 플랫하고 깔끔한 표면을 보여줍니다.
• 디스플레이 텍스트에 장식적이나 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 타이트한 산세리프를 사용합니다.
• 여러 경쟁 강조색으로 레이아웃을 복잡하게 하지 마세요 — 스크린샷은 주황색을 유일한 하이라이트로 사용합니다.
• 중요한 정보에 저대비 텍스트를 사용하지 마세요 — 스크린샷은 어두운 잉크로 높은 가독성을 유지합니다.
• 헤더에 느슨하고 넓은 자간을 만들지 마세요 — 스크린샷은 임팩트를 위해 타이트한 트래킹(-0.96px)을 사용합니다.
• 피하기: 장난스럽거나 지나치게 캐주얼한 언어
• 피하기: 불필요한 전문 용어나 복잡한 금융 용어
• 피하기: 수동적 표현이나 약한 동사
• 피하기: 구체적인 가치 제안 없는 모호한 약속

10

팩 안의 실제 스크린샷

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

11

System Prompt

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