Foundations — garamnoh

01 — Color

Colour컬러

Splitting fill from text is the point of this palette. The mint green is면과 글자를 나눈 것이 이 팔레트의 핵심이다. 형광 그린은 fill only면 전용; text and 1px lines use, 글자와 1px 선은 --accent-text.

surfaces3 steps3단

--bg—

--bg-2—

--surface—

page → one step in → card ground페이지 → 한 단계 들어간 면 → 카드 바닥

ink3 steps3단

body · --text본문 · --text

secondary · --text-2보조 설명 · --text-2

meta · --text-3메타 · --text-3

--text—

--text-2—

--text-3—

emphasis is brighter, not bolder강조는 굵게가 아니라 밝게

accent — fill / textaccent — 면 / 글자shared공통

fill · --accent면 · --accent

text and 1px lines · --accent-text글자와 1px 선 · --accent-text

--accent— · fills, chips, bars면 · 칩 · 바

--accent-text— · text, 1px lines글자 · 1px 선

--accent-deep— · hover, pressedhover · 눌림

--accent-weak— · tinted background틴트 배경

--on-accent— · text on a fill면 위 글자

why two tokens왜 토큰이 둘인가

Aa 3ED49C

fill token as text면 토큰을 글자로

Aa —

text token글자 토큰

Switch to light and the left sample drops below 3:1 while the right holds. In dark the two are the same value, which is why one token cannot serve both.라이트로 바꾸면 왼쪽은 3:1 아래로 떨어지고 오른쪽은 유지된다. 다크에서는 두 값이 같다 — 그래서 토큰 하나로는 둘을 겸할 수 없다.

At most three accents per screen, and one .gn-box-lead. A fourth stops reading as emphasis and becomes background.한 화면에 accent는 셋까지, 강조 박스는 하나까지. 네 번째부터는 강조가 아니라 배경으로 읽힌다.

in light mode the green fails contrast as text라이트 모드에서 형광을 글자로 쓰면 대비가 부족하다

semantic4 + weak4색 + 약색

success · done · passedsuccess · 완료 · 통과

warning · in progresswarning · 진행 중

danger · failed · destructivedanger · 실패 · 파괴적

info · neutral noticeinfo · 중립 안내

where each one is allowed각 색이 쓰이는 자리

--okdone chip, passing testdone 칩 · 통과한 테스트

--warnrunning dot, unsavedrunning 점 · 미저장

--errfield error, destructive button필드 오류 · 파괴적 버튼

--infoneutral toast only중립 토스트 전용

Each has a -weak pair for the fill behind it. The strong value is for the border and the text, never the fill.각 색은 배경용 -weak 짝을 갖는다. 진한 값은 테두리와 글자에만 쓰고 면에는 쓰지 않는다.

status only — never decoration상태 표시 전용 · 장식으로 쓰지 않는다

chart5 series5계열

12345

one accent series, the rest held back강조 계열 하나만 accent · 나머지는 눌러서

Not allowed금지never

· literal hex — always use· 리터럴 hex — 항상 var()

· four or more accents on one screen· 한 화면에 accent 4곳 이상

· warm tones, cream, terracotta (dropped 2026.09)· 웜톤 · 크림 · 테라코타 (2026.09 폐기)

· semantic colour as decoration· 시맨틱 색을 장식으로

· gradient backgrounds· 그라디언트 배경

dashed = not yet, or not done at all점선 = 아직 아닌 것 또는 하지 않는 것

02 — Type

Type타이포그래피

One face for Korean and Latin:한글·영문 구분 없이 Pretendard . Only machine output uses하나. 기계가 말하는 글만 JetBrains Mono. Two weights: 400 and 600.. 굵기는 400과 600 둘뿐이다.

scale6 steps6단

Display

--fs-display — · —

Heading 1

--fs-h1 —

Heading 2

--fs-h2 —

body 15px · leading 1.62 · at most 58 characters per line본문 15px · 행간 1.62. 한 줄 58자를 넘기지 않는다.

--fs-body — / --lh-body —

small 13px · captions and card body보조 13px · 캡션과 카드 본문

--fs-small —

Label · 11 / 0.14em

