index

noteApp(가안) 디자인 시스템
회의용 · 확정안 아님 · Expo + NativeWind + react-native-reusables
라이트
다크
처음 값으로
이 설정 링크 복사
1. 테마 색
2. 컴포넌트
3. 내비게이션 · LNB
4. 캘린더
5. AI 채팅
6. 화면별 확인
7. 사용 시나리오
8. 코드 내보내기
시작 프리셋
눌러서 바로 비교. 이후 아래에서 세부 조정.
목업 기본
틸 + 주황
잉크 블루
차분한 업무용
포레스트
초록 + 따뜻한 회색
모노
검정 메인
라벤더
보라 + 코랄
메인 색 (primary)
주 버튼, 선택 상태, 링크, 포커스. 연한 면·글자색은 자동으로 만들어져요.
메인
rgb(11, 107, 138)
R
G
B
서브 색 (secondary)
녹음 중, 외부 캘린더 출처, 보조 강조. 메인과 확실히 다른 색이 좋아요.
서브
rgb(181, 71, 11)
R
G
B
배경 · 글자 톤
회색 계열
푸른 회색
따뜻한 회색
무채색
삭제 · 오류
rgb(209, 52, 58)
카드 4종 색
글자색 기준. 배경(연한 면)은 자동. 일정과 서브 색이 겹치지 않는지 보세요.
일정
rgb(168, 67, 10)
할 일
rgb(11, 93, 120)
사람
rgb(91, 53, 168)
아이디어
rgb(44, 110, 49)
모서리 · 글꼴
기준 모서리 (--radius)
14px
버튼 = 기준 - 4 · 카드 = 기준 · 큰 카드 = 기준 + 4 · 시트 = 기준 + 10
글꼴
Pretendard
Noto Sans KR
시스템 기본
SIL OFL 1.1 · 한국어 UI용으로 많이 씀
세부 토큰 직접 고치기
지금 미리보기 모드(라이트) 값만 바뀌어요. 고친 값 0개.
펼치기
미리보기
왼쪽에서 바꾼 값이 바로 반영돼요. 라이트와 다크를 나란히 비교.
홈
오늘 카드
빠른 입력
AI 채팅
세션
편집기
라이트
서
토요일
10월 24일
AI 추천
오늘 녹음 1개, 메모 5개, 일정 3개가 있어요. 업무일지 초안을 만들어 볼까요?
오늘 일정
10:00
자료구조 수업
노트: 자료구조 7주차
15:00
팀 회의
Google 캘린더
23:59
과제 마감
D-7
노트: 자료구조 7주차
최근 문서
업무일지 10/24
가을 카페 투어 3곳
홈
카드
피드
검색
다크 (자동 계산)
서
토요일
10월 24일
AI 추천
오늘 녹음 1개, 메모 5개, 일정 3개가 있어요. 업무일지 초안을 만들어 볼까요?
오늘 일정
10:00
자료구조 수업
노트: 자료구조 7주차
15:00
팀 회의
Google 캘린더
23:59
과제 마감
D-7
노트: 자료구조 7주차
최근 문서
업무일지 10/24
가을 카페 투어 3곳
홈
카드
피드
검색
글자 크기 · 모서리 · 버튼
28 · bold
화면 제목 오늘 회의 카드 3장
18 · bold
소제목 오늘 회의 카드 3장
15 · bold
카드 제목 오늘 회의 카드 3장
15 · regular
본문 오늘 회의 카드 3장
14 · muted
보조 글 오늘 회의 카드 3장
12 · muted
메타 · 칩 오늘 회의 카드 3장
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
대비 검사
글자가 배경 위에서 잘 읽히는지 WCAG 기준으로 계산
라이트
가Aa
기본 글자 / 배경
17.67
AAA
가Aa
보조 글자 / 배경
5.87
AA
가Aa
보조 글자 / 회색 면
5.36
AA
가Aa
주 버튼 글자 / 메인
6.03
AA
가Aa
메인 글자(링크) / 배경
6.03
AA
가Aa
배너 글자 / 메인 연한 면
6.20
AA
가Aa
서브 위 글자 / 서브
5.43
AA
가Aa
서브 글자 / 배경
5.43
AA
가Aa
일정 칩
5.20
AA
가Aa
할 일 칩
6.32
AA
가Aa
사람 칩
7.10
AAA
가Aa
아이디어 칩
5.40
AA
가Aa
내 말풍선
6.03
AA
가Aa
AI 강조 글자 / 배경
6.03
AA
본문은 4.5 이상(AA), 18px 이상 굵은 글자는 3 이상이면 통과. 칩처럼 작은 글자는 4.5를 목표로.
다크
가Aa
기본 글자 / 배경
15.72
AAA
가Aa
보조 글자 / 배경
7.53
AAA
가Aa
보조 글자 / 회색 면
6.47
AA
가Aa
주 버튼 글자 / 메인
5.61
AA
가Aa
메인 글자(링크) / 배경
5.88
AA
가Aa
배너 글자 / 메인 연한 면
8.48
AAA
가Aa
서브 위 글자 / 서브
5.83
AA
가Aa
서브 글자 / 배경
6.12
AA
가Aa
일정 칩
6.75
AA
가Aa
할 일 칩
6.57
AA
가Aa
사람 칩
6.44
AA
가Aa
아이디어 칩
6.81
AA
가Aa
내 말풍선
5.61
AA
가Aa
AI 강조 글자 / 배경
5.88
AA
본문은 4.5 이상(AA), 18px 이상 굵은 글자는 3 이상이면 통과. 칩처럼 작은 글자는 4.5를 목표로.
전체 토큰 (라이트)
global.css 변수와 같은 이름. 코드 내보내기 탭에서 그대로 복사할 수 있어요.
기본 (react-native-reusables 호환)
화면 배경
#ffffff
기본 글자
#15191d
카드 배경
#ffffff
카드 글자
#15191d
팝업 배경
#ffffff
팝업 글자
#15191d
메인 색
#0b6b8a
메인 위 글자
#ffffff
서브 색
#b5470b
서브 위 글자
#ffffff
회색 면
#f3f5f6
보조 글자
#5b6670
눌림·호버 면
#e4eff2
눌림·호버 글자
#0a5e79
삭제·오류
#d1343a
삭제 위 글자
#ffffff
테두리
#e3e7ea
입력창 테두리
#d5dbe0
포커스 링
#0b6b8a
앱 전용: 연한 색
메인 연한 면
#e4eff2
메인 연한 면 글자
#0a5e79
서브 연한 면
#f7ebe4
서브 연한 면 글자
#9f3e0a
앱 전용: 카드 4종
일정 글자
#a8430a
일정 배경
#f6ece7
할 일 글자
#0b5d78
할 일 배경
#e7eff2
사람 글자
#5b35a8
사람 배경
#efebf6
아이디어 글자
#2c6e31
아이디어 배경
#eaf1ea
AI 채팅
AI 강조색
#0b6b8a
AI 강조 위 글자
#ffffff
AI 연한 면
#e4eff2
내 말풍선
#0b6b8a
내 말풍선 글자
#ffffff
AI 말풍선
#e4eff2
AI 말풍선 글자
#15191d
AI 말풍선 테두리
#e4eff2
캘린더: 연결한 계정 색
계정 1 색 (예: 회사)
#245ab8
계정 1 일정 면
#e9eff8
계정 2 색 (예: 개인)
#a3366b
계정 2 일정 면
#f6ebf0