디자인 시스템
web
v1.0.0
90/100

Wired

@dante · Media & Consumer

Editorial technology-magazine system: stark black-on-white duet, tall high-contrast WiredDisplay serif headlines, humanist BreveText body, and square 0px hairline-bordered geometry.

HTML/CSS
React
shadcn/ui
Tailwind
#consumer
#media
#wired
Wired
다운로드9
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Wired

Visual Theme

Wired is a flagship technology magazine ported to the web that refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a pure white canvas (#ffffff), a stark black WIRED wordmark, and stacked story cards that read as a printed magazine grid on a screen. There is no atmospheric gradient, no decorative chrome, and no chromatic accent — the only color beyond the black-and-white duet is the inline link blue #057dbc used inside long-form article body copy. The signature move is the tall, narrow, high-contrast WiredDisplay serif set at 64px, which gives every cover story the gravitas of a printed headline.

Color Principles

The system is a strict black-and-white duet. Ink Black (#000000) is the brand's only 'accent' — used for the wordmark, every CTA, and the footer fill. Canvas White (#ffffff) is the default page; Canvas Soft (#f5f5f5) is a rare tint for comment backgrounds and hover rows. Text runs on an ink-to-grey ladder: Ink (#000000), Ink Soft (#1a1a1a), and Body Grey (#757575) for secondary metadata. Hairline (#e0e0e0) 1px dividers are the only 'line' in the layout. Link Blue (#057dbc) is the single chromatic exception and appears only inside article body copy — never on UI buttons or navigation.

Typography

Type carries the entire identity across three families. WiredDisplay — the tall-narrow high-contrast serif — is used exclusively for display headlines (64px hero down to 26px sub-display) at weight 400; its elegance is in the typeface design, never in bold weight. BreveText, a humanist serif, carries long-form body (16–19px, line-height ~1.45–1.50) and bylines (weight 700, relaxed line-height 2.2). Apercu, a humanist sans, handles nav, button labels, category eyebrows, metadata, and captions at weights 400/700. Serifs for narrative, sans for structure — the two never cross roles.

Layout

A 4px base spacing scale (2/4/8/12/16/20/24/32/48px) with 48px section padding drives an editorial rhythm inside a wide ~1400px container. The cover grid is one large hero, a 2-up secondary row, then a vertical stack of bylined story rows separated by 1px #e0e0e0 hairlines. Geometry is square: radius.none 0px on every button, input, and card is the brand's signature — the only circular shapes are the social-share icon button and small author avatars. Depth is flat: no drop shadows exist. Elevation is carried by surface contrast, 1px hairline borders, and, on campaign moments, a 2px solid ink border.

Components

Buttons are square black rectangles (primary) or 1px ink-outlined white rectangles (outline), labelled in Apercu 16/700. Inputs are square with a 1px ink border and no shadow. Story cards live directly on the canvas with the photo doing the work — no frames. Category eyebrows are uppercase Apercu text rather than pills; topic tags are square hairline chips. The masthead band centres the wordmark; the black footer band inverts the page with white columns. Pull-quotes and stats lean on WiredDisplay serif figures with hairline top borders.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (14)

inkBlack
#000000
onPrimary
#ffffff
ink
#000000
inkSoft
#1a1a1a
bodyGrey
#757575
bodyGreyStrong
#5a5a5a
captionGrey
#9a9a9a
hairline
#e0e0e0
hairlineStrong
#cccccc
canvas
#ffffff
canvasSoft
#f5f5f5
canvasTint
#fafafa
linkBlue
#057dbc
linkBlueHover
#046a9f

타이포그래피 (7)

display
WiredDisplay, 'Playfair Display', 'Times New Roman', Georgia, serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
WiredDisplay, 'Playfair Display', 'Times New Roman', Georgia, serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
bodySerif
BreveText, Lora, Georgia, 'Times New Roman', serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
Apercu, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
ui
Apercu, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
ui-monospace, Menlo, 'JetBrains Mono', monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "hero": "64px/0.93",
  "displayLg": "48px/1.05",
  "displayMd": "32px/1.10",
  "displaySm": "26px/1.08",
  "displayXs": "20px/1.20",
  "bodySerifLg": "19px/1.47",
  "bodySerifMd": "16px/1.50",
  "body": "17px/1.18",
  "bodySmall": "14px/1.29",
  "byline": "12.73px/2.20",
  "caption": "12px/1.33",
  "button": "16px/1.25"
}

컴포넌트 (14)

Button

Square 0px black CTA in Apercu 16/700. Primary is a solid black rectangle; outline is a white fill with a 1px ink border — corners are never softened.

html
Hand-tuned CSS, no framework
2 props · 5 states · 8 tags · 2 소스
누락 상태: loading

Input

Square text field with a 1px solid ink border, white fill, and Apercu body type. No radius, no shadow — a printed-form rectangle.

html
Hand-tuned CSS, no framework
2 props · 5 states · 8 tags · 2 소스

Card

Cover-story card living directly on the white canvas — photo on top, WiredDisplay serif headline below, no border, no shadow. The photo does the elevation work.

html
Hand-tuned CSS, no framework
1 props · 2 states · 7 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Uppercase category eyebrow set in Apercu 14/700 — a text label, not a pill. Ink black on canvas, occasionally inverted to white on a black chip.

html
Hand-tuned CSS, no framework
1 props · 1 states · 5 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Heading

Tall high-contrast WiredDisplay serif at weight 400 — 64px hero down to 26px sub-display, negative tracking, near-1.0 leading. The typeface itself carries the elegance, never bold weight.

html
Hand-tuned CSS, no framework
1 props · 1 states · 9 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Link

Inline body links in the reserved #057dbc blue — the only chromatic note in the system, used exclusively inside long-form BreveText article copy, never on nav or buttons.

html
Hand-tuned CSS, no framework
1 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

Hero

White hero band hosting the cover story — 64px WiredDisplay headline, uppercase Apercu eyebrow, BreveText dek, and a single square black Subscribe CTA. No gradient, no chrome.

html
Hand-tuned CSS, no framework
1 props · 1 states · 6 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Nav

Top nav on white — hamburger left, wordmark centre, Subscribe right. Links in Apercu 14/700 ink black. Structural, quiet, printed-masthead cadence.

html
Hand-tuned CSS, no framework
0 props · 3 states · 6 tags · 2 소스
누락 상태: disabled

Footer

Solid black footer band with white text columns and the repeating WIRED wordmark — no graphics, just structural Apercu link lists.

html
Hand-tuned CSS, no framework
0 props · 2 states · 7 tags · 2 소스
누락 상태: focus-visible, disabled

Stat

Large WiredDisplay serif figure with an uppercase Apercu label, separated by a 1px hairline top border — a magazine pull-figure.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Quote

Pull-quote in large WiredDisplay serif at weight 400 with a byline in BreveText 700 — the editorial signature, drawn from long-form articles.

html
Hand-tuned CSS, no framework
0 props · 1 states · 5 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Tag

Square hairline-bordered topic tag in Apercu 14/700 — a structural filter chip, sharp-cornered like everything else in the system.

html
Hand-tuned CSS, no framework
1 props · 2 states · 5 tags · 2 소스
누락 상태: focus-visible, disabled

Avatar

Small circular author crop — the only circular geometry besides social-share icons — sitting inline next to a BreveText byline.

html
Hand-tuned CSS, no framework
1 props · 1 states · 7 tags · 1 소스
누락 상태: hover, focus-visible, disabled

Tab

Section-nav tabs as an underlined Apercu row — the active tab carries a 2px ink underline, no pills, no rounding.

html
Hand-tuned CSS, no framework
1 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

DESIGN.md

Wired

Visual Theme

Wired is a flagship technology magazine ported to the web that refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a pure white canvas (#ffffff), a stark black WIRED wordmark, and stacked story cards that read as a printed magazine grid on a screen. There is no atmospheric gradient, no decorative chrome, and no chromatic accent — the only color beyond the black-and-white duet is the inline link blue #057dbc used inside long-form article body copy. The signature move is the tall, narrow, high-contrast WiredDisplay serif set at 64px, which gives every cover story the gravitas of a printed headline.

Color Principles

The system is a strict black-and-white duet. Ink Black (#000000) is the brand's only 'accent' — used for the wordmark, every CTA, and the footer fill. Canvas White (#ffffff) is the default page; Canvas Soft (#f5f5f5) is a rare tint for comment backgrounds and hover rows. Text runs on an ink-to-grey ladder: Ink (#000000), Ink Soft (#1a1a1a), and Body Grey (#757575) for secondary metadata. Hairline (#e0e0e0) 1px dividers are the only 'line' in the layout. Link Blue (#057dbc) is the single chromatic exception and appears only inside article body copy — never on UI buttons or navigation.

Typography

Type carries the entire identity across three families. WiredDisplay — the tall-narrow high-contrast serif — is used exclusively for display headlines (64px hero down to 26px sub-display) at weight 400; its elegance is in the typeface design, never in bold weight. BreveText, a humanist serif, carries long-form body (16–19px, line-height ~1.45–1.50) and bylines (weight 700, relaxed line-height 2.2). Apercu, a humanist sans, handles nav, button labels, category eyebrows, metadata, and captions at weights 400/700. Serifs for narrative, sans for structure — the two never cross roles.

Layout

A 4px base spacing scale (2/4/8/12/16/20/24/32/48px) with 48px section padding drives an editorial rhythm inside a wide ~1400px container. The cover grid is one large hero, a 2-up secondary row, then a vertical stack of bylined story rows separated by 1px #e0e0e0 hairlines. Geometry is square: radius.none 0px on every button, input, and card is the brand's signature — the only circular shapes are the social-share icon button and small author avatars. Depth is flat: no drop shadows exist. Elevation is carried by surface contrast, 1px hairline borders, and, on campaign moments, a 2px solid ink border.

Components

Buttons are square black rectangles (primary) or 1px ink-outlined white rectangles (outline), labelled in Apercu 16/700. Inputs are square with a 1px ink border and no shadow. Story cards live directly on the canvas with the photo doing the work — no frames. Category eyebrows are uppercase Apercu text rather than pills; topic tags are square hairline chips. The masthead band centres the wordmark; the black footer band inverts the page with white columns. Pull-quotes and stats lean on WiredDisplay serif figures with hairline top borders.

어댑터 (6)

전체 파일 (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

버전