모든 도구 브랜드 룩북

Amorepacific (아모레퍼시픽)

가는 기하 워드마크 AMORE MALL 아래 빨간 꼬리표 탭, 주황 무대 위 설화수 호박색 단지 배너와 「28% 15,840원」 빨강 할인율

한국이커머스라이프스타일중립modern-minimal복합comfortablesoftflat라이트한글 지원출시 2005개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

  • 브랜드명: Amorepacific (아모레퍼시픽, 1945년 태평양화학공업사로 창립). 설화수·라네즈·헤라·이니스프리·아이오페·에뛰드·에스트라·오설록 등 30개 브랜드를 가진 한국 뷰티 기업이다. 대표 디지털 서비스는 공식 쇼핑몰 아모레몰(amoremall.com, iOS 앱 「AMORE MALL - 아모레몰」 2013년 출시, 2026-09-28 6.4.73판).
  • 한 줄 정체성: 「사람을 아름답게, 세상을 아름답게(We Make A MORE Beautiful World)」를 소명으로 내건 회사가, 자기 브랜드 30개를 한 몰에서 직접 판다. 앱 소개 첫 문장은 「LIVE YOUR NEW BEAUTY, AMORE MALL」이다.
  • 공식 디자인 철학: 공개 UI 디자인 시스템은 없다. 공개된 것은 두 가지다. ① 기업 CI 가이드(design.amorepacific.com, Version 1.0.0 · Updated 2025.07) — 워드마크·5색 팔레트·글꼴. ② 기업 글꼴 아리따 — CI 가이드는 「아리따는 아모레퍼시픽의 목소리입니다」라고 소개하고, 아리따 페이지는 「단아하고 지적이며, 건강한 아름다움. 바로 아모레퍼시픽이 추구하는 아름다움입니다」로 시작한다. 2004년 안상수 디자이너 총괄로 개발을 시작해 글꼴이 하나 완성될 때마다 누구나 무료로 쓰게 공개했다(나눔 글꼴). 아모레몰이 실제로 내려보내는 CSS 에는 --Gray-Gray-900 처럼 디자인 도구의 변수 이름을 그대로 딴 듯한 색 토큰 33개와 design-system-icons 아이콘 세트(apcp-css 3.0.154)가 들어 있어, 내부 시스템이 따로 있다는 흔적이 보인다.
  • 시그니처 요소 1개: 화면 틀(머리·탭·카드)은 흰 바탕·잉크 #121212·1px #F0F0F0 선으로 비우고, 색은 제품 사진이 맡는다. 주황 무대 위 설화수 호박색 단지, 파란 바탕의 헤라 블랙 쿠션, 유리처럼 맑은 라네즈 단지가 화면의 색이 된다. 그 위에 가는 기하 워드마크 AMORE MALL, 탭 이름 위 10px 빨간 꼬리표(「50%페이백」「60주년특집」), 「10% 126,000원」처럼 빨간 할인율 + 굵은 가격 한 줄만 얹는다.
  • 연도 기준: released_year: 2005 는 아리따 돋움을 처음 내놓은 해(2004년 개발 시작, 공식 소개 「2005년 처음으로 시도한 본문용 글꼴」), last_major_revision: 2025 는 CI 가이드 웹판 Version 1.0.0(Updated 2025.07)이다. 아모레몰 내부 시스템의 공개 연도는 확인하지 못했다.

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 단아함, 정갈함, 산뜻함
  • 무드 설명: 흰 면에 16px 탭 글자와 얇은 선만 남긴 진열대다. 감정은 스튜디오 조명을 받은 제품 사진(구릿빛 받침 위 자음생크림, 흰 「FIRST」 상자와 윤조에센스)이 만들고, 숫자는 짧고 굵다. 혜택 문구는 「17%쿠폰| 4종증정 | 1만P페이백」처럼 세로줄로 끊어 한 줄에 담는다. 기업 쪽 화면(apgroup.com·CI 가이드)은 아리따 돋움 본문과 넓은 흰 여백으로 더 조용하다.
  • 비주얼 스타일: 모던 미니멀
  • 밀도(Density): Comfortable — 목록은 113px 이미지 3열·간격 6px 로 촘촘하지만 섹션 제목 20px 과 넓은 섹션 간격이 숨을 틔운다.
  • 모서리 성향: Soft (목록 이미지·「더 보기」 8px 이 CSS 최다 344회. 큰 이미지 12px, 「구매하기」 10px, 태그 2px)
  • 평면성: Flat — 카드에 그림자도 테두리도 없다. 그림자는 하단 탭 막대와 떠 있는 알약 버튼에만 쓴다.

