Layout

레이아웃 규율 — 여백, 단일 정렬축, 조형성, breakpoints.

여백이 완성도 — "여백이 완성도"

• 마케팅 섹션 간: 64–96px vertical
• 인앱 섹션 간: 32–48px vertical
• 로고 주변: 가능한 최대 clear space. 로고는 종이 위에 찍힌 도장처럼.
• 카드 내부 padding: 16–24px (shadcn default)
• 노트 리스트 아이템 간: 12–16px

단일 정렬축 규칙

각 섹션은 하나의 baseline에 정렬 — 좌측 또는 중앙. 다중 경쟁 축 금지.

보이는 라인이 여러 개로 분산되지 않도록 하나의 기준선으로 맞출 것.

조형성과 직선성 (Structural Formality)

Tiro 레이아웃은 직교 구조와 기하학적 질서를 강조합니다.

• Orthogonal composition only — 대각선 텍스트, 회전 카드, 기울어진 컨테이너 금지
• No scattered placement — 모든 요소는 명확한 grid 셀/컬럼에 속해야 함
• Rectilinear shapes — 카드·이미지·패널·컨테이너는 일관된 corner radius의 사각형. 원은 Avatar와 status dot만. 유기적 형태·blob 금지.
• Column discipline — 1, 2, 3 컬럼. 비대칭/아트 디렉티드 레이아웃 금지. "창의적으로 느껴지면" 이미 too scattered.
• Vertical rhythm > visual interest — 섹션이 예측 가능한 metronomic 리듬으로 쌓임. 시각적 흥미는 콘텐츠 (사진, 데이터 밀도)에서 오고, 레이아웃 변덕에서 오지 않음.

Palette Restraint

• 대부분의 UI surface는 Stone 뉴트럴만 사용 (stone-50stone-200 bg, stone-500stone-800 text).
• Tironian Brown은 의도된 브랜드 모멘트에만 — CTA, 로고, hero, active sidebar item.
• Brown-30~brown-300은 subtle tint (selected row, AI 채팅 bubble, suggestion pill) — 주 surface color로 금지.
• 화면이 "too brown"으로 느껴지면, 그렇다. Stone으로 돌아가고 brown을 구두점처럼.

Grid & Container

• Marketing web: max-width 1200px, centered. Hero는 full-viewport bg + centered content. Features는 2–3 컬럼 안쪽.
• Desktop app (Electron): 3-panel (240 + flex + 320). 사이드바 collapsible → icon-only.
• Mobile: 단일 컬럼, full-width, 녹음은 bottom sheet.

Breakpoints (Web / Marketing)

Desktop 앱은 3-panel 고정 — 동일한 의미의 responsive 아님.

Depth through Color

• 섹션 교차: stone-50 ↔ stone-100 — 그림자 없이 리듬
• 브랜드 다크 섹션: brown-800 + white — 대비로 깊이
• 스톡 포토그래피가 플랫 UI의 비움 보완

Do / Don't

• Do: 단일 정렬축 per region
• Do: 1/2/3 컬럼 disciplined grid
• Do: 여백을 과감히 — premium 느낌의 근원
• Don't: 대각선·회전·기울어진 요소 금지
• Don't: asymmetric 자유 배치 레이아웃 금지
• Don't: 원형/유기적 형태 (avatar, dot 제외) 금지
• Don't: brown을 dominant surface color로 사용 금지