styles
← 갤러리

Aesop Apothecary

따뜻한 크림 배경 위에 차분한 차콜 텍스트, 절제된 스위스 산세리프와 낮은 채도의 앰버 액센트로 완성한 아포테카리 럭셔리 에디토리얼 스타일.

luxury-editorial luxuryapothecarywarm-neutralquiet-luxuryeditorialtypographicwhitespace-driven
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Aesop.com에서 라이브 추출한 조용한 럭셔리 스타일. 순백이 아닌 따뜻한 크림(#FFFEF2)을 바탕으로, 중성 차콜 본문·헤어라인 구분선·모서리 없는 사각형·그림자 배제로 브랜드의 절제된 품격을 만든다. 위계는 색이 아니라 타이포그래피의 극단적 대비(12px 본문 ↔ 36px 라이트 헤드라인)와 넉넉한 여백으로 만든다. 유일한 색은 저빈도로 등장하는 앰버/브라운 액센트와 깊은 보태니컬 그린(주로 사진 이미지). editorial-swiss가 흑백 스위스 스타크라면, 이 스타일은 크림·앰버의 온기와 럭셔리 억제가 차별점이다.

타입 스케일

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

One neo-grotesque sans (Suisse Int'l → Inter fallback), weights 400/500 with 700 reserved for small emphasis. The signature is extreme size contrast: tiny 12–15px body/nav against a light-weight 36px+ headline. Optional humanist serif (Zapf Humanist / Optima) for editorial pull quotes. Nav and labels are mixed-case, not uppercase — restraint over convention.

골든 예제 (exemplar)

Skin Care — Facial

A considered
approach to
daily ritual.

Formulations of the finest quality, presented with restraint. Warmth over white, space over decoration.

New

Parsley Seed Serum

The amber note is used once — a quiet mark, never a fill.

Ritual

Cleanse & hydrate

Hierarchy comes from tiny body text against a large, light headline.

Note

Hairlines, not shadows

Every division is a low-contrast 1px rule on warm cream.

Do

  • 순백 대신 따뜻한 크림(#FFFEF2)을 배경으로 쓴다
  • 위계는 타이포 크기 대비와 여백으로 — 12px 본문 ↔ 큰 라이트 헤드라인
  • 앰버/브라운 액센트는 페이지당 극소수(강조 1~2곳)만, 배경으로 쓰지 않는다
  • 깊은 보태니컬 그린은 색 토큰이 아니라 사진 이미지로 도입한다
  • 구분은 그림자가 아니라 낮은 대비 헤어라인으로

Don't

  • border-radius > 0 금지
  • 그라디언트·글래스모피즘·드롭섀도 금지
  • 본문을 진한 검정(#000)으로 쓰지 말 것 — 차콜(#333)로 부드럽게
  • 액센트 컬러를 넓은 면적/버튼 배경에 채우지 말 것
  • 대문자 남발·굵은 폰트로 시끄럽게 만들지 말 것

컴포넌트 노트

button
primary: 배경 primary(#252525 근처 차콜), 글자 크림, radius 0, padding 14px 28px, 폰트 400~500, 대문자 아님
outline: 투명 배경 + 1px solid(크림 위에선 foreground, 이미지 위에선 크림), radius 0
hover: 미묘한 밝기 반전 또는 opacity, 200ms
focus: 2px offset outline(ring = 앰버)
card
그림자 없음. secondary 크림 단차 또는 헤어라인으로만 구분. radius 0. 여유로운 패딩(24–40px).
input
1px 헤어라인 또는 언더라인, radius 0, 포커스 시 border가 foreground로. 라벨은 소문자 caption.
nav
상단 크림 바, 중앙 워드마크 로고, 좌우 소형(12px) 믹스드케이스 링크. 햄버거보다 링크 노출 선호. 하단 헤어라인.
search
이미지 위에선 1px 크림 보더 + 크림 텍스트의 고스트 인풋.