Color System

컬러 시스템 (CSS 변수)

아모레몰이 내려보내는 CSS(apm-web.amoremall.com/_next/static/css/44e249b1fd1f15eb.css, 2026-10-04) 실측. 이 파일에는 디자인 도구 변수 이름을 그대로 딴 듯한 토큰 33개가 있다 — --Gray-Gray-50~900, --Navy-Navy-50~700, --Blue-Blue-50·400·500·600, --Red-Red-50·500·600·700, --Purple-Purple-50·500·600, --Pink-Pink-500, --Yellow-Yellow-500, --Common-White·Black. 아래 토큰은 그 값에 역할을 붙였다. 표시 없는 값은 실측이다. 기업 CI 색은 CI 가이드 공식값이다(아모레 블루 C90 M69 Y22 K0 · 퍼시픽 블루 C100 M100 Y58 K18).

:root {
  /* Primary — 잉크. 몰 토큰은 Gray-900 이 가장 진하다. 형식(500=기본)에 맞춰 Gray-900 을 500 자리에 올렸다 */
  --color-primary-50:  #F5F5F5;  /* Gray-50 · 상품 이미지 칸 */
  --color-primary-100: #F0F0F0;  /* Gray-100 · 쿠폰 띠·로그인 버튼·칩 테두리 */
  --color-primary-200: #E5E5E5;  /* Gray-200 · 「더 보기」 테두리 */
  --color-primary-300: #D4D4D4;  /* Gray-300 */
  --color-primary-400: #A1A1A1;  /* Gray-400 · 「10초 후 업데이트」 */
  --color-primary-500: #121212;  /* Gray-900 · 기본: 로고·선택 탭·「구매하기」 */
  --color-primary-600: #262626;  /* Gray-800 · 아이콘 */
  --color-primary-700: #404040;  /* Gray-700 · 「로그인」 글자 */
  --color-primary-800: #525252;  /* Gray-600 */
  --color-primary-900: #000000;  /* Common-Black · 순위 배지(80% 불투명) */

  /* Secondary — 몰 남색(CSS 143회, 옛 클래스 이름 colorPrimary): 고른 랭킹 탭·별점·「재입고 알림 신청」·떠 있는 알약 */
  --color-secondary-500: #3A416F;

  /* 기업 CI — 워드마크·기업 문서용. 아모레몰 화면에는 쓰지 않는다 */
  --color-ci-amore-blue: #1F5795;
  --color-ci-pacific-blue: #001C58;
  --color-ci-gray: #7D7D7D;

  /* 가격·혜택 신호 — 면이 아니라 숫자·글자에만 */
  --color-sale: #FF5A5A;          /* 할인율 「10%」 (토큰 밖 값, 55회) */
  --color-benefit: #F81D1D;       /* Red-700 · 「59,940원 최대 혜택가」 */
  --color-coupon: #F94040;        /* Red-600 · 「쿠폰받기」 글자 */
  --color-timer: #FF4E4E;         /* Red-500 · 「16:44:11 남았어요」·N 배지·「쿠폰받기」 테두리 */
  --color-point: #0884F7;         /* Blue-600 · 쿠폰 띠 「20%」·「쿠폰」 태그·「혜택보기」 */
  --color-point-bg: #EEF8FF;      /* Blue-50 */
  --color-benefit-blue: #457CDB;  /* 「1종 증정」「1% 적립」 숫자 (163회) */
  --color-strike: #BBBBBB;        /* 원가 취소선 */

  /* Neutral — 몰 Gray·Navy 토큰 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F5F5;
  --color-neutral-100:  #F0F0F0;
  --color-neutral-300:  #D4D4D4;
  --color-neutral-500:  #797979;
  --color-neutral-700:  #404040;
  --color-neutral-900:  #121212;
  --color-neutral-1000: #000000;
  --color-navy-50:  #F4F5F7;      /* 「사은품」 태그 바탕 */
  --color-navy-500: #6A7282;      /* 「사은품」 글자 */
  --color-navy-700: #364153;

  /* Semantic */
  --color-success-bg: #E9F7EF;    /* (추정) 몰 토큰에 초록이 없다 */
  --color-success-fg: #11904F;    /* (추정) */
  --color-warning-bg: #FFF6E6;    /* (추정) */
  --color-warning-fg: #B26B00;    /* (추정) Yellow-500 #FFAC2E 는 아이콘·별 채움용 */
  --color-error-bg:   #FFF3F3;    /* Red-50 */
  --color-error-fg:   #F81D1D;    /* Red-700 */
  --color-info-bg:    #EEF8FF;    /* Blue-50 */
  --color-info-fg:    #0884F7;    /* Blue-600 */

  /* Surface */
  --bg-base: #FFFFFF;             /* 페이지 */
  --bg-subtle: #F5F5F5;           /* 상품 이미지 칸 */
  --bg-band: #F0F0F0;             /* 쿠폰 띠·푸터 */
  --bg-filter: #F5F6F8;           /* 랭킹 필터 띠 (100회) */
  --bg-elevated: #FFFFFF;         /* 바텀시트·팝업 */
  --bg-overlay: rgba(0, 0, 0, .5);/* popupBg 실측 */

  /* Text */
  --text-primary: #121212;
  --text-secondary: #666666;      /* 목록 상품명 (85회) */
  --text-tertiary: #A1A1A1;       /* Gray-400 */
  --text-tab-off: rgba(18, 18, 18, .4); /* 안 고른 탭 */
  --text-on-primary: #FFFFFF;
  --text-disabled: #AAAAAA;       /* 「옵션을 선택해주세요」 */

  /* Border */
  --border-default: #E5E5E5;      /* Gray-200 */
  --border-subtle: #F0F0F0;       /* Gray-100 · 칩·하단 탭 막대 */
  --border-strong: #121212;       /* 「장바구니」 */
  --border-focus: #121212;        /* (추정) */
}
  • 빨강을 셋으로 나눠 쓴다: 할인율 #FF5A5A(목록 「10%」), 최대 혜택가 #F81D1D(상세 「59,940원」), 「쿠폰받기」 알약은 글자 #F94040·테두리 #FF4E4E. 카운트다운 「16:44:11 남았어요」와 N 배지는 #FF4E4E. 모두 글자·테두리 신호이고, 빨강으로 칠한 버튼 면은 없다.
  • 파랑은 혜택 안내: 쿠폰 띠의 「20%」「5% 할인 쿠폰」, 「쿠폰」 태그, 「메이크업 주간 1위」 태그가 #0884F7(바탕 #EEF8FF). 기업 CI 의 아모레 블루 #1F5795 와는 다른 색이다.
  • 남색 #3A416F 은 고른 상태: 「많이 구매한」 랭킹 탭 테두리·글자, 별점, 「재입고 알림 신청」, 「오늘만 반값할인 ▾」 떠 있는 알약. 팝업의 「확인」(btnContained colorPrimary)도 이 남색이다.

