--- version: alpha name: Provee description: "대학생이 손글씨로 풀고, AI가 그 풀이 과정을 읽어 어디까지 아는지 짚어주는 학습 앱. 태블릿이 기준 화면이다." colors: primary: "#8A1C2B" primary-dark: "#5E1220" neutral: "#FAF6EC" surface: "#FFFDF8" surface-soft: "#F4EFE2" on-surface: "#1E1811" outline: "#E4DAC7" ink-pen: "#221C39" ink-red: "#C0392B" ink-highlighter: "#FFE500" success: "#1F7A4D" error: "#C0392B" warning: "#8A5A12" info: "#2F4C5A" on-primary: "#FFFFFF" typography: display: fontFamily: Noto Sans KR fontSize: 34px fontWeight: 700 lineHeight: 42px title: fontFamily: Noto Sans KR fontSize: 28px fontWeight: 700 lineHeight: 36px heading: fontFamily: Noto Sans KR fontSize: 22px fontWeight: 600 lineHeight: 30px subheading: fontFamily: Noto Sans KR fontSize: 18px fontWeight: 500 lineHeight: 26px body: fontFamily: Noto Sans KR fontSize: 16px fontWeight: 400 lineHeight: 26px body-strong: fontFamily: Noto Sans KR fontSize: 16px fontWeight: 600 lineHeight: 26px caption: fontFamily: Noto Sans KR fontSize: 14px fontWeight: 400 lineHeight: 20px label: fontFamily: Noto Sans KR fontSize: 12px fontWeight: 500 lineHeight: 16px question: fontFamily: Noto Sans KR fontSize: 21px fontWeight: 700 lineHeight: 32px wordmark: fontFamily: Poppins fontSize: 32px fontWeight: 700 lineHeight: 1 letterSpacing: -0.035em rounded: sm: 8px md: 14px lg: 20px xl: 28px full: 9999px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px xxxl: 48px section: 64px screen-margin: 32px card-gap: 24px paper-line: 32px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-strong}" rounded: "{rounded.md}" height: 52px padding: 24px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-strong}" rounded: "{rounded.md}" height: 52px padding: 24px button-ghost: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.body-strong}" rounded: "{rounded.md}" height: 52px padding: 24px button-danger: backgroundColor: "{colors.error}" textColor: "{colors.on-primary}" typography: "{typography.body-strong}" rounded: "{rounded.md}" height: 52px padding: 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: 24px card-feature: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: 24px panel: backgroundColor: "{colors.surface-soft}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" paper: backgroundColor: "{colors.surface}" textColor: "{colors.ink-pen}" typography: "{typography.question}" paper-red-pen: textColor: "{colors.ink-red}" paper-highlight: backgroundColor: "{colors.ink-highlighter}" --- # Provee ## Overview Provee는 학생이 종이에 쓰듯 손으로 풀고, 앱이 그 획을 읽어 "어디까지 아는지"를 짚어주는 학습 앱이다. 화면의 주인공은 **학생의 손글씨가 놓이는 종이**다. 크림색 문구류 같은 차분한 바탕 위에 먹색 글자, 그리고 브랜드 와인색은 누를 곳 한 군데에만 쓴다. 장식보다 여백, 화려함보다 읽힘이 우선이다. 분위기는 조용한 스터디카페의 좋은 노트 한 권. 친근하지만 가볍지 않고, 지적이지만 딱딱하지 않다. 기준 기기는 태블릿(펜 입력)이고, 폰에서는 같은 구성을 위아래로 접는다. ## Colors 바탕은 따뜻한 크림, 글자는 먹색, 강조는 와인 하나다. 필기 도구 색과 상태 색은 브랜드 색과 섞지 않는다. - **Primary · Provee 와인 (#8A1C2B):** 화면에서 가장 중요한 행동 하나(이어서 풀기, 제출)에만 쓴다. - **Primary dark (#5E1220):** 와인 그라데이션의 끝. - **Neutral · 크림 바탕 (#FAF6EC):** 모든 화면의 바탕. 순백보다 부드럽다. - **Surface · 카드 (#FFFDF8):** 카드와 종이의 바탕. - **Surface soft (#F4EFE2):** 결과·설명 패널처럼 한 단계 들어간 구역. - **On-surface · 먹색 (#1E1811):** 본문과 제목 글자. - **Outline (#E4DAC7):** 카드 테두리, 종이 줄. - **Ink pen (#221C39) · Red pen (#C0392B) · Highlighter (#FFE500, 22% 겹침):** 학생과 튜터가 종이에 남기는 획의 색. UI 요소에 쓰지 않는다. - **Success (#1F7A4D) · Error (#C0392B) · Warning (#8A5A12) · Info (#2F4C5A):** 맞음·틀림·주의·안내. 와인과 구분한다. ## Typography 한글 본문은 **Noto Sans KR**, 워드마크 "Provee."는 **Poppins 700**(글자는 먹색, 끝의 점만 와인)다. 수식은 KaTeX가 따로 그린다. 크기는 display(34)부터 label(12)까지 8단계에, 종이 위 문제 본문 전용 `question`(21/32, 굵게)이 하나 더 있다. - **Display · Title · Heading:** 화면 제목과 구역 제목. 한 화면에 display는 하나만. - **Body (16/26):** 설명과 튜터 말풍선. 긴 글도 이 크기로 읽힌다. - **Caption · Label:** 보조 정보와 꼬리표. 기간·단위·비교 대상 같은 중요한 조건은 여기에 숨기지 않고 본문 크기로 문장 안에 쓴다. - **Question:** 종이 줄 간격 32에 맞춘 문제 본문. ## Layout 간격은 **4의 배수**만 쓴다(xs 4 · sm 8 · md 12 · lg 16 · xl 24 · xxl 32 · xxxl 48 · section 64). 화면 좌우 여백 32, 카드 사이 24. 본문 최대 폭 1400. 풀이 화면은 넓은 화면에서 **왼쪽 필기 40 : 오른쪽 결과·설명 60**로 나누고, 폭이 900보다 좁으면 위아래로 접는다. 종이는 줄 간격 32의 줄 종이이고, 펜 굵기는 1~10(기본 2.5), 확대는 1~3배. ## Elevation & Depth 깊이는 그림자보다 **색의 층**(크림 바탕 → 카드 → 한 단계 들어간 패널)으로 먼저 만든다. 그림자는 네 단계뿐이다. - **flat:** 종이 위. 그림자 없음. - **card (0 2px 8px rgba(30,24,17,0.08)):** 일반 카드. - **raised (0 6px 18px rgba(30,24,17,0.12)):** 누를 수 있는 카드, 떠 있는 도구줄. - **overlay (0 14px 40px rgba(30,24,17,0.18)):** 시트와 대화상자. ## Shapes 모서리는 둥글고 부드럽게, 작은 부품일수록 작게 굴린다. 칩·배지 8 · 버튼·입력칸 14 · 카드 20 · 시트·대화상자 28 · 동그란 버튼은 완전히 둥글게. ## Components - **Buttons:** 높이 52, 좌우 24, 모서리 14, 글자 bodyStrong. 종류는 primary(와인) · secondary(카드색+테두리) · ghost(글자만 와인) · danger(전체 지우기처럼 되돌릴 수 없는 일). 누름·비활성·로딩 상태는 아직 확정 전이다. - **Cards:** 모서리 20, 안쪽 여백 24, 테두리 outline, 그림자 card. 종류는 plain · feature(와인 그라데이션, 화면당 하나) · selectable(선택되면 와인 2px 테두리). 카드 크기를 모두 같게 두지 말고 중요한 카드는 넓게 섞는다. - **Toolbar (필기 도구줄):** 펜·지우개, 색 세 가지(펜·빨간펜·형광펜), 굵기 세 단계를 둥근 막대 하나에. 초안. - **아직 비어 있는 부품:** chip(과목·단원 같은 짧은 꼬리표), badge(새 항목·개수 표시), textField(검색·답안 타이핑 입력칸), listRow(과목 목록·기록 목록의 한 줄), tabs, dialog(전체 지우기 확인 같은 물음), sheet(아래에서 올라오는 패널), emptyState(아직 아무것도 없을 때 보여줄 화면), icon. 새 화면에서 이것들이 필요하면 임의로 모양을 지어내지 말고 가장 가까운 정의된 부품(button·card)의 토큰을 따르고, 디자인 확정이 필요하다고 표시한다. ## Do's and Don'ts - Do 와인(primary)은 한 화면에서 가장 중요한 행동 하나에만 쓴다. - Don't 화면 전체나 넓은 면을 와인으로 덮지 않는다. - Do 색·간격·글자 크기는 토큰 이름으로만 쓴다. 화면 코드에 hex나 임의 숫자를 직접 적지 않는다. - Do 본문 글자는 WCAG AA(4.5:1) 이상을 지킨다. - Don't 필기 중에는 애니메이션을 넣지 않는다. 펜이 밀리는 느낌이 나면 안 된다. - Don't 학생 손글씨의 눈금·비율 떨림을 틀림으로 표시하지 않는다. 학생이 적은 숫자가 의도다. - Don't 시스템 이모지를 아이콘으로 쓰지 않는다. 기기마다 다르게 보이고 브랜드가 없다. - Don't 중요한 조건(기간·단위·비교 대상)을 12~14px 작은 글씨로 숨기지 않는다. 작게 쓰는 건 출처 한 줄뿐이다. - Don't 필기 도구 색(펜·빨간펜·형광펜)을 버튼이나 배지 같은 UI에 쓰지 않는다.