SELVAS AI 디자인 시스템
AI 에이전트가 웹 개발 시 이 문서를 참조하여 일관된 UI를 구현한다.
색상 팔레트
Primary Colors
| 이름 | Hex | 용도 |
|---|
| SELVAS Green | #88C53D | 로고 심볼, 브랜드 강조. 로고 파일: selvas/brand/logo.svg |
| Primary Blue | #0066CC | CTA 버튼, 링크, 주요 강조 |
| Primary Dark | #004C99 | hover 상태, 헤더 배경 |
| Primary Light | #E6F0FF | 선택된 항목 배경, 알림 배경 |
Neutral Colors
| 이름 | Hex | 용도 |
|---|
| Black | #1A1A1A | 제목 텍스트 |
| Dark Gray | #333333 | 본문 텍스트 |
| Medium Gray | #666666 | 보조 텍스트, 캡션 |
| Light Gray | #999999 | 비활성 텍스트, 플레이스홀더 |
| Border Gray | #DDDDDD | 테두리, 구분선 |
| Background | #F5F5F5 | 섹션 배경 |
| White | #FFFFFF | 기본 배경 |
Semantic Colors
| 이름 | Hex | 용도 |
|---|
| Success | #198754 | 성공, 완료 |
| Warning | #FFC107 | 경고, 주의 |
| Danger | #DC3545 | 오류, 삭제 |
| Info | #0DCAF0 | 정보, 안내 |
타이포그래피
폰트 스택
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Noto Sans KR", "Malgun Gothic", sans-serif;
- 한국어: Noto Sans KR 또는 맑은 고딕
- 영문: 시스템 기본 sans-serif
크기 체계
| 레벨 | 크기 | 굵기 | 용도 |
|---|
| h1 | 2rem (32px) | 700 | 페이지 제목 |
| h2 | 1.5rem (24px) | 700 | 섹션 제목 |
| h3 | 1.25rem (20px) | 600 | 하위 제목 |
| body | 1rem (16px) | 400 | 본문 |
| small | 0.875rem (14px) | 400 | 캡션, 보조 텍스트 |
| caption | 0.75rem (12px) | 400 | 메타 정보 |
줄 높이
간격 (Spacing)
8px 단위 시스템:
| 토큰 | 크기 | 용도 |
|---|
| xs | 4px | 아이콘과 텍스트 사이 |
| sm | 8px | 인접 요소 간격 |
| md | 16px | 폼 필드 간격, 카드 내부 패딩 |
| lg | 24px | 섹션 내 그룹 간격 |
| xl | 32px | 섹션 간 간격 |
| 2xl | 48px | 주요 섹션 간 간격 |
| 3xl | 64px | 페이지 상하 여백 |
레이아웃
컨테이너
- 최대 너비:
1200px
- 좌우 패딩:
16px (모바일), 24px (태블릿), 32px (데스크톱)
그리드
- 12컬럼 그리드
- 거터:
24px
- 브레이크포인트:
- Mobile:
< 768px
- Tablet:
768px ~ 1024px
- Desktop:
≥ 1024px
모서리 둥글기 (Border Radius)
| 토큰 | 크기 | 용도 |
|---|
| none | 0 | 테이블, 구분선 |
| sm | 4px | 입력 필드, 뱃지 |
| md | 8px | 카드, 버튼 |
| lg | 12px | 모달, 드롭다운 |
| full | 9999px | 원형 아바타, 태그 |
그림자 (Shadow)
| 레벨 | 값 | 용도 |
|---|
| sm | 0 1px 2px rgba(0,0,0,0.05) | 버튼, 입력 필드 |
| md | 0 4px 6px rgba(0,0,0,0.07) | 카드, 드롭다운 |
| lg | 0 10px 15px rgba(0,0,0,0.1) | 모달, 플로팅 요소 |
CSS 변수 템플릿
웹 프로젝트에서 이 변수들을 :root에 선언하여 사용한다:
:root {
/* Primary */
--color-brand-green: #88C53D;
--color-primary: #0066CC;
--color-primary-dark: #004C99;
--color-primary-light: #E6F0FF;
/* Neutral */
--color-text: #333333;
--color-text-heading: #1A1A1A;
--color-text-secondary: #666666;
--color-text-disabled: #999999;
--color-border: #DDDDDD;
--color-bg: #F5F5F5;
--color-bg-white: #FFFFFF;
/* Semantic */
--color-success: #198754;
--color-warning: #FFC107;
--color-danger: #DC3545;
--color-info: #0DCAF0;
/* Typography */
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Noto Sans KR", "Malgun Gothic", sans-serif;
--font-size-base: 1rem;
--line-height-base: 1.6;
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Shadow */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
/* Layout */
--container-max: 1200px;
}