--fs-label — · --ls-label —

no intermediate values중간값을 만들지 않는다

two facesfixed roles역할 고정

reading · Pretendard읽는 글 · Pretendard

Sentences, headings, descriptions. One face sets both Korean and Latin.문장, 제목, 설명. 한글과 영문을 한 폰트로 조판한다.

Machine · 0123 · ~/main

Labels, numbers, paths, code, dates, IDs, status values. Not for sentences.라벨 · 숫자 · 경로 · 코드 · 날짜 · ID · 상태값. 문장에는 쓰지 않는다.

400

regular

600

strong

700

Not allowed금지

the stacks in full폰트 스택 전체

--font-sansPretendard → system-ui

--font-codeJetBrains Mono → Menlo

No separate Korean face. Pretendard covers both scripts, so a mixed line keeps one baseline and one weight.한글용 별도 폰트가 없다. Pretendard가 두 문자를 함께 커버하므로 섞인 줄에서도 베이스라인과 굵기가 하나로 유지된다.

hierarchy from size, spacing and brightness — not weight위계는 굵기가 아니라 크기·여백·명도

korean wrappingkeep-all

this way (keep-all)이렇게 (keep-all)

One set of token names, two sets of values.토큰 이름은 한 벌, 값은 두 벌이다.

not this way (browser default)이렇게 말고 (기본값)

One set of token names, two sets of values.토큰 이름은 한 벌, 값은 두 벌이다.

break on word boundaries only — code and paths excepted어절 단위로만 끊는다 · 코드와 경로는 예외

measureMeasure읽는 폭

Body text does not exceed this width. At 660px a line lands under about 40 Korean characters; past that the eye loses the start of the next line. The container is 1120px, but text narrows again inside it.본문은 이 폭을 넘기지 않는다. 660px에서 한 줄이 대략 한글 40자 안쪽으로 떨어지고, 그 이상은 줄을 옮길 때 눈이 시작점을 놓친다. 컨테이너는 1120px이지만 글은 그 안에서 다시 좁힌다.

--measure—

--container—

write shorter rather than wider폭을 넓히는 대신 글을 짧게 쓴다

03 — Space

Spacing and density간격과 밀도

Multiples of 4 only. Three control heights, with nothing in between.4의 배수만. 컨트롤 높이는 세 단, 그 사이 값을 만들지 않는다.

scalemultiples of 44의 배수

4

8

12

16

24

32

48

76

--sp-1 … --sp-19 · no eyeballed values--sp-1 … --sp-19 · 어림잡은 값 금지

control height3 steps3단

--h-sm / md / lg— · — · —

--touch-min—

mobile touch targets are 44px or more모바일 터치 타깃은 44px 이상

density2 steps2단

site — generous spacingsite — 여백 넉넉

row height free행 높이 자유

reading screens읽는 화면

console — 34px rowsconsole — 행 34

in-3183m 29s

in-3191m 04s

in-320queued

same values, different density값은 같고 밀도만 다르다

shellfixed width고정폭

268

1fr

--sidebar-w—

--topbar-h—

breakpoints480 · 768 · 1120

three breakpoints, nothing between them브레이크포인트 셋 · 그 사이는 없다

04 — Shape

Shape형태

All radii are 0 and there are no shadows. Depth comes from one surface step and a 1px line.라운드는 전부 0, 그림자는 없음. 깊이는 면 한 단계와 1px 선으로만 만든다.

radius0px

no circles either — status dots, avatars and knobs are square원형도 쓰지 않는다 — 상태 점·아바타·노브까지 사각형

--r-sm / md / lg / pill— · — · — · —

role aliases역할 별칭

--r-controlbuttons, chips, inputs버튼 · 칩 · 인풋

--r-fieldform controls폼 컨트롤

--r-cardcards, panels카드 · 패널

--r-overlaydialogs, toasts다이얼로그 · 토스트

All four are 0 today. They exist so a future exception has one place to live instead of being pasted inline.넷 다 지금은 0이다. 미래의 예외가 인라인으로 흩어지지 않고 한 군데에 살도록 이름만 남겨둔다.

