eomsangdonandClaude Opus 5
eb30b774f8
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록) - `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록 — 창끼리 공유하되 저장소에는 안 올리는 장부 - 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠) - graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
59 lines
3.4 KiB
Markdown
59 lines
3.4 KiB
Markdown
---
|
||
type: concept
|
||
status: stable
|
||
related_pages: ["[[ui_templates]]", "[[architecture/shared_resources]]"]
|
||
last_updated: 2026-07-19
|
||
source: docs/raw/verification/2026-07-19_verify_scrollbar_theme.md
|
||
---
|
||
|
||
# 디자인 시스템 (Design System)
|
||
|
||
임도설계 및 견적자동화 웹앱(Aislo)의 공통 비주얼 테마, 타이포그래피, 간격 규칙 및 CSS 변수 명세 요약입니다.
|
||
|
||
## 비주얼 테마
|
||
* **Theme & Tone**: confident enterprise tool + approachable consumer product.
|
||
* **비주얼 키워드**: Confident (Assured), Clean (Geometric), Sunlit Atmosphere (Gradient wash).
|
||
* **대표 그라디언트**: 연한 라벤더 분위기를 연출하기 위해 흰색-보라색-피치 그라디언트를 접목하여 맑은 느낌 제공.
|
||
|
||
## 핵심 색상 토큰 (Colors)
|
||
|
||
| CSS 변수명 | hex 값 | 역할 / 비주얼 우선도 |
|
||
|---|---|---|
|
||
| `--color-deep-iris` | `#26114a` | 딥 바이올렛 데코레이션 디테일 (CTA 단추로 사용 금지) |
|
||
| `--color-plum-velvet` | `#312749` | 대시보드 네비게이션 텍스트, 카드 타이틀, 보조 제목 |
|
||
| `--color-royal-amethyst` | `#3e0079` | 링크, 입력 필드 포커스 링, 하이라이트 아이콘 (가장 채도 높음) |
|
||
| `--color-mist-violet` | `#edecff` | 연한 라벤더 분위기를 내는 소프트 하이라이트/배경색 |
|
||
| `--color-canvas` | `#ffffff` | 기본 페이지 배경, 카드 배경, 활성 입력 필드 |
|
||
| `--color-paper` | `#f6f7fa` | 미세한 대비를 주는 테이블 줄무늬 교대 배경, 보조 카드 배경 |
|
||
| `--color-mist` | `#e6e2e3` | 외곽 얇은 헤어라인 테두리, 구분선 |
|
||
|
||
## 타이포그래피 (Typography)
|
||
|
||
* **Britti Sans (display/heading)**: 24–64px 크기에 적용하며 geometric(기하학적) 인상을 강조하기 위해 line-height는 항상 `1.0` 고정. (대체 폰트: Plus Jakarta Sans / General Sans)
|
||
* **Inter (UI/body)**: UI 라벨 및 본문 기본 폰트. 자간 및 행간을 compact하게 배치하여 고밀도(data-dense) 정보 인터페이스를 제공. (대체 폰트: Inter / IBM Plex Sans)
|
||
|
||
| 서체 역할 | 크기 | 행간(Line-Height) | CSS 변수명 |
|
||
|---|---|---|---|
|
||
| caption | 12px | 1.3 | `--text-caption` |
|
||
| body-sm | 14px | 1.4 | `--text-body-sm` |
|
||
| body | 16px | 1.5 | `--text-body` |
|
||
| subheading | 24px | 1.0 | `--text-subheading` |
|
||
| heading-sm | 32px | 1.0 | `--text-heading-sm` |
|
||
| heading | 40px | 1.0 | `--text-heading` |
|
||
|
||
## 레이아웃 및 둥근 테두리 (Radius & Spacing)
|
||
* **기본 단위**: `8px` 배수 간격 시스템 (`--spacing-8`, `--spacing-16` 등)
|
||
* **둥근 곡률 (Border-radius)**:
|
||
* 카드, 입력 상자, 버튼: `8px`
|
||
* 태그/필 상태(Pills): `1440px` (원형 캡슐 스타일)
|
||
|
||
|
||
## 전역 스크롤바 디자인 (Scrollbars)
|
||
* **브라우저 충돌 가드**: Chromium/WebKit 환경에서 표준과 충돌하지 않도록 `@supports selector(::-webkit-scrollbar)` 블록 내의 `*` 선택자에 `scrollbar-width: auto;`를 적용하여 스타일 오버라이드를 제어함. (B07 WebCAD iframe 내부 제외)
|
||
* **미니멀 디자인**:
|
||
* 스크롤바 폭/높이: 얇은 `8px` 두께 고정 (`width: 8px; height: 8px;`)
|
||
* 트랙 배경: 완전 투명(`transparent`)으로 UI 배경 이질감 최소화
|
||
* 화살표 버튼: 기본 이동 버튼 제거 (`display: none; width: 0; height: 0;`)
|
||
* 스크롤 썸(Thumb) 불투명도: 기본 12% -> hover 시 20% -> active 시 28%로 은은하게 반응 튜닝
|
||
|