Rakuten

크림슨 단색 하나로 버튼·가격·포인트를 전부 칠하는 촘촘한 일본식 쇼핑몰

아시아이커머스핀테크따뜻한modern-minimal고딕compactsoftflat라이트한글 지원출시 2019개정 2021

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

Brand DNA

브랜드 DNA

브랜드명: Rakuten (楽天, 라쿠텐)
한 줄 정체성: 일본 최대 온라인 쇼핑몰 「라쿠텐 이치바(楽天市場)」를 중심으로 카드·은행·증권·모바일·여행을 「라쿠텐 포인트」 하나로 잇는 생활 경제권
공식 디자인 철학: 코퍼릿 사이트 rakuten.design 이 내건 세 원칙 — 「행동을 만들어 낸다(アクションを生み出す)」 · 「고객 경험을 높인다(顧客体験を向上させる)」 · 「브랜드 가치를 높인다(ブランド価値を高める)」. 브랜드 가이드라인은 "코퍼릿 크리에이티브에는 크림슨 레드를 최대한 많이 쓰고, 다른 색이 필요하면 크림슨의 명도·채도를 바꾸거나 그레이스케일을 쓴다" 고 규정한다. 쇼핑 서비스 쪽 표어는 「Shopping is Entertainment!」
시그니처 요소 1개: Rakuten Crimson(#BF0000) 단일 색 — 로고·검색 버튼·활성 탭·엔화 가격·포인트 배지를 모두 한 가지 크림슨으로 칠하고, 나머지는 흰 바탕과 회색으로만 받친다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 풍성함, 축제감, 신뢰감
무드 설명: 흰 캔버스 위에 상품·배지·순위·포인트 정보를 촘촘히 쌓아 "물건이 많다, 지금 싸다" 는 시장의 활기를 만든다. 세일 기간에는 크림슨과 세일 옐로(#FFF100)를 겹쳐 축제처럼 달아오르지만, 평상시 골격은 회색 선과 평면 구획으로 정돈돼 있어 결제·포인트를 맡겨도 되는 금융 계열 신뢰감이 유지된다. 라쿠텐 이치바 앱·웹은 다크 모드를 제공하지 않는다(라쿠텐 카드·트래블 앱만 지원).
비주얼 스타일: 모던 미니멀 (색 하나 + 회색 구조, 그림자 거의 없음)
밀도(Density): Compact — 한 화면에 상품·가격·배지·리뷰를 최대한 많이 싣는 일본 이커머스 관행
모서리 성향: Soft (4px) — 버튼·입력은 4px, 모듈 컨테이너 8px, 탭·헤더는 직각
평면성: Flat — 그림자 대신 회색 띠(#F4F4F4)와 1px 선으로 구획

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Rakuten Crimson (공식: RGB 191/0/0, PANTONE 1805C) */
  --color-primary-50:  #FDECEC;  /* 선택 행·알림 배경 (추정) */
  --color-primary-100: #F9CFCF;  /* 옅은 배지 배경 (추정) */
  --color-primary-200: #F09A9A;  /* 비활성 강조선 (추정) */
  --color-primary-300: #E35F5F;  /* 차트 보조 (추정) */
  --color-primary-400: #D12A2A;  /* hover 밝은 쪽 (추정) */
  --color-primary-500: #BF0000;  /* Rakuten Crimson — 로고·CTA·가격·포인트 */
  --color-primary-600: #A30000;  /* 버튼 hover (추정) */
  --color-primary-700: #860000;  /* 버튼 active (추정) */
  --color-primary-800: #690000;  /* 짙은 배너 바탕 (추정) */
  --color-primary-900: #4A0000;  /* 최심 강조 (추정) */

  /* Secondary - 세일 옐로 (캠페인 전용) */
  --color-secondary-500: #FFF100;  /* 슈퍼 SALE·마라톤 배지 (관찰) */
  --color-secondary-100: #FFF9C8;  /* 세일 크림 배경 (관찰) */
  --color-link: #1D54A7;           /* 텍스트 링크 블루 (관찰) */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* 입력 바탕 */
  --color-neutral-100:  #F4F4F4;  /* 섹션 띠·상품 썸네일 바탕 */
  --color-neutral-200:  #EBEBEB;  /* 헤어라인 */
  --color-neutral-300:  #D1D1D1;  /* 강한 테두리 */
  --color-neutral-500:  #999999;  /* 플레이스홀더 */
  --color-neutral-700:  #666666;  /* 보조 텍스트 */
  --color-neutral-900:  #333333;  /* 본문 잉크 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E8F5EC;  /* (추정) */
  --color-success-fg: #1E7B3C;  /* 재고 있음·배송 완료 (추정) */
  --color-warning-bg: #FFF9C8;  /* 세일 크림 재사용 */
  --color-warning-fg: #8A5A00;  /* (추정) */
  --color-error-bg:   #FDECEC;
  --color-error-fg:   #BF0000;  /* 오류도 크림슨 — 별도 오류 레드를 두지 않음 (추정) */
  --color-info-bg:    #EAF1FB;  /* (추정) */
  --color-info-fg:    #1D54A7;

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;             /* 페이지 기본 */
  --bg-subtle:   #F4F4F4;             /* 섹션 띠 */
  --bg-elevated: #FFFFFF;             /* 카드 — 그림자 대신 선 */
  --bg-overlay:  rgba(0,0,0,0.60);    /* 모달 딤 */

  /* Text 위계 */
  --text-primary:    #333333;  /* 본문 */
  --text-secondary:  #666666;  /* 보조·판매점명 */
  --text-tertiary:   #999999;  /* 캡션·플레이스홀더 */
  --text-on-primary: #FFFFFF;  /* 크림슨 위 */
  --text-disabled:   #BBBBBB;
  --text-price:      #BF0000;  /* 엔화 가격 */

  /* Border */
  --border-default: #D1D1D1;
  --border-subtle:  #EBEBEB;
  --border-strong:  #999999;
  --border-focus:   #BF0000;
}

Typography

타이포그래피

폰트 페어링:
- 일본어: Rakuten Sans JP (전용 서체, 사토 가시와 감수) — 웹 서비스 화면은 Hiragino Kaku Gothic ProN, Meiryo 시스템 폰트 스택이 실제 사용됨(관찰)
- 한글: Pretendard 또는 Noto Sans KR (OFL, 폴백 권장)
- 영문: Rakuten Sans (전용 서체, 비공개 라이선스) — Rounded·Condensed·Serif 가족 포함
위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 32px / 900 / 1.2 / -0.02em (캠페인 배너)
- H1: 24px / 700 / 1.3 / -0.01em
- H2: 20px / 700 / 1.35 / 0 (모듈 제목, 관찰)
- H3: 16px / 700 / 1.4 / 0
- Body Large: 16px / 400 / 1.6 / 0 (검색 입력)
- Body: 14px / 400 / 1.6 / 0 (상품명)
- Body Small: 12px / 400 / 1.5 / 0 (기본 UI 텍스트, 관찰)
- Caption: 10px / 400 / 1.4 / 0 (배지·판매점 정보)
가격 표기: 숫자는 굵게(700~800) 크림슨, 「円」은 한 단계 작게 — 이치바 전체 공통 문법

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; /* 이치바는 12px 단계를 자주 씀 (관찰) */ --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; /* 섹션 간격 (관찰) */ --space-3xl: 64px; ``
Container: PC 최대 폭 1200px(추정), 좌우 패딩 16px. 모바일 좌우 12px

Border Radius

--radius-none: 0;      /* 헤더·탭·세일 띠 */
--radius-sm: 2px;      /* 작은 배지 */
--radius-md: 4px;      /* 버튼·입력·썸네일 */
--radius-lg: 8px;      /* 모듈 컨테이너 */
--radius-xl: 12px;     /* 바텀시트 (추정) */
--radius-full: 9999px; /* 「더 보기」 알약 버튼·아바타 */

Shadow / Elevation

--shadow-none: none;                               /* 기본 — 카드·모듈은 그림자 없이 선으로 구획 */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);           /* 고정 헤더 하단 (추정) */
--shadow-md: 0 2px 8px rgba(0,0,0,0.12);           /* 드롭다운·자동완성 (추정) */
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);          /* 모달 (추정) */
--shadow-xl: 0 16px 40px rgba(0,0,0,0.20);         /* 풀스크린 시트 (추정) */

