---
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%로 은은하게 반응 튜닝