| 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(그라데이션·글로우·소프트 카드 크롬)은 안티패턴 방어용이지 표현 위축용이 아닙니다 — 시그니처는 더 세게 밀어붙입니다.
- 대형 타이포 활성화 —
display-xl(72px)·display(56px)·h1(44px)을 hero에만 두지 말고, 각 패밀리의 섹션 오프너·핵심 수치(statgrid val, stroke-ring 중앙값)에 끌어 씁니다. mono 큰 수치(tnum)와 소문자 대형 디스플레이의 대비가 catalog 시그니처입니다.
- 시그니처 6무브를 8패밀리 전 컴포넌트에 일관 적용 — 소문자(text-transform)·en-dash 제품코드(EP–133)·룰드 테이블/1px rule 격자·mono uppercase 스펙 라벨(spec-label)·제품 액센트 1색(섹션당 단 1개 강조)·dark invert 섹션(
var(--ink) 풀채움 패널을 페이지당 1~2회 — 레이어 스택 최상단·생태계맵 허브·funnel 첫 단계 등에 배치).
- 단순 박스 나열 추방 — 반복 항목도 룰드 테이블·specs grid·scorecard로 구조화하고, 수치는 bar/line/stroke-ring/gauge로 다양화합니다. 직관적이고 세련된 시각문법이 기본이 되게 합니다.
- 여백·밀도 리듬 — 섹션 사이 1px rule 디바이더(--s-7 간격)로 호흡을 잡고, 룰드 테이블 행 패딩을 10~12px로 조여 tabular-nums로 정렬합니다.
- 그라데이션 금지 준수 — 컴포넌트 내부에서부터 솔리드
var(--bg-3)·var(--paper-2)·var(--ink) 단색 또는 1px rule 프레임으로 플레이스홀더를 냅니다.
- 차트도 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
- Start from
samples/landing-page.html or samples/long-form-report.html.
- Copy
tokens.css and only the needed component snippets into the output.
- Edit with
apply_patch.
- Verify with
bash /Users/jason/.codex/skills/teenage-design/scripts/qc.sh <html-file>.
- 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 |
