Skip to content

Commit 56db60e

Browse files
rithulkameshrithulkamesh
committed
style: update design elements and color scheme across the application
- Changed font families in `index.html` and `tailwind.config.js` to use "Inter" and "Geist Mono". - Updated color variables in `index.css` for a refreshed color palette. - Modified background gradients and hover effects in various components for improved aesthetics. - Adjusted footer and header styles for better visual consistency and branding.
1 parent 8d34061 commit 56db60e

7 files changed

Lines changed: 55 additions & 44 deletions

File tree

‎web/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com" />
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1010
<link
11-
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"
1212
rel="stylesheet"
1313
/>
1414
</head>

‎web/public/branding/logo.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎web/src/components/layout/BlobBackground.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function BlobBackground() {
2222
</filter>
2323
</defs>
2424
<g filter="url(#ds-blob-blur)">
25-
<circle cx="15%" cy="20%" r="220" fill="rgba(138, 43, 226, 0.15)">
25+
<circle cx="15%" cy="20%" r="220" fill="rgba(224, 170, 255, 0.12)">
2626
<animate
2727
attributeName="cx"
2828
values="15%;30%;15%"
@@ -36,7 +36,7 @@ export function BlobBackground() {
3636
repeatCount="indefinite"
3737
/>
3838
</circle>
39-
<circle cx="80%" cy="70%" r="180" fill="rgba(224, 176, 255, 0.08)">
39+
<circle cx="80%" cy="70%" r="180" fill="rgba(185, 242, 255, 0.06)">
4040
<animate
4141
attributeName="cx"
4242
values="80%;65%;80%"
@@ -50,7 +50,7 @@ export function BlobBackground() {
5050
repeatCount="indefinite"
5151
/>
5252
</circle>
53-
<circle cx="50%" cy="85%" r="160" fill="rgba(88, 28, 135, 0.12)">
53+
<circle cx="50%" cy="85%" r="160" fill="rgba(224, 170, 255, 0.08)">
5454
<animate
5555
attributeName="cx"
5656
values="50%;65%;50%"

‎web/src/components/layout/Footer.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,32 @@ import { Link } from "react-router-dom";
22

33
export function Footer() {
44
return (
5-
<footer className="border-t border-ds-border py-ds-lg px-ds-lg bg-ds-bg">
5+
<footer className="border-t border-white/5 py-ds-lg px-ds-lg bg-ds-bg">
66
<div className="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
7-
<div className="flex flex-wrap gap-6">
8-
<Link to="/" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-ds-text transition-opacity">
7+
<div className="flex flex-wrap items-center gap-6">
8+
<img src="/branding/logo.svg" alt="Devsper" className="w-6 h-6 opacity-50 grayscale" />
9+
<Link to="/" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-orchid transition-colors">
910
Registry
1011
</Link>
11-
<Link to="/search" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-ds-text transition-opacity">
12+
<Link to="/search" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-orchid transition-colors">
1213
Search
1314
</Link>
14-
<Link to="/publish" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-ds-text transition-opacity">
15+
<Link to="/publish" className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-orchid transition-colors">
1516
Publish
1617
</Link>
1718
<a
1819
href="https://docs.devsper.com/docs"
1920
target="_blank"
2021
rel="noopener noreferrer"
21-
className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-ds-text transition-opacity"
22+
className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-orchid transition-colors"
2223
>
2324
Docs
2425
</a>
2526
<a
2627
href="https://github.com/devsper-com/registry"
2728
target="_blank"
2829
rel="noopener noreferrer"
29-
className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-ds-text transition-opacity"
30+
className="font-mono text-[9px] tracking-widest uppercase text-ds-muted hover:text-orchid transition-colors"
3031
>
3132
GitHub
3233
</a>

‎web/src/components/layout/Header.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,19 @@ export function Header() {
1212
const displayName = me?.username ?? session?.user?.name ?? session?.user?.email ?? "Account";
1313

1414
return (
15-
<header className="sticky top-0 z-50 bg-ds-bg/95 backdrop-blur border-b border-ds-border min-h-[48px] flex items-center px-ds-lg">
15+
<header className="sticky top-0 z-50 bg-ds-bg/95 backdrop-blur-sm border-b border-white/5 min-h-[48px] flex items-center px-ds-lg">
1616
<div className="w-full max-w-6xl mx-auto flex items-center justify-between gap-4">
1717
<Link
1818
to="/"
19-
className="font-mono text-xs tracking-widest uppercase text-ds-text hover:opacity-90 transition-opacity"
19+
className="flex items-center gap-3 font-bold text-xl tracking-tight text-ds-text hover:text-orchid transition-colors"
2020
>
21-
Devsper Registry
21+
<img src="/branding/logo.svg" alt="Devsper" className="w-8 h-8" />
22+
<span>Devsper Registry</span>
2223
</Link>
2324

2425
<Link
2526
to="/packages"
26-
className="ml-4 font-sans text-sm font-medium text-ds-muted hover:text-ds-text transition-colors"
27+
className="ml-4 font-sans text-sm font-medium text-ds-muted hover:text-orchid transition-colors"
2728
>
2829
Packages
2930
</Link>

‎web/src/index.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22
@config "../tailwind.config.js";
33

44
:root {
5-
--ds-bg: #0a0a0a;
6-
--ds-surface: #111111;
7-
--ds-border: #1f1f1f;
8-
--ds-muted: #666666;
9-
--ds-text: #fafafa;
10-
--ds-text-passive: #e8e8e8;
11-
--ds-accent: #e5e5e5;
12-
--ds-violet: #8A2BE2;
13-
--ds-lilac: #E0B0FF;
14-
--ds-font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
15-
--ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
5+
--ds-bg: #020204;
6+
--ds-surface: #0a0a0c;
7+
--ds-border: rgba(255, 255, 255, 0.08);
8+
--ds-muted: #9ca3af;
9+
--ds-text: #e5e5e7;
10+
--ds-text-passive: #d1d5db;
11+
--ds-accent: #E0AAFF;
12+
--ds-violet: #E0AAFF;
13+
--ds-lilac: #E0AAFF;
14+
--ds-cyan: #B9F2FF;
15+
--ds-font-sans: "Inter", system-ui, -apple-system, sans-serif;
16+
--ds-font-mono: "Geist Mono", ui-monospace, monospace;
1617
}
1718

1819
html {
@@ -21,8 +22,9 @@ html {
2122

2223
body {
2324
background-color: var(--ds-bg);
24-
background-image: radial-gradient(ellipse at top, rgba(138, 43, 226, 0.12) 0%, transparent 40%),
25-
radial-gradient(ellipse at bottom left, rgba(88, 28, 135, 0.08) 0%, transparent 40%);
25+
background-image: radial-gradient(circle at 20% 20%, rgba(224, 170, 255, 0.05), transparent 24%),
26+
radial-gradient(circle at 78% 8%, rgba(185, 242, 255, 0.04), transparent 22%),
27+
radial-gradient(circle at 46% 82%, rgba(224, 170, 255, 0.035), transparent 26%);
2628
background-attachment: fixed;
2729
color: var(--ds-text);
2830
font-family: var(--ds-font-sans);
@@ -36,7 +38,7 @@ body {
3638
.prose-registry ul { @apply list-disc pl-6 mb-ds-md text-ds-text-passive; }
3739
.prose-registry ol { @apply list-decimal pl-6 mb-ds-md text-ds-text-passive; }
3840
.prose-registry a { @apply text-ds-text underline underline-offset-2 hover:text-ds-accent transition-opacity; }
39-
.prose-registry code { @apply bg-ds-code-bg border border-ds-border px-1 py-0.5 font-mono text-sm text-ds-violet rounded-none; }
41+
.prose-registry code { @apply bg-ds-code-bg border border-ds-border-hex px-1 py-0.5 font-mono text-sm text-cyan rounded-none; }
4042
.prose-registry pre { @apply bg-ds-code-bg border border-ds-border p-ds-md overflow-x-auto text-sm font-mono; }
4143
.prose-registry pre code { @apply p-0 border-0 bg-transparent text-ds-text-passive; }
4244
.prose-registry table { @apply border border-ds-border border-collapse text-sm; }

‎web/tailwind.config.js‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,30 @@ export default {
44
theme: {
55
extend: {
66
colors: {
7+
background: "#020204",
8+
orchid: "#E0AAFF",
9+
cyan: "#B9F2FF",
710
ds: {
8-
bg: "#0a0a0a",
9-
surface: "#111111",
10-
border: "#1f1f1f",
11-
muted: "#666666",
12-
"muted-light": "#555555",
11+
bg: "#020204",
12+
surface: "#0a0a0c",
13+
border: "rgba(255,255,255,0.08)",
14+
"border-hex": "#1a1a1e",
15+
muted: "#9ca3af",
16+
"muted-light": "#6b7280",
1317
error: "#ef4444",
14-
text: "#fafafa",
15-
"text-passive": "#e8e8e8",
16-
accent: "#e5e5e5",
17-
violet: "#8A2BE2",
18-
lilac: "#E0B0FF",
19-
"code-bg": "#0f0f0f",
20-
"terminal-bg": "#0d0d0d",
21-
"terminal-header": "#161616",
18+
text: "#e5e5e7",
19+
"text-passive": "#d1d5db",
20+
accent: "#E0AAFF",
21+
violet: "#E0AAFF",
22+
lilac: "#E0AAFF",
23+
"code-bg": "#0a0a0c",
24+
"terminal-bg": "#0a0a0c",
25+
"terminal-header": "#111114",
2226
},
2327
},
2428
fontFamily: {
25-
sans: ['"Space Grotesk"', "system-ui", "-apple-system", "sans-serif"],
26-
mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
29+
sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
30+
mono: ["Geist Mono", "JetBrains Mono", "ui-monospace", "monospace"],
2731
},
2832
maxWidth: {
2933
prose: "65ch",

0 commit comments

Comments
 (0)