GENTLE MONSTER (젠틀몬스터)

흰 캔버스 위 #111 한 색, 전면 캠페인 비주얼 위에 흰 세리프 워드마크와 1px 선만 얹는 갤러리형 커머스

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

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

Brand DNA

브랜드 DNA

브랜드명: GENTLE MONSTER (젠틀몬스터, ㈜아이아이컴바인드 IICOMBINED)
한 줄 정체성: 2011년 서울에서 시작한 아이웨어 브랜드. 안경을 기능품이 아니라 패션·예술 오브제로 다루고, 매장을 「어디에도 없는 공간」으로 만드는 실험적 라이프스타일 하우스. 탬버린즈·누데이크·아티쑤·누플랏이 같은 모회사 아래 있다.
공식 디자인 철학: 공개 디자인 시스템은 없다. 브랜드가 반복해 쓰는 말은 「Future Retail」과 「세상을 놀라게 하라」다. 플래그십 HAUS DOSAN(2021)·HAUS NOWHERE(선전·서울·방콕)는 층마다 다른 설치 작품과 로보틱스 조형물로 상업과 예술의 경계를 흐린다. 이름의 「젠틀(부드러움)과 몬스터(괴물)」 양면성을 브랜드 해석으로 쓰는 매체가 많다(공식 문구 미확인, 추정).
시그니처 요소 1개: 온라인 스토어는 스스로 꾸미지 않는다. 흰 바탕·검정 #111 글자·radius 0 의 무채색 틀 안에 화면 전체를 채우는 캠페인 영상·룩북 사진을 놓고, 그 위에 흰색 세리프 워드마크와 1px 테두리 알약 링크만 얹는다. 색과 장식은 전부 비주얼이 맡는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 실험적, 절제, 조형적
무드 설명: 사이트는 미술관 벽처럼 비어 있다. UI 크롬은 10~18px 의 작은 글자와 1px 선, 무채색뿐이고, 전면 캠페인(프라다·메종 마르지엘라 협업, 시즌 컬렉션)이 초현실적 세트·조형물·어두운 톤으로 감정을 만든다. 제품 이름도 「바닐라 01」「시나몬 01」처럼 짧은 단어+번호 규칙이라 목록이 전시 캡션처럼 읽힌다.
비주얼 스타일: 모던 미니멀 + 브루털리즘(각진 선, 장식 없는 텍스트 링크, 과감한 크롭의 대형 이미지)
밀도(Density): Spacious — PC 신제품 슬라이드 한 장이 720×720px, 좌우 여백 60px, 헤더 90px. 한 화면에 제품 한두 개만 보여 준다.
모서리 성향: Sharp (0px 기본. 예외로 PC 히어로 링크만 25px 알약)
평면성: Flat — 그림자 없음. 구분은 1px 선과 여백으로만.

Color System

컬러 시스템 (CSS 변수)

www.gentlemonster.com/kr/ko 의 CSS·HTML 실측(2026-09-20). 자주 쓰인 hex: #fff(53회), #111(44회+푸터 텍스트), #000(43회), #858585(38회), #d8d8d8(32회), #f3f4f6, #4798f5, #f35c2d, #e2e4e5, 푸터 --footer-bg:#F2F4F5. 브랜드 원색이 없는 무채색 사이트라 Primary 9단계는 실측 회색 단계를 그대로 잇고, 600~900 은 (추정) 보간이다.

