Repository navigation
Give the desktop app Curity's look - #37
Merged
Merged
Conversation
Use the colors and font of Curity's 2026 styleguide in the desktop app: - Primary is rebuilt around Curity purple #7B4FD4 (fills) and lilac #C9A8FF (links, focus), and the grays are tinted towards Curity's navy, ending in midnight #130E2B. The steel blue text and divider colors from the retired 2023 palette are replaced. - Google Sans (SIL Open Font License) is bundled and used for all text. - In dark mode the background is navy #0D0B1A with Curity's purple glow from the top right, the toolbar is transparent so the glow shows, and cards use the translucent purple gradient with a lilac border. - Primary buttons and the selected sidebar item are a #7B4FD4 fill with white text in both modes, and focus rings are lilac instead of blue. - The Curity logo is white in dark mode and navy in light mode instead of purple, and the DevPod mark uses Curity purple. - Unselected settings tabs are transparent in dark mode instead of black. Co-Authored-By: Claude Opus 5.5 <[email protected]>
renatoathaydes
approved these changes
Oct 26, 2026
There was a problem hiding this comment.
🟡 Changes recommended
Font-license packaging, incomplete font and focus styling, and reduced light-mode contrast remain unresolved.
5 open issues
What changed in this PR
Updates the desktop app’s shared theme to Curity’s 2026 visual style, preserving light mode and system color-scheme selection.
Changes:
- Replaces the palette and adds dark-mode gradients, updated navigation styling, and focus colors.
- Bundles Google Sans and configures it for headings and body text.
- Updates logo colors and documents the visual refresh.
| File | Description |
|---|---|
desktop/src/Theme/theme.ts |
Updates palette, typography, links, and focus shadow. |
desktop/src/Theme/tabs.ts |
Adjusts dark-mode tab backgrounds. |
desktop/src/Theme/fonts/OFL.txt |
Adds the font license text. |
desktop/src/Theme/fonts.css |
Defines four bundled Google Sans weights. |
desktop/src/Theme/card.ts |
Adds translucent dark-mode card styling. |
desktop/src/Theme/button.ts |
Updates primary button colors. |
desktop/src/main.tsx |
Loads the font stylesheet. |
desktop/src/icons/DevpodWordmark.tsx |
Recolors the DevPod mark. |
desktop/src/components/Layout/Sidebar.tsx |
Updates selected navigation colors. |
desktop/src/components/CurityBadge.tsx |
Adapts the Curity logo to color mode. |
desktop/src/App/OSSApp.tsx |
Adds the dark background glow and transparent toolbar. |
CHANGELOG.md |
Records the desktop theme refresh. |
Review effort: Balanced
| secondary: "#465E75", | ||
| tertiary: "#5C7997", | ||
| secondary: "#645E82", | ||
| tertiary: "#837D9E", |
Contributor
Author
There was a problem hiding this comment.
Fixed in 69f2550: text.tertiary is now a semantic token, gray.600 in light mode (6.06:1 against white) and gray.400 in dark mode.
- Ship the Google Sans license with the app: the fonts and OFL.txt now live in desktop/public/fonts, which Vite copies into the bundle as is, and OFL.txt starts with the fonts' copyright notice. - Load the fonts from the ThemeProvider so the update window uses them too. - Use a darker purple for focus rings in light mode, where lilac had 1.99:1 contrast against white, and apply it to inputs, selects and textareas, which still had Chakra's blue focus border. - Make text.tertiary gray.600 in light mode and gray.400 in dark mode so it meets WCAG AA contrast. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uses the colors and font of Curity's 2026 styleguide in the desktop app. Only the theme changes; no behavior does.
Changes
#7B4FD4(fills) and lilac#C9A8FF(links, focus). Grays are tinted towards Curity's navy, ending in midnight#130E2B. The steel-bluetextanddividercolors, from the retired 2023 palette, are replaced.desktop/src/Theme/fonts/OFL.txt) and used for all text.#0D0B1Awith Curity's purple glow from the top right. The toolbar is transparent so the glow shows through, and cards use the translucent purple gradient with a lilac border.#7B4FD4fill with white text in both modes. Focus rings are lilac instead of Chakra's blue.Light mode is kept. The app still follows the system color scheme.
Screenshots
Testing
yarn types:check,yarn lint:ciandyarn format:checkpass.🤖 Generated with Claude Code