marketing: conform to brand guidelines

algorandfoundation · Jan 6, 2025 · d6b046e · d6b046e
1 parent 8d2d32c
commit d6b046e
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 53 deletions.
diff --git a/assets/Banner.gif b/assets/Banner.gif
diff --git a/assets/TUI.png b/assets/TUI.png
diff --git a/assets/nodekit.png b/assets/nodekit.png
diff --git a/docs/public/nodekit.png b/docs/public/nodekit.png
diff --git a/docs/src/assets/houston.webp b/docs/src/assets/houston.webp
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -11,11 +11,10 @@ export const lang = "en"
     <title>NodeKit - Algorand Foundation</title>
     <meta name="description" content="One stop shop for"/>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href={`${base}logo-background.svg`} />
     <style is:global>
         html, body {
             max-height: 100vh;
-            background: #1e1f22;
+            background: #001324;
             scroll-behavior: smooth;
             padding: 0;
             margin: 0;

diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css
@@ -6,3 +6,32 @@
 Add additional Tailwind styles to this file, for example with @layer:
 https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
 */
+/* Dark mode colors. */
+:root {
+    --sl-color-accent-low: #131e4f;
+    --sl-color-accent: #3646ff;
+    --sl-color-accent-high: #b3c7ff;
+    --sl-color-white: #ffffff;
+    --sl-color-gray-1: #e4eff9;
+    --sl-color-gray-2: #b6c4d0;
+    --sl-color-gray-3: #758fa6;
+    --sl-color-gray-4: #435b70;
+    --sl-color-gray-5: #233b4e;
+    --sl-color-gray-6: #192A39;
+    --sl-color-black: #0f1922;
+}
+/* Light mode colors. */
+:root[data-theme='light'] {
+    --sl-color-accent-low: #c7d6ff;
+    --sl-color-accent: #384bff;
+    --sl-color-accent-high: #192676;
+    --sl-color-white: #0f1922;
+    --sl-color-gray-1: #12293b;
+    --sl-color-gray-2: #233b4e;
+    --sl-color-gray-3: #435b70;
+    --sl-color-gray-4: #758fa6;
+    --sl-color-gray-5: #b6c4d0;
+    --sl-color-gray-6: #e4eff9;
+    --sl-color-gray-7: #f1f7fc;
+    --sl-color-black: #ffffff;
+}
diff --git a/ui/style/style.go b/ui/style/style.go
@@ -19,11 +19,12 @@ var (
 			Height(height).
 			BorderForeground(lipgloss.Color(color))
 	}
-
-	Blue = func() lipgloss.Style {
-		return lipgloss.NewStyle().Foreground(lipgloss.Color("12"))
+	MarketingBlue = lipgloss.NewStyle().Foreground(lipgloss.Color("#2d2df1")).Render
+	MarketingTeal = lipgloss.NewStyle().Foreground(lipgloss.Color("#17CAC6")).Render
+	Blue          = func() lipgloss.Style {
+		return lipgloss.NewStyle().Foreground(lipgloss.Color("#12"))
 	}()
-	Cyan    = lipgloss.NewStyle().Foreground(lipgloss.Color("14"))
+	Cyan    = lipgloss.NewStyle().Foreground(lipgloss.Color("#14"))
 	Yellow  = lipgloss.NewStyle().Foreground(lipgloss.Color("11"))
 	Green   = lipgloss.NewStyle().Foreground(lipgloss.Color("10"))
 	Red     = lipgloss.NewStyle().Foreground(lipgloss.Color("9"))
@@ -199,7 +200,7 @@ func init() {
 	var res string
 	lines := strings.Split(BANNER_KIT, "\n")
 	for i, line := range strings.Split(BANNER_NODE, "\n") {
-		res += Purple(line) + Red.Render(lines[i]) + "\n"
+		res += MarketingBlue(line) + MarketingTeal(lines[i]) + "\n"
 	}
 	BANNER = res
 }