하나랑 대시보드 — 디자인 시스템 v2
디자인 철학
미니멀 터미널 UI. 장식 최소화, 정보 밀도 최대화.
glassmorphism 제거 → 1px 보더 카드 + 모노스페이스 라벨.
색상 (Color Tokens)
| Token |
Value |
용도 |
--bg-main |
#151515 |
전체 배경 |
--bg-surface |
#151515 |
카드/패널 배경 (배경과 동일, 보더로 구분) |
--bg-input |
#1a1a1a |
인풋/검색 배경 |
--bg-code |
#0d0d0d |
로그 테이블/코드 블록 배경 |
--text-primary |
#F5F5F5 |
주 텍스트 |
--text-secondary |
#8A8A8A |
보조 텍스트, 라벨 |
--border-color |
#333333 |
카드 보더, 구분선 |
--border-hover |
#555555 |
hover 시 보더 |
--accent-hover |
#FFFFFF |
네비 active, 강조 |
상태 색상 (조직도 전용)
| Token |
Value |
용도 |
--level-high |
#f43f5e |
최상위/긴급 |
--level-mid |
#3b82f6 |
중간/R&D |
--level-low |
#10b981 |
하위/운영 |
--level-none |
#525252 |
비활성 |
로그 태그 색상
| Tag |
Color |
| SYSTEM |
#888 |
| SECURITY |
#ff5f5f |
| ORG |
#5fafff |
| BACKUP |
#5fff8a |
상태 표시 색상
| Status |
Color |
| PASS / 성공 |
#00FF00 |
| ACTIVE dot |
#FFF + box-shadow: 0 0 8px rgba(255,255,255,0.3) |
| INACTIVE dot |
#555 |
타이포그래피
| 용도 |
Font |
Size |
Weight |
| 본문 |
--font-sans |
14px |
400 |
| 페이지 제목 |
--font-sans |
28px |
600 |
| 섹션 제목 |
--font-sans |
14px |
600 |
| 라벨 (label-meta) |
--font-sans |
11px |
700, uppercase |
| 브라켓 값 |
--font-sans |
32px |
600 |
| 타임스탬프 |
--font-mono |
11px |
400 |
| 로그 텍스트 |
--font-mono |
12px |
400 |
| 브라켓 인풋 |
--font-mono |
14px |
400 |
| 뱃지 |
--font-mono |
9px |
400, uppercase |
폰트 스택:
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
스페이싱
| Token |
Value |
--space-xs |
4px |
--space-sm |
8px |
--space-md |
16px |
--space-lg |
24px |
--space-xl |
40px |
--space-xxl |
64px |
컴포넌트
- 너비: 240px (데스크톱), 64px (모바일 아이콘 모드)
border-right: 1px solid var(--border-color)position: sticky; top: 0; height: 100vh- 로고: ● + ◗ (circle-full + circle-half)
- 네비 active:
[대시] 브라켓 표기 + 흰색 텍스트
- 네비 inactive:
#8A8A8A
- 메뉴: 대시, 활동, 프로, 자매, 조직, 설정, 관리
Card (상태 카드)
border: 1px solid var(--border-color)background: var(--bg-surface)padding: var(--space-lg)- hover:
border-color: #555
- 내부: header(SYS:이름) + bracket-value([ON]) + label + tech-bar
Tech Bar (진행 바)
height: 2px; background: var(--border-color)- fill:
background: var(--text-primary)
Timeline
- 왼쪽 세로선:
left: 3px; width: 1px; background: var(--border-color)
- 도트:
width: 7px; height: 7px; border: 1px solid var(--text-primary); border-radius: 50%
Toggle Switch
- 34x18px, border 1px
- checked: border
var(--text-primary), dot 흰색
Bracket Input
[ value ] 형태, mono font- 투명 배경, 포커스 시 흰색 텍스트
Button
- 기본: 투명 + 보더, uppercase 12px
- primary: 흰색 배경 + 검정 텍스트, hover 반전
- toggle: fit-content, 11px, active 시 흰색 배경
Log Table
- 배경:
#0d0d0d, border 1px
- th: 11px uppercase,
--text-secondary
- td: 12px mono, hover 배경
#1a1a1a
Terminal Card (조직도)
border-left: 3px solid (레벨별 색상)box-shadow: 0 10px 30px rgba(0,0,0,0.5)- 뱃지: 9px mono,
#1a1a1a 배경
반응형 (Breakpoints)
| Breakpoint |
화면 |
변경 사항 |
≥1200px |
Desktop |
기본 레이아웃 |
768–1199px |
Tablet |
사이드바 64px 아이콘 모드, 카드 2열, 2열 그리드→1열 |
≤767px |
Mobile |
사이드바 하단 탭바, 카드 1열, 노드 엔트리 수직 스택, 테이블 카드 변환 |
Mobile 세부 규칙
- 사이드바 → 하단 탭바: 고정 하단, 아이콘+짧은 라벨,
height: 56px
- 상태 카드 그리드:
grid-template-columns: repeat(2, 1fr) → 1fr (모바일)
- data-columns (대시 하단):
1.5fr 1fr → 1fr 수직 스택
- project-grid (프로젝트 상세):
1fr 320px → 1fr 수직 스택
- node-entry (자매 관리): 3열 가로 → 수직 스택
- settings-grid: 2열 → 1열
- log-table: 가로 스크롤 또는 카드 형태 변환
- 조직도 tree: 수평 스크롤 + 핀치 줌
- padding 축소:
--space-xxl → --space-lg, --space-xl → --space-md
- bracket-value 크기: 32px → 24px (모바일)
harang-ai
5e6c7085d3