← 갤러리

Aurora French Modernism

노랑→시안→핑크 오로라 메시 그라디언트가 섹션 배경 면을 가득 채우고, 버튼·카드는 반경 0의 직각, 큰 지오메트릭 산세리프와 스냅 모션이 얹힌 프랑스 모더니즘 웹 스타일.

french-modernism aurora-gradientzero-radiusbig-typegeometric-sansfull-bleedsnappy-motion
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

밝은 캔버스 위로 옐로·시안·핑크 세 색이 오로라처럼 흐르는 다색 radial 메시 그라디언트가 섹션 배경 전면(엣지투엣지)을 채운다. 텍스트는 그 위에서도 단색 잉크를 유지하고, 버튼·카드·이미지는 모서리 반경 0의 날카로운 직사각형이다. 위계는 거대한 지오메트릭 헤비 디스플레이 타입과 잉크 1px 헤어라인, 흰 섹션↔그라디언트 섹션의 교대 리듬으로 만든다. 그림자·글래스·둥근 모서리는 배제하고, 인터랙션은 150–200ms 스냅 모션으로 단호하다.

타입 스케일

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

디스플레이는 Clash Display 600 — 큰 지오메트릭 헤비 디스플레이, 트래킹 타이트(−0.02em). 본문·라벨은 Inter 400/600. 키커는 대문자 + 넓은 자간(0.1em) 라벨. 상용/Fontshare 폰트라 Google Fonts 대체(display→Space Grotesk, sans→Inter)를 명시.

골든 예제 (exemplar)

Nouvelle collection — 2026

L'aurore,
rendue nette.

A living gradient field, framed by nothing but sharp rectangles and ink hairlines.

Édition

03 / 12

Zero radius, single ink, snap motion.

Champ

Full-bleed aurora

The gradient is the section, not a dot.

Angle

Zero radius

Every corner is a right angle.

Rythme

Snappy motion

170ms, decisive, no bounce.

Do

  • 오로라 메시 그라디언트를 섹션 배경 면 전체(엣지투엣지)에 3–4겹 radial 레이어로 풍부하게 깐다
  • 버튼·카드·이미지 모두 zero-radius 직각으로 유지한다
  • 흰 섹션과 오로라 그라디언트 섹션을 교대해 활기 있는 리듬을 만든다
  • 텍스트는 그라디언트 위에서도 단색 잉크를 유지한다
  • 인터랙션은 150–200ms 스냅 모션으로 단호하게

Don't

  • 둥근 모서리(radius > 0) 절대 금지
  • 그라디언트를 작은 점·텍스트에만 쓰기 금지 — 섹션 배경 면 전체로
  • 그라디언트 텍스트 금지 — 텍스트는 단색 잉크
  • 보라 단색 그라디언트 금지 — 옐로·시안·핑크 오로라 3색
  • 그림자·글래스 패널·이모지 금지
  • 평면 단색 데드 보이드 금지 — 빈 영역은 오로라 메시나 직각 이미지·카드로 채운다
  • 느린 흐름 인터랙션 금지(그라디언트 배경 흐름만 예외)

컴포넌트 노트

button
base: radius 0, 솔리드 잉크(primary) 배경 + 흰 텍스트, padding 13px 30px, Inter 600 0.92rem
hover: 솔리드↔외곽선 색을 170ms로 단호하게 반전
secondary_variant: 1px solid 잉크 외곽선 + 투명 배경, radius 0
focus: 2px offset outline (ring)
card
흰 면 직각 카드, 1px solid 잉크 보더(또는 보더 없는 흰 면), 내부 패딩 32px, radius 0. 호버 시 translate(-3px,-3px) + 잉크 1px 직각 잔상. 그림자 없음.
input
1px solid 잉크 보더, radius 0. 포커스 시 ring.
nav
높이 64px, 흰 배경 또는 오로라 그라디언트 위 투명. 좌측 워드마크(display 600), 우측 대문자 키커 링크(0.78rem, 자간 0.1em) + 잉크 솔리드 직각 CTA. 메뉴 호버 시 잉크 1px 직각 언더라인 즉시 등장.
icon
1.75px 스트로크 지오메트릭 라인, 직각 모서리. 둥근 아이콘·이모지·제너릭 세트 금지.