byteTuto 디자인 시스템
컨셉: ▶_ — 동영상의 재생 버튼이 터미널 프롬프트로 변하는 모습.
시그니처: "테크를 배우다, 한 바이트씩."
이름은 항상 byteTuto로 표기합니다 (본문에서 Bytetuto, ByteTuto, BYTETUTO 사용 금지).
색상 (토큰)
| 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | 페이지 배경 |
| surface-raised | #FFFFFF | #171B22 | 카드, 코드 블록 |
| ink | #0E1116 | #F2F1EC | 본문 텍스트 |
| ink-muted | #565B66 | #A3A8B3 | 보조 텍스트 |
| line | #DDDBD2 | #2A2F38 | 선, 점 패턴 |
| byte | #B8F03C | #B8F03C | 시그니처 초록: 타일, 주요 버튼, 면색 |
| byte-ink | #3B6B00 | #B8F03C | 텍스트로 사용될 때의 초록색 |
| byte-tint | #E9F9C8 | #24300F | 연한 배경, 배지 |
| on-byte | #0E1116 | #0E1116 | byte 또는 spark 위에 올라가는 텍스트 |
| spark | #FF5A1F | #FF6B33 | 드문 강조색: 화면당 단 하나의 요소 |
| tile | #0E1116 | #1E232C | 어두운 면색, 배너 |
| danger | #C4320A | #FF7A5C | 오류 전용 |
규칙:
- 밝은 배경에
byte(#B8F03C)를 텍스트로 사용하지 마세요 →byte-ink를 사용하세요. byte또는spark위에 흰색 텍스트를 사용하지 마세요 →on-byte를 사용하세요.- 로고에 그라데이션이나 그림자를 사용하지 마세요. "네온" 효과는 애니메이션 장식이며 로고가 아닙니다.
- 텍스트/배경 명암비는 4.5:1 이상이어야 합니다.
타이포그래피 (Google Fonts)
- Space Grotesk 700 (제목, 자간 고정 −0.02em ~ −0.03em)
- IBM Plex Sans 400/600 (본문)
- JetBrains Mono 500 (코드, 명령어, 터미널 스타일의 작은 레이블)
형태
모서리 반경: 6px (배지), 12px (버튼, 카드), 24px (큰 블록, 로고 타일 = 너비의 23%).
고유 패턴: 어두운 배경에 line 색상의 점 패턴, 가장자리를 넘어서는 byte/spark 블록.
로고
로고타입은 글꼴이 아닌 그림입니다 (9단위의 단일 선으로 된 둥근 끝 처리). 텍스트로 다시 입력하지 마세요.
경로는 site/index.html (SVG .logo)에 있습니다. 어두운 배경에서는 "byte"를 #F2F1EC, "Tuto"를 #B8F03C로 표시합니다.
심볼 단독: site/favicon.svg.
톤
반말을 사용하고, 짧은 문장, 행동 동사를 사용합니다. 설명하기 전에 먼저 보여줍니다. 설명하지 않은 전문 용어나 과장된 약속을 하지 않습니다. 예시: "Node를 2분 만에 설치하는 방법", "나를 4시간 동안 괴롭힌 버그".
접근성
모든 새로운 애니메이션에 대해 prefers-reduced-motion을 준수하세요. 포커스 표시(테두리 byte 색상)를 유지하세요.