:root {
  /* Primary — 검정 한 색. 50~400 은 실측 회색, 500 이 기본 */
  --color-primary-50: #F7F9FA;   /* 실측: 옅은 섹션 면 */
  --color-primary-100: #F2F4F5;  /* 실측: --footer-bg, 제품 이미지 자리 */
  --color-primary-200: #E2E4E5;  /* 실측: 구분선 */
  --color-primary-300: #D8D8D8;  /* 실측: 비활성 테두리 */
  --color-primary-400: #858585;  /* 실측: --footer-legal-text, 보조 글자 */
  --color-primary-500: #111111;  /* 실측: --footer-text, 본문·버튼 (기본) */
  --color-primary-600: #0A0A0A;  /* (추정) hover */
  --color-primary-700: #050505;  /* (추정) active */
  --color-primary-800: #000000;  /* 실측: text-black, 입력 테두리 #000 */
  --color-primary-900: #000000;

  /* Secondary — 캠페인 비주얼 위 흰색 */
  --color-secondary-500: #FFFFFF;

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F7F9FA;
  --color-neutral-100: #F2F4F5;
  --color-neutral-300: #D8D8D8;
  --color-neutral-500: #858585;
  --color-neutral-700: #343434;  /* 실측 3회 */
  --color-neutral-900: #111111;
  --color-neutral-1000: #000000;

  /* Semantic — 실측 강조색은 상태 표시에만 쓰인다 */
  --color-success-bg: #EAF5EB;   /* (추정) */
  --color-success-fg: #008F0E;   /* 실측 */
  --color-warning-bg: #FFF8D6;   /* (추정) */
  --color-warning-fg: #9A7B00;   /* (추정) */
  --color-error-bg: #FEEFEA;     /* (추정) */
  --color-error-fg: #F35C2D;     /* 실측: 폼 오류 */
  --color-info-bg: #EDF5FE;      /* (추정) */
  --color-info-fg: #4798F5;      /* 실측 */

  /* Surface */
  --bg-base: #FFFFFF;        /* 페이지 기본 */
  --bg-subtle: #F2F4F5;      /* 푸터·제품 이미지 자리 */
  --bg-elevated: #FFFFFF;    /* 카드도 흰 바탕 그대로 */
  --bg-overlay: #FFFFFF;     /* 메뉴·쿠키 시트 */

  /* Text */
  --text-primary: #111111;   /* 본문 */
  --text-secondary: #6D6D6D; /* 보조 (실측 4회) */
  --text-tertiary: #858585;  /* 캡션·법적 고지 */
  --text-on-primary: #FFFFFF;/* 검정 버튼·캠페인 위 */
  --text-disabled: #BFBFBF;  /* 실측 11회 */

  /* Border */
  --border-default: #D8D8D8;
  --border-subtle: #E2E4E5;
  --border-strong: #000000;  /* 검색 입력 border-[#000] 실측 */
  --border-focus: #111111;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Gentle Sans Ko (전용 서체, 비공개 라이선스) — Light 350 / Regular 400 두 굵기. 폴백 Sandoll GothicNeo1, Arial
- 영문: Gentle Sans En (전용) + 제목용 Gentle Serif Bold(text-24-en-serif). 워드마크는 끝이 살짝 벌어진 세리프 대문자
- 공개 대체: 한글 Pretendard Light/Regular, 영문 세리프는 Bodoni 계열 (추정)
위계 (사이트 실측 클래스 text-{size}-ko + leading-[..]):
- Display: 24px / 700(Gentle Serif Bold) / 28px / 0 — 캠페인 제목(영문 대문자)
- H1: 18px / 400 / 22px / 0 — 섹션 제목 「신제품」(PC)
- H2: 14px / 400 / 18px / 0
- H3: 13px / 350(Light) / 17px / 0 — 제품명 「바닐라 01」
- Body Large: 14px / 400 / 18px / 0
- Body: 13px / 400 / 17px / 0 — 사이트 최다(195회)
- Body Small: 12px / 400 / 16px / 0 — 링크·버튼(「위시리스트에 추가하기」 밑줄)
- Caption: 10px / 400 / 14px / 0 — 법적 고지·배지

Spacing

스페이싱

Base unit: 4px (실측 간격 4·8·12·24·48·60px)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; /* CTA 사이 gap-[12px] 실측 */ --space-lg: 24px; /* 모바일 좌우 여백 px-24 실측 */ --space-xl: 48px; /* px-[48px] 실측 */ --space-2xl: 60px; /* PC 좌우 여백 pl-[60px] 실측 */ --space-3xl: 80px; /* 모바일 섹션 간격 mt-[80px] 실측 */ ``
Container: max-width 없음(풀블리드). 헤더 높이 PC 90px / 모바일 56px, 좌우 60px(PC)·24px(모바일)

Border Radius

--radius-none: 0;       /* 기본값: 이미지·입력·버튼·카드 전부 */
--radius-sm: 4px;       /* 실측 rounded-[4px] 1회 — 거의 안 씀 */
--radius-md: 8px;       /* 실측 1회 */
--radius-lg: 20px;      /* 실측 1회 */
--radius-xl: 25px;      /* PC 히어로 알약 링크 rounded-[25px] */
--radius-full: 9999px;  /* 슬라이드 진행선 끝 */

Shadow / Elevation

--shadow-none: none;                              /* 기본: 카드·이미지 모두 그림자 없음 */
--shadow-sm: inset 0 -0.75px 0 0 currentColor;    /* 모바일 텍스트 링크 밑줄 (실측) */
--shadow-md: 0 0 4px 0 rgba(0, 0, 0, 0.12);       /* 플로팅 아이콘 (실측 형태, 알파 추정) */
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);      /* (추정) 드롭다운 */
--shadow-xl: 0 -4px 24px rgba(0, 0, 0, 0.10);     /* (추정) 모바일 바텀시트(쿠키 동의) */

Iconography

스타일: Outline, 가는 선 (햄버거·돋보기·계정·쇼핑백)
Stroke 굵기: 1.2px (실측 stroke-width="1.2", 24px 그리드)
모서리 처리: Square (miter)
추천 라이브러리: Lucide(stroke 1.25 로 낮춰서) 또는 Phosphor Light

Component Guide

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

Button (Primary / Secondary / Ghost / Danger)

