미디어 및 엔터테인먼트 디자인 시스템
뉴스, 매거진, 출판, 스트리밍, 엔터테인먼트 웹사이트에서 추출한 디자인 시스템이에요. 타이포그래피가 주도해요. 헤드라인 서체, 바이라인, 기사 그리드가 중심이고, 색상은 섹션과 행동 유도 요소에만 아껴서 써요.
이 카테고리의 DESIGN.md 예시 2개: The Onion 및 WIRED. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
The Onion
The Onion의 디자인 시스템은 디지털화된 풍자 신문의 느낌을 살린 스타일입니다. 검은색의 굵고 좁은 고딕체 헤드라인이 중심을 이루며, 섹션 라벨, 트렌딩 배지, CTA에 사용되는 짙은 숲 녹색(#006b3a) 브랜드 강조색이 깔끔한 흰색 및 밝은 회색 바탕과 대비를 이룹니다. 타이포그래피가 핵심 디자인 도구로, Adobe Fonts의 좁은 고딕 및 세미 컨덴스드 서체인 tablet-gothic과 rocky-condensed가 헤드라인을 주도하고, 본문은 utopia-std-caption이 담당합니다. 레이아웃은 정보 밀도가 높아서 촘촘한 카드 그리드, 하단 테두리로 구분되는 기사 구분선, 그리고 구조 요소에 거의 둥근 모서리가 없는 형태로 구성됩니다. 입체감 표현은 최소화되어 있으며, 오버레이 요소에만 은은한 그림자가 적용되어 있습니다.
WIRED
WIRED의 디자인 시스템은 고대비와 에디토리얼 중심의 모노크롬 체계입니다. 독자적인 타이포그래피 체계(Breve Text, WIRED Mono, WiredDisplay, Apercu)를 기반으로 하며, 색채 팔레트는 거의 사용하지 않습니다. #000000 검정이 2961회로 가장 많이 쓰이며 텍스트, 테두리, 아이콘, 인터랙티브 상태를 중심에서 잡아 줍니다. #ffffff 흰색은 기본 바탕면을 이룹니다. 강조색은 아주 절제되어 있으며, 구독 버튼에만 브랜드 블루 #057dbc가 쓰입니다. 레이아웃은 8px 기본 간격을 바탕으로 한 여러 단으로 나뉜 기사 그리드를 사용하고, 그림자 없이 평평한 면을 유지하며, 기본 모서리 반경은 4px로 최소화되어 있습니다. 타이포그래피가 가장 뚜렷한 특징입니다. 본문은 19px Breve Text를 사용하고, 섹션 라벨은 자간을 넓힌 대문자 WIRED Mono로, 디스플레이 제목은 WiredDisplay로 표현합니다. 전체적인 인상은 권위 있고 정보 밀도가 높으며, 무엇보다 읽는 흐름을 우선하는 스타일입니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.