Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
style: refine theme for professional look and feel
Replace rounded body fonts with system-ui stack, tighten border radii
(8/10/14 → 6/8/10), deepen shadows with new 3-tier hierarchy
(shadowElevated), widen container (800 → 960px), and increase density
(line-height, spacing, button/input sizing). Remove translateY hover
animations in favor of shadow-only feedback.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+47
-46
+15
-14
packages/app/src/app.css.ts
+15
-14
packages/app/src/app.css.ts
···
3
3
4
4
const shared = {
5
5
size: {
6
-
containerMaxWidth: "800px",
6
+
containerMaxWidth: "960px",
7
7
},
8
8
space: {
9
9
xs: "4px",
···
14
14
xxl: "48px",
15
15
},
16
16
radius: {
17
-
sm: "8px",
18
-
md: "10px",
19
-
lg: "14px",
17
+
sm: "6px",
18
+
md: "8px",
19
+
lg: "10px",
20
20
},
21
-
// see https://github.com/system-fonts/modern-font-stacks
22
21
font: {
23
-
heading: "Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif",
24
-
body: "ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif",
22
+
heading: "Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, system-ui, sans-serif",
23
+
body: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
25
24
},
26
25
};
27
26
···
29
28
color: {
30
29
text: "#1a1a2e",
31
30
textMuted: "#64748b",
32
-
bg: "#f8fafc",
31
+
bg: "#f9fafb",
33
32
surface: "#ffffff",
34
33
surfaceHover: "#f8fafc",
35
34
border: "#e2e8f0",
···
42
41
warningLight: "#fffbeb",
43
42
success: "#10b981",
44
43
successLight: "#ecfdf5",
45
-
shadow: "rgba(0, 0, 0, 0.04)",
46
-
shadowStrong: "rgba(0, 0, 0, 0.08)",
47
-
focusRing: "rgba(59, 130, 246, 0.2)",
44
+
shadow: "rgba(0, 0, 0, 0.06)",
45
+
shadowStrong: "rgba(0, 0, 0, 0.12)",
46
+
shadowElevated: "rgba(0, 0, 0, 0.16)",
47
+
focusRing: "rgba(59, 130, 246, 0.25)",
48
48
skeleton: "#e2e8f0",
49
49
skeletonShimmer: "#f1f5f9",
50
50
},
···
68
68
warningLight: "#3b2f0a",
69
69
success: "#34d399",
70
70
successLight: "#0d3326",
71
-
shadow: "rgba(0, 0, 0, 0.2)",
72
-
shadowStrong: "rgba(0, 0, 0, 0.35)",
73
-
focusRing: "rgba(96, 165, 250, 0.25)",
71
+
shadow: "rgba(0, 0, 0, 0.25)",
72
+
shadowStrong: "rgba(0, 0, 0, 0.4)",
73
+
shadowElevated: "rgba(0, 0, 0, 0.5)",
74
+
focusRing: "rgba(96, 165, 250, 0.3)",
74
75
skeleton: "#334155",
75
76
skeletonShimmer: "#475569",
76
77
},
+1
-2
packages/app/src/pages/dashboard.css.ts
+1
-2
packages/app/src/pages/dashboard.css.ts
···
119
119
paddingInline: vars.space.lg,
120
120
textDecoration: "none",
121
121
color: "inherit",
122
-
transition: "box-shadow 0.2s, transform 0.15s",
122
+
transition: "box-shadow 0.2s",
123
123
":hover": {
124
124
boxShadow: `0 4px 12px ${vars.color.shadowStrong}`,
125
-
transform: "translateY(-1px)",
126
125
textDecoration: "none",
127
126
},
128
127
"@media": {
+1
-1
packages/client/src/components/modal.css.ts
+1
-1
packages/client/src/components/modal.css.ts
···
60
60
borderRadius: vars.radius.lg,
61
61
paddingBlock: vars.space.md,
62
62
paddingInline: vars.space.md,
63
-
boxShadow: `0 8px 32px ${vars.color.shadowStrong}, 0 2px 8px ${vars.color.shadow}`,
63
+
boxShadow: `0 8px 32px ${vars.color.shadowElevated}, 0 2px 8px ${vars.color.shadow}`,
64
64
width: "100%",
65
65
maxWidth: "560px",
66
66
animationName: slideUp,
+1
packages/client/src/theme.css.ts
+1
packages/client/src/theme.css.ts
+28
-27
packages/client/src/ui.css.ts
+28
-27
packages/client/src/ui.css.ts
···
19
19
display: "flex",
20
20
flexDirection: "column",
21
21
fontFamily: vars.font.body,
22
-
lineHeight: 1.6,
22
+
lineHeight: 1.5,
23
23
color: vars.color.text,
24
24
backgroundColor: vars.color.bg,
25
25
transition: "background-color 0.2s, color 0.2s",
···
66
66
});
67
67
68
68
export const section = style({
69
-
marginBlockStart: vars.space.lg,
69
+
marginBlockStart: vars.space.md,
70
70
display: "flex",
71
71
flexDirection: "column",
72
72
gap: vars.space.md,
···
83
83
transition: "background-color 0.2s, border-color 0.2s, box-shadow 0.2s",
84
84
"@media": {
85
85
[bp.sm]: {
86
-
paddingBlock: vars.space.md,
87
-
marginBlockEnd: vars.space.xl,
86
+
paddingBlock: "12px",
87
+
marginBlockEnd: vars.space.lg,
88
88
},
89
89
},
90
90
});
···
99
99
100
100
export const headerTitle = style({
101
101
fontFamily: vars.font.heading,
102
-
fontWeight: 700,
102
+
fontWeight: 600,
103
103
fontSize: "1rem",
104
104
color: vars.color.text,
105
-
letterSpacing: "-0.01em",
105
+
letterSpacing: "-0.02em",
106
106
":hover": { textDecoration: "none" },
107
107
"@media": {
108
108
[bp.sm]: {
···
129
129
border: `1px solid ${vars.color.border}`,
130
130
borderRadius: vars.radius.lg,
131
131
paddingBlock: vars.space.md,
132
-
paddingInline: vars.space.lg,
132
+
paddingInline: vars.space.md,
133
133
boxShadow: `0 1px 3px ${vars.color.shadow}, 0 1px 2px ${vars.color.shadow}`,
134
134
transition: "background-color 0.2s, border-color 0.2s, box-shadow 0.2s",
135
135
":hover": {
···
138
138
},
139
139
"@media": {
140
140
[bp.sm]: {
141
-
paddingBlock: vars.space.lg,
142
-
paddingInline: vars.space.xl,
141
+
paddingBlock: vars.space.md,
142
+
paddingInline: vars.space.lg,
143
143
},
144
144
},
145
145
});
···
154
154
border: `1px solid ${vars.color.border}`,
155
155
borderRadius: vars.radius.lg,
156
156
paddingBlock: vars.space.md,
157
-
paddingInline: vars.space.lg,
157
+
paddingInline: vars.space.md,
158
158
boxShadow: `0 1px 3px ${vars.color.shadow}, 0 1px 2px ${vars.color.shadow}`,
159
-
transition: "border-color 0.15s, box-shadow 0.2s, background-color 0.2s, transform 0.15s",
159
+
transition: "border-color 0.15s, box-shadow 0.2s, background-color 0.2s",
160
160
":hover": {
161
161
backgroundColor: vars.color.surfaceHover,
162
162
borderColor: vars.color.primary,
163
163
boxShadow: `0 4px 12px ${vars.color.shadowStrong}, 0 2px 4px ${vars.color.shadow}`,
164
-
transform: "translateY(-2px)",
165
164
textDecoration: "none",
166
165
},
167
166
"@media": {
168
167
[bp.sm]: {
169
-
paddingBlock: vars.space.lg,
170
-
paddingInline: vars.space.xl,
168
+
paddingBlock: vars.space.md,
169
+
paddingInline: vars.space.lg,
171
170
},
172
171
},
173
172
});
···
209
208
justifyContent: "center" as const,
210
209
borderRadius: vars.radius.sm,
211
210
fontWeight: 500,
211
+
letterSpacing: "0.01em",
212
212
lineHeight: 1.5,
213
213
cursor: "pointer",
214
214
fontFamily: vars.font.body,
215
-
minBlockSize: "38px",
215
+
minBlockSize: "36px",
216
216
whiteSpace: "nowrap" as const,
217
217
transition: "background-color 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.1s",
218
218
};
219
219
220
220
export const button = style({
221
221
...btnBase,
222
-
paddingBlock: "6px",
222
+
paddingBlock: "5px",
223
223
paddingInline: vars.space.lg,
224
224
border: "none",
225
-
fontSize: "0.8125rem",
225
+
fontSize: "0.875rem",
226
226
backgroundColor: vars.color.primary,
227
227
color: "#fff",
228
228
boxShadow: `0 1px 2px ${vars.color.shadow}`,
···
237
237
238
238
export const buttonSecondary = style({
239
239
...btnBase,
240
-
paddingBlock: "6px",
240
+
paddingBlock: "5px",
241
241
paddingInline: vars.space.lg,
242
242
border: `1px solid ${vars.color.border}`,
243
-
fontSize: "0.8125rem",
243
+
fontSize: "0.875rem",
244
244
backgroundColor: vars.color.surface,
245
245
color: vars.color.text,
246
246
":hover": {
247
247
backgroundColor: vars.color.bg,
248
248
textDecoration: "none",
249
249
borderColor: vars.color.primary,
250
+
boxShadow: `0 1px 3px ${vars.color.shadow}`,
250
251
},
251
252
":active": { transform: "scale(0.98)" },
252
253
});
253
254
254
255
export const buttonDanger = style({
255
256
...btnBase,
256
-
paddingBlock: "6px",
257
+
paddingBlock: "5px",
257
258
paddingInline: vars.space.md,
258
259
border: "none",
259
-
fontSize: "0.8125rem",
260
+
fontSize: "0.875rem",
260
261
backgroundColor: vars.color.danger,
261
262
color: "#fff",
262
263
":hover": { opacity: 0.9 },
···
286
287
const inputBase = {
287
288
boxSizing: "border-box" as const,
288
289
width: "100%" as const,
289
-
paddingBlock: "10px",
290
+
paddingBlock: "8px",
290
291
paddingInline: vars.space.md,
291
292
borderRadius: vars.radius.sm,
292
293
border: `1px solid ${vars.color.border}`,
293
-
fontSize: "1rem",
294
+
fontSize: "0.9375rem",
294
295
lineHeight: 1.5,
295
296
color: vars.color.text,
296
297
backgroundColor: vars.color.surface,
···
301
302
302
303
const inputFocus = {
303
304
borderColor: vars.color.primary,
304
-
boxShadow: `0 0 0 3px ${vars.color.focusRing}`,
305
+
boxShadow: `0 0 0 2px ${vars.color.focusRing}`,
305
306
};
306
307
307
308
export const input = style({
···
439
440
export const badge = style({
440
441
display: "inline-block",
441
442
paddingBlock: "2px",
442
-
paddingInline: vars.space.sm,
443
-
borderRadius: vars.radius.sm,
443
+
paddingInline: "6px",
444
+
borderRadius: "4px",
444
445
fontSize: "0.6875rem",
445
446
fontWeight: 600,
446
447
letterSpacing: "0.02em",
···
653
654
inlineSize: "28px",
654
655
blockSize: "28px",
655
656
border: "none",
656
-
borderRadius: "6px",
657
+
borderRadius: "4px",
657
658
cursor: "pointer",
658
659
backgroundColor: "transparent",
659
660
color: vars.color.textMuted,
+1
-2
packages/kanban/src/ui/ui.css.ts
+1
-2
packages/kanban/src/ui/ui.css.ts
···
118
118
backgroundColor: vars.color.surface,
119
119
textDecoration: "none",
120
120
color: vars.color.text,
121
-
transition: "border-color 0.15s, box-shadow 0.15s, transform 0.15s",
121
+
transition: "border-color 0.15s, box-shadow 0.15s",
122
122
":hover": {
123
123
borderColor: vars.color.primary,
124
124
boxShadow: `0 2px 8px ${vars.color.shadow}`,
125
-
transform: "translateY(-1px)",
126
125
textDecoration: "none",
127
126
},
128
127
});