# TDS 디자인 시스템

Mordy와 Morit이 함께 쓰는 디자인 규칙이다. 화면을 만드는 데 필요한 값(토큰)과 부품(컴포넌트)을 이름으로 정해 두었다. 서비스가 달라도 이름과 모양은 같고 색 값만 바뀐다.

## 서비스

| 서비스 | 설명 | 주색(라이트) | 값을 읽은 곳 |
| --- | --- | --- | --- |
| Mordy | 사진으로 찍은 학습 자료를 문제로 바꿔 복습하게 해 주는 앱 | `#1F7BFF` | Mordy/apps/mobile/src/ui/tokens.ts (React Native 토큰(tokens.ts)) |
| Morit | 메모, 파일, AI, 플러그인을 한곳에 모으는 개인 작업 앱 | `#00856A` | Moring_Morit/lib/core/morit_theme.dart (Flutter Material 3 ColorScheme) |

## 빠른 시작

1. 서비스를 정한다(mordy 또는 morit).
2. 토큰을 불러온다: `<link rel="stylesheet" href="https://developers.moring.co/tds/tokens.css">` 그리고 `<html data-tds-service="mordy">`. 값 전체는 https://developers.moring.co/tds/tokens.json.
3. 컴포넌트 목록(https://developers.moring.co/tds/components.md)에서 필요한 부품을 찾아 "사용 방법"의 코드를 쓴다. 코드와 속성 표는 앱(React Native, `@/ui/...`) 기준이다.
4. 사용 규칙(https://developers.moring.co/tds/guidelines.md)을 확인한다.

## 문서 목록

- [개요](https://developers.moring.co/tds.md): TDS가 무엇이고 어떻게 시작하는지
- [색상](https://developers.moring.co/tds/colors.md): 색상 토큰 전체와 서비스별 HEX 값, 글자 색 대비
- [글자](https://developers.moring.co/tds/typography.md): Pretendard, 글자 스타일 11종, 글자 크기 설정
- [간격](https://developers.moring.co/tds/spacing.md): 간격 9단계와 누르는 영역
- [모서리](https://developers.moring.co/tds/radius.md): 모서리 7단계
- [그림자](https://developers.moring.co/tds/elevation.md): 그림자 3단계와 다크 모드
- [모션](https://developers.moring.co/tds/motion.md): 시간, 곡선, 눌림, 진동
- [아이콘](https://developers.moring.co/tds/icons.md): Lucide 규칙과 아이콘 목록
- [컴포넌트](https://developers.moring.co/tds/components.md): 컴포넌트 문서 목록
- [사용 규칙](https://developers.moring.co/tds/guidelines.md): 번호가 붙은 사용 규칙
- [화면 전용 컴포넌트](https://developers.moring.co/tds/inventory.md): 공통 키트 밖 컴포넌트 전체 목록
- [AI용 파일](https://developers.moring.co/tds/for-ai.md): 기계가 읽는 파일 안내