styles
← 갤러리

Art Nouveau Florido

휘감기는 채찍 곡선(whiplash) SVG 장식과 흐르는 가라몬드 세리프, 머스터드·세이지·플럼 벨 에포크 팔레트의 1890년대 아르누보 웹 스타일.

art-nouveau art-nouveauwhiplash-curvebelle-epoqueornamental-seriforganic-asymmetricfiligree
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

직선 보더 대신 식물 채찍 곡선 SVG가 섹션 경계·프레임·구분선을 휘감고, Cormorant Garamond 디스플레이와 EB Garamond 본문이 위계를 만든다. 크림 배경 위에 차분한 머스터드 골드·세이지·플럼 세 강조색만 쓰고, 카드·이미지는 비대칭 유기 곡선 모서리(60px 8px 60px 8px 식), 그림자 없이 곡선 프레임과 면 색으로 깊이를 만든다. 곡선 장식이 stroke-dashoffset로 덩굴이 자라듯 드로우되는 유기적 모션이 정체성이다.

타입 스케일

display Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
dropcap Ag 스타일 견본 Style Specimen

산세리프 금지 — font-sans 역할까지 EB Garamond 세리프로 매핑한다(디폴트 UI 폰트가 세리프인 스타일). 디스플레이는 Cormorant Garamond 600(헤드라인 옵션으로 Cormorant SC small-caps), 본문은 EB Garamond 400/1.7, 라벨·키커는 small-caps(또는 대문자)+0.16em 자간에 플럼 색. 드롭캡은 Cormorant 600, 3줄 높이, 머스터드.

골든 예제 (exemplar)

maison florido · est. 1893

Where every line
blooms into a vine

Borders do not rule here — they wander. Mustard whiplash curves wrap each frame, taper into leaves, and settle where the cream asks for ornament.

“The whiplash line is nature’s own signature.”
— hector, glasswright of nancy

Do

  • 모든 섹션에 장식 3종 세트를 채운다 — 상·하단 경계 채찍 곡선 밴드 + 콘텐츠 코너 필리그리 + 빈 면의 옅은(opacity 0.12–0.2) 곡선/꽃 워터마크
  • 곡선 stroke는 1.5–2.5px, 끝이 가늘어지며 잎·꽃봉오리 모티프로 마감한다
  • 카드·이미지 모서리는 비대칭 유기 곡선(60px 8px 60px 8px 식) — 상단만 아치 또는 대각 코너만 둥글게
  • 본문 첫 글자는 3줄 높이 머스터드 드롭캡, 잎 필리그리로 감싼다
  • 곡선 장식은 stroke-dashoffset로 덩굴이 자라듯 드로우한다(800ms), 호버는 식물 디테일이 피어난다

Don't

  • 곡선 장식 생략·축소 절대 금지 — '가는 골드 선 한두 개 + 평면 아치'로 끝나면 정체성 상실
  • 직각 그리드·하드 1px 직선 보더 금지 — 구분은 언제나 흐르는 곡선
  • 균일 radius(모든 모서리 같은 값) 금지 — 비대칭 유기 곡선만
  • 산세리프 금지 — 헤드라인·본문 모두 세리프
  • 채도 높은 원색 금지 — 머스터드/세이지/플럼 세 강조색 외 추가 금지
  • 그라디언트·이모지·글래스 패널·그림자 금지
  • 현대적 손그림 식물·유기 블롭 금지 — 19세기 정전의 whiplash 양식만(좌우 비대칭·끝이 가늘어짐)
  • 빠른 기계적 스냅 모션 금지, 평면 단색 데드 보이드·제너릭 플레이스홀더 아이콘 금지

컴포넌트 노트

button
base: 곡선 프레임 알약 — radius 999px, 머스터드 1.5px 보더(아웃라인) 또는 플럼(primary) 솔리드, padding 12px 30px, EB Garamond small-caps 라벨, 좌우 끝에 작은 식물 곡선 디테일
hover: 곡선 식물 디테일 scale 1.0→1.08, 360ms
focus: 머스터드 ring 2px offset outline
primary_variant: 플럼 솔리드 + 크림 텍스트
card
비대칭 유기 곡선 모서리(border-radius: 60px 8px 60px 8px), 머스터드 1.5px 곡선 stroke 프레임, 크림 표면, padding 32px. 안에 머스터드 드롭캡 + Cormorant 제목 + EB Garamond 본문 + 곡선 끝 식물 모티프. 빈 코너에 작은 덩굴 필리그리 — 죽은 공백 금지.
input
비대칭 소프트 곡선 필드(20px 6px 20px 6px), 옅은 머스터드 보더, 포커스 시 머스터드 ring. 그림자 없음.
nav
높이 76px 크림 헤더 — 좌측 Cormorant SC 워드마크, 메뉴는 EB Garamond small-caps(간격 28px), 하단 경계는 직선 룰이 아닌 옅은 머스터드 채찍 곡선 밴드(양 끝 잎 모티프). 메뉴 호버 시 곡선 밑줄이 좌→우로 드로우.
divider
직선 hr 금지 — 좌우로 흐르는 비대칭 채찍 곡선 + 중앙 꽃 모티프의 SVG 디바이더.
dropcap
본문 첫 글자 Cormorant Garamond 600, 3줄 높이, 머스터드 — 잎·곡선 필리그리가 글자를 감싸는 장식 이니셜 프레임.
quote
큰 Cormorant italic 인용문 — 좌우를 채찍 곡선 따옴표 장식이 감싸고, 세이지 small-caps 출처 라벨, 모서리에 꽃 필리그리 2점.
icon
제너릭 라인 아이콘 금지 — 잎·꽃봉오리·덩굴 컬 모티프를 1.5px stroke(머스터드/세이지)로 크래프트.
gallery
아치형 곡선 마스크 이미지 타일 + 머스터드 1.5px 곡선 프레임 + 하단 small-caps 캡션, 비대칭 2–3열(높이 위계 다르게). 타일 사이를 옅은 식물 곡선이 잇는다.