큐레이션 · 오픈 · 무료

Arc Browser

장난기 있는 성격과 현대적인 생산성을 혼합한, 따뜻하고 표현적인 브라우저 경험.

01

디자인 DNA

친근하고 창의적인 스튜디오 작업 공간으로, 개인적이고 초대하는 느낌을 줍니다.

02

컬러

활기찬 블루 강조색을 사용한 따뜻한 오프 화이트 베이스. 깊이감을 위해 미세한 노이즈 텍스처를 사용합니다.

03

타이포그래피

transitional-serif · humanist-sans · monospace

• display56px · 700
• heading28px · 700
• body16px · 400
• caption12px · 500

따뜻함을 만들기 위해 큰 디스플레이 헤드라인에는 전이 세리프를 사용합니다. · 가독성을 유지하기 위해 본문에는 휴머니스틱 산스를 사용합니다. · 디스플레이 크기에 넉넉한 네거티브 트래킹을 적용합니다.

04

여백

일관된 4px 베이스와 상호작용 요소 주변의 넉넉한 패딩입니다.

05

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

미세한 1px solid 테두리, 강조를 위해 자주 강조 블루를 사용합니다.

0px 5px 5px 0px rgba(0, 0, 0, 0.1) · 0px 2px 8px 0px rgba(0, 0, 0, 0.25)

06

레이아웃

반응형 동작과 넉넉한 여백을 갖춘 표준 12열 그리드입니다.

07

모션과 인터랙션

상호작용 요소의 hover 시 미세한 transform. · 부드러운 배경색 전환.

상호작용 요소에 미세한 transform과 box-shadow 엘리베이션. · 약간의 축소 또는 불투명도 변화.

08

컴포넌트

• button 필 모양과 장난기 있는 아이콘 통합이 적용된 어두운 채워진 버튼.
• card 미세한 노이즈 텍스처와 부드러운 그림자가 적용된 밝은 카드.
• chip 강조색이 적용된 작은 둥근 레이블.
• input 미니멀한 스타일링이 적용된 깔끔한 텍스트 입력.
• hero 따뜻한 그라디언트 배경과 노이즈 오버레이가 적용된 큰 표현적 헤드라인.

09

보이스와 금지 목록

• 톤 장난기 있고, 친근하며, 대화적인 톤.
• 헤드라인 성격이 담긴 표현적인 세리프 헤드라인.
• CTA 직접적이고 초대하는 느낌, 장난기 있는 아이콘 사용.

• 차가운 그레이를 사용하지 마세요 — 스크린샷은 주요 배경으로 따뜻한 오프 화이트(#FFFCF7)를 보여줍니다.
• 모서리를 모두 날카롭게 하지 마세요 — 스크린샷은 넉넉한 필 모양과 둥근 모서리를 보여줍니다.
• 선명한 흰색 배경을 사용하지 마세요 — 스크린샷은 따뜻하고 약간 노른자빛이 도는 화이트를 보여줍니다.
• 얇고 가벼운 타이포그래피를 사용하지 마세요 — 스크린샷은 굵고 표현적인 세리프 헤드라인을 보여줍니다.
• 공격적인 그림자를 사용하지 마세요 — 스크린샷은 깊이감을 위한 부드럽고 미세한 그림자를 보여줍니다.
• 단조롭고 기업적인 레이아웃을 사용하지 마세요 — 스크린샷은 노이즈 텍스처가 적용된 장난기 있고 표현적인 구성을 보여줍니다.
• 피하기: 기업 용어
• 피하기: 지나치게 전문적인 언어
• 피하기: 차갑거나 건조한 톤

10

팩 안의 실제 스크린샷

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

11

System Prompt

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