Skip to content

Commit 6fd2070

Browse files
AmanVarshney01AmanVarshney01
authored
fix: simplify template UI to minimal, consistent design (#30)
Remove gradients, box-shadows, backdrop-filter, custom fonts, and oversized headings across all templates. Unify Next.js, SvelteKit, Astro, Nuxt, and TanStack Start on the same minimal style: white background, system font stack, small border-radius, simple 1px borders, and muted gray text. TanStack Start now uses the same class names and page structure as the other templates.
1 parent a7162ca commit 6fd2070

6 files changed

Lines changed: 308 additions & 400 deletions

File tree

‎templates/create/astro/src/pages/index.astro.hbs‎

Lines changed: 39 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -111,122 +111,112 @@ const users = await prisma.user
111111
<style>
112112
:global(body) {
113113
margin: 0;
114-
font-family:
115-
"Instrument Sans",
116-
"Segoe UI",
117-
sans-serif;
118-
background: #f7f8fb;
119-
color: #0f172a;
114+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
115+
background: #fff;
116+
color: #111;
120117
}
121118
122119
.shell {
123-
width: min(64rem, 100%);
120+
max-width: 40rem;
124121
margin: 0 auto;
125-
padding: 4rem 1.5rem 5rem;
122+
padding: 3rem 1.5rem;
126123
}
127124
128125
.hero {
129-
margin-bottom: 2rem;
126+
margin-bottom: 1.5rem;
130127
}
131128
132129
.eyebrow {
133-
margin: 0 0 0.75rem;
134-
color: #10b981;
135-
font-size: 0.875rem;
136-
font-weight: 700;
137-
letter-spacing: 0.14em;
130+
margin: 0 0 0.5rem;
131+
color: #666;
132+
font-size: 0.75rem;
133+
font-weight: 600;
134+
letter-spacing: 0.06em;
138135
text-transform: uppercase;
139136
}
140137
141138
h1 {
142139
margin: 0;
143-
max-width: 12ch;
144-
font-size: clamp(2.75rem, 7vw, 5rem);
145-
line-height: 0.95;
140+
font-size: 1.25rem;
141+
font-weight: 600;
142+
line-height: 1.4;
146143
}
147144
148145
.lede {
149-
max-width: 42rem;
150-
font-size: 1.05rem;
151-
line-height: 1.7;
152-
color: #475569;
146+
margin: 0.5rem 0 0;
147+
color: #666;
148+
font-size: 0.875rem;
149+
line-height: 1.6;
153150
}
154151
155152
.panel {
156-
padding: 1.5rem;
157-
border: 1px solid #dbe2ea;
158-
border-radius: 1.5rem;
159-
background: #ffffff;
160-
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
153+
border: 1px solid #e5e5e5;
154+
border-radius: 0.5rem;
155+
padding: 1rem;
161156
}
162157
163158
.panel-header {
164159
display: flex;
165160
align-items: center;
166161
justify-content: space-between;
167162
gap: 1rem;
168-
margin-bottom: 1rem;
163+
margin-bottom: 0.75rem;
169164
}
170165
171166
h2 {
172167
margin: 0;
173-
font-size: 1.125rem;
168+
font-size: 0.875rem;
169+
font-weight: 600;
174170
}
175171
176172
.panel-header span,
177173
.empty,
178174
time {
179-
color: #64748b;
175+
color: #888;
176+
font-size: 0.8rem;
180177
}
181178
182179
.panel p {
183-
color: #64748b;
180+
color: #666;
181+
font-size: 0.8rem;
184182
}
185183
186184
.users {
187185
list-style: none;
188186
margin: 0;
189187
padding: 0;
190188
display: grid;
191-
gap: 0.75rem;
189+
gap: 0.5rem;
192190
}
193191
194192
.users li {
195193
display: flex;
196194
align-items: center;
197195
justify-content: space-between;
198196
gap: 1rem;
199-
padding: 1rem 1.125rem;
200-
border-radius: 1rem;
201-
background: #f8fafc;
202-
border: 1px solid #dbe2ea;
197+
padding: 0.625rem 0.75rem;
198+
border: 1px solid #eee;
199+
border-radius: 0.375rem;
203200
}
204201
205202
.users p {
206-
margin: 0.2rem 0 0;
203+
margin: 0.125rem 0 0;
207204
}
208205
209206
time {
210-
font-size: 0.875rem;
207+
font-size: 0.75rem;
211208
white-space: nowrap;
212209
}
213210
214211
code {
215-
padding: 0.15rem 0.4rem;
216-
border-radius: 0.35rem;
217-
background: #eef2f7;
218-
font-family:
219-
SFMono-Regular,
220-
Consolas,
221-
monospace;
222-
font-size: 0.95em;
212+
padding: 0.125rem 0.25rem;
213+
border-radius: 0.25rem;
214+
background: #f5f5f5;
215+
font-family: SFMono-Regular, Consolas, monospace;
216+
font-size: 0.875em;
223217
}
224218
225219
@media (max-width: 640px) {
226-
.shell {
227-
padding-top: 3rem;
228-
}
229-
230220
.users li,
231221
.panel-header {
232222
flex-direction: column;

‎templates/create/next/src/app/globals.css‎

Lines changed: 38 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,122 +6,114 @@
66
box-sizing: border-box;
77
}
88

9-
html {
10-
font-size: 16px;
11-
}
12-
139
body {
1410
margin: 0;
15-
font-family: "Instrument Sans", "Segoe UI", sans-serif;
16-
background: #f7f8fb;
17-
color: #0f172a;
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
12+
background: #fff;
13+
color: #111;
1814
}
1915

2016
.shell {
21-
width: min(64rem, 100%);
17+
max-width: 40rem;
2218
margin: 0 auto;
23-
padding: 4rem 1.5rem 5rem;
19+
padding: 3rem 1.5rem;
2420
}
2521

2622
.hero {
27-
margin-bottom: 2rem;
23+
margin-bottom: 1.5rem;
2824
}
2925

3026
.eyebrow {
31-
margin: 0 0 0.75rem;
32-
color: #10b981;
33-
font-size: 0.875rem;
34-
font-weight: 700;
35-
letter-spacing: 0.14em;
27+
margin: 0 0 0.5rem;
28+
color: #666;
29+
font-size: 0.75rem;
30+
font-weight: 600;
31+
letter-spacing: 0.06em;
3632
text-transform: uppercase;
3733
}
3834

3935
h1 {
4036
margin: 0;
41-
max-width: 12ch;
42-
font-size: clamp(2.75rem, 7vw, 5rem);
43-
line-height: 0.95;
37+
font-size: 1.25rem;
38+
font-weight: 600;
39+
line-height: 1.4;
4440
}
4541

4642
.lede {
47-
max-width: 42rem;
48-
font-size: 1.05rem;
49-
line-height: 1.7;
50-
color: #475569;
43+
margin: 0.5rem 0 0;
44+
color: #666;
45+
font-size: 0.875rem;
46+
line-height: 1.6;
5147
}
5248

5349
.panel {
54-
padding: 1.5rem;
55-
border: 1px solid #dbe2ea;
56-
border-radius: 1.5rem;
57-
background: #ffffff;
58-
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
50+
border: 1px solid #e5e5e5;
51+
border-radius: 0.5rem;
52+
padding: 1rem;
5953
}
6054

6155
.panelHeader {
6256
display: flex;
6357
align-items: center;
6458
justify-content: space-between;
6559
gap: 1rem;
66-
margin-bottom: 1rem;
60+
margin-bottom: 0.75rem;
6761
}
6862

6963
h2 {
7064
margin: 0;
71-
font-size: 1.125rem;
65+
font-size: 0.875rem;
66+
font-weight: 600;
7267
}
7368

7469
.panelHeader span,
7570
.empty,
7671
time {
77-
color: #64748b;
72+
color: #888;
73+
font-size: 0.8rem;
7874
}
7975

8076
.panel p {
81-
color: #64748b;
77+
color: #666;
78+
font-size: 0.8rem;
8279
}
8380

8481
.users {
8582
list-style: none;
8683
margin: 0;
8784
padding: 0;
8885
display: grid;
89-
gap: 0.75rem;
86+
gap: 0.5rem;
9087
}
9188

9289
.users li {
9390
display: flex;
9491
align-items: center;
9592
justify-content: space-between;
9693
gap: 1rem;
97-
padding: 1rem 1.125rem;
98-
border-radius: 1rem;
99-
background: #f8fafc;
100-
border: 1px solid #dbe2ea;
94+
padding: 0.625rem 0.75rem;
95+
border: 1px solid #eee;
96+
border-radius: 0.375rem;
10197
}
10298

10399
.users p {
104-
margin: 0.2rem 0 0;
100+
margin: 0.125rem 0 0;
105101
}
106102

107103
time {
108-
font-size: 0.875rem;
104+
font-size: 0.75rem;
109105
white-space: nowrap;
110106
}
111107

112108
code {
113-
padding: 0.15rem 0.4rem;
114-
border-radius: 0.35rem;
115-
background: #eef2f7;
109+
padding: 0.125rem 0.25rem;
110+
border-radius: 0.25rem;
111+
background: #f5f5f5;
116112
font-family: SFMono-Regular, Consolas, monospace;
117-
font-size: 0.95em;
113+
font-size: 0.875em;
118114
}
119115

120116
@media (max-width: 640px) {
121-
.shell {
122-
padding-top: 3rem;
123-
}
124-
125117
.users li,
126118
.panelHeader {
127119
flex-direction: column;

0 commit comments

Comments
 (0)