A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Refine landing: grotesk buttons, stronger hero contrast, honest copy
- Buttons use Overused Grotesk instead of IBM Plex Mono (labels stay mono)
- Hero lede/actions: higher text opacity, text-shadow, frosted ghost
chips so they read at every phase
- Drop the inaccurate 'your own server' claim (most users are on
Bluesky's PDS) -> 'your account' / 'the open social web'
- 'built on Gutenberg' -> 'built with the WordPress block editor'
author
Jeremy Herve
date
(Jun 8, 2026, 6:11 PM +0200)
commit
4820f533
4820f5337450acdfff33217f58c6d5501accdaa1
parent
3b3643bd
3b3643bd3754968719488635f9c8d69cc7ddfc8c
+35
-25
+1
-1
docs/brand/brand-identity.md
+1
-1
docs/brand/brand-identity.md
···
88
88
server"). Honest about what publishing does.
89
89
- **Time-aware greetings:** "Up with the sun", "Golden hour", "Good evening".
90
90
- **Primary buttons:** "Start writing", "Publish", "Update".
91
-
- **Reassurance:** "Your words, your server, the open web."
91
+
- **Reassurance:** "Your words, your account, the open web."
92
92
93
93
## Tagline / positioning
94
94
+2
-2
src/lib/auth/LoginForm.tsx
+2
-2
src/lib/auth/LoginForm.tsx
···
16
16
>
17
17
<h1 className="login__title">Sign in to write</h1>
18
18
<p className="login__lede">
19
-
Use your existing Bluesky / AT Protocol identity. Your work is saved to
20
-
your own server.
19
+
Use your existing Bluesky / AT Protocol identity. Your work stays in
20
+
your own account.
21
21
</p>
22
22
<label className="login__label" htmlFor="handle">
23
23
Your handle, DID, or PDS URL
+6
-6
src/lib/landing/time-of-day.ts
+6
-6
src/lib/landing/time-of-day.ts
···
17
17
night: {
18
18
greeting: 'Still up?',
19
19
headlineHtml: 'Write while it’s <em>quiet.</em>',
20
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
20
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
21
21
},
22
22
dawn: {
23
23
greeting: 'Up with the sun',
24
24
headlineHtml: 'Catch the <em>first light.</em>',
25
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
25
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
26
26
},
27
27
morning: {
28
28
greeting: 'Good morning',
29
29
headlineHtml: 'Start the day on the <em>page.</em>',
30
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
30
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
31
31
},
32
32
midday: {
33
33
greeting: 'Good afternoon',
34
34
headlineHtml: 'Write something <em>worth keeping.</em>',
35
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
35
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
36
36
},
37
37
golden: {
38
38
greeting: 'Golden hour',
39
39
headlineHtml: 'Write before the <em>light goes.</em>',
40
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
40
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
41
41
},
42
42
dusk: {
43
43
greeting: 'Good evening',
44
44
headlineHtml: 'Wind down with <em>your words.</em>',
45
-
lede: 'A calm place to write long-form, and publish it to your own server on the open web.',
45
+
lede: 'A calm place to write long-form, and publish it to the open social web.',
46
46
},
47
47
};
48
48
+21
-12
src/pages/index.astro
+21
-12
src/pages/index.astro
···
8
8
9
9
<Base
10
10
title="SkyPress — a writing studio for the open social web"
11
-
description="A standalone, long-form writing studio for the AT Protocol. Write in blocks; your words are saved to your own server."
11
+
description="A standalone, long-form writing studio for the AT Protocol. Write in blocks and publish to the open social web, under your own account."
12
12
>
13
13
<Fragment slot="head">
14
14
<script is:inline>
···
57
57
<section class="how">
58
58
<ol class="steps">
59
59
<li><span class="steps__n">01</span><h2>Sign in, no new account</h2><p>Use the Bluesky / AT Protocol account you already have.</p></li>
60
-
<li><span class="steps__n">02</span><h2>Write in blocks</h2><p>Rich, long-form writing, built on the Gutenberg editor.</p></li>
61
-
<li><span class="steps__n">03</span><h2>Keep your words</h2><p>Everything saves to your own server. It’s yours.</p></li>
60
+
<li><span class="steps__n">02</span><h2>Write in blocks</h2><p>Rich, long-form writing, built with the WordPress block editor.</p></li>
61
+
<li><span class="steps__n">03</span><h2>Keep your words</h2><p>Your post lives in your AT Protocol account, not locked inside SkyPress.</p></li>
62
62
</ol>
63
63
<p class="how__honest">One thing worth knowing: when you publish, SkyPress also posts to Bluesky with a link back, so people can find your piece. We’ll always remind you before you hit publish :)</p>
64
64
</section>
65
65
66
66
<footer class="footer">
67
-
<span>Your words, your server, the open web.</span>
68
-
<span class="footer__mark">GPL-2.0 · built on Gutenberg</span>
67
+
<span>Your words, your account, the open web.</span>
68
+
<span class="footer__mark">GPL-2.0 · built with the WordPress block editor</span>
69
69
</footer>
70
70
</div>
71
71
</Base>
···
160
160
[data-phase='morning'] .masthead, [data-phase='morning'] .hero,
161
161
[data-phase='golden'] .masthead, [data-phase='golden'] .hero,
162
162
[data-phase='dusk'] .masthead, [data-phase='dusk'] .hero {
163
-
--sky-ink: #f6f0e3;
164
-
--sky-soft: rgba(246, 240, 227, 0.82);
165
-
--sky-line: rgba(246, 240, 227, 0.35);
163
+
--sky-ink: #fbf7ef;
164
+
--sky-soft: rgba(251, 247, 239, 0.94);
165
+
--sky-line: rgba(251, 247, 239, 0.55);
166
+
--sky-chip: rgba(255, 255, 255, 0.12);
167
+
--sky-shadow: 0 1px 14px rgba(20, 10, 4, 0.4);
166
168
}
167
169
[data-phase='midday'] .masthead, [data-phase='midday'] .hero {
168
170
--sky-ink: #241a10;
169
-
--sky-soft: rgba(36, 26, 16, 0.72);
170
-
--sky-line: rgba(36, 26, 16, 0.28);
171
+
--sky-soft: rgba(36, 26, 16, 0.9);
172
+
--sky-line: rgba(36, 26, 16, 0.42);
173
+
--sky-chip: rgba(0, 0, 0, 0.05);
174
+
--sky-shadow: 0 1px 12px rgba(255, 248, 234, 0.6);
171
175
}
172
176
173
177
/* Logo wordmark (in the Logo component) follows the sky, not the OS theme. */
···
176
180
color: var(--sky-ink);
177
181
}
178
182
179
-
/* Ghost buttons sitting on the sky go translucent so they read at every phase. */
183
+
/* Ghost buttons sitting on the sky get a frosted chip so they read at every phase. */
180
184
.masthead .btn--ghost,
181
185
.hero .btn--ghost {
182
-
background: transparent;
186
+
background: var(--sky-chip);
183
187
color: var(--sky-ink);
184
188
border-color: var(--sky-line);
189
+
backdrop-filter: blur(8px);
190
+
-webkit-backdrop-filter: blur(8px);
185
191
}
186
192
.masthead .btn--ghost:hover,
187
193
.hero .btn--ghost:hover {
···
219
225
margin: 0.75rem 0 0;
220
226
max-width: 14ch;
221
227
color: var(--sky-ink);
228
+
text-shadow: var(--sky-shadow);
222
229
}
223
230
.hero__title :global(em) {
224
231
font-style: italic;
···
230
237
color: var(--sky-soft);
231
238
max-width: 36ch;
232
239
margin: 1.25rem 0 0;
240
+
text-shadow: var(--sky-shadow);
233
241
}
234
242
.hero__actions {
235
243
display: flex;
···
242
250
color: var(--sky-soft);
243
251
font-size: 0.95rem;
244
252
margin-top: 1.5rem;
253
+
text-shadow: var(--sky-shadow);
245
254
}
246
255
247
256
/* ===== How it works (standard themed surface, below the sky) ===== */
+5
-4
src/styles/global.css
+5
-4
src/styles/global.css
···
119
119
display: inline-flex;
120
120
align-items: center;
121
121
gap: 0.5rem;
122
-
font-family: var(--font-mono);
123
-
font-size: 0.82rem;
124
-
letter-spacing: 0.04em;
125
-
padding: 0.6rem 1.1rem;
122
+
font-family: var(--font-display);
123
+
font-weight: 600;
124
+
font-size: 0.92rem;
125
+
letter-spacing: 0;
126
+
padding: 0.55rem 1.15rem;
126
127
border-radius: var(--radius-sm);
127
128
border: 1px solid transparent;
128
129
cursor: pointer;