Skip to content

Commit dfad152

Browse files
masnwilliamsmasnwilliams
committed
rebrand oauth/cli auth UI to match new kernel.sh branding
- Replace color palette with Kernel brand colors (kernel green #81b300, charcoal #212225, beige #f2f0e7, grey scale) - Switch fonts from Commit Mono to Inter (sans) + IBM Plex Mono (mono) - Replace old purple abstract favicon with Kernel green "krnl." lettermark - Replace KernelIcon PNG with inline SVG using the new brand mark - Add KernelWordmark component for the full "kernel." wordmark - Update Clerk theme to match brand colors (green primary, charcoal bg) - Restyle select-org page: cleaner layout, brand wordmark header, lowercase text, green accent buttons - Remove old bg-overlay.png background decoration - Add Inter + IBM Plex Mono via next/font/google
1 parent bb53848 commit dfad152

8 files changed

Lines changed: 201 additions & 195 deletions

File tree

‎public/favicon.ico‎

14.7 KB
Binary file not shown.

‎public/favicon.svg‎

Lines changed: 1 addition & 4 deletions
Loading

‎src/app/bg-overlay.png‎

-74.5 KB
Binary file not shown.

‎src/app/globals.css‎

Lines changed: 52 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,8 @@
55
@theme inline {
66
--color-background: var(--background);
77
--color-foreground: var(--foreground);
8-
--font-sans: var(--font-geist-sans);
9-
--font-mono: 'Commit Mono', monospace;
10-
--color-sidebar-ring: var(--sidebar-ring);
11-
--color-sidebar-border: var(--sidebar-border);
12-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
13-
--color-sidebar-accent: var(--sidebar-accent);
14-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
15-
--color-sidebar-primary: var(--sidebar-primary);
16-
--color-sidebar-foreground: var(--sidebar-foreground);
17-
--color-sidebar: var(--sidebar);
18-
--color-chart-5: var(--chart-5);
19-
--color-chart-4: var(--chart-4);
20-
--color-chart-3: var(--chart-3);
21-
--color-chart-2: var(--chart-2);
22-
--color-chart-1: var(--chart-1);
8+
--font-sans: var(--font-inter);
9+
--font-mono: var(--font-ibm-plex-mono);
2310
--color-ring: var(--ring);
2411
--color-input: var(--input);
2512
--color-border: var(--border);
@@ -43,72 +30,46 @@
4330
}
4431

4532
:root {
46-
--radius: 0.625rem;
47-
--background: #FBFBFB;
48-
--foreground: oklch(0.145 0 0);
49-
--card: #FBFBFB;
50-
--card-foreground: oklch(0.145 0 0);
51-
--popover: #FBFBFB;
52-
--popover-foreground: oklch(0.145 0 0);
53-
--primary: oklch(0.205 0 0);
54-
--primary-foreground: #FBFBFB;
55-
--secondary: #F5F5F5;
56-
--secondary-foreground: oklch(0.205 0 0);
57-
--muted: #F5F5F5;
58-
--muted-foreground: oklch(0.556 0 0);
59-
--accent: #F5F5F5;
60-
--accent-foreground: oklch(0.205 0 0);
61-
--destructive: oklch(0.577 0.245 27.325);
62-
--border: #E9E9E9;
63-
--input: #E9E9E9;
64-
--ring: oklch(0.708 0 0);
65-
--chart-1: oklch(0.646 0.222 41.116);
66-
--chart-2: oklch(0.6 0.118 184.704);
67-
--chart-3: oklch(0.398 0.07 227.392);
68-
--chart-4: oklch(0.828 0.189 84.429);
69-
--chart-5: oklch(0.769 0.188 70.08);
70-
--sidebar: #FBFBFB;
71-
--sidebar-foreground: oklch(0.145 0 0);
72-
--sidebar-primary: oklch(0.205 0 0);
73-
--sidebar-primary-foreground: #FBFBFB;
74-
--sidebar-accent: #F5F5F5;
75-
--sidebar-accent-foreground: oklch(0.205 0 0);
76-
--sidebar-border: #E9E9E9;
77-
--sidebar-ring: oklch(0.708 0 0);
33+
--radius: 0.5rem;
34+
--background: #f2f0e7;
35+
--foreground: #1c2024;
36+
--card: #faf9f2;
37+
--card-foreground: #1c2024;
38+
--popover: #faf9f2;
39+
--popover-foreground: #1c2024;
40+
--primary: #81b300;
41+
--primary-foreground: #1c2024;
42+
--secondary: #e1dccf;
43+
--secondary-foreground: #1c2024;
44+
--muted: #e1dccf;
45+
--muted-foreground: #60646c;
46+
--accent: #f0f0f3;
47+
--accent-foreground: #1c2024;
48+
--destructive: #dc3545;
49+
--border: rgba(28, 32, 36, 0.15);
50+
--input: rgba(28, 32, 36, 0.15);
51+
--ring: #81b300;
7852
}
7953

8054
.dark {
81-
--background: #2C2C2C;
82-
--foreground: #FBFBFB;
83-
--card: oklch(0.205 0 0);
84-
--card-foreground: #FBFBFB;
85-
--popover: oklch(0.205 0 0);
86-
--popover-foreground: #FBFBFB;
87-
--primary: oklch(0.922 0 0);
88-
--primary-foreground: oklch(0.205 0 0);
89-
--secondary: oklch(0.269 0 0);
90-
--secondary-foreground: #FBFBFB;
91-
--muted: oklch(0.269 0 0);
92-
--muted-foreground: oklch(0.708 0 0);
93-
--accent: oklch(0.269 0 0);
94-
--accent-foreground: #FBFBFB;
95-
--destructive: oklch(0.704 0.191 22.216);
96-
--border: rgba(251, 251, 251, 0.1);
97-
--input: rgba(251, 251, 251, 0.15);
98-
--ring: oklch(0.556 0 0);
99-
--chart-1: oklch(0.488 0.243 264.376);
100-
--chart-2: oklch(0.696 0.17 162.48);
101-
--chart-3: oklch(0.769 0.188 70.08);
102-
--chart-4: oklch(0.627 0.265 303.9);
103-
--chart-5: oklch(0.645 0.246 16.439);
104-
--sidebar: oklch(0.205 0 0);
105-
--sidebar-foreground: #FBFBFB;
106-
--sidebar-primary: oklch(0.488 0.243 264.376);
107-
--sidebar-primary-foreground: #FBFBFB;
108-
--sidebar-accent: oklch(0.269 0 0);
109-
--sidebar-accent-foreground: #FBFBFB;
110-
--sidebar-border: rgba(251, 251, 251, 0.1);
111-
--sidebar-ring: oklch(0.556 0 0);
55+
--background: #212225;
56+
--foreground: #edeef0;
57+
--card: #2a2b2e;
58+
--card-foreground: #edeef0;
59+
--popover: #2a2b2e;
60+
--popover-foreground: #edeef0;
61+
--primary: #81b300;
62+
--primary-foreground: #212225;
63+
--secondary: #333437;
64+
--secondary-foreground: #edeef0;
65+
--muted: #333437;
66+
--muted-foreground: #9b9da2;
67+
--accent: #333437;
68+
--accent-foreground: #edeef0;
69+
--destructive: #dc3545;
70+
--border: rgba(237, 238, 240, 0.1);
71+
--input: rgba(237, 238, 240, 0.12);
72+
--ring: #81b300;
11273
}
11374

11475
@layer base {
@@ -126,30 +87,26 @@
12687
}
12788
body {
12889
@apply bg-background text-foreground;
129-
position: relative;
90+
font-family: var(--font-sans);
91+
font-weight: 300;
92+
line-height: 1.2;
93+
-webkit-font-smoothing: antialiased;
94+
-moz-osx-font-smoothing: grayscale;
13095
}
131-
body::before {
132-
content: '';
133-
position: fixed;
134-
top: 0;
135-
right: 0;
136-
bottom: 0;
137-
left: 0;
138-
background-image: url("./bg-overlay.png");
139-
background-position: right;
140-
background-repeat: no-repeat;
141-
background-size: contain;
142-
background-attachment: fixed;
143-
opacity: 0.6;
144-
z-index: -1;
145-
pointer-events: none;
96+
h1, h2, h3, h4, h5, h6 {
97+
font-weight: 300;
98+
line-height: 1.2;
99+
}
100+
::selection {
101+
background-color: #81b300;
102+
color: #212225;
146103
}
147104
}
148105

149106
/* Custom toast styling */
150107
.toaster {
151108
--toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
152-
font-family: var(--font-mono);
109+
font-family: var(--font-sans);
153110
}
154111
.toaster [data-sonner-toast] {
155112
@apply border border-border rounded-lg shadow-md;
@@ -167,14 +124,3 @@
167124
.toaster [data-sonner-toast][data-type="warning"] [data-icon] {
168125
@apply text-yellow-500;
169126
}
170-
171-
.text-shadow {
172-
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
173-
}
174-
175-
h1 {
176-
@apply text-sm;
177-
}
178-
h2 {
179-
@apply text-xs;
180-
}

‎src/app/layout.tsx‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
import { ClerkProvider } from '@clerk/nextjs'
22
import { dark } from '@clerk/themes'
33
import type { Metadata } from 'next'
4+
import { Inter, IBM_Plex_Mono } from 'next/font/google'
45
import { ThemeProvider } from 'next-themes'
56
import './globals.css'
67

8+
const inter = Inter({
9+
weight: ['300', '400', '500', '600'],
10+
variable: '--font-inter',
11+
subsets: ['latin'],
12+
display: 'optional',
13+
})
14+
15+
const ibmPlexMono = IBM_Plex_Mono({
16+
weight: ['400', '500'],
17+
variable: '--font-ibm-plex-mono',
18+
subsets: ['latin'],
19+
display: 'swap',
20+
})
21+
722
export const metadata: Metadata = {
8-
title: 'Kernel MCP Server',
9-
description: 'A Model Context Protocol (MCP) server that provides AI assistants with secure access to Kernel platform tools and browser automation capabilities.',
23+
title: 'Kernel',
24+
description: 'Authorize access to Kernel platform tools and browser automation capabilities.',
1025
keywords: [
11-
'MCP',
12-
'Model Context Protocol',
1326
'Kernel',
27+
'MCP',
1428
'browser automation',
1529
'AI assistants',
16-
'cloud deployment',
17-
'web automation',
18-
'Chromium',
19-
'headless browser'
30+
'OAuth',
2031
],
2132
}
2233

@@ -29,10 +40,34 @@ export default function RootLayout({
2940
<ClerkProvider
3041
appearance={{
3142
baseTheme: dark,
43+
variables: {
44+
colorPrimary: '#81b300',
45+
colorText: '#edeef0',
46+
colorTextSecondary: '#9b9da2',
47+
colorBackground: '#212225',
48+
colorInputBackground: '#2a2b2e',
49+
colorInputText: '#edeef0',
50+
fontFamily: 'var(--font-inter), Inter, sans-serif',
51+
borderRadius: '0.5rem',
52+
},
53+
elements: {
54+
card: {
55+
backgroundColor: '#2a2b2e',
56+
borderColor: 'rgba(237, 238, 240, 0.1)',
57+
},
58+
formButtonPrimary: {
59+
backgroundColor: '#81b300',
60+
color: '#212225',
61+
fontWeight: '400',
62+
},
63+
footerActionLink: {
64+
color: '#81b300',
65+
},
66+
},
3267
}}
3368
>
3469
<html lang="en" suppressHydrationWarning>
35-
<body className="font-mono">
70+
<body className={`${inter.variable} ${ibmPlexMono.variable} font-sans`}>
3671
<ThemeProvider
3772
attribute="class"
3873
defaultTheme="dark"
@@ -45,4 +80,4 @@ export default function RootLayout({
4580
</html>
4681
</ClerkProvider>
4782
)
48-
}
83+
}

0 commit comments

Comments
 (0)