curvature carries no meaning곡률은 의미를 담지 않는다

depthline and fill선과 면

level 0 — line only (a block in body text)level 0 — 선만 (본문 안 블록)

level 1 — fill and line (card)level 1 — 면 + 선 (카드)

level 2 — one step inlevel 2 — 한 단계 들어간 면

accent bar — instead of a shadowaccent 바 — 그림자 대용

--shadow—

a shadow is invisible on a dark ground어두운 배경에서 그림자는 보이지 않는다

border weight2 steps2단

--bw — — box boundary--bw — — 박스 경계

--hairline — + --line-soft — internal divider--hairline — + --line-soft — 내부 구분

dashed — not yet점선 — 아직 아닌 것

borders differ by colour, not by weight경계는 굵기가 아니라 색으로 눌러서 구분한다

05 — Motion

Motion모션

Three durations, one easing. Movement is only for signalling that state changed.지속 시간 세 단, 이징 하나. 움직임은 상태가 바뀌었음을 알릴 때만 쓴다.

durations3 + blink3단 + 점멸

--dur-color—

--dur-move—

--dur-enter—

--dur-blink—

--ease—

--move-max—

one easing · no bounce or spring이징은 하나뿐 · 바운스·스프링 금지

hovercolour only색만

cards do not lift or grow — only the border colour changes카드는 뜨거나 커지지 않는다 — 테두리 색만 바뀐다

what each duration covers지속 시간별 용도

--dur-colorhover, focus, selectionhover · focus · 선택

--dur-movepress, toggle, reorder눌림 · 토글 · 순서 변경

--dur-enterdialog, toast, drawer다이얼로그 · 토스트 · 드로어

--dur-blinkrunning dot, cursorrunning 점 · 커서

There is no duration for anything else. If a change needs its own timing, it probably should not animate.그 외 용도의 지속 시간은 없다. 자기 타이밍이 필요한 변화라면 애초에 애니메이션이 아닌 편이 낫다.

movement caps at 4px이동은 최대 4px

blinktwo places두 곳만

running — the in-progress status dotrunning — 진행 중 상태 점

garamnoh

One blinking cursor per page. Nothing else blinks.커서 점멸은 페이지당 하나. 그 외 어떤 요소도 깜빡이지 않는다.

everything stops under prefers-reduced-motionprefers-reduced-motion에서 전부 정지

Not allowed금지never

· scroll parallax· 스크롤 패럴랙스

· staggered entrances· 순차 등장 (stagger)

· bounce and spring easing· 바운스 · 스프링 이징

· transitions over 300ms· 300ms 넘는 전환

· animations that move position· 위치를 옮기는 애니메이션

a quiet screen is a readable one화면이 조용해야 정보가 보인다

06 — Focus & State

Focus and states포커스와 상태

Every interactive element has five states. Missing one means it is unfinished.모든 인터랙티브 요소는 다섯 상태를 갖는다. 하나라도 비면 아직 덜 만든 것이다.

five statesbutton버튼

default

hover

focus-visible

active

disabled

one focus ring: outline 2px, offset 2px포커스 링은 outline 2px + offset 2px 하나로 통일

never colour alonerequired필수

Email이메일 *× The domain is missing.× 도메인이 빠졌습니다.

Errors get a border and a message below. Current position gets an underline or a left bar. Status gets a dot and text.오류는 테두리 + 아래 메시지. 현재 위치는 밑줄이나 좌측 바. 상태는 점 + 텍스트. Never signal with colour alone.색만으로 알리지 않는다.

contrast 3:1 or better, in both themes대비 3:1 이상 · 두 테마 모두

keyboardfocus-visible

Try tabbing through. A mouse click draws no ring.탭으로 이동해보세요. 마우스 클릭에는 링이 그려지지 않습니다.

:focus-visible only:focus-visible 전용

07 — Grammar

Layout rules레이아웃 문법

There are two ways a box can use its height. Mixing them leaves empty space at the bottom.레이아웃 규칙. 박스가 높이를 쓰는 방식은 두 가지뿐이고, 섞으면 바닥에 빈 공간이 남는다.

gn-rowsdensity밀도

max최댓값24