Typography

타이포그래피

  • 폰트 페어링:
    • 아모레몰 UI: PretendardJP 400·600·700 (몰 CSS @font-face 실측, font-family 155곳). 가격 숫자는 SpoqaHanSansNeo 400·700 (32곳), 상품 목록 일부는 Apple SD Gothic Neo·Roboto 시스템 글꼴.
    • 기업 글꼴: 아리따 (나눔 글꼴, 무료 배포) — 세 언어 18종. 돋움(한글 고딕, 2005년 첫 공개, Thin~Bold 5굵기, 「정직하고 올바른」) · 산스(로마자, 2012년, 휴머니스트 산세리프, Thin~Bold 5굵기, 「강인하고 부드러운」) · 부리(한글 명조, 2014년 완성, HairLine~Bold 5굵기, 국내 첫 헤어라인 서체, 「우아하고 단아한」) · 흑체(한자, 2016년 시작·2017년 3종 완성, 「섬세하고 단단한」). 이름은 《시경》의 「요조숙녀(窈窕淑女)」에서 왔다. iF 디자인 어워드 2016 커뮤니케이션 부문 본상, 2015 레드닷 수상. 기업 사이트 apgroup.com 은 본문 AritaDotum, 대메뉴 「ABOUT US · BRANDS …」는 부리(Buri) 대문자다.
    • 공개 대체: 한글 Pretendard, 기업 문서는 아리따를 그대로 내려받아 쓴다.
  • 위계 (아모레몰 실측, size / weight / line-height / letter-spacing):
    • Display: 24px / 700 / 30px / -0.24px — 배너 제목 「자음생크림 60주년」(흰 글자)
    • H1: 22px / 700 / 28px / -0.22px — 상세 판매가 「66,600원」·최대 혜택가
    • H2: 20px / 700 / 26px / -0.2px — 섹션 제목 「지금 많이 찾는 상품」「단 하루 혜택」
    • H3: 16px / 700 / 16px / 0 — 고른 GNB 탭 「홈」 (안 고른 탭은 400, 잉크 40%)
    • Body Large: 16px / 400 / 22px / 0 — 상세 상품명
    • Body: 14px / 400 / 18~20px / 0 — 목록 상품명(#666)·퀵메뉴 칩·「더 보기」
    • Body Small: 13px / 400 / 18px / 0 — 브랜드명(700)·리뷰 수·혜택 행
    • Caption: 11px / 400 / 16~20px / 0 — 「쿠폰」「사은품」 태그·하단 탭 이름. 탭 위 꼬리표는 10px / 600 / #FF5A5A
    • 가격: 목록 16px / 700 / 18px SpoqaHanSansNeo, 원가는 12px / 400 / #BBBBBB 취소선, 「원」은 숫자에 붙인다

Spacing

스페이싱

  • Base unit: 4px (실측 간격 4·6·8·12·16·20px)
  • 토큰:
:root {
  --space-xs: 4px;    /* 칩 안 썸네일 여백 */
  --space-sm: 6px;    /* 상품 그리드·퀵메뉴 칩 사이 (실측) */
  --space-md: 12px;
  --space-lg: 20px;   /* 화면 좌우 여백 (실측) */
  --space-xl: 32px;
  --space-2xl: 48px;  /* 섹션 사이 (추정) */
  --space-3xl: 64px;
}
  • Container: PC 도 모바일 화면을 1024px 폭 가운데에 그대로 둔다(1280 창에서 128~1152px). 좌우 여백 20px. 모바일 실측 높이 — 쿠폰 띠 50 · 로고 줄 56 · 탭 40 · 하단 탭 막대 56px.

Border Radius

Border Radius

:root {
  --radius-none: 0;
  --radius-xs: 2px;      /* 「쿠폰」「사은품」 태그 */
  --radius-sm: 4px;      /* 순위 배지·「재입고 알림 신청」 */
  --radius-pop: 6px;     /* 팝업 「확인」 남색 버튼 */
  --radius-md: 8px;      /* 목록 이미지(113px)·「더 보기」·「로그인」 (최다 344회) */
  --radius-cta: 10px;    /* 「구매하기」「장바구니」 */
  --radius-lg: 12px;     /* 큰 상품 이미지(208px)·딜 카드 */
  --radius-xl: 16px;     /* 바텀시트 위 모서리·「혜택보기」 알약 */
  --radius-full: 9999px; /* 퀵메뉴 칩(높이 40·모서리 22)·「쿠폰받기」(20)·아이콘 원 */
}

Shadow / Elevation

Shadow / Elevation

:root {
  --shadow-none: none;                                 /* 상품 카드·이미지 */
  --shadow-sm: 0 2px 4px 0 rgba(58, 65, 111, .05);     /* 남색 기운의 옅은 띄움 (쓰임 추정) */
  --shadow-md: 0 2px 6px 0 rgba(0, 0, 0, .16);         /* 떠 있는 「오늘만 반값할인」 알약 (실측) */
  --shadow-lg: 0 3px 6px 0 rgba(0, 0, 0, .16);         /* 말풍선·드롭다운 (CSS 8회, 쓰임 추정) */
  --shadow-bar: 0 -4px 20px 0 rgba(54, 65, 83, .06);   /* 하단 탭 막대 (실측) */
  --shadow-xl: 0 -4px 20px 0 rgba(54, 65, 83, .12);    /* 바텀시트 (쓰임 추정) */
}

그림자는 모두 옅고 넓다. 카드를 띄우는 데는 쓰지 않고, 화면 위에 떠서 움직이지 않는 것(하단 막대·알약·시트)에만 쓴다.

Iconography

Iconography

  • 스타일: Outline. 32px 격자에 1.5px 굵기의 외곽선을 패스(fill)로 그린 자체 세트 — 검색·장바구니·공유·뒤로. 하단 탭은 고른 칸만 채움 아이콘으로 바꾼다(ic_home_solid_24).
  • Stroke 굵기: 1.5px (32px·24px 모두)
  • 모서리 처리: Round (둥근 끝·둥근 이음)
  • 이름·쓰는 법: ic_{이름}_{크기} (ic_search_32, ic_heart_line_16, ic_fire_12) 를 CSS mask 로 걸고 currentColor 를 입힌다. 기본 색 #262626, 크기 12·16·20·24·32px.
  • 추천 라이브러리: Lucide (stroke-width 1.5)

Component Guide

컴포넌트 가이드 (상태별 CSS)

몰 CSS 의 :hover 는 1만 2천여 규칙 중 37곳뿐이고 대부분 밑줄·캐러셀 화살표다(터치 화면 기준). 아래 hover·눌림은 토큰 안에서 한 단계만 움직이게 붙인 값이다(추정) — 검정은 #262626 으로, 흰 버튼은 바탕을 #F5F5F5 로. 「장바구니」는 1px 검정 테두리, 「구매하기」는 검정 면, 둘 다 모서리 10px 이다.

Button

:root {
  --font-ui: 'PretendardJP', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, sans-serif;
  --font-price: 'SpoqaHanSansNeo', 'Spoqa Han Sans Neo', 'PretendardJP', 'Apple SD Gothic Neo', Roboto, sans-serif;
  --font-ci: 'AritaDotum', 'aritaDotum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.am-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 50px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-cta); font: 700 15px/22px var(--font-ui); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-in-out); }
.am-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }          /* 구매하기 */
.am-btn--primary:hover { background: var(--color-primary-600); }
.am-btn--primary:active { background: var(--color-primary-900); }
.am-btn--secondary { background: var(--bg-base); color: var(--text-primary); border-color: var(--border-strong); }  /* 장바구니 */
.am-btn--secondary:hover { background: var(--bg-subtle); }
.am-btn--ghost { height: 44px; border-radius: var(--radius-md); border-color: var(--border-default); background: var(--bg-base); color: var(--text-primary); font-size: 14px; font-weight: 400; }  /* 「… 더 보기」 */
.am-btn--ghost b { font-weight: 700; }
.am-btn--ghost:hover { background: var(--bg-subtle); }
.am-btn--danger { height: 40px; padding: 0 16px; border-radius: 20px; border-color: var(--color-timer); background: var(--bg-base); color: var(--color-coupon); font-size: 13px; }  /* 쿠폰받기 ↓ (93×40) */
.am-btn--navy { border-radius: var(--radius-pop); background: var(--color-secondary-500); color: var(--text-on-primary); }  /* 팝업 확인 */
.am-btn:disabled { background: var(--color-neutral-100); border-color: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.am-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.am-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; animation: am-spin .8s linear infinite; }
@keyframes am-spin { to { transform: rotate(360deg); } }
.am-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border: 1px solid var(--color-point); border-radius: var(--radius-xl); color: var(--color-point); font: 600 12px/17px var(--font-ui); text-decoration: none; }  /* 혜택보기 */
.am-login { height: 32px; padding: 0 13px; border: 0; border-radius: var(--radius-md); background: var(--color-neutral-100); color: var(--color-neutral-700); font: 600 14px/20px var(--font-ui); }

