styles
← 갤러리

Arc Browser

비비드 블루-퍼플 그래디언트와 프로스티드 글래스 패널이 만드는 미래적 브라우저 UI — 투명도와 블러가 깊이감을 연출한다.

glassmorphism glass-panelblue-gradientfrosted-blurbrowser-uifuturisticvibrant-herotransparency
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Arc(The Browser Company)의 마케팅 랜딩에서 추출한 글래스모피즘 기반 스타일. 비비드 블루-퍼플(#3139fb→#2702c2) 그래디언트가 히어로를 지배하고, 프로스티드 글래스 패널(backdrop-filter: blur)이 콘텐츠 카드를 감싼다. 배경은 크리미한 옐로-화이트(#fffcec)에서 블루 그래디언트로 전환된다. 대담하고 미래적인 다크 버튼이 CTA로 쓰인다.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

골든 예제 (exemplar)

Meet Dia, the next
evolution of Arc

Weekly security updates, SOC 2 certification, and the Arc DNA you know.

Try Dia →

Your browser, reimagined

A browser built for the way you use the internet in 2026. Spaces, profiles, and an AI assistant that knows your tabs.

Do

  • Use vivid blue-purple gradients for hero backgrounds
  • Apply backdrop-filter: blur(20px) on card panels with semi-transparent bg
  • Keep large border-radius (12-20px)
  • Use generous whitespace — let the gradient breathe
  • Dark buttons as CTAs for contrast against light/gradient bg

Don't

  • Don't use opaque cards — the glass transparency is essential
  • Don't overdo borders — use subtle white/10% borders at most
  • Don't use sharp corners — everything should feel rounded and soft
  • Don't make gradient too dark — keep it vibrant and luminous
  • Don't forget fallback bg color for no-blur-support browsers

컴포넌트 노트

button
Large pill-like radius (12px+), dark primary or glass-frosted ghost. CTA is dark bg (#000/near-black) with white text and rounded icon.
card
Glass panel — semi-transparent white bg with backdrop-blur: 20px. Large radius (20px). Subtle border (white/10%).
input
Rounded (12px), glass-style with blurred bg.
nav
Top nav with colorful logo, transparent bg that blurs on scroll.