Com2uS (컴투스)

COM2US Red(#DC2828) + 스마일 심벌 + 대담한 풀블리드 게임 쇼케이스

한국게이밍소비자따뜻한modern-minimal고딕spacioussharpflat라이트한글 지원출시 2025개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Com2uS (컴투스)
한 줄 정체성: 서머너즈 워·컴투스프로야구·MLB 9이닝스를 세계에 서비스하는 한국의 모바일 게임 개발·퍼블리싱 기업
공식 디자인 철학: "Game-changing Visionary", "Great Fun, Vibrant Moment", "Co-evolution" — 즐거움의 판도를 바꾸고 함께 진화하는 선도 기업
시그니처 요소 1개: COM2US Red #DC2828과 글자 안에 미소를 담은 스마일 심벌. 흰 여백과 검정 타이포 위에 선명한 레드를 넓게 사용한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 대담함, 즐거움, 역동성
무드 설명: 넉넉한 흰 여백과 단단한 검정 타이포를 COM2US Red가 과감하게 가른다. 스마일 심벌의 친근함과 풀블리드 게임 비주얼의 에너지가 기업 신뢰감과 엔터테인먼트 감각을 함께 만든다.
비주얼 스타일: 모던 미니멀
밀도(Density): Spacious — 큰 헤드라인과 게임 비주얼에 충분한 호흡을 부여
모서리 성향: Sharp (0~2px) — 브랜드 그래픽과 섹션 경계를 직선적으로 구성
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - 공식 COM2US Red 및 공식 보조 레드 */
  --color-primary-50:  #FFF0F0;
  --color-primary-100: #FFD9D9;
  --color-primary-200: #FFB3B3;
  --color-primary-300: #FF8585;
  --color-primary-400: #F45353;
  --color-primary-500: #DC2828;       /* 공식 Primary, PANTONE 2347 C */
  --color-primary-600: #A51E1E;
  --color-primary-700: #891110;
  --color-primary-800: #6C1214;
  --color-primary-900: #40100F;

  /* Neutral - 공식 흑백 팔레트 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;
  --color-neutral-100:  #E5E5E5;
  --color-neutral-200:  #CCCCCC;
  --color-neutral-300:  #B2B2B2;
  --color-neutral-500:  #808080;
  --color-neutral-700:  #4C4C4C;
  --color-neutral-800:  #333333;
  --color-neutral-900:  #191919;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #EAF6ED;
  --color-success-fg: #287A3E;
  --color-warning-bg: #FFF4D8;
  --color-warning-fg: #8A5B00;
  --color-error-bg:   #FFF0F0;
  --color-error-fg:   #A51E1E;
  --color-info-bg:    #EEF3FA;
  --color-info-fg:    #315F91;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F7F7F7;
  --bg-elevated: #FFFFFF;
  --bg-brand:    #DC2828;
  --bg-inverse:  #191919;
  --bg-overlay:  rgba(0,0,0,0.72);

  /* Text */
  --text-primary:    #191919;
  --text-secondary:  #4C4C4C;
  --text-tertiary:   #666666;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #999999;

  /* Border */
  --border-default: #E5E5E5;
  --border-subtle:  #F7F7F7;
  --border-strong:  #999999;
  --border-focus:   #DC2828;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans CJK KR (공식, SIL Open Font License)
- 영문: Jungka (공식 브랜드 서체) / Arial 폴백
- 디지털 UI 폴백: Noto Sans KR / 시스템 sans-serif
위계:
- Display: 64px / 700 / 0.95 / -0.045em
- H1: 44px / 700 / 1.05 / -0.035em
- H2: 30px / 700 / 1.15 / -0.025em
- H3: 20px / 700 / 1.25 / -0.015em
- Body Large: 16px / 400 / 1.6 / 0
- Body: 14px / 400 / 1.55 / 0
- Body Small: 12px / 400 / 1.5 / 0
- Caption: 11px / 700 / 1.4 / 0.12em uppercase

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; ``
Container: max-width 1200px

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.06);     /* 컨트롤 */
--shadow-md: 0 8px 24px rgba(0,0,0,0.10);    /* 게임 카드 hover */
--shadow-lg: 0 24px 64px rgba(0,0,0,0.16);   /* 모달 */
--shadow-xl: 0 36px 96px rgba(0,0,0,0.22);   /* 풀스크린 dialog */

Iconography

스타일: Outline 중심, 핵심 액션과 스마일 심벌만 Filled
Stroke 굵기: 2px
모서리 처리: Square
추천 라이브러리: Lucide / 공식 COM2US 스마일 심벌

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-sm); font: 700 13px/1 Jungka,"Noto Sans KR",sans-serif; letter-spacing: .02em; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); transform: translateY(-1px); }
.btn-primary:active { background: var(--color-primary-700); transform: translateY(0); }
.btn-secondary { background: var(--bg-base); color: var(--text-primary); border-color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-inverse); color: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn:disabled, .btn.is-loading { background: var(--color-neutral-100); color: var(--text-disabled); border-color: transparent; pointer-events: none; }

Input

.input { width: 100%; min-height: 44px; padding: 10px 14px; background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); font: 400 14px/1.4 "Noto Sans KR",sans-serif; }
.input:focus { outline: 2px solid rgba(220,40,40,.18); outline-offset: 1px; border-color: var(--border-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); border-color: var(--border-default); color: var(--text-disabled); }

Card

.card { position: relative; overflow: hidden; background: var(--bg-elevated); border: 1px solid transparent; border-radius: var(--radius-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-emphasis { background: var(--bg-brand); color: var(--text-on-primary); }
.card-outlined { border-color: var(--border-default); }
.card .cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-inverse); }
.card .meta { padding: 18px; }
.card h3 { margin: 0; color: inherit; font: 700 18px/1.2 Jungka,"Noto Sans KR",sans-serif; }

Badge / Tag

.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font: 700 10px/1 Jungka,"Noto Sans KR",sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }

Navigation

.topbar { min-height: 68px; display: flex; align-items: center; gap: 32px; padding: 0 40px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topbar .logo { color: var(--color-primary-500); font: 900 22px/1 Jungka,Arial,sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.topbar .item { position: relative; padding: 24px 0; color: var(--text-secondary); font: 700 12px/1 Jungka,"Noto Sans KR",sans-serif; cursor: pointer; }
.topbar .item::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--color-primary-500); transform: scaleX(0); transition: transform var(--duration-fast) var(--ease-out); }
.topbar .item:hover, .topbar .item.active { color: var(--text-primary); }
.topbar .item:hover::after, .topbar .item.active::after { transform: scaleX(1); }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 480ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);

Anti-patterns

1. COM2US Red를 임의의 파랑·보라 또는 그라데이션으로 대체하지 않는다. 2. 워드마크와 스마일 심벌의 비율·간격·방향을 임의로 변형하지 않는다. 3. 로고에 그림자·외곽선·입체 효과를 더하거나 가시성이 낮은 이미지 위에 놓지 않는다. 4. 레드를 모든 텍스트와 컨트롤에 남용하지 않는다 — 넓은 브랜드 면과 핵심 CTA에 집중한다. 5. 게임별 아트 스타일을 한 카드 안에서 섞지 않는다 — 공통 그리드와 타이포만 브랜드 레이어로 유지한다.

Com2uS (컴투스)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처