CodeIssuesPull RequestsActionsSecurityInsights
✨ AI
More
Settings

Brighten UI design: shift from near-black to softer dark indigo #4686

Open⚡ AI-generatedMccantynz wants to mergeclaude/brighten-ui-design-bLKXXmain↑1 ↓9opened Mar 14, 20260/7 tasksLive: 0 editing
12 changed files+84−84
Modifiedsrc/app/(marketing)/pricing/page.tsx+1−1View fileUnifiedSplit
88 style={{
99 minHeight: "100vh",
1010 background:
11 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.20), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.12), rgba(0,0,0,0) 62%), linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
11 "radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,0.28), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,0.18), rgba(0,0,0,0) 62%), linear-gradient(180deg, #141428 0%, #141428 40%, #101024 100%)",
1212 color: "#EDEAF7",
1313 fontFamily:
1414 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
Modifiedsrc/app/(marketing)/privacy/page.tsx+1−1View fileUnifiedSplit
88 style={{
99 minHeight: "100vh",
1010 background:
11 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.20), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.12), rgba(0,0,0,0) 62%), linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
11 "radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,0.28), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,0.18), rgba(0,0,0,0) 62%), linear-gradient(180deg, #141428 0%, #141428 40%, #101024 100%)",
1212 color: "#EDEAF7",
1313 fontFamily:
1414 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
Modifiedsrc/app/(marketing)/templates/page.tsx+1−1View fileUnifiedSplit
88 style={{
99 minHeight: "100vh",
1010 background:
11 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.20), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.12), rgba(0,0,0,0) 62%), linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
11 "radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,0.28), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,0.18), rgba(0,0,0,0) 62%), linear-gradient(180deg, #141428 0%, #141428 40%, #101024 100%)",
1212 color: "#EDEAF7",
1313 fontFamily:
1414 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
Modifiedsrc/app/(marketing)/terms/page.tsx+1−1View fileUnifiedSplit
88 style={{
99 minHeight: "100vh",
1010 background:
11 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.20), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.12), rgba(0,0,0,0) 62%), linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
11 "radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,0.28), rgba(0,0,0,0) 60%), radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,0.18), rgba(0,0,0,0) 62%), linear-gradient(180deg, #141428 0%, #141428 40%, #101024 100%)",
1212 color: "#EDEAF7",
1313 fontFamily:
1414 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
Modifiedsrc/app/admin/marketing-queue/page.tsx+4−4View fileUnifiedSplit
66 page: {
77 minHeight: "100vh",
88 background:
9 "radial-gradient(1200px 600px at 20% 10%, rgba(125, 90, 255, 0.18), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(255, 200, 90, 0.10), transparent 60%), #07060b",
9 "radial-gradient(1200px 600px at 20% 10%, rgba(140, 105, 255, 0.25), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(255, 210, 100, 0.14), transparent 60%), #141428",
1010 color: "rgba(246,242,255,0.92)",
1111 fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
1212 } as const,
1313 shell: { width: "100%", maxWidth: 1160, margin: "0 auto", padding: "20px 16px 28px 16px" } as const,
1414 card: {
1515 borderRadius: 18,
16 background: "rgba(255,255,255,0.03)",
17 border: "1px solid rgba(255,255,255,0.10)",
18 boxShadow: "0 18px 55px rgba(0,0,0,0.35)",
16 background: "rgba(255,255,255,0.06)",
17 border: "1px solid rgba(255,255,255,0.14)",
18 boxShadow: "0 18px 55px rgba(0,0,0,0.28)",
1919 padding: 14,
2020 } as const,
2121 h1: { margin: 0, fontSize: 22, lineHeight: 1.1, fontWeight: 950, letterSpacing: "-0.01em" } as const,
Modifiedsrc/app/globals.css+4−4View fileUnifiedSplit
2626 padding: 8px 10px;
2727 border-radius: 999px;
2828
29 background: rgba(0,0,0,0.35);
29 background: rgba(20,20,40,0.45);
3030 border: 1px solid rgba(255,255,255,0.12);
3131 color: rgba(246,242,255,0.70);
3232
4848 border-radius: 16px;
4949 padding: 10px 12px;
5050
51 background: rgba(0,0,0,0.38);
51 background: rgba(20,20,40,0.48);
5252 border: 1px solid rgba(255,255,255,0.14);
5353 box-shadow: 0 22px 70px rgba(0,0,0,0.55);
5454
152152 padding: 8px 10px;
153153 border-radius: 999px;
154154
155 background: rgba(0,0,0,0.35);
155 background: rgba(20,20,40,0.45);
156156 border: 1px solid rgba(255,255,255,0.12);
157157 color: rgba(246,242,255,0.70);
158158
174174 border-radius: 16px;
175175 padding: 10px 12px;
176176
177 background: rgba(0,0,0,0.38);
177 background: rgba(20,20,40,0.48);
178178 border: 1px solid rgba(255,255,255,0.14);
179179 box-shadow: 0 22px 70px rgba(0,0,0,0.55);
180180
Modifiedsrc/app/layout.tsx+31−31View fileUnifiedSplit
3434<style>{`
3535 :root{
3636 color-scheme: dark;
37 --bg0:#07070B;
38 --bg1:#0B0B12;
39 --card:rgba(255,255,255,.06);
40 --card2:rgba(255,255,255,.04);
41 --border:rgba(255,255,255,.12);
42 --border2:rgba(255,255,255,.10);
43 --text:#EDEAF7;
44 --muted:rgba(237,234,247,.72);
45 --muted2:rgba(237,234,247,.60);
46 --accent1:rgba(168,85,247,1);
47 --accent2:rgba(59,130,246,1);
48 --shadow:0 30px 90px rgba(0,0,0,.45);
49 --shadow2:0 18px 55px rgba(168,85,247,.18), 0 10px 24px rgba(59,130,246,.10);
37 --bg0:#141428;
38 --bg1:#181835;
39 --card:rgba(255,255,255,.08);
40 --card2:rgba(255,255,255,.06);
41 --border:rgba(255,255,255,.16);
42 --border2:rgba(255,255,255,.14);
43 --text:#F0EDFA;
44 --muted:rgba(240,237,250,.76);
45 --muted2:rgba(240,237,250,.65);
46 --accent1:rgba(178,100,255,1);
47 --accent2:rgba(80,150,255,1);
48 --shadow:0 30px 90px rgba(0,0,0,.35);
49 --shadow2:0 18px 55px rgba(178,100,255,.22), 0 10px 24px rgba(80,150,255,.14);
5050 --r16:16px;
5151 --r20:20px;
5252 --r24:24px;
5656 body{
5757 margin:0;
5858 background:
59 radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,.20), rgba(0,0,0,0) 60%),
60 radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,.12), rgba(0,0,0,0) 62%),
61 linear-gradient(180deg, var(--bg0) 0%, var(--bg0) 40%, #05050A 100%);
59 radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,.28), rgba(0,0,0,0) 60%),
60 radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,.18), rgba(0,0,0,0) 62%),
61 linear-gradient(180deg, var(--bg0) 0%, var(--bg0) 40%, #101024 100%);
6262 color:var(--text);
6363 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
6464 -webkit-font-smoothing: antialiased;
6565 -moz-osx-font-smoothing: grayscale;
6666 }
6767
68 a{color:rgba(200,180,255,.95); text-decoration:none}
69 a:hover{color:rgba(210,210,255,.98); text-decoration:underline}
68 a{color:rgba(210,190,255,.95); text-decoration:none}
69 a:hover{color:rgba(220,220,255,.98); text-decoration:underline}
7070
7171 /* Generic layout helpers if Tailwind fails */
7272 .container, .mx-auto{
9090 border-radius: 14px;
9191 padding: 10px 14px;
9292 border: 1px solid var(--border);
93 background: rgba(255,255,255,.04);
94 color: rgba(237,234,247,.90);
93 background: rgba(255,255,255,.06);
94 color: rgba(240,237,250,.92);
9595 cursor: pointer;
9696 }
9797 button:hover, .btn:hover, a.btn:hover{
98 background: rgba(255,255,255,.07);
98 background: rgba(255,255,255,.10);
9999 }
100100 .btn-primary{
101101 background: linear-gradient(90deg, var(--accent1), var(--accent2));
102 color: #07070B !important;
102 color: #141428 !important;
103103 box-shadow: var(--shadow2);
104104 border: 1px solid rgba(255,255,255,.10);
105105 text-decoration:none !important;
111111 /* Inputs baseline (admin/cockpit forms) */
112112 input, select, textarea{
113113 font: inherit;
114 color: rgba(237,234,247,.92);
115 background: rgba(0,0,0,.32);
114 color: rgba(240,237,250,.94);
115 background: rgba(0,0,0,.22);
116116 border: 1px solid var(--border2);
117117 border-radius: 14px;
118118 padding: 10px 12px;
119119 outline: none;
120120 }
121121 input:focus, select:focus, textarea:focus{
122 border-color: rgba(168,85,247,.55);
123 box-shadow: 0 0 0 4px rgba(168,85,247,.15);
122 border-color: rgba(178,100,255,.60);
123 box-shadow: 0 0 0 4px rgba(178,100,255,.18);
124124 }
125 ::placeholder{color: rgba(237,234,247,.45)}
125 ::placeholder{color: rgba(240,237,250,.50)}
126126
127127 /* Tables baseline */
128128 table{border-collapse:collapse; width:100%}
129129 th,td{
130 border-bottom: 1px solid rgba(255,255,255,.08);
130 border-bottom: 1px solid rgba(255,255,255,.10);
131131 padding: 10px 10px;
132132 text-align:left;
133 color: rgba(237,234,247,.85);
133 color: rgba(240,237,250,.88);
134134 }
135 th{color: rgba(237,234,247,.70); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px}
135 th{color: rgba(240,237,250,.75); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px}
136136
137137 /* Headings baseline */
138138 h1{font-size:40px; line-height:1.05; letter-spacing:-.02em; margin: 0}
141141 p{color: var(--muted); line-height:1.6}
142142
143143 /* Soft separators */
144 hr{border:0; border-top:1px solid rgba(255,255,255,.08); margin:18px 0}
144 hr{border:0; border-top:1px solid rgba(255,255,255,.12); margin:18px 0}
145145
146146 /* If something renders totally naked, this keeps content readable */
147147 main{display:block}
Modifiedsrc/app/page.tsx+8−8View fileUnifiedSplit
1515 style={{
1616 minHeight: "100vh",
1717 background:
18 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.22), rgba(0,0,0,0) 60%)," +
19 " radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.14), rgba(0,0,0,0) 62%)," +
20 " linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
18 "radial-gradient(1200px 800px at 65% 5%, rgba(178,100,255,0.30), rgba(0,0,0,0) 60%)," +
19 " radial-gradient(900px 700px at 15% 20%, rgba(80,150,255,0.20), rgba(0,0,0,0) 62%)," +
20 " linear-gradient(180deg, #141428 0%, #141428 40%, #101024 100%)",
2121 color: "#EDEAF7",
2222 fontFamily:
2323 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
193193 textDecoration: "none",
194194 fontWeight: 800,
195195 fontSize: 14,
196 color: "#07070B",
196 color: "#141428",
197197 background:
198198 "linear-gradient(90deg, rgba(168,85,247,1), rgba(59,130,246,1))",
199199 boxShadow:
219219 color: "rgba(237,234,247,0.88)",
220220 background: "rgba(255,255,255,0.04)",
221221 border: "1px solid rgba(255,255,255,0.12)",
222 boxShadow: "0 10px 30px rgba(0,0,0,0.35)",
222 boxShadow: "0 10px 30px rgba(0,0,0,0.25)",
223223 }}
224224 >
225225 Watch video <span aria-hidden="true">▶</span>
265265 textTransform: "uppercase",
266266 padding: "8px 10px",
267267 borderRadius: 999,
268 background: "rgba(0,0,0,0.35)",
268 background: "rgba(20,20,40,0.45)",
269269 border: "1px solid rgba(255,255,255,0.12)",
270270 color: "rgba(237,234,247,0.85)",
271271 }}
293293 marginTop: 12,
294294 borderRadius: 16,
295295 border: "1px solid rgba(255,255,255,0.12)",
296 background: "rgba(0,0,0,0.35)",
296 background: "rgba(20,20,40,0.45)",
297297 boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05)",
298298 overflow: "hidden",
299299 }}
318318 height: 10,
319319 borderRadius: 999,
320320 background: c,
321 boxShadow: "0 6px 20px rgba(0,0,0,0.35)",
321 boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
322322 display: "inline-block",
323323 }}
324324 />
Modifiedsrc/app/projects/[projectId]/video/page.tsx+1−1View fileUnifiedSplit
1010 const meta = await kvGetJson<any>(projectVideoKey(projectId));
1111
1212 return (
13 <main style={{ minHeight: "100vh", background: "#07060b", color: "rgba(246,242,255,0.92)", padding: 18 }}>
13 <main style={{ minHeight: "100vh", background: "#141428", color: "rgba(246,242,255,0.92)", padding: 18 }}>
1414 <div style={{ maxWidth: 960, margin: "0 auto" }}>
1515 <h1 style={{ margin: 0, fontSize: 22, fontWeight: 950, letterSpacing: "-0.01em" }}>
1616 Project Video — {projectId}
Modifiedsrc/lib/ui/d8InlineUi.ts+7−7View fileUnifiedSplit
11export const d8 = {
22 page: {
33 minHeight: "100vh",
4 background: "radial-gradient(1200px 600px at 20% 10%, rgba(125, 90, 255, 0.18), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(255, 200, 90, 0.10), transparent 60%), #07060b",
4 background: "radial-gradient(1200px 600px at 20% 10%, rgba(140, 105, 255, 0.25), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(255, 210, 100, 0.14), transparent 60%), #141428",
55 color: "rgba(246,242,255,0.92)",
66 fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
77 } as const,
1313 } as const,
1414 card: {
1515 borderRadius: 18,
16 background: "rgba(255,255,255,0.03)",
17 border: "1px solid rgba(255,255,255,0.10)",
18 boxShadow: "0 18px 55px rgba(0,0,0,0.35)",
16 background: "rgba(255,255,255,0.06)",
17 border: "1px solid rgba(255,255,255,0.14)",
18 boxShadow: "0 18px 55px rgba(0,0,0,0.28)",
1919 padding: 14,
2020 } as const,
2121 h1: {
3737 padding: "10px 12px",
3838 outline: "none",
3939 border: "1px solid rgba(255,255,255,0.14)",
40 background: "rgba(0,0,0,0.20)",
40 background: "rgba(0,0,0,0.14)",
4141 color: "rgba(246,242,255,0.92)",
4242 fontSize: 14,
4343 } as const,
4444 btn: {
4545 borderRadius: 12,
4646 padding: "10px 12px",
47 border: "1px solid rgba(255,255,255,0.16)",
48 background: "rgba(255,255,255,0.06)",
47 border: "1px solid rgba(255,255,255,0.18)",
48 background: "rgba(255,255,255,0.08)",
4949 color: "rgba(246,242,255,0.92)",
5050 cursor: "pointer",
5151 fontWeight: 800,
Modifiedsrc/styles/aurora.css+14−14View fileUnifiedSplit
11/* D8 Premium Aurora Background Pack + Glass Hero + Gradient CTA + Flagship Sections + ACE V1 */
22
33.aurora-blob {
4 background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.85), rgba(56, 189, 248, 0.25), rgba(0, 0, 0, 0) 70%);
5 filter: saturate(1.2);
4 background: radial-gradient(circle at 30% 30%, rgba(178, 100, 255, 0.90), rgba(80, 200, 255, 0.35), rgba(0, 0, 0, 0) 70%);
5 filter: saturate(1.3);
66}
77
88.aurora-1 { animation: auroraFloat1 22s ease-in-out infinite; }
4242.d8-glass {
4343 position: relative;
4444 border-radius: 24px;
45 border: 1px solid rgba(255,255,255,0.10);
45 border: 1px solid rgba(255,255,255,0.14);
4646 background:
47 radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.10), transparent 55%),
48 radial-gradient(700px 420px at 80% 0%, rgba(120,119,198,0.10), transparent 60%),
49 rgba(0,0,0,0.32);
47 radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.14), transparent 55%),
48 radial-gradient(700px 420px at 80% 0%, rgba(140,130,220,0.14), transparent 60%),
49 rgba(20,20,40,0.45);
5050 backdrop-filter: blur(14px);
5151 -webkit-backdrop-filter: blur(14px);
5252 box-shadow:
53 0 30px 80px rgba(0,0,0,0.65),
54 0 1px 0 rgba(255,255,255,0.06) inset;
53 0 30px 80px rgba(0,0,0,0.45),
54 0 1px 0 rgba(255,255,255,0.08) inset;
5555}
5656.d8-glass::after {
5757 content: "";
5959 position: absolute;
6060 inset: 0;
6161 border-radius: 24px;
62 background: radial-gradient(600px 200px at 30% 0%, rgba(255,255,255,0.10), transparent 60%);
62 background: radial-gradient(600px 200px at 30% 0%, rgba(255,255,255,0.14), transparent 60%);
6363 opacity: 0.8;
6464}
6565
8080 padding: 12px 18px;
8181 font-weight: 700;
8282 color: #ffffff;
83 background: rgba(0,0,0,0.35);
84 border: 1px solid rgba(255,255,255,0.10);
83 background: rgba(20,20,40,0.45);
84 border: 1px solid rgba(255,255,255,0.14);
8585 text-decoration: none;
8686 transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
8787}
8888.d8-cta:hover {
8989 transform: translateY(-1px);
90 background: rgba(0,0,0,0.45);
91 border-color: rgba(255,255,255,0.18);
90 background: rgba(25,25,50,0.55);
91 border-color: rgba(255,255,255,0.22);
9292}
9393.d8-cta:active { transform: translateY(0); }
9494.d8-cta::before {
124124.d8-divider {
125125 height: 1px;
126126 width: 100%;
127 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
127 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
128128 opacity: 0.9;
129129}
130130
Modifiedstyles/globals.css+11−11View fileUnifiedSplit
55 ========================= */
66
77:root {
8 --bg: #0b1220;
9 --panel: rgba(255, 255, 255, 0.06);
10 --panel-2: rgba(255, 255, 255, 0.08);
11 --border: rgba(255, 255, 255, 0.12);
12 --text: rgba(255, 255, 255, 0.92);
13 --muted: rgba(255, 255, 255, 0.72);
14 --muted-2: rgba(255, 255, 255, 0.6);
15 --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
8 --bg: #161830;
9 --panel: rgba(255, 255, 255, 0.08);
10 --panel-2: rgba(255, 255, 255, 0.10);
11 --border: rgba(255, 255, 255, 0.16);
12 --text: rgba(255, 255, 255, 0.94);
13 --muted: rgba(255, 255, 255, 0.76);
14 --muted-2: rgba(255, 255, 255, 0.65);
15 --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
1616}
1717
1818/* =========================
3232body {
3333 background: radial-gradient(
3434 1200px 800px at 10% 10%,
35 rgba(56, 189, 248, 0.16),
35 rgba(56, 189, 248, 0.22),
3636 transparent 60%
3737 ),
3838 radial-gradient(
3939 1000px 700px at 90% 20%,
40 rgba(168, 85, 247, 0.14),
40 rgba(178, 100, 255, 0.20),
4141 transparent 55%
4242 ),
4343 var(--bg);
113113 top: 0;
114114 z-index: 10;
115115 backdrop-filter: blur(10px);
116 background: rgba(11, 18, 32, 0.75);
116 background: rgba(22, 24, 48, 0.75);
117117 border-bottom: 1px solid var(--border);
118118}
119119
120120
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts