디자인 시스템 갤러리 Steam

Steam

잉크 네이비 클라이언트 + 라이브러리 사이드바 + 초록 PLAY 버튼 — PC 게이밍 선반의 원형

서양게이밍이커머스차가운modern-minimal고딕comfortablesoftlayered다크한글 지원출시 2003개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Steam (Valve)
  • 한 줄 정체성: PC 게이밍 디지털 유통의 사실상 표준 — 게임 스토어 + 라이브러리 + 커뮤니티
  • 공식 디자인 철학: "Your gaming library, always" — 게임 비주얼이 무대의 주인공
  • 시그니처 요소 1개: 잉크 네이비 #1B2838 클라이언트 안의 라이브러리 사이드바와 큰 게임 헤더, Cyan #66C0F4 선택 상태, Steam Green PLAY 버튼이 만드는 PC 게임 선반

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 진중, 라이브러리, PC게이밍
  • 무드 설명: 모니터 앞에 앉은 PC 게이머의 톤. 어두운 네이비 캔버스가 게임 아트워크의 다양한 색을 살리는 액자 역할. UI 자체는 채도 낮은 cyan 단색 한 톤만 사용.
  • 비주얼 스타일: 모던 미니멀 (게임 콘텐츠가 주연)
  • 밀도(Density): Comfortable
  • 모서리 성향: Soft (3~4px) — 거의 sharp
  • 평면성: Layered — header gradient + 카드 위 미세 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Steam Navy */
  --color-primary-50:  #C7D5E0;
  --color-primary-100: #8F98A0;
  --color-primary-200: #67707A;
  --color-primary-300: #4E5764;
  --color-primary-400: #2A475E;
  --color-primary-500: #1B2838;       /* 시그니처 */
  --color-primary-600: #16202D;
  --color-primary-700: #171A21;
  --color-primary-800: #0E141B;
  --color-primary-900: #060A0F;

  /* Secondary - Steam Cyan (액션) */
  --color-secondary-300: #A3D3F0;
  --color-secondary-500: #66C0F4;
  --color-secondary-700: #4583B0;

  /* Accent - Green (Play / Online) */
  --color-accent-online: #5A8A3A;
  --color-accent-online-bright: #BFFF34;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F8FA;
  --color-neutral-100:  #C7D5E0;
  --color-neutral-300:  #8F98A0;
  --color-neutral-500:  #67707A;
  --color-neutral-700:  #4E5764;
  --color-neutral-900:  #1B2838;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #2A4030;
  --color-success-fg: #BFFF34;
  --color-warning-bg: #3A2D08;
  --color-warning-fg: #FFC93C;
  --color-error-bg:   #3A1816;
  --color-error-fg:   #FF6B5E;
  --color-info-bg:    #1A3A50;
  --color-info-fg:    #66C0F4;

  /* Surface */
  --bg-base:     #1B2838;
  --bg-subtle:   #16202D;
  --bg-elevated: #2A475E;
  --bg-page:     linear-gradient(180deg, #1B2838 0%, #16202D 100%);
  --bg-overlay:  rgba(0,0,0,0.70);

  /* Text */
  --text-primary:    #FFFFFF;
  --text-secondary:  #C7D5E0;
  --text-tertiary:   #8F98A0;
  --text-link:       #66C0F4;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #4E5764;

  /* Border */
  --border-default: #2A475E;
  --border-subtle:  #16202D;
  --border-strong:  #4E5764;
  --border-focus:   #66C0F4;
}

Typography

타이포그래피

  • 폰트 페어링:
    • UI(영문): Motiva Sans (Valve 자체) / Arial 폴백
    • 한글: Pretendard / Noto Sans KR / Malgun Gothic
    • 코드/메타: Consolas / JetBrains Mono
  • 위계:
    • Display: 36px / 400 / 1.2 / 0
    • H1: 26px / 400 / 1.25 / 0
    • H2: 18px / 400 / 1.3 / 0
    • H3: 14px / 600 / 1.4 / 0.04em uppercase
    • Body: 14px / 400 / 1.5 / 0
    • Body Small: 12px / 400 / 1.45 / 0
    • Meta: 11px / 600 / 1.4 / 0.06em uppercase
    • Caption: 11px / 400 / 1.4 / 0

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 18px; --space-xl: 28px; --space-2xl: 44px; --space-3xl: 72px; ``
  • Container: max-width 940px (스토어) / 풀스크린 (라이브러리)

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 2px;       /* 거의 sharp */
--radius-md: 3px;       /* 기본 */
--radius-lg: 4px;
--radius-xl: 6px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 0 rgba(0,0,0,0.4);
--shadow-md: 0 6px 20px rgba(0,0,0,0.55);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.7);
--shadow-cyan: 0 0 0 2px rgba(102,192,244,0.5);

