teenage-design

name	teenage-design
version	1
description	틴에이지디자인·teenage-design — teenage engineering풍 카탈로그 HTML, 웹페이지, 덱, 제품 시각화 디자인 시스템. 소문자, 직사각, 니어모노크롬, 제품 액센트, 룰드 테이블, deadpan 스펙으로 구성한다. 트리거: 틴에이지디자인, teenage-design, TE style, 카탈로그 페이지, 제품 카탈로그, 스펙시트, model card, release notes, technical landing. NOT: 대시보드, apple-canvas, 카피 생성, 문체 변환.
license	Proprietary. teenage engineering brand observed from public sources; design system implementation by jasoncnh.

Teenage Design

Catalog energy for HTML: lowercase, dry product language, rectangular structure, mono specs, and one product accent.

문체 불가침 vs 정보 재구성 — 경계

기존 "verbatim·표로 쪼개지 마라" 규약의 과잉을 교정합니다. 문장은 불가침, 정보의 배치는 재구성 대상입니다.

불가침 (한 글자도 바꾸지 않음) — 본문 문장의 어미·어휘·문장구조·문단·문체(UP 입니다체)를 그대로 둡니다. TE의 소문자·deadpan·telegraph 무드 때문에 본문을 fragment·명사구·소문자 카피로 다시 쓰는 것은 금지입니다. 소문자 룩은 본문을 고쳐 쓰지 말고 CSS(text-transform)로 냅니다 — 복사하면 원문 그대로 나와야 합니다.

재구성 권장 (시각문법으로 재배치) — 정보의 배치·구조는 시각문법으로 재배치합니다. 절차·비교·관계·수치·시간·분포·항목 정보는 매핑 게이트가 고른 시각문법으로 구조화합니다. 데이터를 표·차트·다이어그램으로 옮기는 일은 문장을 바꾸는 일이 아니라 문장이 담은 구조를 드러내는 일입니다.

경계 — 산문 문단은 문장 그대로 둡니다. 데이터·단계·항목·관계·수치는 시각문법으로 구조화합니다. 한 섹션 안에 산문 설명과 구조화 가능한 데이터가 섞여 있으면, 산문은 문단으로 두고 데이터만 시각문법으로 뽑아 올립니다. 문장을 다시 쓰지 말고, 문장이 담은 구조를 드러냅니다. en-dash·mono·spec 표기는 사양·제품코드 표기에만 적용하고, 본문 문장을 그 형식으로 압축·재작성하지 않습니다.

상세: references/text-handling.md.

Use When

형이 teenage engineering·TE 스타일·카탈로그톤·스펙시트·제품 카탈로그·릴리즈노트·모델카드·기술 랜딩·딥딘 무드를 요청하거나, 'OO처럼 정밀하고 조용한 카탈로그/제품 시트로' '틴에이지처럼'을 hit할 때 발동합니다. 페이지가 정밀하고 조용하며 유용하고 약간 낯선 결이어야 할 때 씁니다.

NOT — 데이터 밀도 높은 대시보드·관리자 UI는 catalog 톤에 안 맞으므로 ui-designer로, 비비드 풀채도 스펙터클은 apple-canvas로, 카피 생성은 copywriting-skill로, 본문 문체 손질은 shaper-skill로 보냅니다. 'teenage'와 '비비드 랜딩'이 함께 hit하면 어느 결인지 ASK 합니다.

매핑 게이트 — 스타일 입히기 전 강제 통과 (카드그리드 회귀 방지)

컴포넌트는 메뉴가 아니라 매핑의 결과입니다. 빌드 전 STEP1~5를 통과하고, 섹션 매핑표를 명세로 남깁니다. 매핑표 없이 컴포넌트를 고르면 카드그리드로 회귀합니다.

STEP1 인벤토리 — 페이지의 모든 섹션을 나열하고, 각 섹션이 담은 정보를 한 줄로 식별합니다.

STEP2 논리 판별 — 각 섹션이 8패밀리 중 어떤 논리인지 정합니다 — 흐름(FLOW)·계층(HIERARCHY)·비교(COMPARE)·수치(METRIC)·관계(RELATION)·시간(TIME)·분포(DISTRIBUTION)·표(TABLE). 산문 문단은 어느 패밀리도 아니며 그대로 둡니다.

STEP3 문법 선택 — 그 논리에 가장 직관적인 시각문법 1개를 결정트리로 고릅니다.

• 단계·절차가 한 방향이면 → pipeline·process step / 분기가 있으면 → flowchart / 행위자 간 주고받기면 → sequence / 레인별 책임이면 → swimlane
• 상하 포함이면 → pyramid·layer-stack / 부모-자식이면 → tree·orgchart
• 둘 항목 대조면 → comparison·before-after / 다축 평가면 → specs table·scorecard / 두 변수 위치면 → matrix 2x2
• 단일 지표면 → statgrid / 항목 크기 비교면 → bar / 시간 추이면 → line / 비율 한 개면 → stroke-ring / 진행률이면 → gauge / 단계별 이탈이면 → funnel
• 노드 연결이면 → networkmap / 집합 겹침이면 → venn / 허브-역할이면 → ecosystem-map
• 시점 나열이면 → timeline / 우선순위 구간이면 → roadmap / 버전 이력이면 → changelog / 일정 막대면 → gantt
• 분포·밀도면 → positioningmap·heatmap / 지역 분포면 → geomap / 신호등 평가면 → scorecard
• 정렬 레코드면 → datatable / 용어 정의면 → glossary

STEP4 리듬 — 인접 섹션이 같은 문법으로 연속되지 않게 배치합니다. 카드그리드 3연속을 금지하고, 페이지 전체에 최소 3개 이상 패밀리가 고루 분포되게 합니다. 같은 패밀리가 연속이면 한쪽을 다른 직관적 문법으로 교체합니다.

