1822 lines
155 KiB
HTML
1822 lines
155 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>D.intelligence Design System — 2026 Edition</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
<script src="deck-stage.js"></script>
|
||
</head>
|
||
<body>
|
||
<deck-stage>
|
||
|
||
<!-- ============================================================
|
||
01 — COVER
|
||
============================================================ -->
|
||
<section data-screen-label="01 Cover" class="s-cover">
|
||
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence — Brand & Design System</span>
|
||
<span class="s-section-id">v2026 / Internal</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:48px;">
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gray);">Graphic Standard Manual</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:172px; font-weight:700; line-height:0.92; letter-spacing:-0.03em; color:var(--brown);">D.</div>
|
||
<div style="font-family:var(--font-en); font-size:172px; font-weight:700; line-height:0.92; letter-spacing:-0.03em; color:var(--brown);">intelligence</div>
|
||
</div>
|
||
<div style="display:flex; gap:48px; align-items:baseline;">
|
||
<div style="font-family:var(--font-en); font-size:24px; font-style:italic; color:var(--brown); opacity:0.6;">— Analysis, Treatment & Growth —</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right;">
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:24px;">Design System</div>
|
||
<div style="font-family:var(--font-en); font-size:96px; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--brown);">2026</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--olive); margin-top:24px;">Edition · v2.0</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">Think Forward</span>
|
||
<span class="s-page">(주)디인텔리전스 · 2026</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
02 — CONTENTS
|
||
============================================================ -->
|
||
<section data-screen-label="02 Contents" class="s-cover">
|
||
<div class="s-three-dots beige"><i></i><i></i><i></i></div>
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Contents</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; left:96px; top:180px; right:96px;">
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--gray); margin-bottom:20px;">Table of Contents</div>
|
||
<h1 style="font-family:var(--font-en); font-size:76px; font-weight:700; letter-spacing:-0.02em; color:var(--brown); margin:0 0 56px 0; line-height:1;">Nine chapters,<br>one operating system</h1>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px 96px; max-width:1500px;">
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--brown);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">01</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Brand Platform</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">미션 · 비전 · 캐릭터 · Heritage</div></div></div>
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--brown);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">06</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Slide Templates</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">커버 · 섹션 · 콘텐츠 · 클로징</div></div></div>
|
||
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">02</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Logo & Logomark</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">기본 · 변형 · 여백 · 사용 금지</div></div></div>
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">07</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Service Architecture</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">3-Phase · 17 모듈 · 4 카테고리</div></div></div>
|
||
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">03</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Color System</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">팔레트 · 사용 규칙 · 조합</div></div></div>
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">08</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Voice & Messaging</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">톤 · 매너 · 좋은 예 · 나쁜 예</div></div></div>
|
||
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">04</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Typography</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">DM Sans · Apple SD Gothic Neo</div></div></div>
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">09</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Components & Do/Don't</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">UI · 차트 · 사용 규칙</div></div></div>
|
||
|
||
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light); border-bottom:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">05</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Layout & Motifs</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">그리드 · 수직선 · 세 점 · 푸터</div></div></div>
|
||
<div style="border-top:1px solid var(--gray-light); border-bottom:1px solid var(--gray-light);"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">02 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
03 — SECTION DIVIDER: 01 Brand Platform
|
||
============================================================ -->
|
||
<section data-screen-label="03 Section 01 Brand Platform" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 01</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">01</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter One</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Brand<br>Platform</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">브랜드 플랫폼</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">우리가 누구이고, 왜 존재하며, 어떤 인격으로 말하는가. v1.3에서 재정립된 브랜드의 4차원 운영 체계와 '마케팅 과학자' 캐릭터</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right; font-family:var(--font-en);">
|
||
<div style="font-size:13px; letter-spacing:0.2em; color:var(--gray); margin-bottom:32px; text-transform:uppercase;">In this chapter</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px; font-size:18px; color:var(--brown);">
|
||
<div>· Mission, Vision, Tagline, Motto</div>
|
||
<div>· Core Values (Science / Practice / Outcome / Insights)</div>
|
||
<div>· Brand Dimensions — 4D</div>
|
||
<div>· Brand Character</div>
|
||
<div>· Heritage Promise — 7가지 약속</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">03 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
04 — BRAND CORE
|
||
============================================================ -->
|
||
<section data-screen-label="04 Brand Core" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">01 · Brand Platform</span>
|
||
<span class="s-section-id">Brand Core</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Brand Core · 브랜드 핵심</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Mission, Vision, Tagline, Motto</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:80px;">
|
||
|
||
<div style="border-top:1px solid var(--brown); padding-top:28px;">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Mission · 미션</div>
|
||
<div style="font-family:var(--font-en); font-size:38px; font-weight:500; line-height:1.25; color:var(--brown); letter-spacing:-0.01em;">A trusted partner enabling<br>data-driven decisions for<br>sustainable growth</div>
|
||
<div style="font-family:var(--font-kr); font-size:22px; line-height:1.5; color:var(--gray); margin-top:24px; font-weight:500;">데이터 기반 의사결정으로 기업의<br>지속가능한 성장을 실현하는 전문 파트너</div>
|
||
</div>
|
||
|
||
<div style="border-top:1px solid var(--brown); padding-top:28px;">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Vision · 비전</div>
|
||
<div style="font-family:var(--font-en); font-size:38px; font-weight:500; line-height:1.25; color:var(--brown); letter-spacing:-0.01em;">Evangelists of marketing<br>science and data literacy</div>
|
||
<div style="font-family:var(--font-kr); font-size:22px; line-height:1.5; color:var(--gray); margin-top:24px; font-weight:500;">마케팅 과학과 데이터 리터러시의 전도사</div>
|
||
</div>
|
||
|
||
<div style="border-top:1px solid var(--gray-light); padding-top:28px;">
|
||
<div class="uppercase-label" style="color:var(--gray); margin-bottom:16px;">Tagline · 태그라인</div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; line-height:1; color:var(--brown); letter-spacing:-0.02em; font-style:italic;">Analysis, Treatment<br>& Growth</div>
|
||
<div style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-top:20px;">진단 · 처방 · 성장</div>
|
||
</div>
|
||
|
||
<div style="border-top:1px solid var(--gray-light); padding-top:28px; background:var(--brown); color:var(--beige); margin:0 -32px; padding:28px 32px;">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Internal Motto · 내부 모토</div>
|
||
<div style="font-family:var(--font-en); font-size:72px; font-weight:700; line-height:0.95; color:var(--beige); letter-spacing:-0.02em;">Think<br>Forward</div>
|
||
<div style="font-family:var(--font-kr); font-size:16px; color:var(--warm-gray); margin-top:20px; opacity:0.8;">우리 안의 약속 — 함께 앞을 보는 동반자로서</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">04 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
05 — CORE VALUES + POSITION
|
||
============================================================ -->
|
||
<section data-screen-label="05 Core Values" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">01 · Brand Platform</span>
|
||
<span class="s-section-id">Core Values · Position</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Core Values & Brand Position</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Four values, one position</h2>
|
||
<div class="content-subtitle">네 가지 핵심 가치가 우리의 모든 진단, 처방, 성장 설계를 관통한다.</div>
|
||
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:80px;">
|
||
|
||
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div>
|
||
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 01</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Science</div>
|
||
</div>
|
||
<div>
|
||
<div class="content-kr" style="font-size:18px; line-height:1.5;">과학적 방법론, 검증, 데이터 기반 판단</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div>
|
||
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 02</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Practice</div>
|
||
</div>
|
||
<div>
|
||
<div class="content-kr" style="font-size:18px; line-height:1.5;">실행 가능하고 현실적인 해법</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div>
|
||
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 03</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Outcome</div>
|
||
</div>
|
||
<div>
|
||
<div class="content-kr" style="font-size:18px; line-height:1.5;">측정 가능한 성과 중심</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div>
|
||
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 04</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Insights</div>
|
||
</div>
|
||
<div>
|
||
<div class="content-kr" style="font-size:18px; line-height:1.5;">복잡한 문제를 분명한 인사이트로 전환</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top:36px; padding:24px 32px; border:1px solid var(--brown); display:flex; gap:36px; align-items:center;">
|
||
<div>
|
||
<div class="uppercase-label">Brand Position</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.015em; margin-top:6px;">AI & Data-driven Marketing Innovation Partner</div>
|
||
<div class="content-kr" style="font-size:16px; margin-top:6px; font-weight:500;">AI와 데이터 기반 마케팅 혁신의 파트너</div>
|
||
</div>
|
||
<div style="border-left:1px solid var(--gray-light); padding-left:36px; max-width:520px;">
|
||
<div style="font-family:var(--font-en); font-size:14px; line-height:1.55; color:var(--gray);">대기업 수준의 데이터·AI 역량을 중견기업과 스타트업에 맞춤 실행력으로 전달한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">05 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
06 — BRAND DIMENSIONS (4D)
|
||
============================================================ -->
|
||
<section data-screen-label="06 Brand Dimensions" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">01 · Brand Platform</span>
|
||
<span class="s-section-id">Brand Dimensions</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.3</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">4D Brand Dimensions · 4차원 브랜드 구조</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Functional, Emotional, Experiential, Social</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:64px; border-top:1px solid var(--brown);">
|
||
|
||
<div style="border-bottom:1px solid var(--gray-light); border-right:1px solid var(--gray-light); padding:36px 40px 36px 0; display:grid; grid-template-columns:200px 1fr; gap:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">Functional</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">기능적</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">데이터 기반 진단-처방-성장 프레임워크를 통해 측정 가능한 성과를 설계한다</div>
|
||
<div style="margin-top:16px; display:inline-block; padding:6px 14px; background:var(--brown); color:var(--beige); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Analysis, Treatment & Growth</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-bottom:1px solid var(--gray-light); padding:36px 0 36px 40px; display:grid; grid-template-columns:200px 1fr; gap:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">Emotional</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">감성적</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">함께 문제를 풀어가는 동반자로서, 고객과 같은 방향을 바라본다</div>
|
||
<div style="margin-top:16px; display:inline-block; padding:6px 14px; background:var(--brown); color:var(--olive); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Think Forward</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-bottom:1px solid var(--brown); border-right:1px solid var(--gray-light); padding:36px 40px 36px 0; display:grid; grid-template-columns:200px 1fr; gap:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">Experiential</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">경험적</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">과학적인 마케팅 문제 해결 — 성과 중심, 데이터 기반, 지속 성장</div>
|
||
<div style="margin-top:16px; display:inline-block; padding:6px 14px; border:1px solid var(--brown); color:var(--brown); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">SMART Marketing Intelligence</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-bottom:1px solid var(--brown); padding:36px 0 36px 40px; display:grid; grid-template-columns:200px 1fr; gap:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">Social</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">사회적</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">누구나 활용 가능한 보편적 데이터 & AI 역량의 전도사</div>
|
||
<div style="margin-top:16px; display:inline-block; padding:6px 14px; border:1px solid var(--brown); color:var(--brown); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Data Literacy for All</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top:48px; padding:32px 40px; background:var(--gray-bg); display:flex; gap:36px; align-items:baseline;">
|
||
<div class="uppercase-label" style="white-space:nowrap;">Brand Promise</div>
|
||
<div style="font-family:var(--font-kr); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">"진단의 정확함으로 시작하여, 성장의 구조를 함께 만듭니다."</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">06 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
07 — BRAND CHARACTER
|
||
============================================================ -->
|
||
<section data-screen-label="07 Brand Character" class="s-dark">
|
||
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
|
||
<div class="s-header">
|
||
<span class="s-sys">01 · Brand Platform</span>
|
||
<span class="s-section-id">Brand Character</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.4</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--warm-gray);">Brand Character · 브랜드 인격</span>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:560px 1fr; gap:96px; margin-top:48px;">
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.2em; color:var(--olive); text-transform:uppercase; margin-bottom:24px;">The Character</div>
|
||
<div style="font-family:var(--font-kr); font-size:62px; font-weight:800; line-height:1.1; color:var(--beige); letter-spacing:-0.025em;">성과중심의<br>데이터 기반<br>마케팅 과학자</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--warm-gray); margin-top:36px; max-width:480px; font-style:italic;">Outcome-focused, Data-driven Marketing Scientist — proves marketing by hypothesis, measurement, and replicable method. Speaks in data, experiments, and structure rather than guesses and generalities.</div>
|
||
<div style="font-family:var(--font-kr); font-size:18px; line-height:1.6; color:var(--warm-gray); margin-top:20px; max-width:480px;">엄밀한 가설 검증, 측정 가능한 KPI, 재현 가능한 방법론으로 마케팅 성과를 설계하는 분석가형 전문가</div>
|
||
|
||
<div style="margin-top:36px; padding:16px 20px; border:1px solid rgba(229,225,210,0.25); display:flex; gap:16px; align-items:baseline; max-width:480px;">
|
||
<span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">NOTE · §2.9.1</span>
|
||
<span style="font-family:var(--font-kr); font-size:13px; color:var(--warm-gray); line-height:1.55;">"지혜로운 상담 마케팅 주치의" 캐릭터는 <strong style="color:var(--beige); font-weight:700;">OurDigital</strong>로 이관 (2026-05-17) — 별도 브랜드 시스템에서 관리</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="border-left:1px solid rgba(255,255,255,0.15); padding-left:64px;">
|
||
<div class="uppercase-label" style="color:var(--warm-gray); margin-bottom:24px;">Five Character Traits</div>
|
||
|
||
<div style="display:flex; flex-direction:column; gap:20px;">
|
||
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">과학적 엄정성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">SCIENTIFIC RIGOR · SCIENCE</span></div>
|
||
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">가설 → 측정 → 검증 → 개선의 순환을 일관되게 적용한다</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">성과 지향성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">OUTCOME ORIENTATION · OUTCOME</span></div>
|
||
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">측정 가능한 KPI 변화로 결과를 보여준다</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">실행 가능성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">EXECUTABILITY · PRACTICE</span></div>
|
||
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">추상적 권고가 아닌 즉시 적용 가능한 처방을 제시한다</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">구조적 사고<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">STRUCTURAL THINKING · INSIGHTS</span></div>
|
||
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">단편적 답변이 아닌 의사결정 프레임워크를 설계한다</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px;">
|
||
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">정직한 한계 표시<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">HONEST LIMITS · 약속 #3</span></div>
|
||
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">데이터·가정의 한계를 분명히 명시한다</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag" style="color:var(--olive); opacity:1;">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page" style="color:var(--warm-gray);">07 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
08 — HERITAGE PROMISE (7가지 약속)
|
||
============================================================ -->
|
||
<section data-screen-label="08 Heritage Promise" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">01 · Brand Platform</span>
|
||
<span class="s-section-id">Heritage Promise · 2011</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.5</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Heritage Promise — Seven Promises from 2011, D&A</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Seven promises that still hold</h2>
|
||
<div class="content-subtitle">2011년 창업 당시의 약속은 지금의 Core Values와 톤앤매너의 원형이다.<br>이 일곱 가지가 Brand Character의 인간적 깊이를 부여한다.</div>
|
||
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
|
||
|
||
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 01</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람과 사람의<br>이야기를 이어갑니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 02</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람의 얼굴을 한<br>브랜드를 그립니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 03</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">진실된 고객 가치만을<br>이야기합니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px; background:var(--beige); margin:0 -16px; padding:28px 16px;">
|
||
<div class="mono" style="font-size:13px; color:var(--brown); letter-spacing:0.2em; font-weight:500;">PROMISE 04 · 톤의 원형</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:700;">조심스럽게 듣고<br>담백하게 말합니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 05</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">큰 성공보다는<br>작은 믿음을 약속합니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 06</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">새로운 도전과 실패를<br>두려워하지 않습니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
|
||
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 07</div>
|
||
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람의 온기와 향기를<br>남깁니다.</div>
|
||
</div>
|
||
|
||
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px; justify-content:center;">
|
||
<div class="mono" style="font-size:13px; color:var(--gray); letter-spacing:0.2em; font-weight:500;">SINCE 2011</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); line-height:1.55; font-style:italic;">"이 7가지 약속은 현재의 Core Values와 톤앤매너의 원형이며, Brand Character의 인간적 깊이를 부여하는 근간이다."</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">08 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
09 — SECTION DIVIDER: 02 Logo
|
||
============================================================ -->
|
||
<section data-screen-label="09 Section 02 Logo" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 02</span>
|
||
</div>
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">02</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Two</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Logo &<br>Logomark</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">로고와 로고마크</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">펜타곤-애로우 마크가 'think forward' 모토를 품고, 워드마크와 함께 놓인다. 변형은 다섯 가지, 클리어 스페이스는 'D.'의 높이.</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute; right:160px; top:50%; transform:translateY(-50%); width:520px; height:520px; display:flex; align-items:center; justify-content:center;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:100%; max-height:100%; object-fit:contain;">
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">09 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
10 — LOGO PRIMARY
|
||
============================================================ -->
|
||
<section data-screen-label="10 Logo Primary" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">02 · Logo & Logomark</span>
|
||
<span class="s-section-id">Primary Lockup</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Primary Lockup · 기본 조합</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">The horizontal lockup leads</h2>
|
||
|
||
<div style="margin-top:48px; padding:64px 80px; background:var(--beige); position:relative; min-height:280px; display:flex; align-items:center; justify-content:center;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:780px; max-height:180px; object-fit:contain;">
|
||
<!-- clear space markers -->
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;" viewBox="0 0 1500 380" preserveAspectRatio="none">
|
||
<g stroke="#727171" stroke-width="0.5" stroke-dasharray="4 4" fill="none" opacity="0.4">
|
||
<rect x="80" y="40" width="1340" height="300" />
|
||
</g>
|
||
<g fill="#727171" font-family="DM Sans" font-size="9" opacity="0.6">
|
||
<text x="40" y="50" text-anchor="middle">x</text>
|
||
<text x="1460" y="50" text-anchor="middle">x</text>
|
||
<text x="40" y="340" text-anchor="middle">x</text>
|
||
<text x="1460" y="340" text-anchor="middle">x</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; margin-top:36px;">
|
||
<div>
|
||
<div class="uppercase-label">Clear Space</div>
|
||
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;">All sides ≥ height of <span style="font-weight:700;">'D.'</span> element</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">사방 여백은 워드마크 'D.'의 높이 이상</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label">Minimum Size</div>
|
||
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;"><span style="font-weight:700;">Digital</span> 120px wide · <span style="font-weight:700;">Print</span> 30mm wide</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">디지털 120px / 인쇄 30mm 이상</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label">Color Mode</div>
|
||
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;">D Brown <span class="mono" style="color:var(--gray); font-size:13px;">#231815</span> on light · White on dark</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">밝은 배경 D Brown, 어두운 배경 White</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">10 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
11 — LOGO VARIATIONS
|
||
============================================================ -->
|
||
<section data-screen-label="11 Logo Variations" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">02 · Logo & Logomark</span>
|
||
<span class="s-section-id">Variations</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Variations · 변형</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Five lockups, one system</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:36px;">
|
||
|
||
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:110px; object-fit:contain;">
|
||
</div>
|
||
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">01 · Horizontal — Primary</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">가로형 · 기본 사용</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
|
||
<img src="assets/logos/square.png" style="max-width:60%; max-height:160px; object-fit:contain;">
|
||
</div>
|
||
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">02 · Square — Avatar</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">정방형 · 프로필, 파비콘</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
|
||
<img src="assets/logos/motto.png" style="max-width:70%; max-height:160px; object-fit:contain;">
|
||
</div>
|
||
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">03 · Motto Mark</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">모토 마크 · 'think forward'</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--brown); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
|
||
<img src="assets/logos/horizontal_white.png" style="max-width:90%; max-height:110px; object-fit:contain;">
|
||
</div>
|
||
<div style="border-top:1px solid rgba(229,225,210,0.2); padding-top:16px;">
|
||
<div class="uppercase-label" style="color:var(--warm-gray);">04 · Horizontal — Reverse</div>
|
||
<div style="font-family:var(--font-kr); font-size:14px; color:var(--warm-gray); margin-top:4px; opacity:0.7;">가로형 · 반전 (어두운 배경)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--brown); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
|
||
<img src="assets/logos/vertical_white.png" style="max-width:55%; max-height:180px; object-fit:contain;">
|
||
</div>
|
||
<div style="border-top:1px solid rgba(229,225,210,0.2); padding-top:16px;">
|
||
<div class="uppercase-label" style="color:var(--warm-gray);">05 · Vertical — Reverse</div>
|
||
<div style="font-family:var(--font-kr); font-size:14px; color:var(--warm-gray); margin-top:4px; opacity:0.7;">세로형 · 반전</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--gray-bg); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between; border:1px dashed var(--gray-light);">
|
||
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1; flex-direction:column; gap:12px;">
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Selection Logic</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; color:var(--brown); line-height:1.55; text-align:center; max-width:240px;">Use 01 by default. 02 for circular crops. 03 for stamp / seal. 04–05 only on dark backgrounds.</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">11 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
12 — LOGO DON'TS
|
||
============================================================ -->
|
||
<section data-screen-label="12 Logo Donts" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">02 · Logo & Logomark</span>
|
||
<span class="s-section-id">Logo Don'ts</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.3</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Logo Don'ts · 사용 금지</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">What never to do</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
|
||
<div>
|
||
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; transform:scaleX(1.5);">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't stretch or distort</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">로고를 변형하지 마세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:linear-gradient(135deg,#CEDC00,#0075C0); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:50%; object-fit:contain;">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#fff" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't place on gradients</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">그라데이션 위에 두지 마세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.5));">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't add shadows or glows</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">그림자나 효과를 더하지 마세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:var(--olive); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal_white.png" style="max-width:90%; max-height:60%; object-fit:contain;">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#231815" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't use low-contrast pairings</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">대비가 낮은 배경을 피하세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; filter:hue-rotate(120deg);">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't recolor</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">색을 변경하지 마세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; transform:rotate(-12deg);">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't rotate</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">회전시키지 마세요</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
|
||
<div style="display:flex; flex-direction:column; align-items:center; gap:4px;"><img src="assets/logos/horizontal.png" style="max-width:90%; max-height:50px; object-fit:contain;"><div style="font-family:var(--font-en); font-size:14px; font-style:italic; color:var(--brown);">— Analysis, Treatment & Growth —</div></div>
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't lock to tagline</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">태그라인과 잠금 조합 금지</div></div></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="height:200px; background:url('assets/logos/horizontal.png') center/cover; position:relative; overflow:hidden;">
|
||
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; position:absolute; inset:20% 5%;">
|
||
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
|
||
</div>
|
||
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't place on busy imagery</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">복잡한 이미지 위에 두지 마세요</div></div></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">12 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
13 — SECTION DIVIDER: 03 Color
|
||
============================================================ -->
|
||
<section data-screen-label="13 Section 03 Color" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 03</span>
|
||
</div>
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">03</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Three</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Color<br>System</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">컬러 시스템</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">D Beige가 표지를 안내하고, D Brown이 본문을 지탱하며, D Olive는 절제된 액센트로 자리한다.</div>
|
||
</div>
|
||
</div>
|
||
<!-- decorative palette stripe -->
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:0; width:340px;">
|
||
<div style="height:90px; background:var(--beige);"></div>
|
||
<div style="height:90px; background:var(--brown);"></div>
|
||
<div style="height:90px; background:var(--olive);"></div>
|
||
<div style="height:90px; background:var(--blue);"></div>
|
||
<div style="height:90px; background:var(--gray);"></div>
|
||
<div style="height:90px; background:var(--gray-light);"></div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">13 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
14 — COLOR PALETTE
|
||
============================================================ -->
|
||
<section data-screen-label="14 Color Palette" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">03 · Color System</span>
|
||
<span class="s-section-id">Full Palette</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">03.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Brand Palette · 브랜드 팔레트</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Eight colors, clear roles</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
|
||
|
||
<div>
|
||
<div style="background:var(--beige); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--gray-light);">
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Primary BG · New</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Beige</div>
|
||
<div class="mono" style="font-size:13px; color:var(--brown); opacity:0.6; margin-top:4px;">#E5E1D2 · R229 G225 B210</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Cover & section dividers. The mature successor to 2022's D Olive.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--brown); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--beige); font-weight:500; text-transform:uppercase;">Dark BG · Text</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); letter-spacing:-0.01em;">D Brown</div>
|
||
<div class="mono" style="font-size:13px; color:var(--warm-gray); margin-top:4px;">#231815 · R35 G24 B21</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Primary text. Closing slides & emphasis backgrounds. Replaces pure black.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--olive); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Accent — Use Sparingly</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Olive</div>
|
||
<div class="mono" style="font-size:13px; color:var(--brown); opacity:0.7; margin-top:4px;">#CEDC00 · R206 G220 B0</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Highlight chips, callouts, three-dot motif. Never as full background.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--blue); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--white); font-weight:500; text-transform:uppercase;">Digital · Data Viz</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--white); letter-spacing:-0.01em;">D Blue</div>
|
||
<div class="mono" style="font-size:13px; color:var(--white); opacity:0.7; margin-top:4px;">#0075C0 · R0 G117 B192</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Diagrams, data visualisations, hyperlinks. Web only.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--gray); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--white); font-weight:500; text-transform:uppercase;">Secondary Text</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--white); letter-spacing:-0.01em;">D Gray</div>
|
||
<div class="mono" style="font-size:12px; color:var(--white); opacity:0.7; margin-top:2px;">#727171</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--gray-light); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Border · 0.5pt</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Border</div>
|
||
<div class="mono" style="font-size:12px; color:var(--brown); opacity:0.6; margin-top:2px;">#BFBFBF</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--gray-bg); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--gray-light);">
|
||
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Card · Surface</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Light Gray</div>
|
||
<div class="mono" style="font-size:12px; color:var(--gray); margin-top:2px;">#F2F2F2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="background:var(--warm-gray); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Header Bar · Top-left</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">Warm Gray</div>
|
||
<div class="mono" style="font-size:12px; color:var(--brown); opacity:0.6; margin-top:2px;">#C8C4B8</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">14 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
15 — COLOR USAGE EVOLUTION
|
||
============================================================ -->
|
||
<section data-screen-label="15 Color Usage" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">03 · Color System</span>
|
||
<span class="s-section-id">Usage Evolution</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">03.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Usage Evolution · 사용 변천</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">2022 → 2025 → 2026</h2>
|
||
<div class="content-subtitle">올리브가 지배하던 2022에서, 베이지가 표지를 안내하는 2025를 거쳐 — 컨설팅 등급의 성숙한 톤이 2026의 기준이다.</div>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-top:64px;">
|
||
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--gray); margin-bottom:16px;">2022 · Olive-led</div>
|
||
<div style="display:flex; flex-direction:column; gap:8px;">
|
||
<div style="height:100px; background:var(--olive); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500;">Cover BG · #CEDC00</div>
|
||
<div style="height:60px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--gray); line-height:1.5; margin-top:16px;">Bright, energetic — but reads as tech startup rather than consultancy.</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--brown); margin-bottom:16px;">2025 · Beige-led</div>
|
||
<div style="display:flex; flex-direction:column; gap:8px;">
|
||
<div style="height:100px; background:var(--beige); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500;">Cover / Section · #E5E1D2</div>
|
||
<div style="height:60px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--gray); line-height:1.5; margin-top:16px;">Warm, mature, consultancy-grade. Olive demoted to accent only.</div>
|
||
</div>
|
||
|
||
<div style="background:var(--gray-bg); margin:0 -16px; padding:0 16px;">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-top:16px; margin-bottom:16px;">2026 · Refined</div>
|
||
<div style="display:flex; flex-direction:column; gap:8px;">
|
||
<div style="height:100px; background:var(--beige); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500; position:relative;">Cover / Section · #E5E1D2<span style="position:absolute; right:20px; width:8px; height:8px; border-radius:50%; background:var(--olive);"></span></div>
|
||
<div style="height:50px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
|
||
<div style="height:50px; background:var(--brown); display:flex; align-items:center; padding:0 20px; color:var(--beige); font-family:var(--font-en); font-size:13px;">Closing · #231815</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:16px; padding-bottom:16px;">Three-tier system. D Brown joins as the dark anchor for emphasis & closing slides.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px;">
|
||
<div style="border-left:3px solid var(--olive); padding-left:24px;">
|
||
<div class="uppercase-label">Demoted</div>
|
||
<div style="font-family:var(--font-en); font-size:20px; font-weight:500; color:var(--brown); margin-top:8px;">D Olive (#CEDC00) — from dominant background to accent-only: circles, highlights, Venn overlaps.</div>
|
||
</div>
|
||
<div style="border-left:3px solid var(--blue); padding-left:24px;">
|
||
<div class="uppercase-label">Reserved</div>
|
||
<div style="font-family:var(--font-en); font-size:20px; font-weight:500; color:var(--brown); margin-top:8px;">D Blue (#0075C0) — digital/web accent only: diagrams, data visualisations.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">15 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
16 — SECTION DIVIDER: 04 Typography
|
||
============================================================ -->
|
||
<section data-screen-label="16 Section 04 Typography" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 04</span>
|
||
</div>
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">04</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Four</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Typography</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">타이포그래피</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">DM Sans for English clarity. Apple SD Gothic Neo for Korean warmth. Two families, calibrated to read as one voice.</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right;">
|
||
<div style="font-family:var(--font-en); font-size:180px; font-weight:700; color:var(--brown); line-height:1; letter-spacing:-0.04em;">Aa</div>
|
||
<div style="font-family:var(--font-kr); font-size:180px; font-weight:800; color:var(--brown); line-height:1; letter-spacing:-0.04em; margin-top:16px;">가</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">16 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
17 — TYPEFACE: DM SANS + APPLE SD GOTHIC NEO
|
||
============================================================ -->
|
||
<section data-screen-label="17 Typefaces" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">04 · Typography</span>
|
||
<span class="s-section-id">Typefaces</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">04.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Typefaces · 사용 서체</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Two families, one voice</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:64px;">
|
||
|
||
<!-- DM SANS -->
|
||
<div>
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">English · 영문</div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:8px;">DM Sans</div>
|
||
</div>
|
||
<div class="mono" style="font-size:13px; color:var(--gray); text-align:right;">SIL Open Font License<br>Latin · Geometric Sans</div>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:20px; margin-top:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Regular · 400</div>
|
||
<div style="font-family:var(--font-en); font-weight:400; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.01em;">D.intelligence — Analysis, Treatment & Growth</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Medium · 500</div>
|
||
<div style="font-family:var(--font-en); font-weight:500; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.01em;">Objective-oriented Measurement</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Bold · 700</div>
|
||
<div style="font-family:var(--font-en); font-weight:700; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.015em;">Think Forward.</div>
|
||
</div>
|
||
<div style="margin-top:8px;">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.1em;">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & @ # ? !</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- APPLE SD GOTHIC NEO -->
|
||
<div>
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--olive);">Korean · 한글</div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:8px;">Apple SD Gothic Neo</div>
|
||
</div>
|
||
<div class="mono" style="font-size:13px; color:var(--gray); text-align:right;">macOS / iOS<br>한글 산세리프</div>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:20px; margin-top:32px;">
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Light · 300</div>
|
||
<div style="font-family:var(--font-kr); font-weight:300; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.02em;">디인텔리전스 데이터 기반 의사결정</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Medium · 500</div>
|
||
<div style="font-family:var(--font-kr); font-weight:500; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.02em;">진단으로 시작하여 성장으로 잇다</div>
|
||
</div>
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:8px;">Bold · 700</div>
|
||
<div style="font-family:var(--font-kr); font-weight:700; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.025em;">성과중심의 데이터 기반 마케팅 과학자</div>
|
||
</div>
|
||
<div style="margin-top:8px;">
|
||
<div style="font-family:var(--font-kr); font-size:13px; color:var(--gray); letter-spacing:0.06em;">가 나 다 라 마 바 사 아 자 차 카 타 파 하 · ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ · 0 1 2 3 4 5 6 7 8 9</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">17 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
18 — TYPE SCALE
|
||
============================================================ -->
|
||
<section data-screen-label="18 Type Scale" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">04 · Typography</span>
|
||
<span class="s-section-id">Type Scale</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">04.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Type Scale · 타입 스케일</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Hierarchy at a glance</h2>
|
||
|
||
<div style="margin-top:48px; border-top:2px solid var(--brown);">
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--gray-light); font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray); font-weight:500;">
|
||
<div>Element</div><div>Size</div><div>Weight</div><div>Color</div><div>Sample</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Display Title</div><div class="content-kr" style="font-size:13px; color:var(--gray);">섹션 디바이더</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">54–112pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">700–800</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
|
||
<div style="font-family:var(--font-en); font-size:54px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Think Forward.</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Slide Title</div><div class="content-kr" style="font-size:13px; color:var(--gray);">슬라이드 제목</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">28–44pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">700</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.015em;">Diagnose. Prescribe. Grow.</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Subtitle · Caption</div><div class="content-kr" style="font-size:13px; color:var(--gray);">부제 · 캡션</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">14–18pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">D Gray</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:400; color:var(--gray); line-height:1.5;">Marketing science for measurable growth.</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Body Text</div><div class="content-kr" style="font-size:13px; color:var(--gray);">본문</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">11–14pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:400; color:var(--brown); line-height:1.55;">현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다. 채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15–20% 절감 가능성을 진단합니다.</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Footnote · Page</div><div class="content-kr" style="font-size:13px; color:var(--gray);">각주 · 페이지</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">8–13pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">D Gray</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; font-weight:400; color:var(--gray); letter-spacing:0.06em;">— Analysis, Treatment & Growth — · 12 / 28</div>
|
||
</div>
|
||
|
||
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:2px solid var(--brown); align-items:center;">
|
||
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Header Bar</div><div class="content-kr" style="font-size:13px; color:var(--gray);">헤더 바</div></div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">10–14pt</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
|
||
<div class="mono" style="font-size:14px; color:var(--brown);">Warm Gray</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:400; color:var(--warm-gray); letter-spacing:0.08em; text-transform:uppercase;">D.intelligence Design System 2026</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">18 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
19 — LAYOUT MOTIFS
|
||
============================================================ -->
|
||
<section data-screen-label="19 Layout Motifs" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">05 · Layout & Motifs</span>
|
||
<span class="s-section-id">Visual Language</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">05.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Layout Motifs · 레이아웃 모티프</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Three quiet motifs</h2>
|
||
<div class="content-subtitle">조용한 세 가지 장치가 모든 슬라이드의 리듬을 만든다. 화려한 그래픽 대신 — 선 하나, 점 셋, 캡션 한 줄.</div>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-top:64px;">
|
||
|
||
<!-- Motif 01 -->
|
||
<div>
|
||
<div style="background:var(--beige); height:380px; padding:48px; position:relative;">
|
||
<div style="position:absolute; left:48px; top:48px; bottom:48px; width:1px; background:var(--warm-gray);"></div>
|
||
<div style="padding-left:36px; height:100%; display:flex; flex-direction:column; justify-content:center;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">03</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray); margin-top:16px;">Chapter Three</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1; margin-top:24px;">Section<br>Title.</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:16px; opacity:0.7;">섹션 타이틀</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">Motif 01 · Vertical Line Accent</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">Thin 1px line in Warm Gray on the left of every section divider. Height varies with title.</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">섹션 디바이더 왼쪽 1px 수직선</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Motif 02 -->
|
||
<div>
|
||
<div style="background:var(--white); border:1px solid var(--gray-light); height:380px; padding:48px; position:relative;">
|
||
<div style="position:absolute; top:36px; right:36px; display:flex; gap:8px;">
|
||
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
|
||
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
|
||
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
|
||
</div>
|
||
<div style="height:100%; display:flex; flex-direction:column; justify-content:center;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">DATA</div>
|
||
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1; margin-top:8px;">INTELLIGENCE</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:16px; opacity:0.7;">표지 / 강조 슬라이드</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">Motif 02 · Three-Dot Marker</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">Three small dots (• • •) in the upper-right corner of cover and featured slides.</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">표지·중요 슬라이드 우상단 세 점</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Motif 03 -->
|
||
<div>
|
||
<div style="background:var(--white); border:1px solid var(--gray-light); height:380px; padding:48px; position:relative; display:flex; flex-direction:column; justify-content:space-between;">
|
||
<div>
|
||
<div class="uppercase-label" style="color:var(--brown);">Content Area</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:500; color:var(--brown); letter-spacing:-0.01em; margin-top:16px; line-height:1.3;">Analysis,<br>Treatment<br>& Growth.</div>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-en); font-size:11px; color:var(--gray); letter-spacing:0.08em; padding-top:16px; border-top:0.5px solid var(--gray-light);">
|
||
<span style="font-style:italic;">— Analysis, Treatment & Growth —</span>
|
||
<span style="font-weight:500;">12 / 28</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:20px;">
|
||
<div class="uppercase-label" style="color:var(--brown);">Motif 03 · Footer Convention</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">'Analysis, Treatment & Growth' tagline + page number on every content slide.</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">본문 슬라이드 푸터에 태그라인 + 페이지</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">19 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
20 — GRID + SLIDE TEMPLATES
|
||
============================================================ -->
|
||
<section data-screen-label="20 Templates" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">06 · Slide Templates</span>
|
||
<span class="s-section-id">Four Templates</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">06.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Slide Templates · 슬라이드 템플릿</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Cover · Section · Content · Closing</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; margin-top:64px;">
|
||
|
||
<!-- COVER -->
|
||
<div>
|
||
<div style="aspect-ratio:16/9; background:var(--beige); position:relative; padding:18px; box-shadow:0 1px 0 var(--gray-light); border:1px solid var(--gray-light);">
|
||
<div style="position:absolute; top:14px; right:18px; display:flex; gap:3px;"><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i></div>
|
||
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%);">
|
||
<div style="font-family:var(--font-en); font-size:6px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-bottom:6px;">— A,T & G —</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">D.</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">intelligence</div>
|
||
</div>
|
||
<div style="position:absolute; right:18px; top:50%; transform:translateY(-50%); text-align:right;">
|
||
<div style="font-family:var(--font-en); font-size:6px; letter-spacing:0.2em; color:var(--gray);">DESIGN SYSTEM</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:700; color:var(--brown);">2026</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 01</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Cover</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">표지 · D Beige BG · 세 점 모티프</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SECTION -->
|
||
<div>
|
||
<div style="aspect-ratio:16/9; background:var(--beige); position:relative; padding:18px; border:1px solid var(--gray-light);">
|
||
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%); display:flex; gap:10px;">
|
||
<div style="width:0.5px; background:var(--warm-gray); align-self:stretch; min-height:60px;"></div>
|
||
<div>
|
||
<div class="mono" style="font-size:5px; color:var(--olive); letter-spacing:0.2em;">02</div>
|
||
<div style="font-family:var(--font-en); font-size:5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-top:4px;">CHAPTER TWO</div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em; margin-top:8px;">Section</div>
|
||
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">Title.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 02</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Section Divider</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">섹션 디바이더 · 수직선 액센트</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTENT -->
|
||
<div>
|
||
<div style="aspect-ratio:16/9; background:var(--white); position:relative; padding:18px; border:1px solid var(--gray-light);">
|
||
<div style="display:flex; justify-content:space-between; font-family:var(--font-en); font-size:5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--warm-gray);"><span>D.intelligence DS 2026</span><span>Chapter 03</span></div>
|
||
<div style="margin-top:18px;">
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">Content Slide Title.</div>
|
||
<div style="font-family:var(--font-en); font-size:6px; color:var(--gray); margin-top:6px; line-height:1.5;">Body text — DM Sans & Apple SD Gothic Neo. Keep body 11–14pt for readability with generous whitespace.</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px;">
|
||
<div style="aspect-ratio:1; background:var(--gray-bg); border:1px solid var(--gray-light);"></div>
|
||
<div style="aspect-ratio:1; background:var(--gray-bg); border:1px solid var(--gray-light);"></div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute; bottom:14px; left:18px; right:18px; display:flex; justify-content:space-between; font-family:var(--font-en); font-size:5px; color:var(--gray); padding-top:4px; border-top:0.5px solid var(--gray-light);"><span style="font-style:italic;">— A, T & G —</span><span>12 / 28</span></div>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 03</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Content</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">본문 · 흰 배경 · 헤더+푸터</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CLOSING -->
|
||
<div>
|
||
<div style="aspect-ratio:16/9; background:var(--brown); position:relative; padding:18px; border:1px solid var(--brown);">
|
||
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%);">
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); line-height:0.95; letter-spacing:-0.02em;">Thank</div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); line-height:0.95; letter-spacing:-0.02em;">You.</div>
|
||
<div style="font-family:var(--font-en); font-size:7px; font-style:italic; color:var(--olive); margin-top:10px;">— Think Forward —</div>
|
||
</div>
|
||
<div style="position:absolute; right:18px; bottom:18px; text-align:right;">
|
||
<div style="font-family:var(--font-en); font-size:5px; color:var(--warm-gray); line-height:1.5;">W. dintelligence.co.kr<br>E. info@dintelligence.co.kr</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 04</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Closing</div>
|
||
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">클로징 · D Brown BG · 연락처</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top:48px; padding:28px 36px; background:var(--gray-bg); display:flex; gap:48px; align-items:center;">
|
||
<div class="uppercase-label" style="white-space:nowrap;">Grid</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; color:var(--brown); line-height:1.55;"><strong style="font-weight:700;">12-column · 96px outer margin · 24px gutter.</strong> 상단 헤더 56px · 하단 푸터 56px · 본문 시작 220px · 본문 끝 -140px.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">20 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
21 — SECTION DIVIDER: 07 Service Architecture
|
||
============================================================ -->
|
||
<section data-screen-label="21 Section 07 Service" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 07</span>
|
||
</div>
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">07</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Seven</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Service<br>Architecture</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">서비스 아키텍처</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">3-Phase × 17 Modules × 4 Categories. v1.3 Brand Guide 기준으로 시각 체계화된 서비스 아키텍처</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">
|
||
<div>Analysis<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">진단 · A1–A6</span></div>
|
||
<div style="color:var(--gray); font-size:32px;">↓</div>
|
||
<div>Treatment<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">처방 · T1–T7</span></div>
|
||
<div style="color:var(--gray); font-size:32px;">↓</div>
|
||
<div>Growth<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">성장 · G1–G4</span></div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">21 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
22 — 3-PHASE OVERVIEW
|
||
============================================================ -->
|
||
<section data-screen-label="22 3-Phase Overview" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">07 · Service Architecture</span>
|
||
<span class="s-section-id">3-Phase Framework</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">07.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">3-Phase Framework · 3단계 프레임워크</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Diagnose · Prescribe · Grow</h2>
|
||
<div class="content-subtitle">고객의 디지털 성장 단계에 맞춘 3-Phase 프레임워크 — 진단으로 시작해, 실행으로 처방하고, 장기적 파트너십으로 성장을 잇는다.</div>
|
||
|
||
<!-- Phase row -->
|
||
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:64px;">
|
||
|
||
<div style="background:var(--beige); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative;">
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||
<span class="phase-badge"><span class="num">01</span>Phase One</span>
|
||
<div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">A1 — A6</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Analysis</div>
|
||
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--brown); margin-top:8px;">진단</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--brown); opacity:0.75;">현재 상태를 정확하게 진단하고 데이터 근거를 확보한다.</div>
|
||
<div style="margin-top:auto; padding-top:20px; border-top:1px solid rgba(35,24,21,0.15);">
|
||
<div class="uppercase-label" style="color:var(--brown);">6 Modules</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:8px;">비즈니스·브랜드 · 고객 분석 · 웹/앱 · 디지털 마케팅 · 퍼포먼스 · 운영·관리</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--brown); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative; color:var(--beige);">
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||
<span class="phase-badge" style="color:var(--beige);"><span class="num" style="background:var(--olive); color:var(--brown);">02</span>Phase Two</span>
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">T1 — T7</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--beige); letter-spacing:-0.02em; line-height:1;">Treatment</div>
|
||
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--beige); margin-top:8px;">처방</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--warm-gray);">진단 결과를 기반으로 구체적 개선·최적화 설계·실행으로 연결한다.</div>
|
||
<div style="margin-top:auto; padding-top:20px; border-top:1px solid rgba(229,225,210,0.2);">
|
||
<div class="uppercase-label" style="color:var(--warm-gray);">7 Modules · incl. signature</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--beige); line-height:1.5; margin-top:8px; opacity:0.85;">스토리텔링 · 접점 경험 · 자산 통합 · 콘텐츠 · 광고·전환 · <strong style="color:var(--olive); font-weight:700;">Brand Visibility (T6)</strong> · 자동화</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--white); border:1px solid var(--brown); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative;">
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||
<span class="phase-badge"><span class="num">03</span>Phase Three</span>
|
||
<div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">G1 — G4</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Growth</div>
|
||
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--brown); margin-top:8px;">성장</div>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--gray);">지속적 성장을 위한 장기 파트너십과 성과 관리.</div>
|
||
<div style="margin-top:auto; padding-top:20px; border-top:1px solid var(--gray-light);">
|
||
<div class="uppercase-label" style="color:var(--brown);">4 Modules</div>
|
||
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:8px;">퍼포먼스 마케팅 · 콘텐츠 대행 · 모니터링·이슈관리 · 연간 계약·운영</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Categories tag row -->
|
||
<div style="margin-top:48px; padding:24px 32px; background:var(--gray-bg); display:flex; gap:32px; align-items:center; flex-wrap:wrap;">
|
||
<div class="uppercase-label" style="white-space:nowrap;">Cross-cutting tags</div>
|
||
<div style="display:flex; gap:14px; flex-wrap:wrap;">
|
||
<span class="tag di">DI · Data Intelligence</span>
|
||
<span class="tag md">MD · Measurement Design</span>
|
||
<span class="tag mpo">MPO · Marketing Perf. Opt.</span>
|
||
<span class="tag bvt">BVT · Brand Visibility Treatment</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">22 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
23 — 17 MODULES GRID
|
||
============================================================ -->
|
||
<section data-screen-label="23 17 Modules" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">07 · Service Architecture</span>
|
||
<span class="s-section-id">17 Modules · Service Map v2.0</span>
|
||
</div>
|
||
<div style="position:absolute; top:180px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">07.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Service Map · 서비스 맵</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:44px;">Seventeen modules across three phases</h2>
|
||
|
||
<!-- ANALYSIS Row -->
|
||
<div style="margin-top:36px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--gray-light);">
|
||
<div style="padding-top:8px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 01</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Analysis</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray);">진단</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:repeat(6,1fr); gap:12px;">
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A1</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">비즈니스·브랜드 진단</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A2</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">고객·소비자 분석</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A3</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">데이터 분석 — 웹·앱</div><div style="margin-top:10px; display:flex; gap:4px; flex-wrap:wrap;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A4</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">디지털 마케팅 진단</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A5</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">퍼포먼스 마케팅 진단</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A6</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">운영·관리 진단</div><div style="margin-top:10px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TREATMENT Row -->
|
||
<div style="margin-top:20px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--gray-light);">
|
||
<div style="padding-top:8px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 02</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Treatment</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray);">처방</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:repeat(7,1fr); gap:12px;">
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T1</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">브랜드 스토리텔링 & 가이드</div><div style="margin-top:10px;"><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T2</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">고객 접점 경험 최적화</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T3</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">디지털 자산 통합관리</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T4</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">콘텐츠 마케팅</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T5</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">광고·전환 최적화</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--brown); background:var(--brown); padding:14px; min-height:120px; position:relative;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T6 ★</div><div style="font-family:var(--font-en); font-size:12px; font-weight:700; color:var(--beige); margin-top:6px; line-height:1.35;">Brand Visibility Treatment</div><div style="margin-top:10px;"><span style="display:inline-block; font-family:var(--font-en); font-size:9px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:2px 6px; background:var(--olive); color:var(--brown);">BVT · SIGNATURE</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T7</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">운영 시스템·자동화</div><div style="margin-top:10px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- GROWTH Row -->
|
||
<div style="margin-top:20px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start;">
|
||
<div style="padding-top:8px;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 03</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Growth</div>
|
||
<div class="content-kr" style="font-size:14px; color:var(--gray);">성장</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:calc((100% / 7 * 4) + (12px * 3));">
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G1</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">퍼포먼스 마케팅</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G2</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">콘텐츠 마케팅 대행</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G3</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">모니터링·이슈관리</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
|
||
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G4</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">연간 계약·운영</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">23 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
24 — SECTION DIVIDER: 08 Voice & Messaging
|
||
============================================================ -->
|
||
<section data-screen-label="24 Section 08 Voice" class="s-section">
|
||
<div class="s-header">
|
||
<span class="s-sys">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id">Chapter 08</span>
|
||
</div>
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
|
||
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
|
||
<div>
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">08</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Eight</div>
|
||
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Voice &<br>Messaging</h1>
|
||
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">목소리와 메시지</div>
|
||
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">Professional · Science-driven · Practice-oriented · Outcome-focused · Calm but confident.<br>조심스럽게 듣고, 담백하게 말한다.</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); max-width:520px; padding:36px; background:var(--white); border:1px solid var(--brown);">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-bottom:14px;">Standard Structure · 표준 구조</div>
|
||
<div style="font-family:var(--font-en); font-size:28px; font-weight:500; color:var(--brown); letter-spacing:-0.01em; line-height:1.3;">Problem Diagnosis → Data Evidence → Solution → Expected Growth Impact.</div>
|
||
<div class="content-kr" style="font-size:16px; color:var(--gray); margin-top:14px; line-height:1.5;">문제 진단 → 데이터 근거 → 해결 방안 → 예상 성과</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">24 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
25 — VOICE EXAMPLES (GOOD vs BAD)
|
||
============================================================ -->
|
||
<section data-screen-label="25 Voice Examples" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">08 · Voice & Messaging</span>
|
||
<span class="s-section-id">Voice Examples</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">08.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Voice Examples · 좋은 표현 / 나쁜 표현</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">How we sound, how we don't</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px;">
|
||
|
||
<!-- GOOD column -->
|
||
<div>
|
||
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown);">DO</span>
|
||
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 좋은 표현</span>
|
||
</div>
|
||
|
||
<div style="display:flex; flex-direction:column; gap:16px; margin-top:20px;">
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">진단형</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다."</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">데이터형</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"현 데이터 품질을 전제로 하면, 15–20% 범위의 CAC 절감 가능성이 있습니다."</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">전략형</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"단기적으로는 GA4 이벤트 재설계, 중기적으로는 대시보드 체계 구축이 타당합니다."</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">제안형</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"이 경우 핵심 지표는 채널별 전환율과 ROAS로 보아야 합니다."</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0;">
|
||
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">CTA형</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15–20% 절감 가능성을 진단합니다."</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BAD column -->
|
||
<div>
|
||
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--blue);">DON'T</span>
|
||
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 나쁜 표현</span>
|
||
</div>
|
||
|
||
<div style="display:flex; flex-direction:column; gap:16px; margin-top:20px;">
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">과장</div>
|
||
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"마케팅 효율을 획기적으로 높여드립니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 근거 없는 과장</div></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">보장</div>
|
||
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"반드시 매출이 올라갑니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 성과 보장 표현 금지</div></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">모호</div>
|
||
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"요즘은 다 이렇게 합니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 근거 없는 일반화</div></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">과시</div>
|
||
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"저희만의 독보적인 AI 기술이 있습니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 기술 과시</div></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0;">
|
||
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">권위</div>
|
||
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"국내 Top 기업들이 사용합니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 레퍼런스 의존 권위주의</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Category messages strip -->
|
||
<div style="margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;">
|
||
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--blue);"><div class="mono" style="font-size:11px; color:var(--blue); letter-spacing:0.18em; font-weight:500;">DI</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"흩어진 데이터를 하나의 의사결정 체계로 연결합니다"</div></div>
|
||
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--brown);"><div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">MD</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"무엇을 측정하고, 성과 기준을 어떻게 설정하며, 어떤 데이터 소스를 활용할지 안내합니다"</div></div>
|
||
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--olive);"><div class="mono" style="font-size:11px; color:#8a9400; letter-spacing:0.18em; font-weight:500;">MPO</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"실행 가능한 최적화로, 데이터가 말하는 성과를 실현합니다"</div></div>
|
||
<div style="padding:20px; background:var(--brown); color:var(--beige);"><div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">BVT</div><div class="content-kr" style="font-size:14px; color:var(--beige); margin-top:8px; line-height:1.45;">"브랜드가 어떻게 드러나고 이해되는지를 최적화합니다"</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">25 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
26 — COMPONENT LIBRARY
|
||
============================================================ -->
|
||
<section data-screen-label="26 Components" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">09 · Components</span>
|
||
<span class="s-section-id">Component Library</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">09.1</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Component Library · UI 키트</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">Reusable parts for reports & proposals</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; margin-top:48px;">
|
||
|
||
<!-- BUTTONS + TAGS -->
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:16px;">Buttons · 버튼</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px;">
|
||
<button style="font-family:var(--font-en); font-size:16px; font-weight:500; padding:14px 28px; background:var(--brown); color:var(--beige); border:none; letter-spacing:0.02em; cursor:pointer; width:fit-content;">Schedule a Diagnosis →</button>
|
||
<button style="font-family:var(--font-en); font-size:16px; font-weight:500; padding:13px 27px; background:var(--white); color:var(--brown); border:1px solid var(--brown); letter-spacing:0.02em; cursor:pointer; width:fit-content;">View Service Map</button>
|
||
<button style="font-family:var(--font-en); font-size:14px; font-weight:500; padding:8px 16px; background:var(--olive); color:var(--brown); border:none; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; width:fit-content;">New</button>
|
||
<button style="font-family:var(--font-en); font-size:14px; font-weight:500; padding:8px 0; background:transparent; color:var(--brown); border:none; border-bottom:1px solid var(--brown); cursor:pointer; width:fit-content;">Read full report →</button>
|
||
</div>
|
||
|
||
<div class="uppercase-label" style="margin:32px 0 16px;">Tags · 태그</div>
|
||
<div style="display:flex; gap:8px; flex-wrap:wrap;">
|
||
<span class="tag di">DI</span>
|
||
<span class="tag md">MD</span>
|
||
<span class="tag mpo">MPO</span>
|
||
<span class="tag bvt">BVT</span>
|
||
<span class="tag" style="border-color:var(--gray); color:var(--gray);">DRAFT</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI CARD -->
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:16px;">KPI Card · 지표 카드</div>
|
||
<div style="background:var(--white); border:1px solid var(--gray-light); padding:24px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||
<div class="uppercase-label" style="color:var(--brown);">CAC · channel avg</div>
|
||
<span class="tag mpo" style="font-size:10px; padding:2px 6px;">MPO</span>
|
||
</div>
|
||
<div style="font-family:var(--font-en); font-size:64px; font-weight:700; color:var(--brown); letter-spacing:-0.03em; margin-top:8px; line-height:1;">−18%</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px;">3-month projected · vs Q1 baseline</div>
|
||
<div style="margin-top:16px; height:6px; background:var(--gray-bg); position:relative;">
|
||
<div style="position:absolute; left:0; top:0; bottom:0; width:62%; background:var(--olive);"></div>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; font-family:var(--font-en); font-size:11px; color:var(--gray); margin-top:6px; letter-spacing:0.06em;"><span>0%</span><span>−18% target</span><span>−30%</span></div>
|
||
</div>
|
||
|
||
<div class="uppercase-label" style="margin:32px 0 16px;">Callout · 강조 박스</div>
|
||
<div style="border-left:3px solid var(--olive); padding:14px 0 14px 20px; background:var(--gray-bg); padding-right:20px;">
|
||
<div style="font-family:var(--font-en); font-size:11px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Key Finding</div>
|
||
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown); margin-top:6px; font-weight:500;">전환 추적 이벤트의 부재가 가장 큰 병목</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DATA TABLE + CHART -->
|
||
<div>
|
||
<div class="uppercase-label" style="margin-bottom:16px;">Data Table · 데이터 표</div>
|
||
<div style="border:1px solid var(--gray-light);">
|
||
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; background:var(--gray-bg); font-family:var(--font-en); font-size:11px; letter-spacing:0.14em; font-weight:500; color:var(--brown); text-transform:uppercase;">
|
||
<div>Channel</div><div style="text-align:right;">ROAS</div><div style="text-align:right;">Δ MoM</div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Google Ads</div><div style="text-align:right;" class="mono">3.42×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+0.18</div></div>
|
||
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Meta Ads</div><div style="text-align:right;" class="mono">2.17×</div><div style="text-align:right; color:var(--blue); font-weight:500;" class="mono">−0.04</div></div>
|
||
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Naver SA</div><div style="text-align:right;" class="mono">4.81×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+0.32</div></div>
|
||
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Organic Search</div><div style="text-align:right;" class="mono">8.07×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+1.12</div></div>
|
||
</div>
|
||
|
||
<div class="uppercase-label" style="margin:32px 0 16px;">Bar Chart · 차트</div>
|
||
<div style="border:1px solid var(--gray-light); padding:16px;">
|
||
<div style="display:flex; align-items:end; gap:12px; height:120px;">
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:42%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Jan</div></div>
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:55%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Feb</div></div>
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:48%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Mar</div></div>
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:72%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Apr</div></div>
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:88%; background:var(--olive);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--brown); font-weight:500;">May</div></div>
|
||
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:95%; background:var(--olive);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--brown); font-weight:500;">Jun</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">26 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
27 — DOS & DON'TS
|
||
============================================================ -->
|
||
<section data-screen-label="27 Dos Donts" class="s-cover" style="background:var(--white);">
|
||
<div class="s-header">
|
||
<span class="s-sys">09 · Components</span>
|
||
<span class="s-section-id">Do's & Don'ts</span>
|
||
</div>
|
||
<div style="position:absolute; top:200px; left:96px; right:96px;">
|
||
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
|
||
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">09.2</span>
|
||
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Do's & Don'ts</span>
|
||
</div>
|
||
<h2 class="content-title" style="font-size:56px;">The short list</h2>
|
||
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px;">
|
||
<div>
|
||
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown);">DO</span>
|
||
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 권장 사항</span>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px; margin-top:24px;">
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Beige</strong> for cover & section dividers</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">표지·섹션 디바이더에 D Beige 사용</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Maintain <strong style="font-weight:700;">vertical line accent</strong> on section slides</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">섹션 슬라이드에 수직선 액센트 유지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Keep <strong style="font-weight:700;">body text 11–14pt</strong> for readability</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">본문은 11–14pt로 가독성 확보</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Brown (#231815)</strong> as primary text colour</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">기본 텍스트는 D Brown</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Include <strong style="font-weight:700;">'Analysis, Treatment & Growth'</strong> footer</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">본문 슬라이드 푸터에 태그라인 유지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Olive sparingly</strong> as accent only</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">D Olive는 액센트로만 절제하여 사용</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Maintain <strong style="font-weight:700;">generous whitespace</strong> (96px outer margin)</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">충분한 여백 유지 (외측 96px 이상)</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
|
||
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--blue);">DON'T</span>
|
||
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 금지 사항</span>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px; margin-top:24px;">
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Olive as full slide background</strong> (2022 style)</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">올리브를 전면 배경으로 쓰지 마세요</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Mix D Blue & D Olive as <strong style="font-weight:700;">equal-weight colours</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">블루와 올리브를 동등 비중으로 섞지 마세요</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">text smaller than 8pt</strong> anywhere</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">8pt 미만의 텍스트는 사용 금지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Place <strong style="font-weight:700;">logo on every content slide</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">모든 본문 슬라이드에 로고를 넣지 마세요</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">gradients or drop shadows</strong> on text</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">텍스트에 그라데이션·그림자 금지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Stretch or distort the <strong style="font-weight:700;">logomark</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">로고마크를 늘리거나 변형 금지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use colours <strong style="font-weight:700;">outside the defined palette</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">정의된 팔레트 외 색상 사용 금지</div></div></div>
|
||
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown); line-height:1.4;"><strong style="font-weight:700;">Direct, mechanical translation</strong> of English terms<br><span class="mono" style="font-size:12px; color:var(--gray); letter-spacing:0.06em;">audit → <s>감사</s> ✗ · 진단 ✓ framework → <s>뼈대</s> ✗ · 프레임워크 ✓</span></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">외국어를 사전적으로 직역하지 마세요 (v1.3 §10)</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="margin-top:40px; padding:24px 32px; background:var(--brown); color:var(--beige); display:flex; gap:24px; align-items:center;">
|
||
<div class="uppercase-label" style="color:var(--olive); white-space:nowrap;">2022 → 2026</div>
|
||
<div style="font-family:var(--font-en); font-size:15px; line-height:1.5; color:var(--beige); flex:1;">D Olive (#CEDC00)는 지배 배경에서 액센트로 강등되었다. 새로운 따뜻한 D Beige (#E5E1D2)가 더 성숙한 컨설팅 등급의 미감을 전한다.</div>
|
||
</div>
|
||
</div>
|
||
<div class="s-footer">
|
||
<span class="s-tag">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page">27 / 28</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
28 — CLOSING / THANK YOU
|
||
============================================================ -->
|
||
<section data-screen-label="28 Thank You" class="s-dark">
|
||
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
|
||
<div class="s-header">
|
||
<span class="s-sys" style="color:var(--warm-gray);">D.intelligence Design System 2026</span>
|
||
<span class="s-section-id" style="color:var(--olive);">Closing · 28 / 28</span>
|
||
</div>
|
||
|
||
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%);">
|
||
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); text-transform:uppercase; margin-bottom:24px;">— Think Forward —</div>
|
||
<div style="font-family:var(--font-en); font-size:200px; font-weight:700; color:var(--beige); line-height:0.92; letter-spacing:-0.03em;">Thank<br>You</div>
|
||
<div style="font-family:var(--font-kr); font-size:28px; font-weight:500; color:var(--warm-gray); margin-top:32px; letter-spacing:-0.01em;">진단의 정확함으로 시작하여,<br>성장의 구조를 함께 만듭니다.</div>
|
||
</div>
|
||
|
||
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); width:480px;">
|
||
<div style="padding-bottom:24px; border-bottom:1px solid rgba(229,225,210,0.2);">
|
||
<div class="uppercase-label" style="color:var(--olive); margin-bottom:12px;">Contact</div>
|
||
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); letter-spacing:-0.02em;">(주)디인텔리전스</div>
|
||
<div style="font-family:var(--font-en); font-size:14px; color:var(--warm-gray); margin-top:4px; font-style:italic;">D.intelligence Inc.</div>
|
||
</div>
|
||
|
||
<div style="padding:24px 0; border-bottom:1px solid rgba(229,225,210,0.2); display:flex; flex-direction:column; gap:8px;">
|
||
<div class="content-kr" style="font-size:15px; color:var(--beige); line-height:1.6;">경기도 성남시 수정구 창업로 43<br>판교글로벌비즈센터 업무동 1층 36호 (13449)</div>
|
||
</div>
|
||
|
||
<div style="padding-top:24px; display:flex; flex-direction:column; gap:12px;">
|
||
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">T.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">+82. 70. 5118. 5582</span></div>
|
||
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">W.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">dintelligence.co.kr</span></div>
|
||
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">E.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">info@dintelligence.co.kr</span></div>
|
||
</div>
|
||
|
||
<div style="margin-top:48px; padding-top:24px; border-top:1px solid rgba(229,225,210,0.2);">
|
||
<div class="mono" style="font-size:11px; color:var(--warm-gray); letter-spacing:0.18em; opacity:0.6;">D.INTELLIGENCE DESIGN SYSTEM · v2026 · INTERNAL</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="s-footer">
|
||
<span class="s-tag" style="color:var(--olive); opacity:1; font-style:italic;">— Analysis, Treatment & Growth —</span>
|
||
<span class="s-page" style="color:var(--warm-gray);">END</span>
|
||
</div>
|
||
</section>
|
||
|
||
</deck-stage>
|
||
|
||
<!-- ============================================================
|
||
Tweaks panel + remaining slides loaded below
|
||
============================================================ -->
|
||
<script type="application/json" id="speaker-notes">["","","","","","","","","","","","","","","","","","","","","","","","","","","",""]</script>
|
||
|
||
<div id="tweaks-root"></div>
|
||
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
||
<script type="text/babel" src="tweaks-app.jsx"></script>
|
||
|
||
</body>
|
||
</html>
|