이것은 원본 붙여넣기로, 출처 기록을 위해 보관됩니다. 실제 작업 복사본이 아닙니다.
권위 있는 시스템은
docs/pixel-portfolio-style/에 있으며, 네 개의 참조 파일과assets/base.css가 있습니다. 해당 파일을 읽으세요.이 파일은 빌드가 의존하는 두 가지 추가 사항보다 먼저 작성되었습니다: 규칙 #0 (시스템을 적용하되 작동 중이고 테스트된 앱을 절대 다시 작성하지 않음 — 전체 리스타일을 결정한 규칙) 및 규칙 #9 그리고
references/rtl-and-locales.md포인터. 대신 이 복사본을 따르면 둘 다 놓치게 됩니다.
픽셀 포트폴리오 스타일
완전한 시각 + 모션 시스템. 문자 그대로 따르세요. 여기에 다루지 않은 내용은 더 조용하고, 더 둥글고, 더 기하학적인 옵션을 선택하세요 — 절대 새로운 색상, 새로운 폰트, 새로운 반경 또는 새로운 이징 곡선을 도입하지 마세요.
절대 규칙 (매번 읽을 것)
- 폰트는 두 개만. 섹션 제목 + 히어로 워드용 픽셀 디스플레이 폰트. 나머지 모든 것은 기하학적 산세리프.
- 포인트 색상은 하나만. 파란색
#0B8DF8. 보조 버튼용 검은색#111. 그 외 없음. - 모든 섹션 제목은: 대문자 픽셀 폰트 + 손으로 그린 구불구불한 SVG 밑줄, 가운데 정렬.
- 모든 섹션은 동일한 블러 업 전환(blur-up transition)으로 스크롤에 따라 나타납니다 (
references/motion.md참조). - 반경은 알약 모양 또는 20px. 4px 또는 8px 또는 날카로운 모서리는 절대 안 됨 (톱니 구분선 제외).
- 테두리 없음. 구분은
#F2F2F2채우기와 부드러운 그림자에서 비롯되며, 1px 선에서 비롯되지 않음. - 가운데 정렬, 최대 1080px 콘텐츠 열. 넉넉한 수직 리듬 (섹션 간 120–160px).
- 복사본은 소문자 친화적이고 자기비하적/인간적이어야 하며, 절대 기업체 스타일이 아니어야 함. 짧은 문장.
새 항목 추가 시 작업 흐름
references/design-tokens.md읽기 → CSS 변수 사용, 절대 원시 hex 사용 금지.references/components.md읽기 → 해당 항목이 이미 패턴으로 존재하는지 확인 (알약, 태그, 카드, 섹션 헤더, 마키, 캐러셀, 폼 필드). 재사용하세요. 두 번째 카드 스타일을 발명하지 마세요.references/motion.md읽기 → 표준 리빌 + 호버 동작을 첨부하세요.- 완전히 새로운 섹션인 경우
references/section-recipes.md를 읽고 "새 섹션 템플릿"을 정확히 따르세요 (간격, 헤더, 리빌, 컨테이너). - 섹션 배경을
--bg/--bg-hero로 교대하세요. 인접한 두 섹션의 배경이 다른 경우, 그 사이에 톱니 구분선을 넣으세요 (절대 직선 금지). - 해당 섹션이 최상위 대상인 경우에만 내비게이션 알약 링크에 섹션 id를 등록하세요 (최대 4개의 내비게이션 링크; 5번째를 추가하는 경우 사용자에게 어떤 것을 버릴지 물어보세요).
- 새 이미지 슬롯을
assets/IMAGES.md에 필요한 정확한 종횡비와 함께 추가하여, 사용자가 무엇을 제공해야 하는지 알 수 있도록 하세요.
완료 전 자체 점검
- 모든 새 제목이 픽셀 폰트 + 구불구불한 밑줄을 사용합니까?
- 토큰 목록에 없는 16진수 코드가 있습니까? 제거하세요.
-
999px또는20px/16px/14px가 아닌 반경이 있습니까? 수정하세요. - 새 블록이
blur(10px) → 0및y: 30px → 0으로 페이드 인됩니까? - 호버 상태가
scale(1.03)+ 그림자 상승 +250ms를 사용합니까? - 모바일:
references/components.md의 모바일 규칙에 따라 팬/캐러셀/그리드가 축소됩니까? - 섹션 수직 패딩을
clamp(80px, 10vw, 160px)으로 유지했습니까?
참조 파일
| 파일 | 언제 읽을 것인가 |
|---|---|
references/design-tokens.md | 항상 — 색상, 타입 스케일, 간격, 그림자, 폰트 |
references/components.md | UI 요소 구축 시 (내비게이션, 카드, 태그, 폼, 마키, 캐러셀, 구분선) |
references/motion.md | 모든 애니메이션, 리빌, 호버 또는 페이지 로드 코레오그래피 |
references/section-recipes.md | 완전히 새로운 섹션 또는 페이지 추가 시 |
assets/base.css | 모든 토큰 + 프리미티브가 이미 구현된 드롭인 스타일시트 |
assets/IMAGES.md | 사이트에 필요한 이미지와 그 비율 |