@tienne/gestalt 0.18.2 → 0.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/package.json +1 -1
  2. package/dist/role-agents/presentation-designer/templates/broadside.html +11 -11
  3. package/dist/role-agents/presentation-designer/templates/editorial-forest.html +8 -8
  4. package/dist/role-agents/presentation-designer/templates/emerald-editorial.html +6 -6
  5. package/dist/role-agents/presentation-designer/templates/neo-grid.html +7 -7
  6. package/dist/role-agents/presentation-designer/templates/pin-and-paper.html +8 -8
  7. package/dist/role-agents/presentation-designer/templates/pink-script.html +4 -4
  8. package/dist/role-agents/presentation-designer/templates/sakura-chroma.html +4 -4
  9. package/dist/role-agents/presentation-designer/templates/signal.html +12 -12
  10. package/dist/role-agents/presentation-designer/templates/stencil-tablet.html +8 -8
  11. package/dist/role-agents/presentation-designer/templates/studio.html +11 -11
  12. package/dist/role-agents/technical-writer/AGENT.md +36 -304
  13. package/dist/role-agents/technical-writer/references/style-guide.md +131 -0
  14. package/package.json +1 -1
  15. package/role-agents/presentation-designer/templates/broadside.html +11 -11
  16. package/role-agents/presentation-designer/templates/editorial-forest.html +8 -8
  17. package/role-agents/presentation-designer/templates/emerald-editorial.html +6 -6
  18. package/role-agents/presentation-designer/templates/neo-grid.html +7 -7
  19. package/role-agents/presentation-designer/templates/pin-and-paper.html +8 -8
  20. package/role-agents/presentation-designer/templates/pink-script.html +4 -4
  21. package/role-agents/presentation-designer/templates/sakura-chroma.html +4 -4
  22. package/role-agents/presentation-designer/templates/signal.html +12 -12
  23. package/role-agents/presentation-designer/templates/stencil-tablet.html +8 -8
  24. package/role-agents/presentation-designer/templates/studio.html +11 -11
  25. package/role-agents/technical-writer/AGENT.md +36 -304
  26. package/role-agents/technical-writer/references/style-guide.md +131 -0
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tienne/gestalt",
3
- "version": "0.18.2",
3
+ "version": "0.18.3",
4
4
  "description": "TypeScript AI Development Harness - Gestalt psychology-driven requirement clarification",
5
5
  "type": "module",
6
6
  "main": "./dist/src/index.js",
@@ -5,7 +5,7 @@
5
5
  <title>Broadside — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -17,8 +17,8 @@
17
17
  --c-fg-3: #505048;
18
18
  --c-accent: #e85d26;
19
19
  --c-border: #282826;
20
- --f-display: "Barlow", "Noto Sans SC", sans-serif;
21
- --f-body: "Barlow", "Noto Sans SC", system-ui, sans-serif;
20
+ --f-display: "Barlow", "Noto Sans KR", sans-serif;
21
+ --f-body: "Barlow", "Noto Sans KR", system-ui, sans-serif;
22
22
  --f-mono: "IBM Plex Mono", monospace;
23
23
  --sz-display: 13vw;
24
24
  --sz-h1: 7.5vw;
@@ -81,13 +81,13 @@
81
81
  .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
82
82
 
83
83
  /* TYPOGRAPHY */
