---
version: alpha
name: "Hearth"
description: "어둡고 조용한 홈 화면 위의 따뜻한 앰버 불빛. Hearth는 어두운 방에 켠 램프 같습니다. 따뜻한 차콜 배경, 켜진 모든 것에는 앰버, 방 건너편에서도 읽히는 크고 둥근 기기 타일. 방은 가로 탭에 놓이고, 온도는 크고 안정적인 숫자로 보입니다."
colors:
  primary: "#B85C00"
  on-primary: "#FFFFFF"
  secondary: "#2F7FA8"
  tertiary: "#4E9A5F"
  neutral: "#5F5A53"
  surface: "#F4F2EF"
  on-surface: "#1A1816"
typography:
  display-lg:
    fontFamily: "Outfit"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Outfit"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Outfit"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Outfit"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Outfit"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Outfit"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
rounded:
  sm: 18px
  md: 20px
  lg: 22px
  xl: 26px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Hearth는 어두운 방에 켠 램프 같습니다. 따뜻한 차콜 배경, 켜진 모든 것에는 앰버, 방 건너편에서도 읽히는 크고 둥근 기기 타일. 방은 가로 탭에 놓이고, 온도는 크고 안정적인 숫자로 보입니다.

## Colors

- **primary (#B85C00):** 라이트 모드에서는 번트 앰버, 다크 모드에서는 밝은 앰버. 켜진 기기, 슬라이더, 활성 탭에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#2F7FA8):** 서늘한 파랑. 냉방, 습도, 두 번째 차트 계열에 씁니다.
- **tertiary (#4E9A5F):** 리프 그린. 에너지 절약, 태양광, 세 번째 계열에 씁니다.
- **neutral (#5F5A53):** 따뜻한 회색. 기기 상태, 방 이름, 단위에 씁니다.
- **surface (#F4F2EF):** 다크 모드에서는 타일이 한 단계 밝은 따뜻한 차콜, 라이트 모드에서는 흰 타일이 놓인 따뜻한 스톤 그레이.
- **on-surface (#1A1816)**

## Typography

전체를 Outfit으로: 제목과 큰 온도 표시(최대 56px, 숫자가 흔들리지 않게 고정폭 숫자 사용)는 Semibold 600, 라벨과 본문은 Regular 400 16px.

## Layout

좌우 패딩 20px의 휴대폰 화면, 이름표가 있는 탭 네 개의 높이 64px 하단 탭 바. 방은 제목 아래의 가로 탭이고, 기기는 2열 타일 그리드를 채웁니다.

## Shapes

기기 타일과 시트는 22px 모서리, 터치 영역이 48px 이상인 둥근 다이얼과 토글. 그림자나 글로우 효과 없이, 켜진 기기는 앰버로 채워질 뿐입니다.

## Components

아이콘, 이름, 상태, 탭하여 켜고 끄는 영역이 있는 기기 타일, 큰 원형 온도조절 다이얼, 밝기 슬라이더, 굿나잇 같은 장면 버튼, 주간 에너지 차트.

## Do's and Don'ts

- 켜짐과 꺼짐이 방 건너편에서도 분명하게 보이게 하세요.
- 탭하면 기기를 켜고 끄고, 길게 누르면 제어 화면을 여세요.
- 켜져 있거나 활성 상태가 아닌 것에는 앰버를 쓰지 마세요.
- 기기의 주요 제어를 메뉴 뒤에 숨기지 마세요.