Kream (크림)

검정 워드마크와 sharp 사진의 한국 한정판 스니커즈/패션 거래 톤

한국이커머스라이프스타일중립modern-minimalbrutalism고딕compactsharpflat라이트한글 지원출시 2020개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Kream (크림)
한 줄 정체성: 한국 1위 한정판 스니커즈/패션 리세일 — Naver 패밀리
공식 디자인 철학: "한정판을 거래하는 가장 확실한 방법"
시그니처 요소 1개: 'KREAM' 워드마크 + 검정 sharp 0px 카드 + 즉시구매/판매 dual 버튼

Tone & Mood

톤 & 무드

핵심 키워드 3개: 모노, 스니커즈, 정밀
무드 설명: 흰 캔버스 + 검은 본문 + 0px sharp 카드. 거래 신호(즉시구매가 변동%)가 핵심.
비주얼 스타일: 모던 미니멀 + 브루털리즘 (sharp ramp)
밀도(Density): Compact
모서리 성향: Sharp (0~2px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  --color-primary-50:  #F5F5F5; --color-primary-100: #E0E0E0;
  --color-primary-200: #C7C7C7; --color-primary-300: #999999;
  --color-primary-400: #555555; --color-primary-500: #000000;
  --color-primary-600: #1A1A1A; --color-primary-700: #2D2D2D;
  --color-primary-800: #555555; --color-primary-900: #888888;

  --color-secondary-500: #FF3838;     /* up */
  --color-down: #2563EB;              /* down */
  --color-buy: #EF6253;               /* 구매 거래 버튼 */
  --color-sell: #41B979;              /* 판매 거래 버튼 */

  --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5; --color-neutral-200: #F0F0F0;
  --color-neutral-300: #E0E0E0; --color-neutral-500: #C7C7C7;
  --color-neutral-700: #888888; --color-neutral-800: #555555;
  --color-neutral-900: #191919; --color-neutral-1000: #000000;

  --color-success-bg: #DCF7E5; --color-success-fg: #1AAD5C;
  --color-warning-bg: #FFF1D9; --color-warning-fg: #B45309;
  --color-error-bg: #FFE5E5; --color-error-fg: #FF3838;
  --color-info-bg: #E0F0FE; --color-info-fg: #2563EB;

  --bg-base: #FFFFFF; --bg-subtle: #F5F5F5;
  --bg-elevated: #FFFFFF; --bg-overlay: rgba(0,0,0,0.50);

  --text-primary: #000; --text-secondary: #555;
  --text-tertiary: #888; --text-on-primary: #FFFFFF;
  --text-disabled: #C7C7C7;

  --border-default: #E0E0E0; --border-subtle: #F0F0F0;
  --border-strong: #C7C7C7; --border-focus: #000;
}

[data-theme="dark"] { --bg-base: #000; --bg-subtle: #1A1A1A; --bg-elevated: #2D2D2D; --text-primary: #fff; }

Typography

타이포그래피

한글 Pretendard, 영문 -apple-system
Display 36/900/1.1/-0.05em (워드마크) / H1 22/800/1.2/-0.02em / H2 17/800/1.27 / H3 14/800/1.3
Body 13/500 / Small 12/500 / Caption 11/700/0.04em (uppercase)

Spacing

스페이싱

Base unit: 4px
Container: max-width 1180px / 좌우 패딩 24px

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-full: 9999px;
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.16);
}

Iconography

Outline (정밀), 1.5px, Square + Round
Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 800 14px/1 Pretendard,-apple-system,sans-serif; letter-spacing:-0.01em; border-radius: 0; padding: 14px 18px; border: 0; cursor: pointer; }
.btn-buy { background: var(--color-buy); color: #fff; }
.btn-sell { background: var(--color-sell); color: #fff; }
.btn-primary { background: #000; color: #fff; }
.btn-secondary { background: #fff; color: #000; border: 1px solid #000; }
.btn-ghost { background: transparent; color: #000; }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: #fff; border: 1px solid #C7C7C7; border-radius: 0; padding: 12px 14px; font-size: 14px; font-family: inherit; }
.input:focus { outline: none; border-color: #000; }

Card

.card { background: #fff; border: 1px solid #F0F0F0; border-radius: 0; padding: 12px; }
.product .img { aspect-ratio: 1; background: var(--bg-subtle); }
.product .brand { font-size: 10px; color: #888; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.product h3 { font-size: 13px; font-weight: 700; line-height: 1.3; margin: 4px 0; }
.product .price { font-size: 16px; font-weight: 900; }
.product .change.up { color: var(--color-secondary-500); font-weight: 700; }
.product .change.down { color: var(--color-down); font-weight: 700; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }

Badge

.tag { padding: 1px 6px; border-radius: 0; font-size: 10px; font-weight: 800; line-height: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-solid { background: #000; color: #fff; }
.tag-subtle { background: #F5F5F5; color: #000; }
.tag-outline { border: 1px solid #000; color: #000; }

Navigation

.topnav { padding: 12px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #E0E0E0; }
.topnav .brand { font-weight: 900; font-size: 22px; color: #000; letter-spacing: -0.05em; }

Motion

:root {
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

Anti-patterns

1. 컴포넌트에 라운드(>4px) 적용 금지 — 0px sharp 시그니처 2. 즉시구매/즉시판매 dual button을 단일 버튼으로 통합 금지 3. 가격 변동% 표기 누락 금지 — 거래 신호 핵심 4. KREAM 워드마크의 letter-spacing tight (-0.05em) 변경 금지 5. 컬러풀 액센트 분산 사용 금지 — 모노가 정체성

Sources

출처

https://kream.co.kr/