g
internal
01 / 32
terminal native
Terminal-based터미널 기반
design system디자인 시스템
One set of token names, two sets of values.토큰 이름은 한 벌, 값은 두 벌.
The markup is identical day and night.마크업은 낮과 밤에 동일하다.
g
Contents목차
internal
02 / 32
Contents목차
01Why I built it왜 만들었나04 – 07
02Token structure토큰 구조08 – 15
03Components and kits컴포넌트와 키트16 – 24
04Data and diagrams데이터와 다이어그램25 – 32
03 / 32
Section 01
Why I built it왜 만들었나
g
01 — Why I built it01 — 왜 만들었나
internal
04 / 32
Setup took longer than building the features셋업에 쓴 시간이 기능 만든 시간보다 길었다
shared components공통 컴포넌트
0
rewritten every time매번 새로 씀
palettes used쓰인 팔레트
11
no overlapping values겹치는 값 없음
setup time셋업 시간
4h
average per project프로젝트당 평균
So그래서
To stop re-deciding colour, spacing and components each time,색·간격·컴포넌트를 매번 다시 정하지 않도록 where values live값이 정의된 곳 comes first. Screens come after.를 먼저 만든다. 화면은 그 뒤에 온다.
g
01 — Why I built it01 — 왜 만들었나
internal
05 / 32
Three rules to keep셋만 지킨다
01
Names do not change이름은 불변
held지켜짐
Whatever the theme, 테마가 바뀌어도 --surface is always the card ground.는 언제나 카드 바닥이다.
governs
--bg · --surface · --line
02
Three accents at most형광은 셋까지
3 per slide한 장에 3곳
Past four, accent stops being emphasis and becomes background.accent가 넷을 넘으면 강조가 아니라 배경이다.
governs
--accent · --accent-text
03
Size, not weight굵기 대신 크기
400 · 600
Hierarchy comes from size, spacing and brightness.위계는 크기·여백·명도로.
g
01 — Why I built it01 — 왜 만들었나
internal
06 / 32
Current numbers현재 수치
principles원칙
Show at most지표 숫자는 six metrics여섯 개까지. More than that goes in a table — the band does not grow.. 그 이상은 표로 옮긴다 — 밴드를 늘리지 않는다.
g
01 — Why I built it01 — 왜 만들었나
internal
07 / 32
Tokens moved into code토큰을 코드로 옮겼다
What came out of it무엇이 생겼나
P1 doneP1 완료9files개 파일로 분리
1entry point ·개 진입점 · styles.css
0literal colours개 리터럴 색상
2themes, same names개 테마 · 같은 이름
entry
garamnoh-system/styles.css
screenshot 16:9스크린샷 16:9
image
g
02 — Token structure02 — 토큰 구조
internal
08 / 32
What changed무엇이 바뀌었나
before
Picking colours again per project프로젝트마다 색을 다시 고른다
before 2026.092026.09 이전
No document, no code, no baseline. Every project got a fresh palette and fresh components.문서도 코드도 기준도 없다. 프로젝트마다 팔레트를 새로 고르고 컴포넌트를 새로 썼다.
setup time셋업 시간4h
shared components공통 컴포넌트0
after
styles.css one line한 줄
now지금
Tokens, components, kits and the deck all come together. The step of re-picking values is gone.토큰 · 컴포넌트 · 키트 · 덱이 한 벌로 따라온다. 값을 다시 고르는 단계가 사라졌다.
setup time셋업 시간1m
shared components공통 컴포넌트30
g
02 — Token structure02 — 토큰 구조
internal
09 / 32
Three layers세 층으로 나뉜다
tokens/colour, type, spacing, motion — where values live색 · 타입 · 간격 · 모션 — 값이 정의된 곳9 files
components/30 gn-* classes plus copy-paste snippetsgn-* 클래스 30종 + 복붙 스니펫30 classes
ui_kits/portfolio, console, 32 slides포트폴리오 · 콘솔 · 덱 32장8 screens
g
02 — Token structure02 — 토큰 구조
internal
10 / 32
Where it stands어디까지 왔나
now현재
One page of notes문서 1장
before 2026.092026.09 이전
Rules but no code. Every screen copied the values out again.규칙만 있고 코드가 없다. 화면마다 값을 다시 옮겨 적었다.
→
target목표
A system you import불러 쓰는 시스템
now지금
Tokens, components, kits and the deck follow from one토큰 · 컴포넌트 · 키트 · 덱이 styles.css line.한 줄로 따라온다.
artefact
12 × css · 32 slides
g
02 — Token structure02 — 토큰 구조
internal
11 / 32
Scope적용 범위
All personal projects개인 프로젝트 전체
What ships publicly — portfolio, product pages공개되는 것 — 포트폴리오 · 제품 페이지
garamnoh.pages.dev/system
Finish it here first여기서 먼저 완성한다
g
02 — Token structure02 — 토큰 구조
internal
12 / 32
Deliverables per phase단계별 산출물 수
how to read읽는 법
Only one bar is accent. The rest use강조 막대는 하나만 accent. 나머지는 --line.
g
02 — Token structure02 — 토큰 구조
internal
13 / 32
P0 – P7 progressP0 – P7 진행률
by phase단계별
tokens · components토큰 · 컴포넌트100%
slide kit슬라이드 키트in progress진행 중
UI kits · deployUI 키트 · 배포not yet아직
left to do남은 일
P6 · 4 portfolio screensP6 포트폴리오 4화면2d
P6 · 4 console screensP6 콘솔 4화면2d
P7 · docs and deployP7 문서 · 배포1d
g
02 — Token structure02 — 토큰 구조
internal
14 / 32
Token files토큰 파일
| file | contains | vars |
|---|
| colors.css | 2 themes, semantic, chart2테마 · 시맨틱 · 차트 | 58 |
| typography.css | 2 stacks, 6-step scale스택 2종 · 6단 스케일 | 21 |
| spacing.css | spacing, shell, control heights간격 · 셸 · 컨트롤 높이 | 17 |
| radius.css | all zero, role aliases전부 0 · 역할 별칭 | 8 |
| motion.css | 3 durations, 1 easing3단 지속 · 이징 1종 | 7 |
g
02 — Token structure02 — 토큰 구조
internal
15 / 32
Deck spec덱 규격
canvas캔버스
canvas캔버스1920 × 1080
margin여백108px
grid그리드8 columns · gutter 408열 · 거터 40
chrome20px · hairline
type타입
title제목64 (cover 132)64 (표지 132)
body본문32 · min 2832 · 최소 28
label라벨24 · 0.16em
type floor최소 글자body 24 · chrome 20본문 24 · chrome 20
g
03 — Components and kits03 — 컴포넌트와 키트
internal
16 / 32
Who built it만든 사람
rules규칙
Photos are 1:1 black and white. Name 40, role 24 mono. No colour portraits.사진은 1:1 흑백. 이름 40 / 역할 24 모노. 컬러 인물 사진은 쓰지 않는다.
now지금
1 person — the rest are placeholders1인 · 나머지는 자리표시자
g
03 — Components and kits03 — 컴포넌트와 키트
internal
17 / 32
Made to copy and paste복사해서 쓰는 형태
what ships무엇을 납품하나
P3 · P4
Every component has a live example beside its markup, with a copy button.각 컴포넌트마다 라이브 예시와 마크업이 나란히 있고, 복사 버튼이 붙는다.
live examples라이브 예시30
snippet files스니펫 파일3
copy buttons복사 버튼30
source
Components P3 · 2026.09
screenshot 16:9스크린샷 16:9
image
g
03 — Components and kits03 — 컴포넌트와 키트
internal
18 / 32
When the image leads이미지가 주인공일 때
The image fills one side to the edge and that half loses its margin. The other half keeps title, subtitle and body at exactly the same position as every other slide.이미지를 한쪽 끝까지 채우고 그 절반의 여백을 없앤다. 반대쪽 절반은 제목·부제·본문 위치를 다른 장과 정확히 같게 유지한다.
image width이미지 폭960
text width텍스트 폭744
margin on the image side이미지 쪽 여백0
caption
Console screen · 2026.09.02콘솔 화면 · 2026.09.02
half bleed
full bleed image
g
03 — Components and kits03 — 컴포넌트와 키트
internal
19 / 32
full bleed풀 블리드
When the image is full frame,이미지가 전면일 때는
raise a fade from the bottom아래에서 페이드를 올린다
Text sits on the fade only, never directly on the image. The fade is 620px tall, from 0.94 to 0 opacity.글자는 페이드 위에만 놓는다. 이미지 위에 직접 얹지 않는다. 페이드는 하단 620px, 불투명도 0.94에서 0으로.
g
03 — Components and kits03 — 컴포넌트와 키트
internal
20 / 32
Work작업
pilo
system
hwpx
deck kit
console
archive
labs
notes
g
03 — Components and kits03 — 컴포넌트와 키트
internal
21 / 32
Roadmap로드맵
P19 token files토큰 9파일done
P2wordmark, favicon워드마크 · 파비콘done
P3–P430 components컴포넌트 30종done
P532 slides슬라이드 32장running
P6–P7UI kits · deployUI 키트 · 배포queued
next그 다음
Command palette · Combobox · Log viewer — Dashed means not yet점선은 아직 아닌 것. Once settled it moves to a solid box.. 확정되면 실선 박스로 옮긴다.
undecided미정
g
03 — Components and kits03 — 컴포넌트와 키트
internal
22 / 32
Settle the token names first토큰 이름을 먼저 정하면
and the theme can come later.테마는 나중에 와도 된다.
— working notes, 2026.09.02— 작업 노트, 2026.09.02
So그래서
Dropping Paper changed no component code. A theme is values; markup only references names.Paper를 버릴 때 컴포넌트 코드는 한 줄도 고치지 않았다. 테마는 값이고, 마크업은 이름만 참조한다.
changed바뀐 것
colors.css one file, 58 values한 파일 · 58개 값
unchanged안 바뀐 것
30 classes, snippets, deck frame클래스 30종 · 스니펫 · 덱 프레임
23 / 32
garamnoh
garamnoh.pages.dev/system
g
Appendix부록
internal
24 / 32
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
25 / 32
Commits per week주당 커밋 수
legend범례
Three lines at most. A dot only on the last value.선은 최대 3개. 점은 마지막 값에만.
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
26 / 32
Composition구성 비율
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
27 / 32
What to build first무엇을 먼저 만들 것인가
later나중에
Tooltip · Breadcrumb · Figure
now지금
Button · Input · Card · Badge · Table
not building안 만듦
Carousel · Accordion · DatePicker
when needed필요할 때
Dialog · Toaster · SideNav
how to read읽는 법
One highlighted quadrant. Axis labels go in the subtitle slot.강조 사분면은 하나만. 축 라벨은 부제 자리에 쓴다.
conclusion결론
Build the most-used things first.자주 쓰는 것부터 만든다.
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
28 / 32
How a token reaches the screen토큰이 화면에 도달하는 경로
01
tokens/*.css
where values live값이 정의된 곳
02
styles.css
11 @import lines@import 11줄
03 · now03 · 현재
gn-* classesgn-* 클래스
30 plus snippets30종 + 스니펫
04
kits and deck키트 · 덱
8 screens · 32 slides화면 8 · 32장
rule 1규칙 1
Values flow one way. A screen never overrides a token.값은 뒤로 흐르기만 한다. 화면에서 토큰을 거스르지 않는다.
rule 2규칙 2
Classes use no literal colours. Zero exceptions.클래스는 리터럴 색을 쓰지 않는다. 예외 0건.
rule 3규칙 3
Adding a name means editing both themes.새 이름을 추가하면 두 테마를 함께 고친다.
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
29 / 32
Why CSS classes왜 CSS 클래스인가
| criterion기준 |
CSS classesCSS 클래스 | React | web components웹 컴포넌트 | Figma onlyFigma만 |
| framework independent프레임워크 독립 | ✓ | × | ✓ | ✓ |
| starts with copy-paste복붙으로 시작 | ✓ | × | × | × |
| carries state logic상태 로직 포함 | × | ✓ | ✓ | × |
| covers deck and print덱·인쇄까지 커버 | ✓ | × | × | × |
| maintenance cost유지 비용 | low낮음 | high높음 | medium중간 | medium중간 |
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
30 / 32
P5 boardP5 진행 보드
queued3
4 portfolio screens포트폴리오 4화면
P6 · est 2 daysP6 · est 2일
4 console screens콘솔 4화면
P6 · est 2 daysP6 · est 2일
running2
32 slides슬라이드 32장
P5 · 32/32
Align deck frame덱 프레임 정렬
P5 · in progressP5 · 진행 중
done4
9 token files토큰 9파일
P1 · 112 vars
wordmark, favicon워드마크 · 파비콘
P2 · 5b
core and forms, 21코어 · 폼 21종
P3
feedback and nav, 9피드백 · 내비 9종
P4
rules규칙
Three columns at most. A card is a title plus one meta line. More than that goes in a table.열은 3개까지. 카드는 제목 + 메타 한 줄. 그 이상은 표로 옮긴다.
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
31 / 32
Commits by day and hour요일 × 시간대 커밋
7 × 4
morning오전afternoon오후evening저녁night심야
Mon월Tue화Wed수Thu목Fri금Sat토Sun일
legend범례
Five steps at most. Past that the eye cannot tell them apart.단계는 5개까지. 그 이상은 눈이 구분하지 못한다.
g
04 — Data and diagrams04 — 데이터와 다이어그램
internal
32 / 32
File tree and diff파일 트리 · diff
garamnoh-system/
├ styles.css
├ tokens/
│ ├ colors.css 58
│ ├ typography.css 21
│ └ … 7 more
├ components/
│ ├ components.css 30
│ └ snippets/
└ assets/
colors.css · Paper droppedcolors.css · Paper 폐기
− --accent: #B4491F;
− --accent-deep: #7D2F10;
− [data-theme="paper-light"] { … }
− [data-theme="paper-dark"] { … }
--bg: #08090A;
+ --accent: #3ED49C;
+ --accent-text: #0B6B4A;
+ [data-theme="light"] { … }
4 files changed · +58 −96