total합계71

mean평균14.2

flex:1 per child — the box height divides equally자식마다 flex:1 — 박스 높이를 균등 분할한다

gn-card-distdistribute분산

label라벨

112

Label, value and caption distribute, and the last child becomes a footer strip.라벨 · 값 · 캡션을 분산하고 마지막 자식은 푸터 스트립이 된다.

the line at the bottom reads as intent, not as leftover space바닥에 붙은 줄이 "남은 공간"이 아니라 의도로 읽힌다

gn-chip5 steps in time시간축 5단

done now near mid far

done past · neutral solid지난 것 · 무채색 솔리드

now current · accent solid ·현재 · accent 솔리드 · one per screen화면당 하나

near next · accent outline다음 · accent 아웃라인

mid classified · hairline분류 · 헤어라인

far not yet ·아직 · dashed점선

Anything with a before/after ordering is a chip, not grey body text. For an inline undecided value use선후 관계가 있는 라벨은 전부 칩. 회색 본문 텍스트로 남기지 않는다. 인라인 미정값은 tbu.

dashed means future — no exceptions미래 = 점선 · 예외 없다

gn-bandthe line that closes a view뷰를 닫는 줄

conclusion결론

Settle the token names first and the theme can come later.토큰 이름을 먼저 정하면 테마는 나중에 와도 된다.

next그 다음

Command palette · Log viewer

undecided미정

label 200px, sentence 1fr라벨 200px + 문장 1fr

gn-stripspec스펙

margin여백

28px

Measure읽는 폭

660px

row height행 높이

34px

Equal columns between two rules, always one line. It replaces a long run-on sentence.상하 굵은 선 사이 균등 열, 항상 한 줄. 긴 나열 문장을 대체한다.

folds to two columns below 760px760px 이하 2열로 접힌다

alignmentfixed columns고정 열

01

02

03

04

Grids use fixed column counts.그리드는 고정 열 수. auto-fit sends the last cell down on its own and leaves a gap. Where cells are divided by lines, the last one drops its rule.은 마지막 칸을 홀로 내려보내 빈 공간을 만든다. 선으로 나눈 칸은 마지막 칸이 선을 버린다.

siblings are spaced with gap, never margin형제 배치는 항상 gap · margin 금지

08 — Icon

Icons아이콘

No custom set. The icons are Unicode glyphs a terminal can draw.자체 세트를 만들지 않는다. 터미널에서 그릴 수 있는 유니코드 글리프가 곧 아이콘이다.

prompt

agent

tree

link

external

bar

status

close

check

If one is really needed:꼭 필요하면 Lucide, stroke 1.5px on a 20px grid. Never mix the two sources on one screen., stroke 1.5px / 20px 그리드. 두 소스를 한 화면에 섞지 않는다. No emoji.이모지 금지.

09 — Imagery

Images이미지

No stock photography. Three ratios only, and text never sits directly on an image.스톡 사진을 쓰지 않는다. 비율은 셋뿐이고, 이미지 위에 글자를 직접 얹지 않는다.

16 : 9screenshot

screenshot

1px border required · caption below at 13px테두리 1px 필수 · 캡션은 아래 13px

4 : 3process

color field

when there is no image — colour field and a mono label이미지가 없을 때 — 색면 + 모노 라벨

1 : 1portrait

1:1 b&w

portraits are black and white — no colour photos인물은 흑백 · 컬러 사진은 쓰지 않는다

gn-bleed-fadethe one exception유일한 예외

bleed image

caption캡션

text goes on the fade, never on the image글자는 페이드 위에만 놓는다

bottom 58% · 0.94 to 0하단 58% · 0.94 → 0

10 — Mark

Wordmark and favicon워드마크와 파비콘

No symbol. The name set in mono, followed by a block cursor —심볼을 만들지 않는다. 모노로 조판한 이름과 그 뒤의 블록 커서 — the cursor is the mark.커서가 곧 마크다. The favicon is the same mark reduced, and the files below are the confirmed output.파비콘은 같은 마크를 축약한 것이고, 아래 파일이 확정된 원본이다.

defaultblinking깜빡임

garamnoh

