Skip to content

Commit 6137705

Browse files
savvidesclaude
savvides
and
claude
committed
docs(landing): regenerate OG share card to match current design system
The social share card was rendered against the pre-v3.1.0 design — old palette, old typography. Adds docs/og-template.html (1200×630, Source Serif 4 hero + Public Sans kicker + JetBrains Mono tier dots + URL) as a regenerable source, screenshots it via headless Chrome at 2x device scale, and downsamples to the declared meta dimensions for sharper retina rendering. Now matches DESIGN.md tokens — ivory bg, prussian blue not used here, library-stamp red for brand/kicker, full T1–T5 tier color set in the bottom rail. Regenerate with: chrome --headless=new --window-size=1200,630 \ --force-device-scale-factor=2 --virtual-time-budget=10000 \ --screenshot=/tmp/og.png file://docs/og-template.html sips -z 630 1200 /tmp/og.png --out docs/og-image.png Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 838a376 commit 6137705

2 files changed

Lines changed: 175 additions & 0 deletions

File tree

‎docs/og-image.png‎

-29.1 KB
Loading

‎docs/og-template.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>idstack OG card</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap">
9+
<style>
10+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
11+
12+
:root {
13+
--bg: #faf8f3;
14+
--ink: #1a1815;
15+
--ink-soft: #3a352e;
16+
--ink-muted: #6b6358;
17+
--rule: #d4cdb9;
18+
--accent: #7a1f1f;
19+
--accent-blue: #1d4a5e;
20+
--tier-1: #2f7a4a;
21+
--tier-2: #2864a8;
22+
--tier-3: #a87726;
23+
--tier-4: #b35a1f;
24+
--tier-5: #6b6b6b;
25+
}
26+
27+
html, body {
28+
width: 1200px;
29+
height: 630px;
30+
background: var(--bg);
31+
color: var(--ink);
32+
font-family: 'Source Serif 4', Georgia, serif;
33+
overflow: hidden;
34+
-webkit-font-smoothing: antialiased;
35+
-moz-osx-font-smoothing: grayscale;
36+
}
37+
38+
.card {
39+
width: 1200px;
40+
height: 630px;
41+
padding: 64px 80px;
42+
display: flex;
43+
flex-direction: column;
44+
justify-content: space-between;
45+
position: relative;
46+
}
47+
48+
.brand-row {
49+
display: flex;
50+
align-items: baseline;
51+
gap: 18px;
52+
}
53+
.brand {
54+
font-family: 'Public Sans', sans-serif;
55+
font-size: 28px;
56+
font-weight: 700;
57+
letter-spacing: 0.01em;
58+
color: var(--accent);
59+
}
60+
.brand-beta {
61+
font-family: 'Public Sans', sans-serif;
62+
font-size: 11px;
63+
font-weight: 600;
64+
letter-spacing: 0.18em;
65+
text-transform: uppercase;
66+
color: var(--ink-muted);
67+
vertical-align: super;
68+
margin-left: 4px;
69+
}
70+
.kicker {
71+
font-family: 'Public Sans', sans-serif;
72+
font-size: 13px;
73+
font-weight: 600;
74+
letter-spacing: 0.22em;
75+
text-transform: uppercase;
76+
color: var(--accent);
77+
border-left: 1px solid var(--rule);
78+
padding-left: 18px;
79+
}
80+
81+
.hero {
82+
max-width: 1040px;
83+
}
84+
.hero-title {
85+
font-family: 'Source Serif 4', serif;
86+
font-size: 72px;
87+
font-weight: 600;
88+
line-height: 1.04;
89+
letter-spacing: -0.022em;
90+
color: var(--ink);
91+
margin-bottom: 28px;
92+
}
93+
.lede {
94+
font-family: 'Source Serif 4', serif;
95+
font-size: 26px;
96+
font-weight: 400;
97+
line-height: 1.4;
98+
color: var(--ink-soft);
99+
max-width: 960px;
100+
}
101+
.lede strong {
102+
color: var(--ink);
103+
font-weight: 600;
104+
}
105+
106+
.bottom-rail {
107+
display: flex;
108+
justify-content: space-between;
109+
align-items: center;
110+
border-top: 1px solid var(--rule);
111+
padding-top: 22px;
112+
}
113+
.tier-legend {
114+
display: flex;
115+
gap: 28px;
116+
align-items: center;
117+
}
118+
.tier-legend-item {
119+
display: inline-flex;
120+
align-items: center;
121+
gap: 9px;
122+
}
123+
.tier-dot {
124+
width: 13px;
125+
height: 13px;
126+
border-radius: 50%;
127+
display: inline-block;
128+
}
129+
.tier-dot.t1 { background: var(--tier-1); }
130+
.tier-dot.t2 { background: var(--tier-2); }
131+
.tier-dot.t3 { background: var(--tier-3); }
132+
.tier-dot.t4 { background: var(--tier-4); }
133+
.tier-dot.t5 { background: var(--tier-5); }
134+
.tier-legend-item strong {
135+
font-family: 'JetBrains Mono', monospace;
136+
font-weight: 600;
137+
color: var(--ink);
138+
font-size: 17px;
139+
letter-spacing: 0.04em;
140+
}
141+
142+
.url {
143+
font-family: 'JetBrains Mono', monospace;
144+
font-size: 18px;
145+
font-weight: 500;
146+
color: var(--ink-muted);
147+
letter-spacing: 0.02em;
148+
}
149+
</style>
150+
</head>
151+
<body>
152+
<div class="card">
153+
<header class="brand-row">
154+
<span class="brand">idstack<sup class="brand-beta">beta</sup></span>
155+
<span class="kicker">Evidence-based · Open source · MIT</span>
156+
</header>
157+
158+
<div class="hero">
159+
<h1 class="hero-title">Evidence-based instructional design, transparently cited.</h1>
160+
<p class="lede"><strong>108 peer-reviewed studies</strong> across <strong>11 research domains</strong>. Every recommendation tagged with its evidence tier. Runs in Claude Code and OpenAI Codex CLI.</p>
161+
</div>
162+
163+
<div class="bottom-rail">
164+
<div class="tier-legend">
165+
<span class="tier-legend-item"><span class="tier-dot t1"></span><strong>T1</strong></span>
166+
<span class="tier-legend-item"><span class="tier-dot t2"></span><strong>T2</strong></span>
167+
<span class="tier-legend-item"><span class="tier-dot t3"></span><strong>T3</strong></span>
168+
<span class="tier-legend-item"><span class="tier-dot t4"></span><strong>T4</strong></span>
169+
<span class="tier-legend-item"><span class="tier-dot t5"></span><strong>T5</strong></span>
170+
</div>
171+
<span class="url">idstack.org</span>
172+
</div>
173+
</div>
174+
</body>
175+
</html>

0 commit comments

Comments
 (0)