Iconography

스타일: Outline 기본, 포인트(P)·순위 왕관처럼 브랜드 상징은 Filled
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Lucide (선 굵기 2px 그대로 맞음)

Component Guide

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

Button

.rk-btn { font: 700 14px/1 var(--font-sans); padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
/* Primary — 장바구니·구매 */
.rk-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.rk-btn--primary:hover { background: var(--color-primary-600); }
.rk-btn--primary:active { background: var(--color-primary-700); }
.rk-btn--primary:disabled { background: var(--color-neutral-300); color: var(--color-neutral-0); cursor: not-allowed; }
.rk-btn--primary.is-loading { color: transparent; position: relative; }
.rk-btn--primary.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #FFF; border-radius: 50%; animation: rk-spin .7s linear infinite; }
/* Secondary — 크림슨 외곽선 (「お気に入り」 등) */
.rk-btn--secondary { background: var(--bg-base); color: var(--color-primary-500); border-color: var(--color-primary-500); }
.rk-btn--secondary:hover { background: var(--color-primary-50); }
.rk-btn--secondary:active { background: var(--color-primary-100); }
.rk-btn--secondary:disabled { color: var(--text-disabled); border-color: var(--border-subtle); }
/* Ghost — 회색 텍스트 버튼 */
.rk-btn--ghost { background: transparent; color: var(--text-secondary); }
.rk-btn--ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.rk-btn--ghost:active { background: var(--color-neutral-200); }
.rk-btn--ghost:disabled { color: var(--text-disabled); }
/* Danger — 주문 취소. 크림슨과 구분하려 짙은 톤 */
.rk-btn--danger { background: var(--color-primary-800); color: #FFF; }
.rk-btn--danger:hover { background: var(--color-primary-900); }
.rk-btn--danger:active { background: #300000; }
.rk-btn--danger:disabled { background: var(--color-neutral-300); }
@keyframes rk-spin { to { transform: rotate(360deg); } }

Input — 검색창은 크림슨 2px 테두리 + 오른쪽 크림슨 돋보기 블록이 한 몸

.rk-input { height: 40px; padding: 0 12px; font-size: 16px; background: var(--color-neutral-50); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); }
.rk-input::placeholder { color: var(--text-tertiary); }
.rk-input:focus { outline: none; border-color: var(--border-focus); background: var(--bg-base); }
.rk-input.is-error { border-color: var(--color-error-fg); background: var(--color-error-bg); }
.rk-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.rk-search { display: flex; border: 2px solid var(--color-primary-500); border-radius: var(--radius-md); overflow: hidden; }
.rk-search input { flex: 1; border: 0; padding: 0 12px; height: 40px; font-size: 16px; }
.rk-search button { width: 48px; background: var(--color-primary-500); border: 0; color: #FFF; }

Card

/* 기본형 — 상품 타일: 그림자 없음, 썸네일은 회색 바탕 */
.rk-card { background: var(--bg-elevated); border-radius: var(--radius-md); }
.rk-card__thumb { background: var(--bg-subtle); border-radius: var(--radius-md); aspect-ratio: 1; }
.rk-card__price { color: var(--text-price); font-weight: 800; font-size: 16px; }
/* 강조형 — 세일 모듈 */
.rk-card--sale { background: var(--color-secondary-100); border-top: 3px solid var(--color-primary-500); padding: var(--space-md); }
/* Outlined — 판매점·주문 요약 */
.rk-card--outlined { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-lg); }

Badge / Tag

.rk-badge { display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 4px; border-radius: var(--radius-sm); font-weight: 700; }
.rk-badge--solid   { background: var(--color-primary-500); color: #FFF; }                       /* ポイント10倍 */
.rk-badge--subtle  { background: var(--color-primary-50); color: var(--color-primary-500); }     /* クーポン */
.rk-badge--outline { border: 1px solid var(--color-primary-500); color: var(--color-primary-500); } /* 送料無料 */
.rk-badge--sale    { background: var(--color-secondary-500); color: var(--color-primary-500); }  /* SALE (캠페인 한정) */
.rk-rank { background: var(--color-primary-500); color: #FFF; font-weight: 900; font-size: 11px; padding: 2px 6px; } /* 순위 — 직각 */

Navigation — 흰 헤더 + 크림슨 로고 + 밑줄형 탭

.rk-header { display: flex; align-items: center; gap: var(--space-md); height: 56px; padding: 0 var(--space-lg); background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.rk-tabs { display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--border-subtle); }
.rk-tab { padding: 10px 0; font-size: 14px; color: var(--text-secondary); border-bottom: 2px solid transparent; }
.rk-tab.is-active { color: var(--text-primary); font-weight: 700; border-bottom-color: var(--color-primary-500); }

Motion

--duration-fast: 100ms;   /* 버튼 색 전환 */
--duration-base: 200ms;   /* 탭·드롭다운 */
--duration-slow: 300ms;   /* 바텀시트 (추정) */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

모션은 최소한. 캠페인 카운트다운 외에는 장식 애니메이션을 두지 않는다.

Anti-patterns

1. 크림슨 대신 다른 빨강(#E60012·#FF0000 등)을 섞어 쓰지 않는다 — 가이드라인은 크림슨의 명도·채도 변형 또는 그레이스케일만 허용 2. 크림슨을 넓은 그라디언트로 풀지 않는다 — 단색 면 또는 단색 선으로만 쓴다 3. 상품 카드에 그림자·두꺼운 테두리를 얹지 않는다 — 회색 띠와 1px 선으로만 구획 4. 가격을 검정으로 쓰지 않는다 — 엔화 가격은 항상 크림슨·굵게, 「円」은 작게 5. 세일 옐로(#FFF100)를 평상시 UI에 쓰지 않는다 — 슈퍼 SALE·마라톤 등 캠페인 기간 한정

Rakuten

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

출처