Foundations | LafLabs Web Design

브랜드 아이덴티티

공식 로고의 형태와 비율을 그대로 유지합니다.

PNG / 460 × 460 px

로고 둘레에 충분한 여백을 두고 바탕과 선명하게 구분합니다.

공식 PNG 에셋을 사용하고 자르거나 다시 그리지 않습니다.
로고 둘레에 충분한 여백을 두고 바탕과 선명하게 구분합니다.
로고에 그림자, 윤곽선, 색 효과를 더하지 않습니다.

컬러

Paper와 Ink를 기본으로 두고 Primary Blue만 강조색으로 씁니다.

color.primary

#2563EB--blue

주요 동작과 선택 상태, 구조를 표시하는 기본 강조색입니다.

넓은 파란 면에는 흰색을 쓰고 작은 글자에는 대비를 다시 확인합니다.

color.primary-deep

#1E40AF--deep

Primary Blue 동작의 hover와 pressed 상태에 씁니다.

흰색 텍스트와 함께 사용합니다.

color.paper

#F8FAFC--paper

페이지와 기본 컨트롤의 바탕색입니다.

본문은 Ink, 보조 설명은 Muted를 사용합니다.

color.ink

#0F172A--ink

기본 텍스트와 선, 어두운 대비 구간에 씁니다.

Paper 위에서는 텍스트와 선에 쓰고 넓은 면에서는 흰색을 올립니다.

color.muted

#64748B--muted

보조 설명과 덜 중요한 메타데이터에 씁니다.

작은 글자나 어두운 바탕에는 사용하지 않습니다.

color.line

#CBD5E1--line

눈에 덜 띄는 구분선과 비활성 외곽선에 씁니다.

정보를 색이나 선만으로 구분하지 않습니다.

color.info

#0EA5E9--info

정보 상태에만 씁니다.

color.success

#10B981--success

완료와 성공 상태에만 씁니다.

color.warning

#F59E0B--warning

주의가 필요한 상태에만 씁니다.

color.error

#EF4444--error

오류와 위험 상태에만 씁니다.

color.error-deep

#B91C1C--error-deep

흰색 전경이 필요한 파괴적 동작의 배경색입니다.

color.slate-soft

#94A3B8

어두운 대비 구간의 메타데이터에 씁니다.

color.slate-detail

#475569

밝은 바탕의 작은 편집 정보에 씁니다.

color.blue-pale

#DBEAFE

큰 비활성 마크와 파란 면의 보조 텍스트에 씁니다.

color.blue-light

#60A5FA

어두운 대비 구간에서 짧은 강조에 씁니다.

color.pure-white

#FFF--pure-white

Ink, Primary Blue, Error Deep 위의 전경색입니다.

파란색은 주요 동작, 선택 상태, 진행 방향에만 사용합니다.
이전 route 색상은 legacy 참고값이며 새 화면의 기본색으로 쓰지 않습니다.
상태나 의미를 색 하나로만 전달하지 않습니다.

타이포그래피

Sans는 내용을, Mono는 짧은 시스템 정보를 맡습니다.

typography.family-sansGeist Sans, Pretendard, sans-serif

제목과 본문에 쓰는 기본 글꼴 묶음입니다.

타이포그래피

typography.family-monoGeist Mono, monospace

상태, 인덱스, 기술 메타데이터에만 씁니다.

타이포그래피

typography.homepage-heroclamp(64px, 6.2vw, 80px)

홈페이지 핵심 문장에 씁니다. weight 780, line-height 0.98, tracking -0.04em입니다.

타이포그래피

typography.company-statementclamp(52px, 5.6vw, 72px)

어두운 회사 소개 구간에 씁니다. weight 700, line-height 1.04, tracking -0.04em입니다.

타이포그래피

typography.section-headingclamp(44px, 4.5vw, 60px)

주요 구간 제목에 씁니다. weight 720, line-height 1.06, tracking -0.04em입니다.

타이포그래피

typography.method-markclamp(88px, 10.5vw, 154px)

ASK, BUILD, RUN 그래픽 문자에만 씁니다. weight 850, line-height 0.75입니다.

타이포그래피

typography.hero-field-markclamp(116px, 14vw, 210px)

홈페이지 hero 영역의 큰 필드 마크에만 씁니다. weight 850, line-height 0.75입니다.

타이포그래피

typography.panel-titleclamp(27px, 2.5vw, 36px)

경계가 있는 모듈의 제목에 씁니다. weight 710, line-height 1.08입니다.

타이포그래피

typography.work-titleclamp(32px, 3.4vw, 44px)

선택한 작업의 제목에 씁니다. weight 720, line-height 1입니다.

타이포그래피

typography.search-inputclamp(42px, 4.5vw, 64px)

검색 overlay 입력에 씁니다. weight 760, line-height 1입니다.

타이포그래피

typography.search-resultclamp(20px, 1.8vw, 26px)

검색 결과 제목에 씁니다. weight 720, line-height 1.12입니다.

타이포그래피

typography.compact-title22px

작은 목록과 저장소 제목에 씁니다. weight 700입니다.

타이포그래피

typography.mono-label10–11px

인덱스, 메타데이터, 상태, 짧은 내비게이션 label에 씁니다.

타이포그래피

typography.body-default16px

기본 본문 크기입니다. 문맥에 따라 14px에서 17px 사이를 사용합니다.

타이포그래피

