Skip to content

Commit 306cdb5

Browse files
bordonibordoni
committed
chore(release): add wp.org banners, icons, and source masters
- banner-1544x500.png + banner-772x250.png: light, WorkOS-style hero with isometric stack - icon-256x256.png + icon-128x128.png: WorkOS logomark recolored to WP admin blue (#2271b1) - source/: editable masters (banner.html, icon.svg, stack-1..3.png) for regeneration
1 parent c6a31d1 commit 306cdb5

9 files changed

Lines changed: 289 additions & 0 deletions

File tree

‎.wordpress-org/banner-1544x500.png‎

251 KB
Loading

‎.wordpress-org/banner-772x250.png‎

106 KB
Loading

‎.wordpress-org/icon-128x128.png‎

3.36 KB
Loading

‎.wordpress-org/icon-256x256.png‎

6.84 KB
Loading

‎.wordpress-org/source/banner.html‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Banner — Integration with WorkOS</title>
6+
<style>
7+
:root {
8+
--wp-blue: #2271b1;
9+
--wp-blue-deep: #135e96;
10+
--ink: #0a0a0a;
11+
--ink-soft: #475569;
12+
--ink-mute: #6b7280;
13+
--line: #e5e7eb;
14+
--bg: #ffffff;
15+
--bg-soft: #f8fafc;
16+
--guide: #ec4899;
17+
}
18+
19+
html, body {
20+
margin: 0;
21+
padding: 0;
22+
background: #f1f5f9;
23+
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
24+
-webkit-font-smoothing: antialiased;
25+
-moz-osx-font-smoothing: grayscale;
26+
color: var(--ink);
27+
}
28+
29+
/* === Page chrome (NOT screenshotted) === */
30+
31+
.instructions {
32+
max-width: 1544px;
33+
margin: 32px auto 16px;
34+
padding: 20px 24px;
35+
background: #fff7ed;
36+
border: 1px solid #fdba74;
37+
border-radius: 10px;
38+
color: #7c2d12;
39+
font-size: 16px;
40+
line-height: 1.5;
41+
}
42+
43+
.instructions h2 {
44+
margin: 0 0 8px;
45+
font-size: 18px;
46+
font-weight: 700;
47+
letter-spacing: -0.01em;
48+
}
49+
50+
.instructions code {
51+
background: #fff;
52+
padding: 1px 6px;
53+
border-radius: 4px;
54+
border: 1px solid #fed7aa;
55+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
56+
font-size: 14px;
57+
}
58+
59+
/* Wrapper sits flush around the 1544x500 banner. The dashed pink frame
60+
lives ON the wrapper at outline-offset so it visually surrounds the
61+
banner without painting on top of it. Screenshot the white area only. */
62+
.frame {
63+
position: relative;
64+
width: 1544px;
65+
height: 500px;
66+
margin: 24px auto 80px;
67+
outline: 4px dashed var(--guide);
68+
outline-offset: 12px;
69+
}
70+
71+
.frame .label {
72+
position: absolute;
73+
left: 0;
74+
top: -36px;
75+
font-size: 13px;
76+
font-weight: 700;
77+
letter-spacing: 0.08em;
78+
text-transform: uppercase;
79+
color: var(--guide);
80+
}
81+
82+
.frame .size {
83+
position: absolute;
84+
right: 0;
85+
bottom: -32px;
86+
font-size: 13px;
87+
font-weight: 600;
88+
color: var(--guide);
89+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
90+
}
91+
92+
/* Crosshairs at each corner make the screenshot region unmistakable. */
93+
.frame .cross {
94+
position: absolute;
95+
width: 24px;
96+
height: 24px;
97+
border: 3px solid var(--guide);
98+
}
99+
.frame .cross.tl { top: -3px; left: -3px; border-right: none; border-bottom: none; }
100+
.frame .cross.tr { top: -3px; right: -3px; border-left: none; border-bottom: none; }
101+
.frame .cross.bl { bottom: -3px; left: -3px; border-right: none; border-top: none; }
102+
.frame .cross.br { bottom: -3px; right: -3px; border-left: none; border-top: none; }
103+
104+
/* === The banner itself — exactly 1544x500. THIS is the screenshot. === */
105+
106+
.banner {
107+
width: 1544px;
108+
height: 500px;
109+
box-sizing: border-box;
110+
background:
111+
radial-gradient(circle, rgba(10, 10, 10, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
112+
linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
113+
position: relative;
114+
overflow: hidden;
115+
display: grid;
116+
grid-template-columns: 1fr 640px;
117+
column-gap: 56px;
118+
align-items: center;
119+
padding: 0 96px;
120+
}
121+
122+
/* Subtle blue wash anchored bottom-right */
123+
.banner::before {
124+
content: "";
125+
position: absolute;
126+
inset: 0;
127+
background: radial-gradient(
128+
900px 500px at 100% 100%,
129+
rgba(34, 113, 177, 0.10) 0%,
130+
rgba(34, 113, 177, 0) 60%
131+
);
132+
pointer-events: none;
133+
}
134+
135+
/* Hairline at the top, WorkOS-grid feel */
136+
.banner::after {
137+
content: "";
138+
position: absolute;
139+
left: 96px;
140+
right: 96px;
141+
top: 0;
142+
height: 1px;
143+
background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
144+
}
145+
146+
.banner .left {
147+
position: relative;
148+
z-index: 1;
149+
display: flex;
150+
flex-direction: column;
151+
justify-content: center;
152+
gap: 24px;
153+
}
154+
155+
.banner .headline {
156+
font-size: 96px;
157+
line-height: 0.98;
158+
letter-spacing: -0.03em;
159+
font-weight: 700;
160+
color: var(--ink);
161+
margin: 0;
162+
}
163+
164+
.banner .headline .accent {
165+
color: var(--wp-blue);
166+
}
167+
168+
.banner .tagline {
169+
margin: 0;
170+
font-size: 28px;
171+
line-height: 1.35;
172+
color: var(--ink-soft);
173+
font-weight: 400;
174+
max-width: 820px;
175+
}
176+
177+
.banner .chips {
178+
display: flex;
179+
flex-wrap: wrap;
180+
gap: 10px;
181+
margin-top: 8px;
182+
}
183+
184+
.banner .chip {
185+
display: inline-flex;
186+
align-items: center;
187+
gap: 8px;
188+
font-size: 17px;
189+
font-weight: 500;
190+
color: var(--ink);
191+
padding: 9px 18px;
192+
border: 1px solid var(--line);
193+
border-radius: 999px;
194+
background: var(--bg-soft);
195+
}
196+
197+
.banner .chip .tick {
198+
width: 16px;
199+
height: 16px;
200+
border-radius: 50%;
201+
background: var(--wp-blue);
202+
display: inline-flex;
203+
align-items: center;
204+
justify-content: center;
205+
color: #fff;
206+
font-size: 11px;
207+
font-weight: 800;
208+
line-height: 1;
209+
transform: translateY(-1px);
210+
}
211+
212+
/* Right column — WorkOS-style stacked isometric cards */
213+
.banner .right {
214+
position: relative;
215+
z-index: 1;
216+
width: 640px;
217+
height: 500px;
218+
display: flex;
219+
align-items: center;
220+
justify-content: center;
221+
}
222+
223+
.banner .stack-wrap {
224+
position: relative;
225+
width: 640px;
226+
height: 440px;
227+
transform: translate(48px, 48px);
228+
}
229+
230+
.banner .stack-wrap img {
231+
position: absolute;
232+
inset: 0;
233+
width: 100%;
234+
height: 100%;
235+
object-fit: contain;
236+
object-position: center;
237+
pointer-events: none;
238+
user-select: none;
239+
}
240+
241+
.banner .stack-wrap .cc-3 { z-index: 1; }
242+
.banner .stack-wrap .cc-2 { z-index: 2; }
243+
.banner .stack-wrap .cc-1 { z-index: 3; }
244+
</style>
245+
</head>
246+
<body>
247+
248+
<div class="instructions">
249+
<h2>How to capture</h2>
250+
1. Use a screenshot tool that supports a fixed region (CleanShot, Shottr, or <code>cmd+shift+5</code>).
251+
2. Capture the area <strong>inside the pink dashed line</strong>. The crosshairs mark the exact corners of the 1544 × 500 banner.
252+
3. Save as <code>.wordpress-org/banner-1544x500.png</code>. Resize a copy to 772 × 250 for <code>banner-772x250.png</code>.
253+
</div>
254+
255+
<div class="frame">
256+
<span class="label">Screenshot inside the dashed line ↓</span>
257+
<span class="cross tl"></span><span class="cross tr"></span>
258+
<span class="cross bl"></span><span class="cross br"></span>
259+
<span class="size">1544 × 500</span>
260+
261+
<div class="banner">
262+
<div class="left">
263+
<h1 class="headline">Integration with<br><span class="accent">WorkOS</span></h1>
264+
<p class="tagline">Enterprise identity for WordPress — SSO, Directory Sync, MFA, and a custom AuthKit login your team will actually use.</p>
265+
<div class="chips">
266+
<span class="chip"><span class="tick">/</span>SSO</span>
267+
<span class="chip"><span class="tick">/</span>Directory Sync</span>
268+
<span class="chip"><span class="tick">/</span>MFA &amp; Passkeys</span>
269+
<span class="chip"><span class="tick">/</span>AuthKit</span>
270+
</div>
271+
</div>
272+
<div class="right">
273+
<div class="stack-wrap">
274+
<img class="cc-3" src="stack-3.png" alt="">
275+
<img class="cc-2" src="stack-2.png" alt="">
276+
<img class="cc-1" src="stack-1.png" alt="">
277+
</div>
278+
</div>
279+
</div>
280+
</div>
281+
282+
</body>
283+
</html>

‎.wordpress-org/source/icon.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎.wordpress-org/source/stack-1.png‎

124 KB
Loading

‎.wordpress-org/source/stack-2.png‎

55.4 KB
Loading

‎.wordpress-org/source/stack-3.png‎

11.7 KB
Loading

0 commit comments

Comments
 (0)