update: Global brand defaults page - #772
Open
tamalchowdhury wants to merge 7 commits into
Open
Conversation
Contributor
WalkthroughBranding documentation was expanded with revised setup flows, asset constraints, visual customization guidance, logo fallback behavior, application logo linking, organization branding procedures, and instructions for removing Kinde branding. ChangesBrand documentation
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying kinde-docs-preview with
|
| Latest commit: |
a4502e9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://aa93c14a.kinde-docs-preview.pages.dev |
| Branch Preview URL: | https://tamal-update-global-brand-de.kinde-docs-preview.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/content/docs/design/brand/global-brand-defaults.mdx`:
- Around line 144-150: Update the default theme guidance to state that selecting
“User preference” requires configuring both light and dark brand color schemes,
while preserving the existing descriptions of the Light and Dark options.
- Around line 59-60: Update the supported file types entry in the global brand
defaults documentation to match the upload contract: remove WebP and AVIF, and
include GIF alongside SVG, PNG, and JPG.
- Around line 165-178: Update the “Global logo fallback” documentation so the
Disabled logo display order includes the global logo after the organization name
when no organization logo is available. Revise the accompanying explanation to
describe this final global-logo fallback while preserving the Enabled order and
setup steps.
- Around line 99-105: Update the Favicon section’s supported file type guidance
to distinguish SVG as the primary favicon from PNG as the supported fallback for
browsers such as Safari, while preserving the existing size and dimension
requirements.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 715baa49-7868-4bb5-aafe-bfdb8b4e7e0a
📒 Files selected for processing (1)
src/content/docs/design/brand/global-brand-defaults.mdx
Comment on lines
+59
to
+60
| - Maximum logo size: 1MB | ||
| - Supported file types: SVG, PNG, JPG, WebP, and AVIF |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Correct the documented logo formats.
Line 60 lists WebP/AVIF and omits GIF, conflicting with the documented global-brand upload contract.
Proposed fix
-- Supported file types: SVG, PNG, JPG, WebP, and AVIF
+- Supported file types: SVG, PNG, JPEG, and GIF📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Maximum logo size: 1MB | |
| - Supported file types: SVG, PNG, JPG, WebP, and AVIF | |
| - Maximum logo size: 1MB | |
| - Supported file types: SVG, PNG, JPEG, and GIF |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/global-brand-defaults.mdx` around lines 59 -
60, Update the supported file types entry in the global brand defaults
documentation to match the upload contract: remove WebP and AVIF, and include
GIF alongside SVG, PNG, and JPG.
Comment on lines
+99
to
+105
| - Maximum favicon size: 5KB | ||
| - Supported file type: SVG | ||
| - Must be a multiple of 48px (e.g., 48x48, 96x96, 144x144, etc.) | ||
|
|
||
| To change the favicon of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/). | ||
| 1. In the **Favicon** section: | ||
| 1. Add an SVG favicon (so it works in most browsers). | ||
| 2. Add a **Fallback** PNG for other browsers, such as Safari. |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Document the PNG fallback as supported.
Line 100 says SVG is the only supported type, but Line 105 requires a PNG fallback. Distinguish the primary SVG from the fallback PNG.
Proposed fix
- Maximum favicon size: 5KB
-- Supported file type: SVG
+- Primary file type: SVG
+- Fallback file type: PNG
- Must be a multiple of 48px (e.g., 48x48, 96x96, 144x144, etc.)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - Maximum favicon size: 5KB | |
| - Supported file type: SVG | |
| - Must be a multiple of 48px (e.g., 48x48, 96x96, 144x144, etc.) | |
| To change the favicon of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/). | |
| 1. In the **Favicon** section: | |
| 1. Add an SVG favicon (so it works in most browsers). | |
| 2. Add a **Fallback** PNG for other browsers, such as Safari. | |
| - Maximum favicon size: 5KB | |
| - Primary file type: SVG | |
| - Fallback file type: PNG | |
| - Must be a multiple of 48px (e.g., 48x48, 96x96, 144x144, etc.) | |
| 1. In the **Favicon** section: | |
| 1. Add an SVG favicon (so it works in most browsers). | |
| 2. Add a **Fallback** PNG for other browsers, such as Safari. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/global-brand-defaults.mdx` around lines 99 -
105, Update the Favicon section’s supported file type guidance to distinguish
SVG as the primary favicon from PNG as the supported fallback for browsers such
as Safari, while preserving the existing size and dimension requirements.
Comment on lines
+144
to
+150
| Set the default theme to match your application preference: | ||
|
|
||
| - **Light**: white background with dark text | ||
| - **Dark**: dark background with light text | ||
| - **User preference**: the theme is determined by the user's device preference | ||
|
|
||
| Select **Save** to apply your changes. |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Mention configuring both schemes for User preference.
Users selecting User preference must configure both light and dark brand colors.
Proposed fix
- **User preference**: the theme is determined by the user's device preference
+When using **User preference**, configure brand colors for both light and dark modes.
+
Select **Save** to apply your changes.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Set the default theme to match your application preference: | |
| - **Light**: white background with dark text | |
| - **Dark**: dark background with light text | |
| - **User preference**: the theme is determined by the user's device preference | |
| Select **Save** to apply your changes. | |
| Set the default theme to match your application preference: | |
| - **Light**: white background with dark text | |
| - **Dark**: dark background with light text | |
| - **User preference**: the theme is determined by the user's device preference | |
| When using **User preference**, configure brand colors for both light and dark modes. | |
| Select **Save** to apply your changes. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/global-brand-defaults.mdx` around lines 144 -
150, Update the default theme guidance to state that selecting “User preference”
requires configuring both light and dark brand color schemes, while preserving
the existing descriptions of the Light and Dark options.
Comment on lines
+165
to
178
| If you use [organizations](/build/organizations/multi-tenancy-using-organizations/), each organization can have its own logo. When an organization has no logo, this setting controls what appears on auth pages instead. | ||
|
|
||
| | Setting | Logo display order | | ||
| | --- | --- | | ||
| | **Enabled** | Organization logo → global logo → organization name | | ||
| | **Disabled** | Organization logo → organization name | | ||
|
|
||
| Enable this when organizations should fall back to your business brand before showing a text name. Disable it when you prefer the organization name over the global logo. | ||
|
|
||
| 1. On the **Global > Brand** page, scroll to **Global logo fallback**. | ||
|
|
||
|  | ||
| 2. Turn the setting on or off. | ||
| 3. Select **Save**. |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Restore the final global-logo fallback when disabled.
The disabled behavior still displays the global logo after the organization name when neither organization asset is available.
Proposed fix
| Setting | Logo display order |
| --- | --- |
| **Enabled** | Organization logo → global logo → organization name |
-| **Disabled** | Organization logo → organization name |
+| **Disabled** | Organization logo → organization name → global logo |
-Enable this when organizations should fall back to your business brand before showing a text name. Disable it when you prefer the organization name over the global logo.
+Enable this when organizations should fall back to your business brand before showing a text name. Disable it when you prefer the organization name before the global logo.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| If you use [organizations](/build/organizations/multi-tenancy-using-organizations/), each organization can have its own logo. When an organization has no logo, this setting controls what appears on auth pages instead. | |
| | Setting | Logo display order | | |
| | --- | --- | | |
| | **Enabled** | Organization logo → global logo → organization name | | |
| | **Disabled** | Organization logo → organization name | | |
| Enable this when organizations should fall back to your business brand before showing a text name. Disable it when you prefer the organization name over the global logo. | |
| 1. On the **Global > Brand** page, scroll to **Global logo fallback**. | |
|  | |
| 2. Turn the setting on or off. | |
| 3. Select **Save**. | |
| If you use [organizations](/build/organizations/multi-tenancy-using-organizations/), each organization can have its own logo. When an organization has no logo, this setting controls what appears on auth pages instead. | |
| | Setting | Logo display order | | |
| | --- | --- | | |
| | **Enabled** | Organization logo → global logo → organization name | | |
| | **Disabled** | Organization logo → organization name → global logo | | |
| Enable this when organizations should fall back to your business brand before showing a text name. Disable it when you prefer the organization name before the global logo. | |
| 1. On the **Global > Brand** page, scroll to **Global logo fallback**. | |
|  | |
| 2. Turn the setting on or off. | |
| 3. Select **Save**. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/global-brand-defaults.mdx` around lines 165 -
178, Update the “Global logo fallback” documentation so the Disabled logo
display order includes the global logo after the organization name when no
organization logo is available. Revise the accompanying explanation to describe
this final global-logo fallback while preserving the Enabled order and setup
steps.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/content/docs/design/brand/link-to-homepage.mdx`:
- Line 34: Update the sentence in the documentation content to hyphenate the
compound modifier as “Kinde-hosted authentication pages,” preserving the rest of
the sentence unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 57be20a4-be16-49d1-ae00-56aa40452483
📒 Files selected for processing (3)
src/content/docs/design/brand/apply-branding-for-an-organization.mdxsrc/content/docs/design/brand/link-to-homepage.mdxsrc/content/docs/design/brand/remove-kinde-branding.mdx
| --- | ||
|
|
||
| To link to your application’s homepage from your sign in page, you need to add a homepage URL to each of your applications. Once you do this: | ||
| You can add a custom logo in the Kinde hosted authentication pages. |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Hyphenate the compound modifier.
Use “Kinde-hosted authentication pages” for correct published-doc grammar.
Proposed fix
-You can add a custom logo in the Kinde hosted authentication pages.
+You can add a custom logo in the Kinde-hosted authentication pages.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| You can add a custom logo in the Kinde hosted authentication pages. | |
| You can add a custom logo in the Kinde-hosted authentication pages. |
🧰 Tools
🪛 LanguageTool
[grammar] ~34-~34: Use a hyphen to join words.
Context: ... You can add a custom logo in the Kinde hosted authentication pages. <img src="...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/link-to-homepage.mdx` at line 34, Update the
sentence in the documentation content to hyphenate the compound modifier as
“Kinde-hosted authentication pages,” preserving the rest of the sentence
unchanged.
Source: Linters/SAST tools
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/content/docs/design/brand/apply-branding-for-an-organization.mdx`:
- Line 41: Correct the subject–verb agreement in the branding documentation
sentence by changing “business offer” to “business offers,” while leaving the
rest of the sentence unchanged.
- Around line 109-115: Update the Favicon section’s supported file type guidance
to identify SVG as the primary format and PNG as the fallback for browsers such
as Safari. Include any distinct PNG limits if they differ; otherwise retain the
existing size and dimension requirements.
- Around line 83-87: Update the alt text on the comparison images in the
branding documentation to explicitly describe the default logo state and the
custom organization logo state, replacing the vague “org default register page”
and “after adding logo” descriptions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3e84975b-57a6-45d4-be02-f89fcd1bc4ef
📒 Files selected for processing (1)
src/content/docs/design/brand/apply-branding-for-an-organization.mdx
| - Sign up and sign in pages | ||
| - Request access and subscription pages | ||
| - Emails | ||
| If your business offer multi-tenancy using Kinde's [organizations](/build/organizations/multi-tenancy-using-organizations/) feature, you can apply brand overrides to modify the authentication pages such as sign-up, sign-in, and password reset. |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Fix the subject–verb agreement.
Change “business offer” to “business offers.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/apply-branding-for-an-organization.mdx` at line
41, Correct the subject–verb agreement in the branding documentation sentence by
changing “business offer” to “business offers,” while leaving the rest of the
sentence unchanged.
Comment on lines
+83
to
+87
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/02b207f1-d0bb-46bd-5249-75a961fd0700/socialsharingimage" alt="org default register page" width="400px" /> | ||
|
|
||
| Logos must be under 1MB, and they are resized to have a maximum width or height of 120 pixels based on the aspect ratio. SVG works best as it displays well on any screen, but PNG and other formats are accepted. | ||
| **After custom logo upload:** | ||
|
|
||
| 1. In Kinde, go to **Organizations**. | ||
| 2. In the list, select the organization you want to view. The organization **Details** page opens. | ||
| 3. Select **Brand** in the left menu. The **Brand** page for the organization opens. | ||
| 4. Scroll to the **Logo** section: | ||
| 1. To remove an existing logo, select the trashcan icon. | ||
| 2. To add a new or replace the logo, select **Upload image**. | ||
| 5. Select **Preview** to see what your changes look like. | ||
| 6. Select **Back** to exit the preview. | ||
| 7. Select **Save** to apply the changes. | ||
| 8. Test the change in your test or production environments. | ||
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f8761f81-f3c5-4923-e238-59763b80d600/socialsharingimage" alt="after adding logo" width="400px" /> |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make the comparison screenshots descriptive.
The current alt text (“org default register page” / “after adding logo”) does not describe the default-versus-custom-logo result.
Proposed fix
-<img src="…" alt="org default register page" width="400px" />
+<img src="…" alt="Default organization sign-up page using the Kinde logo" width="400px" />
-<img src="…" alt="after adding logo" width="400px" />
+<img src="…" alt="Organization sign-up page displaying the uploaded custom logo" width="400px" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/02b207f1-d0bb-46bd-5249-75a961fd0700/socialsharingimage" alt="org default register page" width="400px" /> | |
| Logos must be under 1MB, and they are resized to have a maximum width or height of 120 pixels based on the aspect ratio. SVG works best as it displays well on any screen, but PNG and other formats are accepted. | |
| **After custom logo upload:** | |
| 1. In Kinde, go to **Organizations**. | |
| 2. In the list, select the organization you want to view. The organization **Details** page opens. | |
| 3. Select **Brand** in the left menu. The **Brand** page for the organization opens. | |
| 4. Scroll to the **Logo** section: | |
| 1. To remove an existing logo, select the trashcan icon. | |
| 2. To add a new or replace the logo, select **Upload image**. | |
| 5. Select **Preview** to see what your changes look like. | |
| 6. Select **Back** to exit the preview. | |
| 7. Select **Save** to apply the changes. | |
| 8. Test the change in your test or production environments. | |
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f8761f81-f3c5-4923-e238-59763b80d600/socialsharingimage" alt="after adding logo" width="400px" /> | |
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/02b207f1-d0bb-46bd-5249-75a961fd0700/socialsharingimage" alt="Default organization sign-up page using the Kinde logo" width="400px" /> | |
| **After custom logo upload:** | |
| <img src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f8761f81-f3c5-4923-e238-59763b80d600/socialsharingimage" alt="Organization sign-up page displaying the uploaded custom logo" width="400px" /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/apply-branding-for-an-organization.mdx` around
lines 83 - 87, Update the alt text on the comparison images in the branding
documentation to explicitly describe the default logo state and the custom
organization logo state, replacing the vague “org default register page” and
“after adding logo” descriptions.
Comment on lines
+109
to
+115
| - Maximum favicon size: 5KB | ||
| - Supported file type: SVG | ||
| - Must be a multiple of 48px (e.g., 48x48, 96x96, 144x144, etc.) | ||
|
|
||
| Use `form-data` in the body to upload a valid PNG, JPEG, GIF, SVG, AVIF or WEBP image smaller than 1MB. | ||
| 1. In the **Favicon** section: | ||
| 1. Add an SVG favicon (so it works in most browsers). | ||
| 2. Add a **Fallback** PNG for other browsers, such as Safari. |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Clarify that PNG is supported as the fallback favicon.
“Supported file type: SVG” conflicts with the required fallback PNG in Line 115. List SVG as the primary format and PNG as the fallback format, including any distinct limits if applicable.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/content/docs/design/brand/apply-branding-for-an-organization.mdx` around
lines 109 - 115, Update the Favicon section’s supported file type guidance to
identify SVG as the primary format and PNG as the fallback for browsers such as
Safari. Include any distinct PNG limits if they differ; otherwise retain the
existing size and dimension requirements.
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
1 participant
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.
This PR makes improvements to the global brand defaults setting page. It adds before-and-after screenshots and points to various other guides so clients can easily customize their Kinde experience for their users.
Summary by CodeRabbit