# Foundations

LafLabs Web Design 2026.10.3. English rules are paired with focused Korean copy guidance.

## Accessibility (`accessibility`)

Verify keyboard access, contrast, names, and states together. / 키보드, 대비, 이름, 상태를 함께 확인합니다.

- Every action must work by keyboard and show a visible focus indicator. / 모든 동작 요소는 키보드로 쓸 수 있어야 하며 focus 표시가 보여야 합니다.
- Give icon controls and groups names that explain their purpose. / 아이콘 컨트롤과 그룹에는 용도를 알 수 있는 이름을 제공합니다.
- Keep a 44px target area on small screens. / 작은 화면의 조작 영역은 44px를 확보합니다.
- Communicate loading, empty, and error states in text. / loading, empty, error 상태를 글로도 알립니다.

## Factual claims (`claims`)

Publish only claims that can be verified. / 출처로 확인한 사실만 공개 문서에 씁니다.

- Mention customers, metrics, product status, or hiring only when a source verifies it. / 고객, 지표, 제품 상태, 채용 정보는 출처를 확인한 뒤에만 씁니다.
- Mark unverified material unavailable or omit it. / 확인하지 못한 내용은 unavailable로 표시하거나 문서에서 뺍니다.
- Never fill an empty surface with invented numbers or examples. / 빈 화면을 그럴듯한 수치나 사례로 채우지 않습니다.

## Color (`color`)

Use Paper and Ink by default, with Primary Blue as the sole accent. / Paper와 Ink를 기본으로 두고 Primary Blue만 강조색으로 씁니다.

- Reserve blue for key actions, selected states, and direction. / 파란색은 주요 동작, 선택 상태, 진행 방향에만 사용합니다.
- Route-era colors are legacy references, not defaults for new surfaces. / 이전 route 색상은 legacy 참고값이며 새 화면의 기본색으로 쓰지 않습니다.
- Never communicate state or meaning with color alone. / 상태나 의미를 색 하나로만 전달하지 않습니다.

## Iconography (`iconography`)

Use the Phosphor family consistently for new interface icons. / 새 인터페이스 아이콘은 Phosphor 한 세트로 맞춥니다.

- Choose a meaningful Phosphor icon instead of drawing decorative SVGs. / 장식용 SVG를 직접 그리지 말고 의미가 맞는 Phosphor 아이콘을 고릅니다.
- Give icon-only controls an accessible name. / 아이콘만 있는 컨트롤에는 접근성 이름을 제공합니다.
- Use the current 15px icon size inside a 34px compact control. / 34px compact control 안의 아이콘은 현재 기준인 15px로 맞춥니다.

## Brand identity (`identity`)

Keep the official logo shape and proportions intact. / 공식 로고의 형태와 비율을 그대로 유지합니다.

- Use the official PNG asset; do not crop or redraw it. / 공식 PNG 에셋을 사용하고 자르거나 다시 그리지 않습니다.
- Give the logo clear space and strong contrast against its surface. / 로고 둘레에 충분한 여백을 두고 바탕과 선명하게 구분합니다.
- Do not add shadows, outlines, or color effects to the logo. / 로고에 그림자, 윤곽선, 색 효과를 더하지 않습니다.

## Motion (`motion`)

Motion explains entry, progress, and state changes only. / 모션은 진입, 진행, 상태 변화만 설명합니다.

- The Segmented Control uses the shared spring at stiffness 520 and damping 38. / Segmented Control은 stiffness 520, damping 38의 공통 spring을 씁니다.
- Do not move layout position or padding on hover. / hover에서 레이아웃 위치나 padding을 움직이지 않습니다.
- Under prefers-reduced-motion, show the final state immediately. / prefers-reduced-motion에서는 최종 상태를 즉시 보여줍니다.

## Shape (`shape`)

Use zero-radius corners and one-pixel rules to reveal structure. / 0px 모서리와 1px 선으로 구조를 드러냅니다.

