Give the desktop app Curity's look

CHANGELOG.md

@@ -7,6 +7,14 @@ Add new entries to the top of the "Unreleased" section.
 
 ## Unreleased
 
+### Changed
+
+- The desktop app uses Curity's colors and font (Google Sans): Curity purple for buttons and the selected
+  sidebar item, purple (lilac in dark mode) for links and keyboard focus, and grays tinted towards Curity's
+  navy. In dark mode the
+  background is Curity's navy with a purple glow, and cards are translucent purple panels. The Curity logo is
+  white in dark mode.
+
 ## v0.9.0 (2026-10-23)
 
 ### Added

desktop/public/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2025 The Google Sans Project Authors (https://github.com/googlefonts/googlesans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

desktop/src/App/OSSApp.tsx

@@ -34,6 +34,12 @@ export function OSSApp() {
   const rootRouteMatch = useMatch(Routes.ROOT)
   const { sidebarPosition } = useSettings()
   const contentBackgroundColor = useColorModeValue("white", "background.darkest")
+  // Curity's purple glow from the top right, see the 2026 styleguide
+  const contentBackgroundImage = useColorModeValue(
+    undefined,
+    "radial-gradient(120% 90% at 88% 6%, rgba(45, 27, 105, 0.9) 0%, rgba(45, 27, 105, 0.3) 38%, rgba(13, 11, 26, 0) 70%)"
+  )
+  const toolbarBackgroundColor = useColorModeValue("white", "transparent")
   const actionHoverColor = useColorModeValue("gray.100", "gray.700")
   const toolbarHeight = useToken("sizes", showTitleBar ? "28" : "20")
   const borderColor = useBorderColor()
@@ -84,13 +90,14 @@ export function OSSApp() {
                 <Box
                   data-tauri-drag-region // keep!
                   backgroundColor={contentBackgroundColor}
+                  backgroundImage={contentBackgroundImage}
                   position="relative"
                   width="full"
                   height="full"
                   overflowY="auto">
                   <Toolbar
                     paddingTop={titleBarSafeArea}
-                    backgroundColor={contentBackgroundColor}
+                    backgroundColor={toolbarBackgroundColor}
                     height={toolbarHeight}
                     position="sticky"
                     zIndex={1}

desktop/src/Theme/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { ChakraProvider, Theme, ToastProviderProps, extendTheme } from "@chakra-
 import { ReactNode, useEffect, useState } from "react"
 import { TSettings, useSettings } from "../contexts"
 import { theme as initialTheme } from "./theme"
+import "./fonts.css"
 const toastOptions: ToastProviderProps = { defaultOptions: { variant: "subtle" } }
 
 const fontSize: Record<TSettings["zoom"], string> = {

desktop/src/Theme/button.ts

@@ -9,22 +9,15 @@ export const Button = defineStyleConfig({
   variants: {
     primary(props) {
       return {
-        color: mode("white", "gray.50")(props),
-        borderColor: "primary.600",
-        _dark: {
-          borderColor: "primary.500",
-          backgroundColor: "primary.600",
-        },
+        color: "white",
+        borderColor: mode("primary.600", "primary.400")(props),
         borderWidth: 1,
         backgroundColor: "primary.500",
         _hover: {
           backgroundColor: "primary.600",
           _disabled: {
             background: "primary.500",
           },
-          _dark: {
-            backgroundColor: "primary.700",
-          },
         },
       }
     },

desktop/src/Theme/card.ts

@@ -10,7 +10,8 @@ export const Card = defineMultiStyleConfig({
         backgroundColor: "gray.50",
         borderColor: mode("gray.200", "gray.700")(props),
         _dark: {
-          backgroundColor: "gray.900",
+          background: "linear-gradient(180deg, rgba(45, 27, 105, 0.45), rgba(19, 14, 43, 0.55))",
+          borderColor: "rgba(201, 168, 255, 0.22)",
         },
       },
     }

desktop/src/Theme/fonts.css

@@ -0,0 +1,32 @@
+/* Google Sans, Curity's brand font (SIL Open Font License, see public/fonts/OFL.txt) */
+@font-face {
+  font-family: "Google Sans";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("/fonts/GoogleSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Google Sans";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("/fonts/GoogleSans-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Google Sans";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: url("/fonts/GoogleSans-SemiBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Google Sans";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("/fonts/GoogleSans-Bold.ttf") format("truetype");
+}

desktop/src/Theme/input.ts

@@ -19,6 +19,10 @@ export const Input = defineMultiStyleConfig({
           _dark: {
             borderColor: "gray.800",
           },
+          _focusVisible: {
+            borderColor: "focus",
+            boxShadow: "0 0 0 1px var(--chakra-colors-focus)",
+          },
         },
       }
     }),

desktop/src/Theme/select.ts

@@ -39,6 +39,10 @@ export const Select = defineMultiStyleConfig({
           _dark: {
             borderColor: "gray.700",
           },
+          _focusVisible: {
+            borderColor: "focus",
+            boxShadow: "0 0 0 1px var(--chakra-colors-focus)",
+          },
         },
       }
     }),

desktop/src/Theme/tabs.ts

@@ -7,10 +7,10 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 const muted = definePartsStyle((props) => {
   return {
     tab: {
-      bg: mode("white", "black")(props),
+      bg: mode("white", "transparent")(props),
       fontWeight: "medium",
       _selected: {
-        bg: mode("gray.100", "gray.900")(props),
+        bg: mode("gray.100", "gray.800")(props),
       },
       _hover: {
         bg: mode("gray.50", "gray.700")(props),

desktop/src/Theme/textarea.ts

@@ -7,6 +7,10 @@ export const Textarea = defineStyleConfig({
       _dark: {
         borderColor: "gray.800",
       },
+      _focusVisible: {
+        borderColor: "focus",
+        boxShadow: "0 0 0 1px var(--chakra-colors-focus)",
+      },
     },
   },
 })

desktop/src/Theme/theme.ts

@@ -38,7 +38,7 @@ const Link = defineStyleConfig({
     primary(props) {
       const primary = props.theme.colors.primary
 
-      return { color: mode(primary["800"], primary["400"])(props) }
+      return { color: mode(primary["600"], primary["300"])(props) }
     },
   },
 })
@@ -93,42 +93,57 @@ export const theme = extendTheme({
       }
     },
   },
+  fonts: {
+    heading: `"Google Sans", "Helvetica Neue", Arial, sans-serif`,
+    body: `"Google Sans", "Helvetica Neue", Arial, sans-serif`,
+  },
+  shadows: {
+    outline: "0 0 0 2px var(--chakra-colors-focus)",
+  },
+  semanticTokens: {
+    colors: {
+      // Lilac is too light for a focus ring or small text on the light background
+      focus: { default: "primary.600", _dark: "primary.300" },
+      "text.tertiary": { default: "gray.600", _dark: "gray.400" },
+    },
+  },
+  // Curity 2026 palette: purple #7B4FD4 (500) for fills, lilac #C9A8FF (300) as the highlight,
+  // and greys tinted towards Curity's navy, ending in midnight #130E2B
   colors: {
     primary: {
-      50: "#F8EFFF",
-      100: "#F0DFFF",
-      200: "#D8ABFF",
-      300: "#BF76FF",
-      400: "#B157FF",
-      500: "#A640FF",
-      600: "#9B29FF",
-      700: "#8600DC",
-      800: "#7100B9",
-      900: "#40006A",
+      50: "#F5F0FF",
+      100: "#EBE0FF",
+      200: "#D9C5FF",
+      300: "#C9A8FF",
+      400: "#A27FEA",
+      500: "#7B4FD4",
+      600: "#6A40C0",
+      700: "#5732A3",
+      800: "#40257D",
+      900: "#2D1B69",
     },
     gray: {
-      50: "#F7F5F9",
-      100: "#ECE8F0",
-      200: "#DCD6E1",
-      300: "#C5BFC9",
-      400: "#ABA5B0",
-      500: "#948E99",
-      600: "#7C7581",
-      700: "#655E69",
-      800: "#4A464D",
-      900: "#2C2630",
+      50: "#F6F5FA",
+      100: "#ECEAF4",
+      200: "#DAD7E8",
+      300: "#BFBBD3",
+      400: "#A39EBB",
+      500: "#837D9E",
+      600: "#645E82",
+      700: "#3B3462",
+      800: "#251E48",
+      900: "#130E2B",
     },
     text: {
-      secondary: "#465E75",
-      tertiary: "#5C7997",
+      secondary: "#645E82",
     },
     divider: {
-      main: "#B0C3D6",
-      light: "#DCE5EE",
-      dark: "#465E75",
+      main: "#BFBBD3",
+      light: "#DAD7E8",
+      dark: "#645E82",
     },
     background: {
-      darkest: "rgb(16, 18, 20)",
+      darkest: "#0D0B1A",
     },
   },
   config: {

desktop/src/components/CurityBadge.tsx

@@ -1,8 +1,11 @@
-import { Link, Text } from "@chakra-ui/react"
+import { Link, Text, useColorModeValue } from "@chakra-ui/react"
 import { client } from "../client"
 import { Curity } from "../icons"
 
 export function CurityBadge() {
+  // Curity's logo is white on dark backgrounds, never purple or grey
+  const logoColor = useColorModeValue("gray.900", "white")
+
   return (
     <Link
       display="flex"
@@ -12,7 +15,7 @@ export function CurityBadge() {
       <Text fontSize="sm" variant="muted" marginRight="2">
         Maintained by
       </Text>
-      <Curity width="16" height="4" />
+      <Curity width="16" height="4" color={logoColor} />
     </Link>
   )
 }

desktop/src/components/Layout/Sidebar.tsx

@@ -83,10 +83,9 @@ export function SidebarMenuItem({ to, children, icon: iconProps }: TSidebarMenuP
   const settings = useSettings()
   const backgroundColorToken = useColorModeValue("gray.300", "gray.700")
   const backgroundColor = useToken("colors", backgroundColorToken)
-  const borderColorToken = useColorModeValue("primary.600", "primary.600")
+  const borderColorToken = useColorModeValue("primary.600", "primary.400")
   const borderColor = useToken("colors", borderColorToken)
-  const backgroundActiveColorToken = useColorModeValue("primary.500", "primary.700")
-  const backgroundActiveColor = useToken("colors", backgroundActiveColorToken)
+  const backgroundActiveColor = useToken("colors", "primary.500")
   const isLeft = settings.sidebarPosition === "left"
   const icon = cloneElement(iconProps, { boxSize: 4 })