Principle 1. Widen body line-height so bold headings and long paragraphs coexist, reducing reading fatigue.
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.
이 스타일은 정보 전달이 핵심일 때 강합니다. 핵심은 "장식 줄이기"가 아니라, 제목 계층과 문단 밀도를 치밀하게 설계해 읽는 리듬을 만드는 것입니다. 요청 시 "잡지형, 세리프 헤드라인, 얇은 선 분할"을 명확하게 주면 결과가 흔들리지 않습니다.
このスタイルは情報伝達が核心の場合に強みを発揮します。ポイントは「装飾を減らす」ことではなく、見出しの階層と段落の密度を緻密に設計して読むリズムを作ることです。リクエスト時に「雑誌型、セリフ見出し、細い線の区切り」を明確に指定すると、結果がブレません。
기준 1. 강한 제목과 긴 문단이 공존하도록 본문 줄간격을 넓혀 읽기 피로를 줄입니다.
基準 1. 強い見出しと長い段落が共存できるよう本文の行間を広げ、読む疲労を軽減します。
Principle 2. Use only 2-3 desaturated colors to maintain "content focus."
기준 2. 컬러는 저채도 2~3개만 사용해 "콘텐츠 집중도"를 유지합니다.
基準 2. カラーは低彩度の2〜3色のみ使用し、「コンテンツ集中度」を維持します。
AI Request Prompt
Design a web page with a premium magazine aesthetic. Design rules: - Layout: Generous vertical spacing (60-80px between sections), thin rule dividers (1px solid) for section separation - Typography: Headings in serif (Noto Serif KR, strong presence), body in neutral sans-serif (Instrument Sans) - Type scale: h1 uses clamp(1.9rem, 5vw, 3.8rem), body line-height 1.75 - Colors: Paper-tone background (#f7f3eb) + deep ink color (#22201f) + single accent (reddish-brown #8a3c2c) - Components: Text block-centric rather than cards, buttons are clean 1px line buttons - Motion: Nearly static, only fade-up (0.7s ease) on section entry - Grid: Content area uses 1.3fr + 1fr two-column layout Responsive: - Mobile (~760px): 2-column to 1-column, reduced margins - Desktop: max-width 980px centered Restrictions: - No gradient/glow decorative effects - Compose with text and layout only, no images - No excessive color usage (only 1 accent color allowed) Output: 1) Type scale (h1/h2/h3/body/caption) and color tokens 2) Section wireframes (Hero, Story, Evidence, CTA) 3) HTML/CSS code with responsive support
고급 매거진 느낌의 웹 페이지를 설계해줘. 디자인 규칙: - 레이아웃: 상하 여백을 넉넉히(섹션 간 60~80px), 얇은 선(1px solid)으로 섹션 분할 - 타이포: 제목은 세리프(Noto Serif KR, 강한 존재감), 본문은 중립 산세리프(Instrument Sans) - 타이포 스케일: h1은 clamp(1.9rem, 5vw, 3.8rem), 본문 줄간격 1.75 - 색상: 종이 톤 배경(#f7f3eb) + 짙은 잉크색(#22201f) + 포인트 1색(적갈색 #8a3c2c) - 컴포넌트: 카드보다 텍스트 블록 중심, 버튼은 단정한 1px 라인 버튼 - 모션: 거의 정적, 섹션 진입 시 fade-up(0.7s ease)만 적용 - 그리드: 본문 영역은 1.3fr + 1fr 2단 레이아웃 반응형: - 모바일(~760px): 2단 → 1단 전환, 여백 축소 - 데스크톱: max-width 980px 중앙 정렬 금지사항: - 그라데이션/글로우 등 장식 효과 사용 금지 - 이미지 없이 텍스트와 레이아웃만으로 구성 - 과도한 컬러 사용(포인트 1색 외 금지) 출력: 1) 타이포 스케일(h1/h2/h3/body/caption)과 컬러 토큰 2) 섹션별 와이어(Hero, Story, Evidence, CTA) 3) 반응형 대응이 포함된 HTML/CSS 코드
高級マガジン風のウェブページを設計してください。 デザインルール: - レイアウト: 上下の余白をたっぷり(セクション間60〜80px)、細い線(1px solid)でセクション分割 - タイポグラフィ: 見出しはセリフ(Noto Serif KR、強い存在感)、本文はニュートラルなサンセリフ(Instrument Sans) - タイポスケール: h1はclamp(1.9rem, 5vw, 3.8rem)、本文行間1.75 - カラー: 紙トーンの背景(#f7f3eb)+濃いインク色(#22201f)+ポイント1色(赤茶色 #8a3c2c) - コンポーネント: カードよりテキストブロック中心、ボタンは端正な1pxラインボタン - モーション: ほぼ静的、セクション進入時のfade-up(0.7s ease)のみ適用 - グリッド: 本文エリアは1.3fr + 1frの2カラムレイアウト レスポンシブ: - モバイル(〜760px): 2カラム→1カラム切替、余白縮小 - デスクトップ: max-width 980px 中央揃え 禁止事項: - グラデーション/グロー等の装飾効果使用禁止 - 画像なしでテキストとレイアウトのみで構成 - 過度なカラー使用(ポイント1色以外禁止) 出力: 1) タイポスケール(h1/h2/h3/body/caption)とカラートークン 2) セクション別ワイヤー(Hero, Story, Evidence, CTA) 3) レスポンシブ対応を含むHTML/CSSコード