섹션 제목 (h2)
도입부 큰 문장(.pz-lead). 모델이 얼마나 똑똑한가보다 먼저, 무엇을 볼 수 있는가가 중요합니다.
일반 문단입니다. 링크는 토마토 색 밑줄로 표시되고, 인라인 code는 도우 색 배경을 씁니다.
하위 제목 (h3)
- 리스트 항목 하나
- 리스트 항목 둘
design system · living styleguide
pjy.pizza의 모든 페이지가 공유하는 단일 디자인 시스템입니다. 아래 토큰과 컴포넌트는 전부 /assets/pjy-theme.css?v=20260630-fullwidth 하나에서 옵니다. 문서: DESIGN-SYSTEM.md
tokens
피자집처럼 보이지 않으면서 오븐/크림/토마토/올리브 무드만 은은하게. 메인 액센트는 채도를 낮춘 페퍼로니 레드입니다.
tokens
제목은 serif, 본문은 sans, 라벨은 mono. 한글 헤드라인은 자간을 조여 밀도를 줍니다.
components
.pz-callout--accent.pz-callout--note.pz-callout--warncomponents
.pz-stat좌측 그라데이션 바가 있는 원칙 카드. .pz-principle
관찰 가능성과 무제한 권한은 다릅니다.
사람이 확인할 수 있는 흔적으로 남깁니다.
components
일반 카드. .pz-card
제목은 serif, 본문은 soft-ink.
번호가 자동으로 매겨지는 단계 카드. .pz-step
토마토 색 원형 번호.
components
components
| 표면 | 사람이 보는 것 | AI가 읽는 것 | 알림 원칙 |
|---|---|---|---|
| Slack | 스레드/채널 | 대화 맥락 | 행동 필요만 |
| Grafana | 대시보드 | LogQL/API | 실패·위험만 |
prose
<article class="pz-article pz-prose">로 감싸면 아래처럼 자동 스타일됩니다.
도입부 큰 문장(.pz-lead). 모델이 얼마나 똑똑한가보다 먼저, 무엇을 볼 수 있는가가 중요합니다.
일반 문단입니다. 링크는 토마토 색 밑줄로 표시되고, 인라인 code는 도우 색 배경을 씁니다.