A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Document First Light brand; mark SP6 superseded in part
author
Jeremy Herve
date
(Jun 8, 2026, 5:47 PM +0200)
commit
e9484be5
e9484be57d49724b7a73b4d78e6c9caca8500d8a
parent
5e22b503
5e22b503cc184924661f8dcf4de5533a7be42dee
+70
-46
+65
-43
docs/brand/brand-identity.md
+65
-43
docs/brand/brand-identity.md
···
1
-
# SkyPress — Brand Identity
1
+
# SkyPress — Brand Identity ("First Light")
2
2
3
-
> The deliverable for brief §7. The system is implemented in `src/styles/global.css`
4
-
> (tokens + type), `src/components/Logo.astro`, and `public/favicon.svg`.
3
+
> The deliverable for brief §7, redesigned in SP8. The system is implemented in
4
+
> `src/styles/global.css` (tokens + type), `src/lib/landing/time-of-day.ts` +
5
+
> `src/pages/index.astro` (the time-of-day landing), `src/components/Logo.astro`, and
6
+
> `public/favicon.svg`. Fonts live in `public/fonts/`.
5
7
6
8
## Concept
7
9
8
-
**The open sky meets the typesetter's bench.** Airy + crafted, modern + timeless. SkyPress
9
-
is a calm, editorial writing studio for the open social web — indie-web and human, never
10
-
corporate-SaaS. The "sky" is the AT Protocol's open air; the "press" is movable type, ink,
11
-
and paper. The design lives in that collision.
10
+
**A writing studio that wakes with you.** SkyPress is a calm, crafted, indie-web writing
11
+
studio for the open social web — human and editorial, never corporate-SaaS. The identity is
12
+
built around **sunrise**: warm light, the start of a good day, the open sky of the AT
13
+
Protocol. The landing page literally paints its sky to match the visitor's clock, so the same
14
+
page looks like dawn at dawn and dusk at dusk.
12
15
13
16
### Directions explored (then refined)
14
-
1. **Bauhaus-sky** — geometric, primary blue, grotesque type. Rejected: too cool/corporate.
15
-
2. **Soft cloud / pastel** — rounded, airy, gradients. Rejected: drifts toward AI-slop.
16
-
3. **Editorial letterpress + altitude blue** ✅ — warm paper, ink, a confident sky-blue, a
17
-
characterful old-style serif. Crafted and reading-first; this is the chosen direction.
17
+
1. **Altitude blue + editorial serif** (the previous SP6 identity). Rejected: too cool; the
18
+
blue read corporate.
19
+
2. **First Light (coral + pre-dawn plum gradient).** Energetic, but the deep gradient ran hot.
20
+
3. **Ember (burnt terracotta).** Earthy and calm, but a touch muted.
21
+
4. **Golden Hour (marigold)** ✅ — warm, optimistic, sunny without going neon. Chosen.
18
22
19
23
## Logo
20
24
21
-
A **type block** (the page / letterpress tile) framing a **sun rising over a horizon**,
22
-
with two short "lines of set type" beneath — sky ∧ press in one mark. Single-colour
23
-
(`currentColor`), so it works in monochrome (GitHub README) and as a 16px favicon; the app
24
-
renders the mark in sky-blue. See `Logo.astro` / `favicon.svg`.
25
+
A **type block** (the page / letterpress tile) framing a **sun rising over a horizon**, with
26
+
two short "lines of set type" beneath — sky ∧ press in one mark. Single-colour
27
+
(`currentColor`) so it works in monochrome (GitHub README) and as a 16px favicon; the app
28
+
renders the mark in marigold. The circle now rhymes with the landing's halo sun. See
29
+
`Logo.astro` / `favicon.svg`.
25
30
26
-
- **Wordmark:** "SkyPress" — one word, set in Fraunces (display) with a touch of `SOFT`/`WONK`
27
-
for letterpress warmth. The mark sits left of the word.
31
+
- **Wordmark:** "SkyPress" — one word, set in Overused Grotesk (700).
28
32
29
-
## Color
33
+
## Color — "Golden Hour"
30
34
31
35
| Token | Light | Dark | Use |
32
36
|---|---|---|---|
33
-
| `--paper` | `#faf6ef` | `#111319` | page background (warm paper / deep night sky) |
37
+
| `--paper` | `#faf6ef` | `#111319` | page background (warm paper / deep night) |
34
38
| `--paper-raised` | `#fffdf9` | `#181b23` | cards, inputs |
35
39
| `--panel` | `#f1eadc` | `#1b1f2a` | bars, code chips |
36
-
| `--ink` | `#1c1a16` | `#ece6da` | primary text (warm near-black / warm off-white) |
40
+
| `--ink` | `#1c1a16` | `#ece6da` | primary text |
37
41
| `--ink-soft` | `#46413a` | `#c3bcad` | lede / secondary text |
38
42
| `--muted` | `#756d5f` | `#938b7d` | meta, captions |
39
43
| `--line` | `#e5ddcd` | `#292d39` | hairlines |
40
-
| `--sky` | `#2a5fd0` | `#7aa2ff` | primary accent (altitude blue) |
41
-
| `--sky-tint` | `#e9f0fc` | `#1a2235` | accent washes |
44
+
| `--sun` | `#e8920c` | `#f4b13f` | primary accent (golden-hour marigold) |
45
+
| `--sun-strong` | `#b85c12` | `#f7c97a` | hover / active |
46
+
| `--sun-tint` | `#fbe6cc` | `#2a1f12` | accent washes, `::selection` |
42
47
| `--ember` | `#bb5a36` | `#e08a63` | rare warm counterweight / errors |
43
48
44
-
Light + dark are both first-class (auto via `prefers-color-scheme`). The palette is a
45
-
considered sky-blue + warm ink/paper neutrals — deliberately not default tech-blue on white.
49
+
Light + dark are both first-class (auto via `prefers-color-scheme`). Warm paper/ink neutrals
50
+
are kept from SP6; only the accent flips from blue to marigold. The accent stays **constant
51
+
across all times of day** — only the landing hero's atmosphere changes.
46
52
47
-
## Typography (all freely licensed, self-hosted via Fontsource)
53
+
## Typography (all freely licensed, self-hosted)
48
54
49
-
- **Display / wordmark / headings — Fraunces** (variable; `opsz`, `SOFT`, `WONK`). An
50
-
old-style serif with optical sizing and characterful, slightly "wonky" details —
51
-
letterpress warmth.
52
-
- **Reading & UI — Newsreader** (variable). A serif designed for on-screen long-form;
53
-
calm and editorial. Used for body and most UI text to keep the studio cohesive.
54
-
- **Mono — IBM Plex Mono.** Code blocks, and uppercase letter-spaced "eyebrow" labels
55
-
(`.eyebrow`) — the indie-press voice.
55
+
- **Display, UI, and body — Overused Grotesk** (variable, `wght 300–900`). A quirky neo-grotesk
56
+
with a characterful italic; weight + italic carry the personality. Self-hosted woff2/woff in
57
+
`public/fonts/` via `@font-face` (it is not on Fontsource). **OFL-1.1** (GPL-compatible);
58
+
license shipped at `public/fonts/OverusedGrotesk-LICENSE.txt`.
59
+
- **Mono — IBM Plex Mono** (Fontsource). Code blocks, and uppercase letter-spaced "eyebrow"
60
+
labels (`.eyebrow`) — the indie-press voice. Kept from SP6.
61
+
62
+
Fraunces and Newsreader (the SP6 serifs) are removed.
63
+
64
+
## The time-of-day landing
65
+
66
+
The hero is centered. Its sky gradient, sun height, greeting, and headline are chosen from the
67
+
visitor's local hour across six phases — night (21–4), dawn (5–6), morning (7–9), midday
68
+
(10–15), golden (16–18), dusk (19–20). Midday stays warm cream/gold (no blue) to stay on
69
+
brand. The sun is a **halo ring** (a thin luminous outline with an inner glow) over a soft
70
+
bloom near the horizon — light welling up, not a hard disc.
71
+
72
+
- **Source of truth:** `src/lib/landing/time-of-day.ts` (phase boundaries + per-phase copy),
73
+
unit-tested. CSS holds the per-phase skies keyed off `html[data-phase]`.
74
+
- **No-flash + accessible:** a tiny inline head script sets the phase before first paint; the
75
+
page server-renders a static golden hero so no-JS visitors get a correct, motion-free page.
76
+
Below the hero, the page settles into the standard themed surface (a numbered "how it works"
77
+
strip, the honest Bluesky note, footer).
56
78
57
79
## Iconography & UI texture
58
80
59
-
- "Blocks of type" show up as the editor's curated block set; the mark echoes stacked
60
-
lines of type. Hairline rules (`--line`) and a soft horizon gradient (`.sky-wash`) give
61
-
atmosphere without clip-art clouds.
62
-
- Buttons are mono-labelled, understated; the primary action is sky-blue.
81
+
- "Blocks of type" show up as the editor's curated block set; the mark echoes stacked lines of
82
+
type. Hairline rules (`--line`) and the atmospheric sky give warmth without clip-art clouds.
83
+
- Buttons are mono-labelled, understated; the primary action is marigold.
63
84
64
85
## Voice & tone
65
86
66
-
Calm, encouraging, plainspoken, a little literary.
67
-
- **Empty state:** "A blank page, and the open sky."
87
+
Calm, encouraging, plainspoken, a little literary; warm and direct ("your words, your
88
+
server"). Honest about what publishing does.
89
+
- **Time-aware greetings:** "Up with the sun", "Golden hour", "Good evening".
68
90
- **Primary buttons:** "Start writing", "Publish", "Update".
69
-
- **Reassurance:** "Your data, your server, the open web."
91
+
- **Reassurance:** "Your words, your server, the open web."
70
92
71
93
## Tagline / positioning
72
94
73
95
**"Write things worth keeping."**
74
-
Alternates: "Long-form for the open sky." · "The open sky meets the typesetter's bench." ·
75
-
"Your words, your server, the open web."
96
+
Alternates: "Catch the first light." · "A studio that wakes with you." · "Your words, your
97
+
server, the open web."
76
98
77
99
## Constraints met
78
100
79
-
Tiny favicon ✓ · large hero mark ✓ · monochrome ✓ · light + dark first-class ✓ · freely
80
-
licensable fonts, reproducible assets ✓.
101
+
Tiny favicon ✓ · large hero treatment ✓ · monochrome-safe mark ✓ · light + dark first-class ✓
102
+
· freely licensable, self-hosted fonts (OFL) ✓ · no-JS / reduced-motion fallback ✓.
+3
-1
docs/specs/sp6-brand.md
+3
-1
docs/specs/sp6-brand.md
···
1
1
# SP6 — Brand identity
2
2
3
3
- **Date:** 2026-06-08
4
-
- **Status:** ✅ Complete — system built + applied + screenshot-verified
4
+
- **Status:** ✅ Complete — system built + applied + screenshot-verified.
5
+
Superseded in part by [SP8 — First Light](./sp8-brand-first-light.md) (palette, type, and
6
+
landing redesigned 2026-06-08); SP6's token system + light/dark architecture carry forward.
5
7
- **Goal (brief §7):** Deliver a complete brand identity and apply it across the editor +
6
8
reading experience.
7
9
+1
-1
docs/specs/sp8-brand-first-light.md
+1
-1
docs/specs/sp8-brand-first-light.md
···
1
1
# SP8 — Brand redesign: "First Light"
2
2
3
3
- **Date:** 2026-06-08
4
-
- **Status:** 📋 Spec — approved, not yet built
4
+
- **Status:** 🚧 In progress — built, screenshot verification pending
5
5
- **Supersedes:** the visual layer of [SP6](./sp6-brand.md) (altitude-blue + Fraunces/Newsreader).
6
6
SP6's structure (token system, light/dark, applied-everywhere approach) is kept; only the
7
7
palette, type, and landing page change.