---
version: alpha
name: "Chalk"
description: "밝고, 둥글고, 격려하는 분위기. 좋은 교실처럼. Chalk는 배움을 가깝게 느끼게 합니다. 따뜻한 크림색 페이지, 행동에는 자신감 있는 파랑, 진행 상황에는 밝은 앰버와 초록, 어린 눈과 지친 눈 모두를 위해 충분히 크게 둔 둥근 Nunito. 수업은 분명한 이름이 붙은 작은 단계로 나뉩니다."
colors:
  primary: "#1F5FD6"
  on-primary: "#FFFFFF"
  secondary: "#F59E0B"
  tertiary: "#16A34A"
  neutral: "#5A6070"
  surface: "#FFF8EC"
  on-surface: "#1C2333"
typography:
  display-lg:
    fontFamily: "Nunito"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Nunito"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Nunito"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Nunito"
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.3
  body-md:
    fontFamily: "Nunito"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.6
  body-sm:
    fontFamily: "Nunito"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
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

Chalk는 배움을 가깝게 느끼게 합니다. 따뜻한 크림색 페이지, 행동에는 자신감 있는 파랑, 진행 상황에는 밝은 앰버와 초록, 어린 눈과 지친 눈 모두를 위해 충분히 크게 둔 둥근 Nunito. 수업은 분명한 이름이 붙은 작은 단계로 나뉩니다.

## Colors

- **primary (#1F5FD6):** 밝은 파랑. 수강 신청 버튼, 링크, 현재 수업에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#F59E0B):** 앰버. 하이라이트, 팁, 두 번째 차트 계열에 씁니다.
- **tertiary (#16A34A):** 초록. 완료한 수업, 정답, 세 번째 계열에 씁니다.
- **neutral (#5A6070):** 슬레이트 그레이. 수업 세부 정보, 소요 시간, 힌트에 씁니다.
- **surface (#FFF8EC):** 노트 한 장 같은 따뜻한 크림색. 카드는 흰색입니다. 다크 모드는 깊은 잉크 블루입니다.
- **on-surface (#1C2333)**

## Typography

전체를 Nunito로: 제목은 ExtraBold 800으로 64px 디스플레이에서 21px까지, 본문은 굵기 500에 넉넉한 18px, 줄 높이 1.6. 작은 글씨도 읽기 쉽게 15px을 유지합니다.

## Layout

1200px, 12컬럼 그리드에 거터 24px, 간격은 4px의 배수. 강의 페이지는 커리큘럼 사이드바와 66자 폭의 수업 컬럼을 짝지우고, 랜딩 페이지는 친근한 3열 기능 카드를 씁니다.

## Shapes

카드, 버튼, 입력창은 16px 모서리. 웜 샌드 색 1px 테두리, 카드와 퀴즈에는 부드럽고 낮은 그림자.

## Components

난이도, 길이, 진행 상황이 있는 강의 카드, 체크 표시가 있는 수업 개요, 크게 탭할 수 있는 카드 형태의 퀴즈 보기, 옅은 노랑의 팁 콜아웃, 완료한 모듈의 배지.

## Do's and Don'ts

- 모든 강의와 수업에 진행 상황을 보여 주세요.
- 내용이 빽빽한 수업에서도 본문은 18px을 유지하세요.
- 짧은 설명 없이 오답을 빨간색으로 표시하지 마세요.
- 카드 하나에 색을 세 가지보다 많이 쌓지 마세요.