Iconography

Iconography

  • 스타일: Outline (1.5px), 간혹 Filled (Steam mark)
  • Stroke 굵기: 1.5px
  • 모서리 처리: Sharp ~ Soft
  • 추천 라이브러리: Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 400 14px/1 'Motiva Sans',Arial,sans-serif; padding: 6px 14px; border-radius: 3px; border: 0; cursor: pointer; transition: background 150ms ease; }
.btn-primary { background: linear-gradient(180deg, #6DCFF6 0%, #2D5380 100%); color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn-primary:hover { background: linear-gradient(180deg, #8BDDFF 0%, #3D63A0 100%); }
.btn-buy { background: linear-gradient(180deg, #A4D007 0%, #4F7B0F 100%); color: #FFF; }
.btn-buy:hover { background: linear-gradient(180deg, #BFFF34 0%, #5F9A1F 100%); }
.btn-ghost { background: rgba(102,192,244,0.15); color: var(--text-link); }
.btn-ghost:hover { background: rgba(102,192,244,0.25); }

Input

.input { background: var(--color-primary-700); border: 1px solid var(--border-default); border-radius: 3px; padding: 6px 10px; font: 400 13px/1.4 'Motiva Sans',sans-serif; color: var(--text-primary); width: 100%; }
.input:focus { outline: none; border-color: var(--border-focus); }

Card (Game tile)

.tile { background: var(--bg-elevated); border-radius: 3px; overflow: hidden; cursor: pointer; transition: transform 150ms ease; position: relative; }
.tile:hover { transform: scale(1.02); }
.tile .header-img { aspect-ratio: 460/215; background: linear-gradient(135deg, #1B2838, #2A475E); }
.tile .meta { padding: 8px 10px; }
.tile h3 { font: 600 13px/1.3 'Motiva Sans',sans-serif; color: var(--text-primary); margin: 0 0 4px; }
.tile .price { font: 600 13px/1 inherit; color: var(--text-primary); }
.tile .discount { background: #4C6B22; color: #BEEE11; padding: 2px 6px; font: 700 12px/1 inherit; border-radius: 2px; }

Badge

.tag { display: inline-flex; padding: 1px 6px; border-radius: 2px; font: 400 11px/1.4 'Motiva Sans',sans-serif; }
.tag-default { background: rgba(103,193,245,0.20); color: var(--text-secondary); }
.tag-cyan { background: rgba(103,193,245,0.20); color: var(--text-link); }
.tag-discount { background: #4C6B22; color: #BEEE11; font-weight: 700; }

Navigation (Top)

.topbar { background: linear-gradient(180deg, #171A21 0%, #1B2838 100%); padding: 0 16px; display: flex; align-items: center; gap: 16px; height: 44px; border-bottom: 1px solid var(--border-default); }
.topbar .logo { color: #C7D5E0; font: 400 18px/1 'Motiva Sans',sans-serif; }
.topbar .item { font: 400 14px/1 inherit; color: var(--text-secondary); padding: 6px 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; }
.topbar .item:hover { color: #fff; }
.topbar .item.active { color: var(--text-link); }

Motion

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

Anti-patterns

Anti-patterns

1. 흰색 배경 캔버스 사용 금지 — 다크 네이비가 디폴트 2. 채도 높은 보색 강조 금지 — Cyan/Green 한 톤씩만 3. 게임 표지를 작은 썸네일로만 사용 금지 — 헤더 이미지가 카드의 주연 4. 둥근 모서리(>6px) 사용 금지 — sharp 톤 유지 5. 그라데이션 버튼 톤 임의 변경 금지 — Steam blue/green 두 그라데이션만

Sources

출처

  1. https://store.steampowered.com/