원칙

• 하나의 좁은 단(max-w-prose)에 모든 내용을 담습니다.
• 카드, 배지, 그림자, 아이콘 대신 글과 여백으로 구분합니다.
• 이동은 파란 글자 링크로, 동작은 파란 테두리 버튼으로 합니다.
• 관련된 버튼과 메뉴는 하나의 버튼 묶음으로 붙여 둡니다.
• 버튼은 PlainButton, PillItem, TextButton 세 가지뿐이고 글자 크기는 모두 text-sm 하나입니다.
• 부가 정보는 회색으로 한 줄에 모아 · 로 나눕니다.
• 목록의 줄은 제목으로 시작하고, 부가 정보는 그 아래 줄에 둡니다.
• 날짜는 오늘, 어제, 9월 24일처럼 말로 쓰고, 같은 날의 항목이 많으면 날짜 머리글 아래 모읍니다.

글자

글꼴은 Inter와 시스템 한글 글꼴을 씁니다.

색

• 본문 기본 글자색
• 보조 text-neutral-500
• 링크 text-blue-500
• 강조 hover:bg-blue-300
• 위험 text-red-500

배경은 밝은 테마에서 흰색, 어두운 테마에서 검은색입니다.

로고

typo blue

링크

버튼

버튼, 버튼 묶음, 글자 버튼은 모두 text-sm 크기이고, 쓰는 곳에서 크기를 바꿀 수 없습니다. 크기를 넘기거나 컴포넌트 대신 button, input type="submit"을 직접 쓰면 린트(pnpm lint)가 막습니다. 아이콘만 있는 편집기 도구 버튼은 예외입니다.

버튼 묶음

메뉴, 머리글, 글 작업, 달력, 정렬처럼 함께 쓰는 버튼을 묶습니다. 선택된 칸은 파랗게 채우고, 길어지면 줄을 바꾸지 않고 옆으로 넘깁니다.

입력란

날짜

• 오늘 07:06 · 9월 28일 월

  오늘

• 어제 07:06 · 9월 27일 일

  어제

• 9월 24일 14:05 · 9월 24일 목

  올해

• 2024년 3월 14일 14:05 · 2024년 3월 14일 목

  지난해 이전

날짜는 서울 기준으로 셉니다. 올해가 아니면 연도를 붙이고, 요일은 머리글과 글 페이지에만, 시각은 글 페이지, 내 글 목록, 알림처럼 필요한 곳에만 붙입니다. 오늘과 어제는 목록에만 쓰고, 주소가 남는 글 페이지에는 쓰지 않습니다.

날짜별 목록

하루에 여러 항목이 쌓이는 목록에 씁니다. 최근 7일은 날짜로, 그보다 오래된 항목은 달로 묶어 머리글이 항목마다 하나씩 생기지 않게 합니다. 머리글이 날짜를 말하므로 각 줄은 제목으로 시작하고, 블로그 이름은 제목 바로 뒤에 회색으로 잇습니다. 달로 묶인 항목은 그 뒤에 날짜를 붙입니다. 블로그 이름은 그 블로그의 첫 페이지로 가는 링크입니다. 하루에 하나뿐인 목록은 연도로 묶습니다. 머리글의 선 위는 32px, 아래는 12px로 바닥글의 선과 같고, ListGroup이 이 간격을 정하므로 쓰는 곳에서 바꿀 수 없습니다.

글 목록

블로그 한 곳의 글은 하루에 하나를 넘기는 일이 드물어서, 날짜 대신 연도로 묶고 날짜는 줄 끝에 둡니다.

본문

const typo = "blue";

바닥글

블로그의 모든 페이지는 powered by typo blue, 방문 수(HIT), 구독 페이지로 가는 링크 한 줄로 끝납니다. 구독 링크는 버튼이 아니라 HIT와 같은 회색 글자입니다. 서비스 페이지의 바닥글도 같은 선과 여백을 씁니다.