Hub

An editorial layout that builds trust through disciplined whitespace and typography alone

정돈된 여백과 활자만으로 신뢰를 만드는 에디토리얼 레이아웃

整えられた余白と活字だけで信頼を生むエディトリアルレイアウト

This style excels when information delivery is paramount. The key is not simply "reducing decoration," but carefully designing heading hierarchy and paragraph density to create a reading rhythm. Specifying "magazine-style, serif headlines, thin rule dividers" in your prompt keeps results consistent.

Principle 1. Widen body line-height so bold headings and long paragraphs coexist, reducing reading fatigue.

Principle 2. Use only 2-3 desaturated colors to maintain "content focus."

AI Request Prompt

Design a landing page in Editorial Silence style — premium magazine aesthetic built on disciplined whitespace and typography.

COLOR TOKENS:
--paper: #f8f8f8
--ink: #1c1c1e
--muted: #52525b
--line: #d4d4d4
--accent: #3f3f46 (neutral dark gray, single accent)
--card-bg: rgba(255, 255, 255, 0.5)
--prompt-bg: #ffffff
Background: #f8f8f8 (flat neutral white-gray).
No other colors.

TYPOGRAPHY:
Heading: 'Noto Serif' 700, tracking -0.015em
Body: 'Instrument Sans' 400
Scale: clamp(1.9rem, 5vw, 3.8rem) for h1, 0.95rem for nav
Heading line-height: 1.25
Body line-height: 1.75
Deck (subtitle) line-height: 1.75, color var(--muted), max-width 760px

UI:
Hero: border-top 2px solid var(--ink), border-bottom 1px solid var(--line), padding 24px 0 30px
Text blocks: 1px solid var(--line), padding 16px, background rgba(255, 255, 255, 0.5)
Buttons: 1px solid var(--ink), background #f4f4f5, color var(--ink), padding 8px 13px, no border-radius
No card shadows, no rounded corners — rectilinear form language throughout.

LAYOUT:
Content max-width: min(980px, 90vw)
Main padding: 34px 0 72px
Column grid: 1.3fr + 1fr, gap 20px
Hero: full-width section divider, left-aligned headline + deck

MOTION:
Entrance: translateY(10px) → 0, opacity 0 → 1, 700ms ease, stagger 100ms
Hover: none on text blocks, subtle color shift on buttons only
No scroll-triggered animations. Respect prefers-reduced-motion.

RESPONSIVE:
760px: 2-column grid → 1 column, margins reduced
980px: Full 2-column layout, centered container

FORBIDDEN:
- Horizontal scroll at any viewport
- Gradient, glow, or shadow decorative effects
- Images or illustrations — text and layout only
- More than 1 accent color
- Rounded corners (border-radius) on any content element
- Animated hover states on text blocks

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Component structure: Hero divider, Headline + Deck, 2-column text blocks, CTA button
3) Semantic HTML + CSS with responsive support