84
- .display { font-size: var(--sz-display); font-weight: 900; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; }
85
- .h1 { font-size: var(--sz-h1); font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
86
- .h2 { font-size: var(--sz-h2); font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
87
- .h3 { font-size: var(--sz-h3); font-weight: 700; line-height: 1.1; }
88
- .lead { font-size: var(--sz-lead); font-weight: 500; line-height: 1.4; }
89
- .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.6; }
90
- .caption { font-size: var(--sz-caption); line-height: 1.5; }
84
+ .display { font-size: var(--sz-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; text-transform: uppercase; }
85
+ .h1 { font-size: var(--sz-h1); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
86
+ .h2 { font-size: var(--sz-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
87
+ .h3 { font-size: var(--sz-h3); font-weight: 700; line-height: 1.3; }
88
+ .lead { font-size: var(--sz-lead); font-weight: 500; line-height: 1.7; }
89
+ .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.75; }
90
+ .caption { font-size: var(--sz-caption); line-height: 1.7; }
91
91
  .label { font-family: var(--f-mono); font-size: var(--sz-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
92
92
  .kicker { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
93
93
  .orange .kicker { color: rgba(17,17,17,0.55); }
@@ -108,7 +108,7 @@
108
108
  .stat-value { font-size: 5.5vw; font-weight: 900; line-height: 1; color: var(--c-accent); letter-spacing: -0.04em; }
109
109
  .orange .stat-value { color: #111; }
110
110
  .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
111
- .bullet-list li { display: grid; grid-template-columns: 1.2em 1fr; gap: 0.5em; font-size: var(--sz-lead); font-weight: 500; line-height: 1.4; }
111
+ .bullet-list li { display: grid; grid-template-columns: 1.2em 1fr; gap: 0.5em; font-size: var(--sz-lead); font-weight: 500; line-height: 1.75; }
112
112
  .dark .bullet-list li::before { content: "/"; color: var(--c-accent); font-family: var(--f-mono); font-weight: 700; }
113
113
  .orange .bullet-list li::before { content: "/"; color: rgba(17,17,17,0.55); font-family: var(--f-mono); font-weight: 700; }
114
114
  .img-placeholder { background: var(--c-bg-alt); width: 100%; height: 100%; min-height: 25vh; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.1em; color: var(--c-fg-3); }
@@ -5,7 +5,7 @@
5
5
  <title>Editorial Forest — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -17,7 +17,7 @@
17
17
  --cream: #efe7d4;
18
18
  --cream-2: #e6dcc4;
19
19
  --ink: #1a1a17;
20
- --serif: "Source Serif 4", Georgia, serif;
20
+ --serif: "Source Serif 4", "Noto Serif KR", Georgia, serif;
21
21
  --mono: "JetBrains Mono", monospace;
22
22
  }
23
23
 
@@ -53,12 +53,12 @@
53
53
  }
54
54
 
55
55
  /* TYPOGRAPHY */
56
- .t-display { font-family: var(--serif); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; font-size: clamp(72px, 12vw, 190px); }
57
- .t-title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5.5vw, 88px); line-height: 1.0; }
58
- .t-head { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 48px); line-height: 1.1; }
59
- .t-body { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.5vw, 22px); line-height: 1.65; }
56
+ .t-display { font-family: var(--serif); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(72px, 12vw, 190px); }
57
+ .t-title { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5.5vw, 88px); line-height: 1.2; }
58
+ .t-head { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 48px); line-height: 1.3; }
59
+ .t-body { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.5vw, 22px); line-height: 1.75; }
60
60
  .t-label { font-family: var(--mono); font-weight: 500; font-size: clamp(10px, 1.1vw, 16px); letter-spacing: 0.18em; text-transform: uppercase; }
61
- .t-big { font-family: var(--serif); font-weight: 500; font-size: clamp(80px, 13vw, 210px); line-height: 0.92; letter-spacing: -0.03em; }
61
+ .t-big { font-family: var(--serif); font-weight: 500; font-size: clamp(80px, 13vw, 210px); line-height: 1.05; letter-spacing: -0.03em; }
62
62
 
63
63
  /* TOPIC CARD (agenda grid) */
