styles
← 갤러리

Mercury Soft Fintech

짙은 네이비 캔버스 위에 페리윙클 브랜드 액센트와 부드러운 파스텔 그라디언트를 얹은 스타트업 뱅킹 미학 — 정제되고 신뢰감 있으며, 필로 라운드와 시네마틱 히어로가 특징이다.

soft-futurism fintechsoft-pastel-gradientperiwinkle-accentdark-navy-canvaspill-shapescinematic-herorefined-trustworthyhumanist-grotesque
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

머큐리(Mercury)의 제품 랜딩에서 추출한 소프트 핀테크/뱅킹 미학. 캔버스는 측정된 짙은 네이비(oklch 0.209 0.020 285, #171721)가 정본이고, 본문은 near-white(#ededf3)로 대비는 크지만 부드럽다. 브랜드는 단일 페리윙클 인디고(oklch 0.570 0.200 272, #5266eb) 하나 — 주요 CTA·초점·강조에만 절제해 쓰고, 파스텔 블루(#9cb4e8·#cdddff)는 그라디언트와 데이터 신호로만 등장한다. 히어로는 은은한 파스텔 미스트 그라디언트에서 시네마틱 사진(산·안개)으로 이어지고, 그 위에 필-형태(pill, radius 32–40px) 버튼과 입력이 떠 있다. 라운드는 넉넉하고(카드 12px, 필드 pill), 구획은 두꺼운 섀도우가 아니라 얇은 보더와 미세한 배경 단차, 그리고 아주 낮은 불투명도의 소프트 섀도우로 나눈다. 타이포는 Arcadia 계열의 humanist 그로테스크로 헤딩은 480 웨이트, 본문은 400. 라이트 모드는 머큐리 앱·대시보드의 톤을 반영한 정제된 라벤더-틴트 화이트 카운터파트로 저술했다(같은 페리윙클 브랜드 유지).

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
small Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen

머큐리는 Arcadia 계열의 humanist 그로테스크를 쓴다 — 본문(arcadia)과 디스플레이(arcadiaDisplay)를 구분한다. 측정된 H1은 49.35px/480weight/line-height 54.28(≈1.1), H2 42px/480/자간 0.42px(≈0.01em), 본문 16px/400/line-height 24px. 웨이트는 측정된 360/400/420/480/530 중 헤딩 480·본문 400·라벨 420~480을 쓴다. 헤딩 자간은 거의 중립(살짝 음수~0)으로 절제돼 있어 Linear 같은 극단적 타이트 트래킹과 다르다. 스크린샷 확인 결과 헤딩(arcadiaDisplay)은 세리프가 없는 humanist 산세리프(따뜻하고 살짝 둥근 터미널)로, 본문·디스플레이 모두 Google Fonts 대체는 Inter로 통일한다.

골든 예제 (exemplar)

Radically different banking

Apply online in ten minutes to experience banking unlike anything that's come before.

Banking & more

Everything in one place

Checking, savings, cards, and payments — precise UI, gentle by design.

Featured

Mercury hits $5.2B valuation

Loved by 300K+ of the most ambitious companies.

Cards & expenses

Spend with confidence

Issue cards, set limits, and track every dollar in real time.

Do

  • 다크 네이비를 기본 캔버스로 설계하고 라이트는 같은 페리윙클 브랜드의 라벤더-틴트 화이트로 파생한다
  • 브랜드 페리윙클(#5266eb)은 주요 CTA·초점·강조에만 절제해서 쓴다
  • 버튼과 입력은 필(pill, radius 32–40px), 카드는 12px 라운드로 부드럽게
  • 히어로에 저채도 파스텔 그라디언트(라벤더→소프트 블루)를 시네마틱 이미지와 결합해 신뢰감·서정성을 준다
  • 구획은 얇은 보더 + 미세 배경 단차 + 아주 부드럽고 넓게 퍼진 저불투명 섀도우로

Don't

  • 채도 높은 원색·네온·강한 다중 색 남용 금지 — 팔레트는 네이비+페리윙클+파스텔로 절제
  • 짙고 진한 드롭 섀도우, 두꺼운 하드 보더 금지 — 섀도우는 부드럽고 낮은 불투명도
  • 각진 제로 라운드 금지 — 이 스타일의 본질은 넉넉한 필·소프트 라운드다
  • 바운스·스프링 오버슈트·과한 패럴랙스 모션 금지 — 차분하고 신뢰감 있게
  • 브랜드 페리윙클로 화면을 뒤덮지 말 것 — 액센트가 죽는다

컴포넌트 노트

button
base: primary는 페리윙클(var(--primary) #5266eb) 채움 + 화이트 텍스트, radius는 pill(var(--radius-field), 32–40px), padding 0 20px(높이로 필 비율 확보), 폰트 16px/420. 텍스트 자간 중립.
hover: 배경을 살짝 밝게(페리윙클 명도 +약간) + 아주 작은 translateY(-1px), 200–260ms ease-standard. 소프트 섀도우 미세 증가.
focus: 2px var(--ring) 페리윙클 링(box-shadow 0 0 0 2px ring, 오프셋 2px).
secondary_variant: 고스트/텍스트 링크형: 배경 투명, 텍스트 var(--foreground), pill radius. 내비 링크가 이 형태.
disabled: opacity 0.4, cursor not-allowed.
card
배경 var(--card)(background보다 한 단 밝게), 1px var(--border), radius var(--radius-box)(12px), padding 24–32px. 부드럽고 넓은 저불투명 섀도우 허용. 강조 카드는 파스텔 그라디언트 배경 채움 가능.
input
필-형태(pill, radius 32px 또는 좌측 pill 32px 0 0 32px로 CTA와 붙는 캡슐 조합), 반투명 배경 + 1px var(--border), padding 0 20px, placeholder는 var(--muted-foreground). 포커스 시 border→var(--ring).
nav
상단 sticky, 반투명 backdrop-blur 배경. 좌측 워드마크(MERCURY 자간 넓게), 중앙 드롭다운 링크(16px), 우측 'Log in' 텍스트 + 페리윙클 pill 'Open account'.
badge
작은 상태 배지 — pill radius, 12px 텍스트. 상태색은 chart-*(파스텔 블루/시안)을 배경 틴트 + 텍스트로. 브랜드 페리윙클은 강조에만.