- Keep controls, surfaces, and indicators square. / 컨트롤, 면, 표시 요소는 사각형으로 만듭니다.
- Prefer surface contrast and rules to card shadows. / 카드 그림자보다 면의 대비와 선을 먼저 사용합니다.
- Use circles only when the product meaning requires one. / 원은 제품 의미가 분명할 때만 사용합니다.

## Spacing and layout (`spacing-layout`)

A 1280px shell and responsive gutter establish horizontal rhythm. / 1280px shell과 반응형 gutter로 수평 리듬을 맞춥니다.

- The current shell is min(1280px, calc(100% - 64px)). / 기본 shell은 min(1280px, calc(100% - 64px))입니다.
- Use --gutter for full-width sections instead of adding ad hoc inline space. / 전체 폭 구간은 --gutter를 사용하고 임의의 양쪽 여백을 더하지 않습니다.
- Stack complex layouts at 1080px and move to a one-column flow at 720px. / 1080px에서 복잡한 구성을 쌓고 720px에서 한 열 흐름으로 정리합니다.
- Keep generous vertical section space between 80px and 150px. / 구간 위아래에는 80px에서 150px 사이의 넉넉한 여백을 둡니다.

## Typography (`typography`)

Sans carries meaning; Mono carries compact system information. / Sans는 내용을, Mono는 짧은 시스템 정보를 맡습니다.

- Pair Geist Sans with Pretendard to balance Korean and Latin text. / Geist Sans에 Pretendard를 이어 한글과 영문 밀도를 맞춥니다.
- Keep large headings short and body measures easy to scan. / 큰 제목은 짧게 쓰고 본문 폭은 한눈에 읽을 수 있게 제한합니다.
- Do not introduce 9px text in new UI. / 새 UI에서 9px 글자를 사용하지 않습니다.
- Check Korean line breaks so phrases remain intact. / 한글 문장은 의미 단위가 깨지지 않도록 줄바꿈을 확인합니다.

## Voice (`voice`)

Write briefly and concretely while preserving technical terms. / 짧고 구체적으로 쓰며 기술 용어는 원형을 유지합니다.

- Do not expand an explanation when one sentence is enough. / 한 문장으로 충분한 설명은 늘리지 않습니다.
- Keep technical terms such as API and token, and preserve English identifiers. / API, token 같은 기술 용어와 영어 식별자는 그대로 둡니다.
- Keep Korean and English equivalent without forcing identical word order. / 한글과 영문은 같은 정보를 담되 문장 순서를 억지로 맞추지 않습니다.

## Official public assets

### Official logo (`official-logo`)

- URL: https://www.laflabs.co/laflabs-logo.png
- Format: PNG · 460 × 460 px
- Use: Use at its original proportions wherever the LafLabs logo is required on a public surface. / LafLabs 로고가 필요한 공개 화면에서 원본 비율로 사용합니다.

### System loop motion (`system-loop-mp4`)

- URL: https://www.laflabs.co/laf-system-loop.mp4
- Format: MP4 · 1080 × 1080 px
- Use: Use as the MP4 fallback source for the System loop. / System loop의 MP4 대체 소스로 사용합니다.

### System loop poster (`system-loop-poster`)

- URL: https://www.laflabs.co/laf-system-loop-poster.png
- Format: PNG · 1080 × 1080 px
- Use: Use as the poster before the System loop video plays or when it remains still. / System loop 영상이 재생되기 전이나 정지 상태일 때 표시합니다.

### System loop motion (`system-loop-webm`)

- URL: https://www.laflabs.co/laf-system-loop.webm
- Format: WebM · 1080 × 1080 px
- Use: Use as the WebM source for the System loop in supporting browsers. / 지원하는 브라우저에서 System loop의 WebM 소스로 사용합니다.

If an official asset is unavailable in the target project, report that limitation instead of recreating it.