STEP5 스타일 — 선택된 문법을 teenage-design 미감으로 렌더합니다 — 소문자(CSS text-transform)·en-dash 제품코드·룰드 테이블·mono 스펙·near-monochrome+제품 액센트 1·radius 0·페이드 240ms.

산출 형식 — 빌드 전 다음 매핑표를 명세로 남깁니다.

#	섹션	정보유형(패밀리)	시각문법	컴포넌트(파일)
1	(예) 제품 라인업	비교	specs table	04-compare
2	(예) 출시 로드맵	시간	roadmap	05-time
3	(예) 채택 추이	수치	line-chart	03-numbers

미감 디렉티브 — 디폴트를 최대 미감으로

디폴트를 teenage-design이 낼 수 있는 최대 미감으로 끌어올립니다. forbidden(그라데이션·글로우·소프트 카드 크롬)은 안티패턴 방어용이지 표현 위축용이 아닙니다 — 시그니처는 더 세게 밀어붙입니다.

1. 대형 타이포 활성화 — display-xl(72px)·display(56px)·h1(44px)을 hero에만 두지 말고, 각 패밀리의 섹션 오프너·핵심 수치(statgrid val, stroke-ring 중앙값)에 끌어 씁니다. mono 큰 수치(tnum)와 소문자 대형 디스플레이의 대비가 catalog 시그니처입니다.
2. 시그니처 6무브를 8패밀리 전 컴포넌트에 일관 적용 — 소문자(text-transform)·en-dash 제품코드(EP–133)·룰드 테이블/1px rule 격자·mono uppercase 스펙 라벨(spec-label)·제품 액센트 1색(섹션당 단 1개 강조)·dark invert 섹션(var(--ink) 풀채움 패널을 페이지당 1~2회 — 레이어 스택 최상단·생태계맵 허브·funnel 첫 단계 등에 배치).
3. 단순 박스 나열 추방 — 반복 항목도 룰드 테이블·specs grid·scorecard로 구조화하고, 수치는 bar/line/stroke-ring/gauge로 다양화합니다. 직관적이고 세련된 시각문법이 기본이 되게 합니다.
4. 여백·밀도 리듬 — 섹션 사이 1px rule 디바이더(--s-7 간격)로 호흡을 잡고, 룰드 테이블 행 패딩을 10~12px로 조여 tabular-nums로 정렬합니다.
5. 그라데이션 금지 준수 — 컴포넌트 내부에서부터 솔리드 var(--bg-3)·var(--paper-2)·var(--ink) 단색 또는 1px rule 프레임으로 플레이스홀더를 냅니다.
6. 차트도 TE 언어로 번안 — 도넛은 흑백 stroke-ring(stroke-dasharray), 히트맵은 흑백 4~5단계 솔리드 농도, 게이지는 stroke 아크. 컨셉에 안 맞아 보이는 차트도 monochrome+제품 액센트 1 언어로 반드시 보유합니다.

Design Rules

• Lowercase almost everywhere. Product codes may stay uppercase.
• Product codes use en dash between letters and numbers: EP-133 becomes EP–133, except historic PO-32.
• Use near-monochrome foundations plus one product accent.
• No gradients, glass effects, glowing backgrounds, or soft card chrome.
• Rectilinear by default: radius 0 except tiny form radius or capsule buttons.
• Use Hanken Grotesk for display/body and JetBrains Mono for specs.
• Keep motion minimal: fade only, around 240ms, no bounce.
• Keep letter-spacing at 0 except for small positive mono labels.
• Korean text must use word-break: keep-all; line-break: strict; overflow-wrap: break-word;.

Codex Workflow

1. Start from samples/landing-page.html or samples/long-form-report.html.
2. Copy tokens.css and only the needed component snippets into the output.
3. Edit with apply_patch.
4. Verify with bash /Users/jason/.codex/skills/teenage-design/scripts/qc.sh <html-file>.
5. Inspect in Browser when the output is visual.

Components — 8패밀리 인덱스 (메뉴가 아니라 매핑 결과)

컴포넌트는 매핑 게이트가 STEP1~3으로 고른 결과이지 자유 선택 메뉴가 아닙니다. 아래는 8대 시각문법 패밀리가 어느 파일에 실재하는지 보여주는 인덱스입니다 — 모든 패밀리가 teenage-design 미감으로 실재합니다.

패밀리	시각문법(컴포넌트)	파일
FLOW 흐름·절차	flowchart · pipeline · sequence · swimlane	06-flow
HIERARCHY 계층·구성	pyramid 07-shapes · orgchart 06-flow · layer-stack · tree 07-shapes	06-flow · 07-shapes
COMPARE 비교·대조	comparison · specs table · matrix 2x2 · before-after	04-compare
METRIC 수치·그래프	statgrid · bar · line-chart · stroke-ring · gauge-arc · funnel	03-numbers
RELATION 관계·망	networkmap · venn 07-shapes · ecosystem-map	06-flow · 07-shapes
TIME 시간·변화	timeline · roadmap · changelog · gantt	05-time
DISTRIBUTION 분포·위치	positioningmap · heatmap · geomap · scorecard	07-shapes
TABLE 표·구조화	datatable · specs table · glossary	08-document · 04-compare · 09-reference

스토리·반복 항목·롱폼 블록은 01-marketing·02-cards·08-document·09-reference에 둡니다 — 단, 반복 항목은 카드 나열 대신 룰드 테이블·specs grid·scorecard로 구조화하는 쪽을 디폴트로 합니다.

References

Need	Files
Text handling (문체 불가침)	references/text-handling.md
Glyphs	references/glyph-cheatsheet.md
Scope	references/NOT-scope.md