컴포넌트 갤러리 ⋅ 문서를 이루는 작은 규칙

어두운 바탕과 두 단계의 표면 위에서 밝은 글자를 읽는다. 파스텔 면은 중요한 조건이나 관련 내용을 본문 가까이 묶을 때 사용한다.

색상은 Figma Dark 프리뷰다크 프리뷰의 색상 토큰getdesign.md의 독립 분석에서 확인한 어두운 바탕, 밝은 글자와 파스텔 표면을 사용한다. Figma가 배포한 공식 토큰은 아니다.를 기준으로 한다. 면의 밝기 차이와 얇은 경계로 본문과 패널을 구분한다.

제목, 본문, 보조 정보는 크기와 명도만으로 구분한다. 본문은 충분한 줄높이를 유지하고, 작은 영문 레이블은 글자 사이를 벌려 본문과 다른 역할임을 드러낸다.

작은 면에는 낮은 곡률을, 큰 콘텐츠 패널에는 24px을 쓴다. 버튼과 탭은 양끝이 둥근 형태로 표시하고, 아이콘 버튼은 원으로 표시한다.

한 화면에서 가장 중요한 행동 하나만 흰색으로 채운다. 보조 행동은 어두운 면과 경계선으로 표현하고 아직 쓸 수 없는 행동은 명도를 낮춘다.

외부 링크는 서비스 이름과 함께 표시한다. 독자는 주소를 열기 전에 어디로 이동하는지 알 수 있다.

2026-10-04에 확인한 공개 PR의 상태다. 각 링크에서 실제 제목과 작성자를 확인할 수 있다.

파일 이름과 언어를 먼저 보여주고 문법을 구분한다. 여러 예시는 탭으로 묶되, 각 탭만 읽어도 목적을 이해할 수 있게 작성한다.

import { Timeline } from "@/components/timeline";export const ProjectMilestones = () => (  <Timeline    initialStep={2}    interactive    items={[      { id: "prepare", title: "준비", content: "질문을 정한다." },      { id: "compose", title: "구성", content: "근거를 배치한다." },      { id: "verify", title: "검증", content: "화면을 확인한다." },    ]}  />);

코드와 인라인 식별자는 D2Coding으로 표시한다. TypeScript 예시에는 강조, 추가, 삭제, 경고, 오류의 줄 표시를 함께 담았다. 본문 속initialStep은 같은 글꼴을 사용한다.

현재 단계의 앞뒤 맥락이 중요할 때 타임라인을 쓴다. 이전 단계와 다음 단계 버튼으로 상태를 바꾸며 완료, 진행 중, 예정의 차이를 확인할 수 있다.