bafni design

bafni.org 서비스(brieFAI · vidFAIT)가 같이 쓰는 색·글자·부품. 원본: 저장소 packages/design

색 · 자유와혁신 주색·보조색

tokens.css

새 색을 만들지 않는다. 표에 없는 값은 아래 색을 섞어서만 쓴다.

역할 변수

요소는 이 이름만 참조한다 · 다크 모드에서 값이 바뀐다

그래프 계열

모서리

글자

Pretendard · 크기/줄높이 네 단계 + 보조 설명

20/25 — 숫자·강조 값

16/20 — 본문 · h2 제목

14/18 — 버튼 · 목록 보조

13/17 — 보조 설명(.hint)

12/15 — 시각·출처 같은 메타(.meta)

면 · 입체는 세 가지뿐

카드(오목) · 패널·버튼(볼록) · 칩(평평)

카드 제목

22:00 기준
패널은 카드 안에서 한 묶음을 띄운다.
두 번째 패널

버튼

기본 볼록 · 선택/현재 위치는 오목 + 강조색
링크 버튼

마우스를 올리면 그림자가 깊어지고, 키보드 초점은 강조색 테두리로 보인다.

칩

평평한 라벨 · 버튼이 아니다
자유와혁신 부정선거 밈

로딩

움직임 줄이기 설정이면 멈춘다