A calm place to write long-form, and publish it to the open social web.
skypress.blog/
1/**
2 * SkyPress design system (SP6 — see docs/brand/brand-identity.md).
3 * "The open sky meets the typesetter's bench" — editorial letterpress + open air.
4 * Self-hosted, freely-licensed fonts; light + dark first-class.
5 */
6@import '@fontsource/ibm-plex-mono/400.css';
7@import '@fontsource/ibm-plex-mono/500.css';
8
9/* Overused Grotesk — self-hosted variable font (OFL-1.1, see public/fonts/). */
10@font-face {
11 font-family: 'Overused Grotesk';
12 src:
13 url('/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations'),
14 url('/fonts/OverusedGrotesk-VF.woff') format('woff-variations');
15 font-weight: 300 900;
16 font-style: normal;
17 font-display: swap;
18}
19
20:root {
21 /* Type — one grotesk for display + body, mono for labels/code */
22 --font-display: 'Overused Grotesk', system-ui, sans-serif;
23 --font-body: 'Overused Grotesk', system-ui, sans-serif;
24 --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
25
26 /* Palette — light (warm paper, ink, altitude blue) */
27 --paper: #faf6ef;
28 --paper-raised: #fffdf9;
29 --panel: #f1eadc;
30 --ink: #1c1a16;
31 --ink-soft: #46413a;
32 --muted: #756d5f;
33 --line: #e5ddcd;
34 --line-strong: #d8cdb8;
35 --sun: #e8920c;
36 --sun-strong: #b85c12;
37 --sun-tint: #fbe6cc;
38 /* Filled-button background: a deeper sun that clears WCAG AA (≥4.5:1) with
39 white text. Bare --sun is too light for white text (~2.5:1). */
40 --btn-primary: #b85c12;
41 --btn-primary-hover: #9a4c0f;
42 --btn-primary-fg: #fff;
43 --ember: #bb5a36; /* rare warm accent (the ink/press counterweight) */
44
45 --radius: 12px;
46 --radius-sm: 8px;
47 --shadow: 0 1px 2px rgba(28, 26, 22, 0.06), 0 10px 30px -12px rgba(28, 26, 22, 0.18);
48 --measure: 66ch;
49}
50
51@media (prefers-color-scheme: dark) {
52 :root {
53 --paper: #111319;
54 --paper-raised: #181b23;
55 --panel: #1b1f2a;
56 --ink: #ece6da;
57 --ink-soft: #c3bcad;
58 --muted: #938b7d;
59 --line: #292d39;
60 --line-strong: #353a49;
61 --sun: #f4b13f;
62 --sun-strong: #f7c97a;
63 --sun-tint: #2a1f12;
64 /* Dark mode's accents are light, so white text still needs a deeper fill. */
65 --btn-primary: #aa6010;
66 --btn-primary-hover: #964f0c;
67 --btn-primary-fg: #fff;
68 --ember: #e08a63;
69 --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
70 }
71}
72
73*,
74*::before,
75*::after {
76 box-sizing: border-box;
77}
78
79html {
80 background: var(--paper);
81 color: var(--ink);
82 font-family: var(--font-body);
83 font-size: 18px;
84 line-height: 1.6;
85 -webkit-font-smoothing: antialiased;
86 text-rendering: optimizeLegibility;
87 color-scheme: light dark;
88}
89
90body {
91 margin: 0;
92 min-height: 100vh;
93}
94
95h1, h2, h3, h4 {
96 font-family: var(--font-display);
97 font-weight: 640;
98 line-height: 1.1;
99 letter-spacing: -0.01em;
100 color: var(--ink);
101}
102
103a {
104 color: var(--sun);
105 text-underline-offset: 0.18em;
106 text-decoration-thickness: 1px;
107}
108a:hover {
109 color: var(--sun-strong);
110}
111
112::selection {
113 background: var(--sun-tint);
114}
115
116/* Mono "eyebrow" / kicker — the indie-press label voice */
117.eyebrow {
118 font-family: var(--font-mono);
119 font-weight: 500;
120 font-size: 0.7rem;
121 letter-spacing: 0.18em;
122 text-transform: uppercase;
123 color: var(--muted);
124}
125
126/* Buttons */
127.btn {
128 display: inline-flex;
129 align-items: center;
130 gap: 0.5rem;
131 font-family: var(--font-display);
132 font-weight: 600;
133 font-size: 0.92rem;
134 letter-spacing: 0;
135 padding: 0.55rem 1.15rem;
136 border-radius: var(--radius-sm);
137 border: 1px solid transparent;
138 cursor: pointer;
139 text-decoration: none;
140 transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
141}
142.btn:active {
143 transform: translateY(1px);
144}
145.btn--primary {
146 background: var(--btn-primary);
147 color: var(--btn-primary-fg);
148}
149.btn--primary:hover {
150 background: var(--btn-primary-hover);
151 color: var(--btn-primary-fg);
152}
153.btn--ghost {
154 background: var(--paper-raised);
155 color: var(--ink);
156 border-color: var(--line-strong);
157}
158.btn--ghost:hover {
159 border-color: var(--sun);
160 color: var(--sun);
161}
162.btn:disabled {
163 opacity: 0.45;
164 cursor: not-allowed;
165}
166
167/* Sky atmosphere: a soft horizon gradient for hero/empty surfaces */
168.sun-wash {
169 background:
170 radial-gradient(120% 80% at 50% -20%, var(--sun-tint) 0%, transparent 60%),
171 var(--paper);
172}