64
64
  .topic {
@@ -94,7 +94,7 @@
94
94
 
95
95
  /* KPI */
96
96
  .kpi { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2vh; border-top: 2px solid var(--pink); }
97
- .kpi .big { font-family: var(--serif); font-weight: 500; font-size: clamp(80px,13vw,210px); line-height: 0.92; letter-spacing: -0.03em; color: var(--pink); }
97
+ .kpi .big { font-family: var(--serif); font-weight: 500; font-size: clamp(80px,13vw,210px); line-height: 1.05; letter-spacing: -0.03em; color: var(--pink); }
98
98
  .kpi .big .unit { font-size: 0.5em; color: var(--cream); margin-left: 4px; }
99
99
 
100
100
  /* BAR CHART */
@@ -5,7 +5,7 @@
5
5
  <title>Emerald Editorial — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500;700;800;900&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -19,7 +19,7 @@
19
19
  --display-font: 'Bodoni Moda', serif;
20
20
  }
21
21
 
22
- .reveal { font-family: 'Manrope', sans-serif; }
22
+ .reveal { font-family: 'Manrope', 'Noto Sans KR', sans-serif; }
23
23
  .reveal .slides { text-align: left; }
24
24
  .reveal .slides section {
25
25
  box-sizing: border-box;
@@ -88,17 +88,17 @@
88
88
  .t-display {
89
89
  font-family: var(--display-font);
90
90
  font-weight: 900;
91
- line-height: 0.88;
91
+ line-height: 1.05;
92
92
  letter-spacing: -0.01em;
93
93
  color: var(--ink);
94
94
  }
95
95
  .t-display.xl { font-size: clamp(100px, 18vw, 280px); }
96
96
  .t-display.lg { font-size: clamp(60px, 10vw, 160px); }
97
97
  .t-display.md { font-size: clamp(36px, 5.5vw, 88px); }
98
- .t-head { font-family: var(--display-font); font-weight: 700; font-size: clamp(24px, 3.5vw, 52px); line-height: 1.1; color: var(--ink); }
99
- .t-body { font-size: clamp(14px, 1.5vw, 22px); line-height: 1.6; color: var(--ink); font-weight: 400; }
98
+ .t-head { font-family: var(--display-font); font-weight: 700; font-size: clamp(24px, 3.5vw, 52px); line-height: 1.3; color: var(--ink); }
99
+ .t-body { font-size: clamp(14px, 1.5vw, 22px); line-height: 1.75; color: var(--ink); font-weight: 400; }
100
100
  .t-label { font-family: 'Manrope', sans-serif; font-size: clamp(11px, 1.1vw, 16px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }
101
- .t-num { font-family: var(--display-font); font-weight: 900; font-size: clamp(60px, 9vw, 140px); line-height: 0.92; color: var(--ink); }
101
+ .t-num { font-family: var(--display-font); font-weight: 900; font-size: clamp(60px, 9vw, 140px); line-height: 1.05; color: var(--ink); }
102
102
 
103
103
  /* PAPER PANEL */
104
104
  .panel-paper { background: var(--paper); }
@@ -5,7 +5,7 @@
5
5
  <title>Neo-Grid Bold — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  /* ── DESIGN TOKENS ────────────────────────────────────────────── */
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  /* ── REVEAL RESET ─────────────────────────────────────────────── */
21
- .reveal { font-family: "Space Grotesk", sans-serif; }
21
+ .reveal { font-family: "Space Grotesk", "Noto Sans KR", sans-serif; }
22
22
  .reveal .slides { text-align: left; }
23
23
  .reveal .slides section {
24
24
  box-sizing: border-box;
@@ -99,27 +99,27 @@
99
99
  .t-display {
100
100
  font-weight: 700;
101
101
  font-size: clamp(48px, 8vw, 128px);
102
- line-height: 0.92;
102
+ line-height: 1.05;
103
103
  letter-spacing: -0.02em;
104
104
  text-transform: uppercase;
105
105
  }
106
106
  .t-title {
107
107
  font-weight: 700;
108
108
  font-size: clamp(36px, 5.5vw, 88px);
109
- line-height: 0.95;
109
+ line-height: 1.05;
110
110
  letter-spacing: -0.015em;
111
111
  text-transform: uppercase;
112
112
  }
113
113
  .t-subtitle {
114
114
  font-weight: 700;
115
115
  font-size: clamp(24px, 3.5vw, 56px);
116
- line-height: 1;
116
+ line-height: 1.2;
117
117
  letter-spacing: -0.01em;
118
118
  text-transform: uppercase;
119
119
  }
120
- .t-body { font-size: clamp(14px, 1.6vw, 26px); line-height: 1.4; font-weight: 400; }
120
+ .t-body { font-size: clamp(14px, 1.6vw, 26px); line-height: 1.75; font-weight: 400; }
121
121
  .t-label { font-family: "JetBrains Mono", monospace; font-size: clamp(10px, 1.2vw, 20px); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
122
- .t-stat { font-weight: 700; font-size: clamp(64px, 11vw, 180px); line-height: 0.88; letter-spacing: -0.03em; }
122
+ .t-stat { font-weight: 700; font-size: clamp(64px, 11vw, 180px); line-height: 1.05; letter-spacing: -0.03em; }
123
123
  .t-stat.sm { font-size: clamp(48px, 7vw, 112px); }
124
124
 
125
125
  mark { background: var(--accent); color: var(--ink); padding: 0 4px; }
@@ -5,7 +5,7 @@
5
5
  <title>Pin &amp; Paper — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -22,7 +22,7 @@
22
22
  --orange: #D8702A;
23
23
  }
24
24
 
25
- .reveal { font-family: 'Space Grotesk', sans-serif; }
25
+ .reveal { font-family: 'Space Grotesk', 'Noto Sans KR', sans-serif; }
26
26
  .reveal .slides { text-align: left; }
27
27
  .reveal .slides section {
28
28
  box-sizing: border-box;
@@ -54,13 +54,13 @@
54
54
  }
55
55
 
56
56
  /* TYPOGRAPHY */
57
- .t-display { font-weight: 700; font-size: clamp(60px,10vw,160px); line-height: 0.92; letter-spacing: -0.02em; }
58
- .t-title { font-weight: 700; font-size: clamp(36px,5.5vw,84px); line-height: 0.95; letter-spacing: -0.015em; }
59
- .t-head { font-weight: 700; font-size: clamp(20px,2.8vw,44px); line-height: 1.1; }
60
- .t-body { font-size: clamp(13px,1.5vw,22px); line-height: 1.45; font-weight: 400; }
57
+ .t-display { font-weight: 700; font-size: clamp(60px,10vw,160px); line-height: 1.05; letter-spacing: -0.02em; }
58
+ .t-title { font-weight: 700; font-size: clamp(36px,5.5vw,84px); line-height: 1.05; letter-spacing: -0.015em; }
59
+ .t-head { font-weight: 700; font-size: clamp(20px,2.8vw,44px); line-height: 1.3; }
60
+ .t-body { font-size: clamp(13px,1.5vw,22px); line-height: 1.75; font-weight: 400; }
61
61
  .t-label { font-family: 'DM Mono', monospace; font-size: clamp(10px,1.1vw,16px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
62
- .t-script { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(20px,2.5vw,40px); line-height: 1.05; }
63
- .t-num { font-weight: 700; font-size: clamp(50px,8vw,120px); line-height: 1; letter-spacing: -0.02em; }
62
+ .t-script { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(20px,2.5vw,40px); line-height: 1.3; }
63
+ .t-num { font-weight: 700; font-size: clamp(50px,8vw,120px); line-height: 1.1; letter-spacing: -0.02em; }
64
64
 
65
65
  /* STAMP */
66
66
  .stamp {
@@ -5,7 +5,7 @@
5
5
  <title>Pink Script — After Hours — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;600&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -20,7 +20,7 @@
20
20
  --hair: rgba(245, 237, 241, 0.14);
21
21
  }
22
22
 
23
- .reveal { font-family: 'Inter', sans-serif; }
23
+ .reveal { font-family: 'Inter', 'Noto Sans KR', sans-serif; }
24
24
  .reveal .slides { text-align: left; }
25
25
  .reveal .slides section {
26
26
  box-sizing: border-box;
@@ -60,7 +60,7 @@
60
60
  .footer .pageno em { color: var(--pink); font-style: normal; }
61
61
 
62
62
  /* TYPOGRAPHY */
63
- .script { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--pink); letter-spacing: -0.01em; line-height: 1.05; padding-bottom: 0.12em; }
63
+ .script { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--pink); letter-spacing: -0.01em; line-height: 1.2; padding-bottom: 0.12em; }
64
64
  .script.huge { font-size: clamp(100px,20vw,380px); }
65
65
  .script.giant { font-size: clamp(70px, 14vw,250px); }
66
66
  .script.large { font-size: clamp(50px, 9vw, 150px); }
@@ -72,7 +72,7 @@
72
72
  .rule.thin { opacity: 0.25; background: var(--paper); }
73
73
 
74
74
  /* STAT FIGURE */
75
- .stat-figure { font-family: 'DM Serif Display', serif; font-size: clamp(60px,9vw,140px); line-height: 0.9; color: var(--pink); display: flex; align-items: baseline; }
75
+ .stat-figure { font-family: 'DM Serif Display', serif; font-size: clamp(60px,9vw,140px); line-height: 1.05; color: var(--pink); display: flex; align-items: baseline; }
76
76
  .stat-unit { font-size: 0.5em; color: var(--paper); margin-left: 4px; }
77
77
 
78
78
  /* PILL (matrix) */
@@ -5,7 +5,7 @@
5
5
  <title>Sakura Chroma — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Albert+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Albert+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+JP:wght@500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -21,7 +21,7 @@
21
21
  --line: #3A2516;
22
22
  }
23
23
 
24
- .reveal { font-family: 'Albert Sans', sans-serif; }
24
+ .reveal { font-family: 'Albert Sans', 'Noto Sans KR', sans-serif; }
25
25
  .reveal .slides { text-align: left; }
26
26
  .reveal .slides section {
27
27
  box-sizing: border-box;
@@ -61,9 +61,9 @@
61
61
  }
62
62
 
63
63
  /* TYPOGRAPHY */
64
- .disp { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: 0.84; letter-spacing: -0.012em; }
64
+ .disp { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: 1.05; letter-spacing: -0.012em; }
65
65
  .micro { font-family: 'Albert Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(10px,1.1vw,15px); }
66
- .body-tx { font-family: 'Albert Sans', sans-serif; font-weight: 400; line-height: 1.5; font-size: clamp(13px,1.4vw,21px); }
66
+ .body-tx { font-family: 'Albert Sans', sans-serif; font-weight: 400; line-height: 1.75; font-size: clamp(13px,1.4vw,21px); }
67
67
  .mono { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: clamp(10px,1.1vw,15px); }
68
68
  .jp { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }
69
69
 
@@ -5,7 +5,7 @@
5
5
  <title>Signal — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,600;1,8..60,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,600;1,8..60,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Serif+KR:wght@400;600;700&family=Noto+Sans+KR:wght@400;500&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  /* ── DESIGN TOKENS ────────────────────────────────────────────── */
@@ -23,9 +23,9 @@
23
23
  --c-accent: #c8a870;
24
24
  --c-border: #2e3d5c;
25
25
  --c-border-light: #cac4b4;
26
- --f-display: "Source Serif 4", serif;
27
- --f-heading: "Source Serif 4", serif;
28
- --f-body: "DM Sans", sans-serif;
26
+ --f-display: "Source Serif 4", "Noto Serif KR", serif;
27
+ --f-heading: "Source Serif 4", "Noto Serif KR", serif;
28
+ --f-body: "DM Sans", "Noto Sans KR", sans-serif;
29
29
  --f-mono: "IBM Plex Mono", monospace;
30
30
  --sz-display: 9.5vw;
31
31
  --sz-h1: 5.2vw;
@@ -112,13 +112,13 @@
112
112
  .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
113
113
 
114
114
  /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
115
- .display { font-family: var(--f-display); font-size: var(--sz-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.02em; }
116
- .h1 { font-family: var(--f-heading); font-size: var(--sz-h1); font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; }
117
- .h2 { font-family: var(--f-heading); font-size: var(--sz-h2); font-weight: 600; line-height: 1.1; }
118
- .h3 { font-size: var(--sz-h3); font-weight: 500; line-height: 1.2; }
119
- .lead { font-size: var(--sz-lead); font-weight: 400; line-height: 1.5; }
120
- .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.65; }
121
- .caption { font-size: var(--sz-caption); line-height: 1.5; }
115
+ .display { font-family: var(--f-display); font-size: var(--sz-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
116
+ .h1 { font-family: var(--f-heading); font-size: var(--sz-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
117
+ .h2 { font-family: var(--f-heading); font-size: var(--sz-h2); font-weight: 600; line-height: 1.3; }
118
+ .h3 { font-size: var(--sz-h3); font-weight: 500; line-height: 1.4; }
119
+ .lead { font-size: var(--sz-lead); font-weight: 400; line-height: 1.7; }
120
+ .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.75; }
121
+ .caption { font-size: var(--sz-caption); line-height: 1.7; }
122
122
  .label { font-family: var(--f-mono); font-size: var(--sz-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
123
123
  .kicker { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
124
124
  .muted { opacity: 0.5; }
@@ -153,7 +153,7 @@
153
153
  }
154
154
 
155
155
  .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
156
- .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.6; }
156
+ .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.75; }
157
157
  .bullet-list li::before { content: "—"; color: var(--c-accent); flex-shrink: 0; }
158
158
 
159
159
  .cover-meta {
@@ -5,7 +5,7 @@
5
5
  <title>Stencil &amp; Tablet — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Stardos+Stencil:wght@400;700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Stardos+Stencil:wght@400;700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  :root {
@@ -22,7 +22,7 @@
22
22
  --olive: #6F7A2E;
23
23
  }
24
24
 
25
- .reveal { font-family: 'Barlow Condensed', sans-serif; }
25
+ .reveal { font-family: 'Barlow Condensed', 'Noto Sans KR', sans-serif; }
26
26
  .reveal .slides { text-align: left; }
27
27
  .reveal .slides section {
28
28
  box-sizing: border-box;
@@ -56,10 +56,10 @@
56
56
 
57
57
  /* TYPOGRAPHY */
58
58
  .stencil { font-family: 'Stardos Stencil', serif; font-weight: 700; }
59
- .t-display { font-size: clamp(100px,16vw,260px); line-height: 0.88; letter-spacing: -0.02em; }
60
- .t-title { font-size: clamp(50px, 8vw, 130px); line-height: 0.92; letter-spacing: -0.01em; font-weight: 900; text-transform: uppercase; }
61
- .t-head { font-size: clamp(24px, 3.5vw, 54px); line-height: 1.0; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
62
- .t-body { font-family: 'Inter', sans-serif; font-size: clamp(13px, 1.4vw, 20px); line-height: 1.45; font-weight: 400; }
59
+ .t-display { font-size: clamp(100px,16vw,260px); line-height: 1.05; letter-spacing: -0.02em; }
60
+ .t-title { font-size: clamp(50px, 8vw, 130px); line-height: 1.05; letter-spacing: -0.01em; font-weight: 900; text-transform: uppercase; }
61
+ .t-head { font-size: clamp(24px, 3.5vw, 54px); line-height: 1.2; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
62
+ .t-body { font-family: 'Inter', sans-serif; font-size: clamp(13px, 1.4vw, 20px); line-height: 1.75; font-weight: 400; }
63
63
  .t-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px,1.3vw,18px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
64
64
 
65
65
  /* TABLET CARD */
@@ -67,7 +67,7 @@
67
67
  border-radius: 22px; padding: clamp(20px,3vh,34px) clamp(18px,2.5vw,30px);
68
68
  display: flex; flex-direction: column; position: relative; overflow: hidden;
69
69
  }
70
- .tablet .num { font-family: 'Stardos Stencil', serif; font-weight: 700; line-height: 0.9; font-size: clamp(80px,12vw,180px); letter-spacing: -0.02em; }
70
+ .tablet .num { font-family: 'Stardos Stencil', serif; font-weight: 700; line-height: 1.05; font-size: clamp(80px,12vw,180px); letter-spacing: -0.02em; }
71
71
  .tablet h3 { font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: clamp(16px,2vw,28px); text-transform: uppercase; letter-spacing: 0.02em; margin-top: auto; margin-bottom: 0.5rem; }
72
72
  .tablet.dark { background: var(--ink); color: var(--bone); }
73
73
 
@@ -76,7 +76,7 @@
76
76
  border-radius: 22px; padding: clamp(18px,2.5vh,28px) clamp(16px,2vw,26px);
77
77
  display: flex; flex-direction: column; gap: 0.75rem;
78
78
  }
79
- .stat-num { font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: clamp(60px,9vw,140px); line-height: 0.9; letter-spacing: -0.02em; }
79
+ .stat-num { font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: clamp(60px,9vw,140px); line-height: 1.05; letter-spacing: -0.02em; }
80
80
 
81
81
  /* PROCESS NODE */
82
82
  .node {
@@ -5,7 +5,7 @@
5
5
  <title>Studio — Reveal.js</title>
6
6
  <link rel="preconnect" href="https://fonts.googleapis.com" />
7
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
8
+ <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet" />
9
9
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
10
10
  <style>
11
11
  /* ── DESIGN TOKENS ────────────────────────────────────────────── */
@@ -23,8 +23,8 @@
23
23
  --c-accent: #f5d200;
24
24
  --c-border: #2e2e2c;
25
25
  --c-border-light: rgba(28, 28, 28, 0.18);
26
- --f-display: "Barlow", sans-serif;
27
- --f-body: "Barlow", sans-serif;
26
+ --f-display: "Barlow", "Noto Sans KR", sans-serif;
27
+ --f-body: "Barlow", "Noto Sans KR", sans-serif;
28
28
  --f-mono: "IBM Plex Mono", monospace;
29
29
  --sz-display: 12vw;
30
30
  --sz-h1: 7.5vw;
@@ -98,13 +98,13 @@
98
98
  .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
99
99
 
100
100
  /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
101
- .display { font-size: var(--sz-display); font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
102
- .h1 { font-size: var(--sz-h1); font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
103
- .h2 { font-size: var(--sz-h2); font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
104
- .h3 { font-size: var(--sz-h3); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
105
- .lead { font-size: var(--sz-lead); font-weight: 500; line-height: 1.45; }
106
- .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.6; }
107
- .caption { font-size: var(--sz-caption); line-height: 1.5; }
101
+ .display { font-size: var(--sz-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
102
+ .h1 { font-size: var(--sz-h1); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
103
+ .h2 { font-size: var(--sz-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
104
+ .h3 { font-size: var(--sz-h3); font-weight: 700; line-height: 1.3; text-transform: uppercase; }
105
+ .lead { font-size: var(--sz-lead); font-weight: 500; line-height: 1.7; }
106
+ .body { font-size: var(--sz-body); font-weight: 400; line-height: 1.75; }
107
+ .caption { font-size: var(--sz-caption); line-height: 1.7; }
108
108
  .label { font-family: var(--f-mono); font-size: var(--sz-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
109
109
  .kicker { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
110
110
  .dark .kicker { color: var(--c-accent); }
@@ -125,7 +125,7 @@
125
125
  }
126
126
 
127
127
  .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
128
- .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.6; }
128
+ .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.75; }
129
129
  .dark .bullet-list li::before { content: "—"; color: var(--c-accent); flex-shrink: 0; }
130
130
  .light .bullet-list li::before { content: "—"; color: var(--c-fg-light); flex-shrink: 0; }
131
131