Tailwind 를 안 쓰는 정적 HTML 대시보드가 회사 디자인을 그대로 쓰기 위한 배포본이다.
theme.css 의 @theme 는 Tailwind 전용 at-rule 이라 브라우저가 못 읽는다 —
그래서 :root 로 변환한 사본을 여기서 제공한다.
토큰을 페이지에 손으로 베끼지 마라. 베끼는 순간 갈라진다.
붙이는 법 — 세 줄
<link rel="stylesheet" href="https://vendit-ds.pages.dev/v1.css"> <script src="https://vendit-ds.pages.dev/v1.js" defer></script> <header data-ds-appbar data-title="쿼리 상황판"></header> <main class="wrap"> … </main>
v1.js 가 앱바를 만든다 — 보라 로고, 로고 클릭 → Access 런처,
테마 토글, 스크롤 그림자. 페이지마다 다르게 생길 여지를 없앤다.
앱바 우측에 검색창 같은 걸 넣고 싶으면 <header data-ds-appbar> 안에 그냥 써 넣으면 된다.
브랜드 · 상태
프리미티브
회색
브랜드
성공
주의
위험
정보
진행
KPI 타일
토큰83개theme.css 에서 자동 추출
손복사 허용0건베끼면 갈라진다
간격 그리드4px--sp-1 … --sp-12 밖은 쓰지 마라
본문 폭1600px--shell-max
간격 스케일
정적 페이지엔 Tailwind 간격이 없어서 눈대중 px 가 박혔다. 이제 이것만 쓴다.
| 변수 | 값 | 쓰는 곳 |
|---|---|---|
--sp-2 | 8px | 칩·뱃지 사이, 인라인 요소 간격 |
--sp-3 | 12px | 카드 그리드 gap, 테이블 셀 좌우 |
--sp-4 | 16px | 카드 안쪽 여백, 앱바 요소 간격 |
--sp-6 | 24px | 섹션 사이, 본문 좌우 여백 |
--sp-8 | 32px | 큰 섹션 분리 |
고칠 때
cd ~/projects/admin-ui vi theme.css # ← 토큰은 여기만 고친다 node scripts/build-static-css.mjs # v1.css / v1.js 재생성 npx wrangler pages deploy static --project-name vendit-ds --branch main # 5분 안에 모든 정적 대시보드에 반영된다 (max-age=300)