Input — 옵션 선택(호수·색상)

.am-select { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-disabled); font: 400 14px/20px var(--font-ui); }
.am-select:focus-within, .am-select.is-open { border-color: var(--border-focus); color: var(--text-primary); }
.am-select.is-error { border-color: var(--color-error-fg); }
.am-select.is-disabled { background: var(--bg-subtle); color: var(--color-neutral-300); }
.am-option { display: flex; gap: 16px; align-items: center; padding: 6px 0; }  /* 70px 발림 자국 타일 + 「21N1」 + 「10% 66,600원」 */
.am-option__swatch { width: 70px; height: 70px; border-radius: var(--radius-md); background: var(--bg-subtle); }

Card — 상품 카드

.am-prod { min-width: 0; }
.am-prod__media { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--bg-subtle); overflow: hidden; }  /* 기본형: 테두리·그림자 없음 */
.am-prod__media > svg { display: block; width: 100%; height: 100%; }
.am-prod__media > .am-like { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; }  /* 하트 */
.am-rank { position: absolute; left: 6px; top: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-sm); background: rgba(0,0,0,.8); color: #FFFFFF; font: 600 11px/24px var(--font-ui); text-align: center; }
.am-prod__brand { display: block; margin-top: 8px; font: 700 13px/18px var(--font-ui); color: #1F1F1F; }
.am-prod__name { margin: 0; font: 400 14px/18px var(--font-ui); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-prod__price { margin: 2px 0 0; font: 700 16px/18px var(--font-price); color: #1F1F1F; }
.am-prod__price em { margin-right: 4px; font-style: normal; color: var(--color-sale); }
.am-prod__price s { display: block; font-size: 12px; font-weight: 400; color: var(--color-strike); }
.am-deal .am-prod__media { border-radius: var(--radius-lg); }  /* 강조형: 큰 칸 + 검정 띠 */
.am-deal__band { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: rgba(0,0,0,.8); color: #FFFFFF; font: 600 12px/24px var(--font-ui); text-align: center; }
.am-card--benefit { display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; padding: 0 16px; border-radius: var(--radius-cta); background: var(--color-navy-50); font: 700 13px/13px var(--font-ui); color: var(--color-neutral-700); }  /* 「프리미엄 사은품 + 5,000원 페이백」 */
.am-card--outlined { padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }  /* (추정) 칩과 같은 1px 선 */

Badge / Tag

.am-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); font: 400 11px/20px var(--font-ui); }
.am-tag--subtle { background: var(--color-point-bg); color: var(--color-point); }   /* 쿠폰·메이크업 주간 1위 */
.am-tag--gray { background: var(--color-navy-50); color: var(--color-navy-500); }   /* 사은품·추가적립 */
.am-tag--solid { height: 32px; padding: 0 14px; border-radius: var(--radius-xl); background: var(--color-primary-500); color: #FFFFFF; font-size: 13px; font-weight: 600; }  /* 고른 필터 칩 「전품목 세일」 */
.am-tag--outline { box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-secondary); }
.am-flag { font: normal 600 10px/10px var(--font-ui); color: var(--color-sale); }  /* 탭 위 꼬리표 */
.am-new { width: 12px; height: 12px; border-radius: 50%; background: var(--color-timer); box-shadow: 0 0 0 1px #FFFFFF; color: #FFFFFF; font: 700 7px/12px var(--font-ui); text-align: center; }  /* ic_tag_new_s12 */
.am-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border: 1px solid var(--border-subtle); border-radius: 22px; background: var(--bg-base); color: var(--text-primary); font: 400 14px/20px var(--font-ui); white-space: nowrap; text-decoration: none; }  /* 퀵메뉴 */

Navigation — 로고 줄 · 꼬리표 탭 · 하단 탭 막대

.am-gnb { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--space-lg); background: var(--bg-base); }
.am-tabs { display: flex; align-items: flex-end; gap: 20px; height: 40px; padding: 0 var(--space-lg); overflow: hidden; white-space: nowrap; }
.am-tabs a { position: relative; display: flex; align-items: flex-end; height: 40px; padding-bottom: 10px; color: var(--text-tab-off); font: 400 16px/16px var(--font-ui); text-decoration: none; }
.am-tabs a[aria-current="page"] { color: var(--text-primary); font-weight: 700; }
.am-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text-primary); transition: transform var(--duration-fast) linear; }
.am-tabs .am-flag { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }  /* 탭 상자 맨 위, 글자와 4px 사이 */
.am-actionbar { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 56px; background: var(--bg-base); border-top: 1px solid var(--border-subtle); box-shadow: var(--shadow-bar); }
.am-actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-primary); font: 400 11px/16px var(--font-ui); text-decoration: none; }
.am-actionbar a[aria-current="page"] { font-weight: 700; }

