styles
← 갤러리

Teenage Engineering

순백 캔버스 위에 굵은 블랙 타이포와 도트-매트릭스 아이콘이 펼치는 Y2K 산업 미학 — 제품이 곧 디자인이다.

y2k black-whitedot-matrixindustrialblock-typeorange-accentuppercase-heavyzero-radiusproduct-catalogtechnical
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Teenage Engineering 공식 사이트에서 추출한 Y2K/산업 디자인 미학. 순백(#ffffff)과 검정(#000000)의 극단적 이분법 위에 오렌지 레드(#ff3c00 계열) 포인트가 정보 계층을 만든다. 도트-매트릭스 아이콘, 거대한 블록 타이포(올캡), 기계적 그리드 레이아웃이 90년대 산업 카탈로그와 밀레니엄 웹을 동시에 환기한다. 보더-라디우스는 0.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

Extreme contrast between massive block headlines and tiny body text. All headings uppercase. The font has a technical/industrial character.

골든 예제 (exemplar)

DAILY LIFE OF
MR. UPDATE

EP SERIES

EP—133 2.5

EP—40 2.5

EP—1320 1.5

Do

  • Use pure black and white as the foundation
  • Orange-red for accent highlights and pricing
  • All headings uppercase with massive sizes (up to 6rem)
  • Zero border-radius on everything
  • Dot-matrix or pixel-style icons
  • Dense, catalog-like layouts

Don't

  • Don't round any corners
  • Don't use shadows — keep everything flat
  • Don't use soft/pastel colors — only B&W + orange
  • Don't use gentle, friendly typography — keep it bold and industrial
  • Don't add decorative gradients or glass effects

컴포넌트 노트

button
Squared (0px radius), black fill with white text. Often just underlined text links.
card
Product card with heavy black border, icon/illustration, product code, price. Industrial catalog style.
input
Flat, no radius, 1px border.
nav
Full-width top mega-nav with dot-matrix icons for each category. Products/Store/Latest/Finder sections.