.gm-btn { height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 0; font: 400 13px/17px 'Gentle Sans', Pretendard, Arial, sans-serif; cursor: pointer; transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1); }
.gm-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }   /* 「모두 수락」·장바구니 담기 */
.gm-btn--primary:hover { background: var(--color-primary-800); }
.gm-btn--primary:active { background: var(--color-neutral-700); }
.gm-btn--secondary { background: var(--bg-base); color: var(--text-primary); border-color: var(--border-strong); }
.gm-btn--secondary:hover { background: var(--bg-subtle); }
.gm-btn--ghost { height: auto; padding: 0 0 1px; background: none; color: inherit; box-shadow: var(--shadow-sm); }  /* 「더 보기」「구매하기」 밑줄 링크 */
.gm-btn--ghost:hover { opacity: .6; }
.gm-btn--pill { height: 36px; padding: 0 23px; border-color: #FFFFFF; border-radius: var(--radius-xl); background: transparent; color: #FFFFFF; font-size: 12px; }  /* PC 히어로 전용 */
.gm-btn--pill:hover { background: #FFFFFF; color: var(--text-primary); }
.gm-btn--danger { background: var(--bg-base); color: var(--color-error-fg); border-color: var(--color-error-fg); }
.gm-btn:disabled { background: var(--color-primary-300); color: var(--text-on-primary); border-color: transparent; cursor: not-allowed; }
.gm-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.gm-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: gm-spin 1s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }

Input

.gm-input { height: 40px; padding: 0 12px 0 32px; border: 1px solid var(--border-strong); border-radius: 0; background: var(--bg-base); color: var(--text-primary); font: 400 13px/17px 'Gentle Sans', Pretendard, sans-serif; }  /* 모바일 인기 검색 박스 실측 */
.gm-input:focus { outline: none; border-color: var(--border-focus); }
.gm-input.is-error { border-color: var(--color-error-fg); }
.gm-input:disabled { border-color: var(--border-default); color: var(--text-disabled); background: var(--bg-subtle); }

Card (제품 카드)

.gm-card { background: var(--bg-base); border: 0; border-radius: 0; }
.gm-card__media { aspect-ratio: 1 / 1; background: var(--bg-subtle); overflow: hidden; }   /* 룩북 이미지가 꽉 참 */
.gm-card__name { margin-top: 8px; font: 350 13px/17px 'Gentle Sans', Pretendard, sans-serif; }
.gm-card__price { font-size: 12px; line-height: 16px; color: var(--text-tertiary); }
.gm-card--feature { position: relative; color: #FFFFFF; }                       /* 강조형: 캠페인 이미지 위 흰 글자 */
.gm-card--outlined { border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; }

Badge / Tag

.gm-badge { display: inline-block; padding: 0; font: 400 10px/14px 'Gentle Sans', sans-serif; text-transform: uppercase; }
.gm-badge--solid { padding: 2px 6px; background: var(--color-primary-500); color: var(--text-on-primary); }
.gm-badge--subtle { padding: 2px 6px; background: var(--bg-subtle); color: var(--text-secondary); }
.gm-badge--outline { padding: 1px 5px; border: 1px solid var(--border-strong); color: var(--text-primary); }

Navigation (헤더)

.gm-header { position: fixed; inset: 0 0 auto; height: 90px; padding: 0 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #FFFFFF; background: transparent; transition: background .3s ease-out, color .3s ease-out; }
.gm-header.is-scrolled { background: var(--bg-base); color: var(--text-primary); }   /* 스크롤 후 흰 바탕·검정 로고 */
.gm-header__logo { width: 305px; height: 28px; }   /* 중앙 워드마크 (모바일 206×24) */
.gm-header__menu { display: flex; gap: 24px; font-size: 13px; }
@media (max-width: 768px) { .gm-header { height: 56px; padding: 0 24px; } }

Motion

--duration-fast: 150ms;                  /* 실측 transition-duration:.15s (최다) */
--duration-base: 300ms;                  /* 실측 transform .3s ease-out */
--duration-slow: 500ms;                  /* 실측 transform .5s / 슬라이드 진행선 */
--ease-out: ease-out;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);  /* 실측 (Tailwind 기본) */

캠페인 슬라이드는 자동 재생 영상과 1px 진행선 채움으로 진행 상황을 보여 준다. 튀는 스프링·바운스는 쓰지 않는다.

Anti-patterns

1. 버튼·카드·이미지에 둥근 모서리를 주지 않는다 — 0px 이 기본이고 알약은 PC 캠페인 위 링크에만 쓴다. 2. UI 에 브랜드 색을 따로 칠하지 않는다 — 색은 캠페인 사진·영상 몫이고 크롬은 흰색·#111·회색뿐이다. 파랑·주황은 상태 표시 전용. 3. 제품 카드에 그림자·테두리·할인 배지를 겹치지 않는다 — 큰 이미지와 이름·가격 두 줄로 끝낸다. 4. 굵은 글씨로 소리치지 않는다 — 한글은 Light 350·Regular 400 두 굵기만, 크기도 18px 을 넘지 않는다. 큰 제목은 영문 세리프에만. 5. 캠페인 비주얼 위에 반투명 박스·그라디언트 띠를 깔아 글자를 올리지 않는다 — 흰 워드마크와 흰 선 링크만 사진 위에 직접 놓는다.

GENTLE MONSTER (젠틀몬스터)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

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

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처