styles
← 갤러리

Glass Soft Futurism

블루→바이올렛 메시 그라디언트 위에 서리 낀 반투명 유리 카드를 띄운 소프트 퓨처리즘 — 부드럽고 시원하고 미래적인 AI/SaaS 랜딩 감성.

glassmorphism frosted-glasssoft-futurismmesh-gradientbackdrop-blurcool-paletteairytranslucent-cards
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

차가운 인디고·바이올렛·시안 팔레트를 라이트 라벤더 또는 딥 네이비 배경 위에 얹고, 반투명 프로스티드 글래스 표면(backdrop-blur)과 크게 둥근 모서리(16-24px), 크고 흐릿하며 은은한 확산 그림자로 공간을 만든다. 블루에서 바이올렛으로 흐르는 소프트 메시 그라디언트가 히어로 배경을 채우고, 카드는 얇은 반투명 보더를 두른 반투명 유리처럼 떠 있다. 장식은 색이 아니라 빛과 흐림과 깊이로 만든다.

타입 스케일

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

Space Grotesk 디스플레이로 미래적·기하학적 헤드라인, Inter로 본문 가독성. 헤드라인은 tracking-tight(-0.02~-0.03em), eyebrow 라벨은 대문자 + 넓은 자간으로 SaaS 섹션 라벨 역할. 웨이트는 400/500/600 3단.

골든 예제 (exemplar)

● New · AI Platform

Ship intelligent products, softly.

A calm, luminous surface for your AI workflows — frosted glass over a cool gradient, built to feel effortless from first render.

Real-time inference

Sub-second responses that stay glassy under load.

Composable agents

Snap workflows together like frosted panes.

Private by design

Your data stays behind the glass.

Do

  • 카드·네비·모달 표면에 backdrop-blur를 얹어 진짜 유리처럼 뒤가 비치게 한다
  • 히어로 배경은 블루→바이올렛 소프트 메시 그라디언트로 채운다
  • 그림자는 크고 흐릿하고 쿨한 인디고 톤으로, 낮은 불투명도로 확산시킨다
  • 모서리는 16-24px로 넉넉하게 굴린다
  • primary(바이올렛) 1축 + accent(시안) 포인트로 색 위계를 절제한다

Don't

  • 토큰 색값 자체를 투명하게 만들지 말 것 — 투명도는 표면 레이어(alpha/backdrop-filter)에서만
  • 딱딱한 계단식·순수 검정 그림자 금지 (그라디언트 톤의 확산 그림자를 써라)
  • 각진 모서리(radius 0)나 굵은 하드 보더 금지
  • 따뜻한 색(주황·황토)이나 고채도 원색으로 팔레트를 흐트러뜨리지 말 것
  • backdrop-blur 뒤에 비칠 배경(그라디언트/이미지)이 없으면 유리 효과가 죽는다 — 반드시 배경을 깔 것

컴포넌트 노트

button
base: radius 14px, primary(바이올렛) 채움 또는 유리 고스트, padding 12px 24px, font-weight 600. 프라이머리는 은은한 인디고 글로우 그림자.
hover: primary는 약간 밝아지고 글로우 확장 + translateY(-2px), 320ms ease-emphasis. 고스트는 backdrop-blur 배경이 살짝 진해짐.
focus: 2px ring(primary) + 4px offset 반투명 halo
disabled: opacity 0.45, 글로우 제거
ghost_variant: 반투명 유리 배경(card alpha ~0.5) + 1px 반투명 보더 + backdrop-blur(16px)
card
프로스티드 글래스: 반투명 card 배경(alpha 0.55-0.7) + backdrop-filter blur(20px) saturate(1.4) + 1px 반투명 밝은 보더 + 큰 확산 그림자. radius 20px. padding 28-32px. hover 시 떠오름.
input
radius 14px, 반투명 유리 필드(input alpha) + 얇은 보더, 포커스 시 ring(primary)과 은은한 글로우. placeholder는 muted-foreground.
nav
상단 sticky 글래스 바: 반투명 배경 + backdrop-blur(20px) + 하단 1px 반투명 보더. 스크롤 시 블러/불투명도 강화. 로고 좌측, 링크 중앙, 글래스 고스트 CTA 우측.
badge
pill(radius 999px) 반투명 유리 칩, accent(시안) 텍스트 + 얇은 보더. '신규 · AI' 류 라벨.