typography.mobile-homepage-heroclamp(40px, 11.6vw, 48px)

작은 화면의 홈페이지 핵심 문장에 씁니다.

타이포그래피

typography.mobile-companyclamp(36px, 10.8vw, 44px)

작은 화면의 회사 소개 문장에 씁니다.

타이포그래피

typography.mobile-sectionclamp(32px, 9.6vw, 40px)

작은 화면의 주요 구간 제목에 씁니다.

타이포그래피

typography.mobile-method-markclamp(94px, 33vw, 136px)

작은 화면의 ASK, BUILD, RUN 마크에 씁니다.

타이포그래피

typography.mobile-search-inputclamp(30px, 9vw, 38px)

작은 화면의 검색 입력에 씁니다.

타이포그래피

typography.mobile-search-resultclamp(18px, 5.6vw, 22px)

작은 화면의 검색 결과 제목에 씁니다.

타이포그래피

Geist Sans에 Pretendard를 이어 한글과 영문 밀도를 맞춥니다.
큰 제목은 짧게 쓰고 본문 폭은 한눈에 읽을 수 있게 제한합니다.
새 UI에서 9px 글자를 사용하지 않습니다.
한글 문장은 의미 단위가 깨지지 않도록 줄바꿈을 확인합니다.

간격과 레이아웃

1280px shell과 반응형 gutter로 수평 리듬을 맞춥니다.

spacing.section-vertical: 80px–150px; 콘텐츠 양과 화면 폭에 따라 구간 위아래 여백을 조절합니다.
layout.shell: min(1280px, calc(100% - 64px))--shell; 현재 공개 화면의 최대 콘텐츠 폭과 양쪽 여백을 정합니다.
layout.gutter: max(32px, calc((100vw - 1280px) / 2))--gutter; 전체 폭 구간의 반응형 양쪽 여백입니다.
layout.breakpoint-stack: 1080px; 복잡한 데스크톱 구성을 쌓기 시작하는 기준입니다.
layout.breakpoint-mobile: 720px; 탐색과 다단 구성을 한 열로 바꾸는 작은 화면 기준입니다.
layout.compact-control: 34px; 데스크톱의 언어 선택과 아이콘 Button에 쓰는 시각 크기입니다.

기본 shell은 min(1280px, calc(100% - 64px))입니다.
전체 폭 구간은 --gutter를 사용하고 임의의 양쪽 여백을 더하지 않습니다.
1080px에서 복잡한 구성을 쌓고 720px에서 한 열 흐름으로 정리합니다.
구간 위아래에는 80px에서 150px 사이의 넉넉한 여백을 둡니다.

형태

0px 모서리와 1px 선으로 구조를 드러냅니다.

shape.radius: 0px; 컨트롤, 면, 표시 요소의 기본 모서리 값입니다.
shape.rule: 1px; 구간과 목록, 컨트롤을 나누는 기본 선 두께입니다.

컨트롤, 면, 표시 요소는 사각형으로 만듭니다.
카드 그림자보다 면의 대비와 선을 먼저 사용합니다.
원은 제품 의미가 분명할 때만 사용합니다.

아이콘

새 인터페이스 아이콘은 Phosphor 한 세트로 맞춥니다.

장식용 SVG를 직접 그리지 말고 의미가 맞는 Phosphor 아이콘을 고릅니다.
아이콘만 있는 컨트롤에는 접근성 이름을 제공합니다.
34px compact control 안의 아이콘은 현재 기준인 15px로 맞춥니다.

모션

모션은 진입, 진행, 상태 변화만 설명합니다.

motion.segmented-control: spring(stiffness: 520, damping: 38); Segmented Control의 선택 표시가 이동할 때 쓰는 공통 spring입니다.
motion.reduced: 0ms; reduced motion 환경에서는 상태 전환을 즉시 끝냅니다.

Segmented Control은 stiffness 520, damping 38의 공통 spring을 씁니다.
hover에서 레이아웃 위치나 padding을 움직이지 않습니다.
prefers-reduced-motion에서는 최종 상태를 즉시 보여줍니다.

접근성

키보드, 대비, 이름, 상태를 함께 확인합니다.

모든 동작 요소는 키보드로 쓸 수 있어야 하며 focus 표시가 보여야 합니다.
아이콘 컨트롤과 그룹에는 용도를 알 수 있는 이름을 제공합니다.
작은 화면의 조작 영역은 44px를 확보합니다.
loading, empty, error 상태를 글로도 알립니다.

문장과 말투

짧고 구체적으로 쓰며 기술 용어는 원형을 유지합니다.

한 문장으로 충분한 설명은 늘리지 않습니다.
API, token 같은 기술 용어와 영어 식별자는 그대로 둡니다.
한글과 영문은 같은 정보를 담되 문장 순서를 억지로 맞추지 않습니다.

사실과 주장

출처로 확인한 사실만 공개 문서에 씁니다.

고객, 지표, 제품 상태, 채용 정보는 출처를 확인한 뒤에만 씁니다.
확인하지 못한 내용은 unavailable로 표시하거나 문서에서 뺍니다.
빈 화면을 그럴듯한 수치나 사례로 채우지 않습니다.

브랜드 아이덴티티

컬러

타이포그래피

간격과 레이아웃

형태

아이콘

모션

접근성

문장과 말투

사실과 주장

분석 쿠키를 선택해 주세요