Motion

Motion

:root {
  --duration-fast: 200ms;   /* transform .2s linear — CSS 최다 전환 (쓰임 추정: 탭 밑줄·캐러셀) */
  --duration-base: 225ms;   /* transform 225ms cubic-bezier(0, 0, .2, 1) (쓰임 추정: 시트·레이어) */
  --duration-slow: 1000ms;  /* all 1s cubic-bezier(.65, 0, .35, 1) (쓰임 추정: 숫자·띠 전환) */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

「지금 많이 찾는 상품」은 「10초 후 업데이트」 숫자가 1초씩 줄다가 목록을 갈아 끼우고, 첫 화면 배너는 「2 / 17」 쪽수 알약과 함께 옆으로 넘어간다. 튀는 스프링은 쓰지 않는다.

Anti-patterns

Anti-patterns

1. 화면 틀에 색 면을 깔지 않는다 — 머리·탭·카드는 흰 바탕과 #121212 뿐이다. 색은 제품 사진과 배너가 맡고, 틀 위의 색은 할인율·쿠폰 같은 숫자 신호에만 쓴다. 2. 빨강으로 버튼을 칠하지 않는다 — 할인율 #FF5A5A·최대 혜택가 #F81D1D·「쿠폰받기」(글자 #F94040·테두리 #FF4E4E)는 글자·테두리 신호다. 구매 CTA 는 검정 「구매하기」 하나다. 3. 상품 카드에 테두리·그림자를 두르지 않는다 — 옅은 회색 바탕에서 찍은 제품 사진 칸(모서리 8px)과 오른쪽 아래 하트, 그 아래 브랜드·상품명·가격 세 줄로 끝낸다. 호수·색상 선택도 색 견본 띠가 아니라 바텀시트 목록(70px 발림 자국 타일 + 「21N1」 + 「10% 66,600원」)으로 보여 준다. 4. 기업 워드마크를 틀에 가두거나 손대지 않는다 — CI 가이드 「Things to avoid」 여섯 가지: 구분이 힘든 배경, 두께·비율 변경, 도형·틀 안에 넣기, 쓰지 않는 과거 그래픽, 쓰지 않는 과거 조합, 글자 위치 변경. 이름은 제목 AMOREPACIFIC·본문 Amorepacific·한글 「아모레퍼시픽」(붙여 씀)으로 적는다. 쇼핑몰 화면에는 기업 워드마크 대신 AMORE MALL 로고를 쓴다. 5. 가격에 ₩ 를 붙이지 않는다 — 「126,000원」처럼 숫자 뒤에 「원」, 할인율은 가격 앞 같은 줄, 원가는 위에 12px 회색 취소선이다. 혜택 문구는 「17%쿠폰| 4종증정 | 1만P페이백」처럼 세로줄로 끊는다.

Sources

출처

  1. https://www.amoremall.com/kr/ko/display/main
  2. https://www.amoremall.com/kr/ko/display/rank
  3. https://www.amoremall.com/kr/ko/product/detail?onlineProdSn=61257
  4. https://www.amoremall.com/kr/ko/product/detail?onlineProdSn=55828
  5. https://apm-web.amoremall.com/_next/static/css/44e249b1fd1f15eb.css
  6. https://apm-web.amoremall.com/public/apcp-css/3.0.154/public/resource/design-system/icons/Icons/ic_search_32.svg
  7. https://www.amoremall.com/static/images/logo_amoremall_main.svg
  8. https://images-kr.amoremall.com/fileupload/mainContents/2026/09/23/01_Main-banner_750x570_15064_2610_1w.jpg
  9. https://apps.apple.com/kr/app/amore-mall-%EC%95%84%EB%AA%A8%EB%A0%88%EB%AA%B0/id662044174
  10. https://design.amorepacific.com/ci-guideline/
  11. https://www.apgroup.com/int/ko/about-us/visual-identity/arita-typeface/arita-typeface.html
  12. https://www.apgroup.com/int/ko/about-us/amorepacific/our-story.html

Amorepacific (아모레퍼시픽) 이름과 로고는 각 권리자의 상표입니다.