diff --git a/src/content/docs/design/brand/apply-branding-for-an-organization.mdx b/src/content/docs/design/brand/apply-branding-for-an-organization.mdx index dd9fcca68..4d891a50a 100644 --- a/src/content/docs/design/brand/apply-branding-for-an-organization.mdx +++ b/src/content/docs/design/brand/apply-branding-for-an-organization.mdx @@ -1,9 +1,12 @@ --- page_id: f3e20936-d4da-4abc-8430-7620cae7fa6b -title: Apply unique branding for an organization -description: "Comprehensive guide for applying unique branding to organizations including logo, favicon, theme, and color customization with API integration and reset functionality." +title: Set unique branding for an organization +description: "Brand each organization with its own logo, theme, and colors—manage logos via dashboard or API" sidebar: order: 2 + label: Set unique branding for orgs +tableOfContents: + maxHeadingLevel: 3 relatedArticles: - 7b32cd0e-7af3-4d57-9c3c-4a37df3d14d1 - a1887098-e139-4f98-adf7-ff5785aec76d @@ -16,34 +19,28 @@ topics: - design - brand - organizations -sdk: [] -languages: [] +sdk: + - kinde-management-api +languages: + - bash audience: developers complexity: intermediate keywords: - organization branding - - multi-tenancy - - logo + - multi-tenancy branding + - logo upload - favicon - - brand colors - - theme - - API + - organization avatar - reset branding -updated: 2024-01-15 + - organization logo API + - Management API +updated: 2026-08-12 featured: false deprecated: false -ai_summary: Comprehensive guide for applying unique branding to organizations including logo, favicon, theme, and color customization with API integration and reset functionality. +ai_summary: "Guide to applying unique brand overrides for a Kinde organization so multi-tenant authentication pages such as sign-up, sign-in, and password reset match each tenant. Walks through Organizations > Brand in the Kinde dashboard, previewing and saving changes, and uploading logos for light and dark mode, including file size and format limits, the 120px resize constraint, and logo fallback to the org name or global business logo. Covers SVG and fallback PNG favicons, organization avatars for the self-serve portal, light, dark, or user-preference theme, and customizing page backgrounds, cards, buttons, input fields, and links. Explains resetting all organization brand settings to global defaults. Also covers adding and deleting organization logos via the Kinde Management API using an M2M token with the update:organizations scope. Changes apply immediately without redeploying. Intended for developers configuring per-organization authentication page branding." --- -If your business model supports multi-tenancy or multiple user groups and you use [organizations](/build/organizations/multi-tenancy-using-organizations/) in Kinde, you can apply brand overrides to modify the pages in each organization. - -This means that when a user signs up or signs in to an organization, they have the brand experience associated with that organization, through page logo and colours. - -You can change the background, button, and text colours, as well as the favicon and logo for: - -- Sign up and sign in pages -- Request access and subscription pages -- Emails +If your business offers 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. -## To add or change a logo for an organization +To access the organization brand settings: + +1. Sign in to your Kinde dashboard and select **Organizations**. +2. In the list of organizations, select the one you want to modify. +3. Select **Brand**. + +The following setting options are similar to the [global brand defaults](/design/brand/global-brand-defaults/), but apply only to the selected organization. + +## Preview your changes + +There is a **Preview** button at the top of the page next to the **Save** button. You can use this to preview your changes before saving them. + +1. Select **Preview** to see what your changes look like. +2. Select **Back** to exit the preview. +3. Select **Save** to apply the changes. +4. Test the change in your test or production environments. + +## Upload org brand assets + +### Logo -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. +Add the organization logo to authentication pages. You can upload logos for both light and dark mode. -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. +- Maximum logo size: 1MB +- Supported file types: SVG, PNG, JPG, WebP, and AVIF + +After uploading, select **Preview** or **Save** to apply your changes. The logo is immediately visible on the sign-in page. You do not need to redeploy your application. + +**Kinde default:** + +Default organization sign-up page using the Kinde logo + +**After custom logo upload:** + +Organization sign-up page displaying the uploaded custom logo + +Logos are resized to a maximum width or height of 120 pixels based on aspect ratio. SVG works best because it displays well on any screen, but PNG and other formats are accepted. + + -## To add a logo via the Kinde Management API +### Favicon -Use this endpoint `POST {{domain}}/api/v1/organizations/{org_code}/logos/light` +Favicons are small icons that appear on browser tabs and mobile app shortcuts. -For different logo variations, adjust the type path parameter (e.g., `light`, `dark`). +![image of browser favicons](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f4cc6e0f-3f87-46af-f99d-7c4910602600/public) -In the Header, set a boundary value, e.g. `content-type: multipart/form-data; boundary="value"` +- Maximum favicon size: 5KB +- Primary file type: SVG +- Fallback file type: PNG +- 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. +2. Select **Save**. -You can also delete logos via the API. [See the API docs](https://docs.kinde.com/kinde-apis/management/#tag/organizations/post/api/v1/organizations/{org_code}/logos/{type}). -## To add or change a favicon for an organization +**Kinde default:** -Favicons are the tiny image shown on the tab of a browser. Image files must be a multiple of 48px square (e.g. 48x48, 96x96). +default favicon - +**Custom:** -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. In the **Favicon** section, select **Upload image** to add or replace a favicon. - 1. Upload an **SVG** that will work in most browsers. - 2. Add a **Fallback** image in PNG for other browsers. -5. To preview a favicon, you’ll need to save it and check in your test or live environment. -6. To remove a favicon, select the trashcan icon near the image. -7. Select **Save** to apply the changes. +custom favicon -## Add an avatar for an organization +### Avatar If your organizations manage their own profile or payment details via a [Kinde self-serve portal](/build/self-service-portal/self-serve-portal-for-orgs/), you can upload an avatar to personalize the experience for organization members. An avatar is usually a simple logo. -Avatars must be in SVG format, and be smaller than 5kb. They appears as a 36px square in the interface. +- Maximum avatar size: 5KB +- Supported file type: SVG +- Display resolution: 36px square + +1. In the **Avatar** section, select **Upload image**. +2. Select **Save**. + +## Theme (light or dark mode) + +Set the default theme to match your organization preference: -1. In Kinde, open the organization details and go to **Brand** in the menu. -2. In the **Avatar** section, select **Upload image**. -3. Select **Save**. +- **Light**: white background with dark text +- **Dark**: dark background with light text +- **User preference**: the theme is determined by the user's device preference -## Set a light or dark theme +Select **Save** to apply your changes. -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. -4. Set the **Theme**: **Light**, **Dark**, or **User preference**. If you select user preference, make sure you choose a brand color scheme for both experiences. See below. -5. Select **Save**. +## Other page elements -## Set brand colors for an organization +- **Pages**: Set the background color of auth pages in light and dark modes. +- **Cards**: Set the border radius for card elements in pixels. (Default is 16px) +- **Buttons**: Customize buttons for light and dark mode. You can change: + - Background color + - Text color + - Border radius (default is 8px) +- **Input fields**: Set the border radius for input fields in pixels. (Default is 8px) +- **Links**: Set the link text color in light and dark mode. + +## Reset all changes + +If you want to revert to global styles for an organization scroll to the bottom of the page and select **Reset to default**. + + + +## Manage organization logo via the Kinde Management API + +Requires an M2M access token with the `update:organizations` scope. See [get an access token for the Kinde Management API](/developer-tools/kinde-api/access-token-for-api/). + +### Add organization logo + +```bash +curl --request POST \ + --url '/api/v1/organizations//logos/' \ + --header 'Authorization: Bearer ' \ + --form 'logo=@/path/to/logo.png' +``` + + -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. Change the following elements to appear how you want: background, buttons, text color, link color, and button border radius. -5. Select **Preview** to see what your changes look like. -6. Select **Save** to apply the changes. +- **For different logo variations**, set `` to `light` or `dark`. +- **Use the `logo` form field** to upload a supported file type smaller than 1MB (SVG, PNG, JPG, WebP, or AVIF). Curl sets the multipart boundary automatically when you use `--form`. -## Reset organization brand to match global styles +### Delete organization logo -If you want to revert to global styles for an organization, it is easy to reset. +```bash +curl --request DELETE \ + --url '/api/v1/organizations//logos/' \ + --header 'Authorization: Bearer ' +``` -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. In the bottom section called **Admin actions**, select **Reset to default**. -5. Select **Save**. This removes logo, color schemes, etc. +See the [Kinde Management API documentation](/kinde-apis/management#tag/organizations/post/api/v1/organizations/{org_code}/logos/{type}) for more details. diff --git a/src/content/docs/design/brand/global-brand-defaults.mdx b/src/content/docs/design/brand/global-brand-defaults.mdx index ca4b2395d..f0be5a9f2 100644 --- a/src/content/docs/design/brand/global-brand-defaults.mdx +++ b/src/content/docs/design/brand/global-brand-defaults.mdx @@ -1,9 +1,12 @@ --- page_id: 7b32cd0e-7af3-4d57-9c3c-4a37df3d14d1 -title: Set global brand defaults -description: "Guide for setting global brand defaults including logo upload, favicon configuration, theme selection, and brand color customization for authentication pages." +title: Set global brand defaults for Kinde hosted authentication pages +description: "Brand Kinde-hosted auth pages with your logo, theme, and colors—manage logos via dashboard or API" sidebar: order: 1 + label: Set global brand defaults +tableOfContents: + maxHeadingLevel: 3 relatedArticles: - a1887098-e139-4f98-adf7-ff5785aec76d - 66f83c18-d261-48b8-a517-648ed1b7b064 @@ -17,101 +20,205 @@ topics: - design - brand - customization -sdk: [] -languages: [] +sdk: + - kinde-management-api +languages: + - bash audience: developers -complexity: beginner +complexity: intermediate keywords: - - global brand - - logo + - global brand defaults + - authentication page branding + - logo upload - favicon - - theme - - brand colors - - light theme - - dark theme - - user preference -updated: 2026-04-13 + - dark mode theme + - global logo fallback + - environment logo API + - Management API +updated: 2026-08-12 featured: false deprecated: false -ai_summary: Guide for setting global brand defaults including logo upload, favicon configuration, theme selection, and brand color customization for authentication pages. +ai_summary: "Guide to setting global brand defaults for Kinde-hosted authentication pages in the Design > Global > Brand section of the Kinde dashboard. Covers uploading logos for light and dark mode with size and format limits and the 120px resize constraint, making logos clickable via Application homepage URI, configuring SVG and fallback PNG favicons, uploading a custom avatar, choosing light, dark, or user-preference theme, and customizing page background, cards, buttons, input fields, and link colors. Explains global logo fallback behavior when organizations have no logo. Also covers adding and deleting environment logos via the Kinde Management API using an M2M token with the update:environments scope. Changes apply immediately without redeploying. Intended for developers configuring authentication page branding." --- -When users sign up or sign in to your product, they land on pages generated by Kinde. You can update the look of these pages to match your brand. +Authentication actions such as sign-up, sign-in, and password reset happen on Kinde-hosted pages. Set your brand defaults so your users never feel like they left your product. -You also have the option to bring your own page design to the authentication experience. See + + +To set global brand defaults: + +1. Sign in to your Kinde dashboard and select **Design**. +2. Go to **Global > Brand**. + +## Upload brand assets + +### Logo -- [Custom design with code](/design/customize-with-code/customize-with-css-html/) -- [Custom sign-up and sign-in pages](/authenticate/custom-configurations/custom-authentication-pages/). +Add your company logo to authentication pages. You can upload logos for both light and dark mode. -## Setting global brand elements +- Maximum logo size: 1MB +- Supported file types: SVG, PNG, JPG, WebP, and AVIF -You can choose to set a global theme for all pages, or else use global settings as a fallback for custom page designs. +After uploading, select **Save** to apply your changes. The logo is immediately visible on the sign-in page. You do not need to redeploy your application. -Use the following procedures to make design changes to suit your brand. +**Kinde default:** -## Add your company logo +kinde sign in page -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:** -