Files

T

eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관

- `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>

2026-09-09 18:19:07 +09:00

3.4 KiB

Raw Blame History

type, status, related_pages, last_updated, source

type

status

related_pages

last_updated

source

concept

stable

ui_templates

architecture/shared_resources

2026-07-19

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

3.4 KiB Raw Blame History Unescape Escape