Ohouse (오늘의집)

Brand DNA

브랜드 DNA

• 브랜드명: Ohouse (오늘의집)
• 한 줄 정체성: 한국 1위 인테리어 영감 + 커머스 — 우리집 사진 공유의 표준
• 공식 디자인 철학: "당신의 집이 오늘의집 — 따뜻한 영감, 일상의 큐레이션"
• 시그니처 요소 1개: Ohouse Sky(#35C5F0) + 우리집 사진 카드 + 스크랩 기능

Tone & Mood

톤 & 무드

• 핵심 키워드 3개: 따뜻함, 인테리어, 영감
• 무드 설명: 흰 캔버스 + 따뜻한 사진 + Sky 액센트. 우리집 같은 친근한 톤이 SNS와 커머스를 잇는다.
• 비주얼 스타일: 모던 미니멀 + 휴머니즘
• 밀도(Density): Comfortable
• 모서리 성향: Round (8~14px)
• 평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  --color-primary-50:  #E0F6FE;
  --color-primary-100: #B5E8FB;
  --color-primary-200: #76D5F6;
  --color-primary-300: #4ECCF2;
  --color-primary-400: #35C5F0;
  --color-primary-500: #35C5F0;  /* Ohouse Sky */
  --color-primary-600: #25A8D2;
  --color-primary-700: #1A85A8;
  --color-primary-800: #11617A;
  --color-primary-900: #093D4D;

  --color-secondary-500: #FF6F0F;

  --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: #E0F6FE; --color-info-fg: #35C5F0;

  --bg-base: #FFFFFF; --bg-subtle: #FAFAFA;
  --bg-elevated: #FFFFFF; --bg-overlay: rgba(25,25,25,0.50);

  --text-primary: #191919; --text-secondary: #555555;
  --text-tertiary: #888888; --text-on-primary: #FFFFFF;
  --text-disabled: #C7C7C7;

  --border-default: #F0F0F0; --border-subtle: #FAFAFA;
  --border-strong: #E0E0E0; --border-focus: #35C5F0;
}

Typography

타이포그래피

• 한글 Pretendard, 영문 -apple-system
• Display 32/800/1.15/-0.025em / H1 22/800/1.2/-0.02em / H2 18/700/1.27/0 / H3 15/700/1.3/-0.01em
• Body 14/500/1.5 / Small 12/500/1.43 / Caption 11/700/1.27

Spacing

스페이싱

• Base unit: 4px
• Container: max-width 1200px, 좌우 패딩 24px (모바일 16px)

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

Border Radius

Border Radius

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

Shadow / Elevation

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);  /* 카드 hover */
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);  /* 드롭다운 */
  --shadow-xl: 0 16px 32px rgba(0,0,0,0.16); /* 모달 */
}

Iconography

Iconography

• Outline + Emoji, 2px stroke, Round
• Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 14px/1 Pretendard,-apple-system,sans-serif; letter-spacing:-0.01em; border-radius: var(--radius-md); padding: 12px 16px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: var(--bg-subtle); border: 0; border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; font-family: inherit; }
.input:focus { outline: 2px solid var(--border-focus); outline-offset: -2px; }

Card (Photo card)

.card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.card .img { aspect-ratio: 1; }
.card .body { padding: 12px 14px; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }

Badge / 스크랩 카운트

.tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tag-solid { background: var(--color-primary-500); color: #fff; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-primary); }
.scrap { color: var(--color-primary-500); font-weight: 700; }

Navigation

.topnav { padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topnav .brand { font-weight: 800; font-size: 17px; letter-spacing: -0.025em; }

Motion

Motion

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

Anti-patterns

Anti-patterns

1. 사진 위에 채도 높은 overlay 사용 금지 — 우리집 사진이 주인공 2. brand sky를 destructive 액션에 사용 금지 3. 스크랩 카운트와 좋아요(♡) 카운트를 합치지 말 것 — 별도 신호 4. 본문 폰트 weight 400 이하 금지 5. 인테리어 카테고리 색을 brand sky로 통일 금지

Sources

출처

1. https://ohou.se/
2. https://www.bucketplace.com/