cursor 0.52em × 0.92em · 1.06s step커서 0.52em × 0.92em · 1.06s step

staticprint · favicon인쇄 · 파비콘

garamnoh

static wherever motion is impossible움직일 수 없는 매체에서는 정지

sub-brandafter the slash슬래시 뒤

garamnoh/lab

only the slash is accent — the name stays one colour슬래시만 accent · 이름은 항상 단색

inverton an accent fillaccent 면 위

garamnoh

text on a fill is always --on-accent면 위 글자는 항상 --on-accent

faviconreduced축약

gsvg

32

16

g plus the cursor, only where the name will not fit이름이 들어갈 공간이 없을 때만 g + 커서

Files파일5

favicon.svgany size가변

favicon-32.png32 × 32

favicon-16.png16 × 16

icon-512.pngdark다크

icon-512-light.pnglight라이트

garamnoh-system/assets/ — regenerate nothing by handgaramnoh-system/assets/ — 손으로 다시 만들지 않는다

Markup마크업head

<link rel="icon"
      href="/assets/favicon.svg">
<link rel="apple-touch-icon"
      href="/assets/icon-512.png">

SVG first; the PNGs are the fallbackSVG 우선 · PNG는 폴백

Not allowed금지never

· italics or weight changes· 기울임 · 굵기 변경

· gradients or shadows· 그라디언트 · 그림자

· two colours inside the name· 이름 자체에 두 색

· exporting it as an image file· 이미지 파일로 만들기

· going below 88px wide· 최소 폭 88px 이하

the mark is typeset, not drawn마크는 그리지 않고 조판한다

11 — Voice

Voice and tone보이스 & 톤

Write like a log. Facts first, adjectives later, mostly not at all. Unlike the visual rules this cannot be enforced by a token, so it is left as examples.로그처럼 쓴다. 사실 먼저, 형용사는 나중에, 대부분은 그냥 생략. 시각 규칙과 달리 이건 토큰으로 강제할 수 없어서 예시로 남긴다.

do이렇게do

"Commit e96ecaf. Local only, not deployed.""커밋 e96ecaf. 로컬만, 배포 안 함."

"Left to do: check the cell shows four lines in Hangul.""남은 것: 한글에서 셀이 네 줄로 보이는지 확인."

"Deploy failed. Start reading at line 3 of the log.""배포 실패. 로그 3번째 줄부터 보세요."

fact → state → next action사실 → 상태 → 다음 행동

don't이렇게 말고don't

"Delivers an innovative workflow experience""혁신적인 워크플로우 경험을 제공합니다"

"Successfully completed! 🎉""성공적으로 완료되었어요! 🎉"

"Sorry, something went wrong""죄송합니다, 문제가 발생했습니다"

marketing adjectives · emoji · apologies마케팅 형용사 · 이모지 · 사과

rules규칙7

sentence length문장 길이under 20 characters20자 안쪽

paragraph length문단 길이under 3 lines3줄 안쪽

emoji, exclamation marks이모지 · 느낌표none없음

button버튼one verb동사 하나

errors에러cause plus next action원인 + 다음 행동

date, time날짜 · 시간2026.09.03 · 14:22

numbers, IDs, paths숫자 · ID · 경로mono모노

do not apologise — state the cause and the fix사과하지 않는다 — 원인과 해결만 말한다

button labels버튼 라벨one verb동사 하나

Not "Save it", "Save now" or "Save changes". The screen carries the context; the button names only the action."저장하기" · "지금 저장" · "변경사항 저장" 모두 쓰지 않는다. 맥락은 화면이 말하고 버튼은 동작만 말한다.

Not allowed금지

two or more words · polite endings · question marks두 단어 이상 · 존댓말 어미 · 물음표

labels in uppercase mono Latin, body in Korean라벨은 대문자 영문 모노, 본문은 한글

Foundations파운데이션

Colour컬러

Type타이포그래피

Spacing and density간격과 밀도

Shape형태

Motion모션

Focus and states포커스와 상태

Layout rules레이아웃 문법

Icons아이콘

Images이미지

Wordmark and favicon워드마크와 파비콘

Voice and tone보이스 & 톤