ai_ml_operations/chat_web_app
2
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

Align Google/Microsoft SSO buttons with official branding guidelines #79

New Issue
Closed
opened 2026-08-01 13:00:24 -07:00 by westfarn · 1 comment
westfarn commented 2026-08-01 13:00:24 -07:00
Owner
Copy Link
Copy Source

Summary

Sign-in / sign-up SSO buttons (Continue with Google / Continue with Microsoft) are text-only generic buttons. They do not match Google or Microsoft brand guidelines. Screenshot of current UI attached to the originating request (dark Hesychia.ai Sign In card; SSO buttons have border + translucent fill, no logos).

Component: llm-fe/src/llm-fe/components/SsoButtons/SsoButtons.tsx
Also used on: Sign In and Sign Up pages.

Do we need the logos?

Yes.

Provider Logo required? Why
Google Yes — required Official multicolor Google "G" on a white square is mandatory for custom buttons. Monochrome / missing "G" / "G" on non-approved backgrounds violate guidelines and can block OAuth app verification.
Microsoft Yes — strongly recommended Guidelines define identity of the control as Microsoft logo + "Sign in with Microsoft" text. Official downloadable button assets include the logo. Do not invent/alter the logo.

Text alone ("Continue with Google/Microsoft") is insufficient for compliance and for user recognition next to other IdPs.

Google — design guidelines

Source: Sign in with Google Branding Guidelines

Following these is required for Google app verification.

Preferred approaches (in order)

  1. Google Identity Services SDK-rendered button (always compliant).
  2. Pre-approved PNG/SVG brand assets from Google.
  3. Custom HTML button that still follows the rules below.

Custom button rules (if we keep our OAuth redirect flow)

  • Logo: Standard multicolor Google "G" only; never stretch, recolor, or use monochrome. "G" must sit on a white logo area.
  • Approved CTA text: Sign in with Google, Sign up with Google, or Continue with Google (current copy is OK).
  • Themes (use Dark to match Hesychia):
    • Light: fill #FFFFFF, stroke #747775, text #1F1F1F
    • Dark: fill #131314, stroke #8E918F, text #E3E3E3
    • Neutral: fill #F2F2F2, no stroke, text #1F1F1F
  • Font: Google Sans Medium preferred (Roboto Medium commonly accepted in GIS reference).
  • Prominence: Same size / visual weight as other third-party SSO buttons.
  • Don'ts: No logo without button + action text; no outdated "G"; no putting multicolor "G" on arbitrary colored backgrounds.

Microsoft — design guidelines

Source: Sign in with Microsoft branding guidelines

These are recommended guidelines (not as rigidly enforced as Google verification), but we should follow them for trust/consistency.

Button composition

  • Pair official Microsoft logo (four-square) with text Sign in with Microsoft (short form Sign in only if space is tight).
  • Light and dark official button assets available as PNG/SVG from the docs.
  • Respect Microsoft redlines / padding from the guideline assets; do not alter the logo.

Copy / terminology

  • Prefer "Sign in with Microsoft" over inventing variants when aligning to assets.
  • When explaining account type: use "work or school account" — not "enterprise/business/corporate account".
  • Do not expose end users to "Azure AD" / "Active Directory" / "Microsoft 365 ID" / "Azure ID" branding on the button.

Current gaps

From screenshot + SsoButtons.tsx:

  • No Google "G" logo
  • No Microsoft logo
  • Shared generic translucent button style (not Google dark / Microsoft light-or-dark official treatments)
  • Microsoft label uses "Continue with Microsoft" instead of preferred "Sign in with Microsoft" (Google "Continue with…" is allowed)
  • Tests assert current button names (Continue with Google / Continue with Microsoft) — update if copy changes

Proposed work

  1. Add official (or guideline-compliant) SVG/PNG assets for Google "G" and Microsoft logo (or use Google/Microsoft provided full button assets).
  2. Update SsoButtons so each provider button includes logo + approved text, with correct logo padding/background (Google "G" on white).
  3. Apply dark-theme-friendly variants that still meet each vendor's color rules (Hesychia sign-in is dark).
  4. Keep existing startOAuth('google'|'microsoft', intent) behavior — visual change only unless we deliberately adopt GIS SDK for Google.
  5. Update SignIn/SignUp tests for new accessible names / structure.
  6. Verify equal prominence between Google and Microsoft buttons.

Acceptance criteria

  • Google button shows official multicolor "G" on white logo area; no monochrome/custom icon.
  • Google button text is one of: Sign in / Sign up / Continue with Google.
  • Microsoft button shows unaltered Microsoft logo + "Sign in with Microsoft" (or approved short form).
  • Dark UI still meets contrast / brand rules for both providers.
  • Buttons remain keyboard-accessible and roughly equal size/weight.
  • SignIn + SignUp tests updated and passing.
  • Assets sourced from official guideline downloads (or equivalent SVG matching official artwork).

References

## Summary Sign-in / sign-up SSO buttons (`Continue with Google` / `Continue with Microsoft`) are text-only generic buttons. They do **not** match Google or Microsoft brand guidelines. Screenshot of current UI attached to the originating request (dark Hesychia.ai Sign In card; SSO buttons have border + translucent fill, **no logos**). **Component:** `llm-fe/src/llm-fe/components/SsoButtons/SsoButtons.tsx` **Also used on:** Sign In and Sign Up pages. ## Do we need the logos? **Yes.** | Provider | Logo required? | Why | | --- | --- | --- | | **Google** | **Yes — required** | Official multicolor Google "G" on a white square is mandatory for custom buttons. Monochrome / missing "G" / "G" on non-approved backgrounds violate guidelines and can block OAuth app verification. | | **Microsoft** | **Yes — strongly recommended** | Guidelines define identity of the control as **Microsoft logo + "Sign in with Microsoft"** text. Official downloadable button assets include the logo. Do not invent/alter the logo. | Text alone ("Continue with Google/Microsoft") is insufficient for compliance and for user recognition next to other IdPs. --- ## Google — design guidelines **Source:** [Sign in with Google Branding Guidelines](https://developers.google.com/identity/branding-guidelines) Following these is **required for Google app verification**. ### Preferred approaches (in order) 1. Google Identity Services SDK-rendered button (always compliant). 2. Pre-approved PNG/SVG brand assets from Google. 3. Custom HTML button that still follows the rules below. ### Custom button rules (if we keep our OAuth redirect flow) - **Logo:** Standard multicolor Google "G" only; **never** stretch, recolor, or use monochrome. "G" must sit on a **white** logo area. - **Approved CTA text:** `Sign in with Google`, `Sign up with Google`, or `Continue with Google` (current copy is OK). - **Themes** (use Dark to match Hesychia): - Light: fill `#FFFFFF`, stroke `#747775`, text `#1F1F1F` - Dark: fill `#131314`, stroke `#8E918F`, text `#E3E3E3` - Neutral: fill `#F2F2F2`, no stroke, text `#1F1F1F` - **Font:** Google Sans Medium preferred (Roboto Medium commonly accepted in GIS reference). - **Prominence:** Same size / visual weight as other third-party SSO buttons. - **Don'ts:** No logo without button + action text; no outdated "G"; no putting multicolor "G" on arbitrary colored backgrounds. --- ## Microsoft — design guidelines **Source:** [Sign in with Microsoft branding guidelines](https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps) These are **recommended guidelines** (not as rigidly enforced as Google verification), but we should follow them for trust/consistency. ### Button composition - Pair **official Microsoft logo** (four-square) with text **`Sign in with Microsoft`** (short form **`Sign in`** only if space is tight). - Light and dark official button assets available as PNG/SVG from the docs. - Respect Microsoft redlines / padding from the guideline assets; **do not alter the logo**. ### Copy / terminology - Prefer "Sign in with Microsoft" over inventing variants when aligning to assets. - When explaining account type: use **"work or school account"** — not "enterprise/business/corporate account". - Do **not** expose end users to "Azure AD" / "Active Directory" / "Microsoft 365 ID" / "Azure ID" branding on the button. --- ## Current gaps From screenshot + `SsoButtons.tsx`: - [ ] No Google "G" logo - [ ] No Microsoft logo - [ ] Shared generic translucent button style (not Google dark / Microsoft light-or-dark official treatments) - [ ] Microsoft label uses "Continue with Microsoft" instead of preferred "Sign in with Microsoft" (Google "Continue with…" is allowed) - [ ] Tests assert current button names (`Continue with Google` / `Continue with Microsoft`) — update if copy changes --- ## Proposed work 1. Add official (or guideline-compliant) SVG/PNG assets for Google "G" and Microsoft logo (or use Google/Microsoft provided full button assets). 2. Update `SsoButtons` so each provider button includes logo + approved text, with correct logo padding/background (Google "G" on white). 3. Apply dark-theme-friendly variants that still meet each vendor's color rules (Hesychia sign-in is dark). 4. Keep existing `startOAuth('google'|'microsoft', intent)` behavior — visual change only unless we deliberately adopt GIS SDK for Google. 5. Update SignIn/SignUp tests for new accessible names / structure. 6. Verify equal prominence between Google and Microsoft buttons. ## Acceptance criteria - [ ] Google button shows official multicolor "G" on white logo area; no monochrome/custom icon. - [ ] Google button text is one of: Sign in / Sign up / Continue with Google. - [ ] Microsoft button shows unaltered Microsoft logo + "Sign in with Microsoft" (or approved short form). - [ ] Dark UI still meets contrast / brand rules for both providers. - [ ] Buttons remain keyboard-accessible and roughly equal size/weight. - [ ] SignIn + SignUp tests updated and passing. - [ ] Assets sourced from official guideline downloads (or equivalent SVG matching official artwork). ## References - Google: https://developers.google.com/identity/branding-guidelines - Microsoft: https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps - Code: `llm-fe/src/llm-fe/components/SsoButtons/SsoButtons.tsx`
signin-sso-buttons-current.png
58 KiB
signin-sso-buttons-current.png
westfarn commented 2026-08-01 13:02:56 -07:00
Author
Owner
Copy Link
Copy Source

Current UI (screenshot)

Sign-in card as of ticket creation — SSO buttons are text-only, no Google/Microsoft logos:

Current Sign In SSO buttons

Attachment: signin-sso-buttons-current.png

## Current UI (screenshot) Sign-in card as of ticket creation — SSO buttons are text-only, no Google/Microsoft logos: ![Current Sign In SSO buttons](https://git.aimloperations.com/attachments/09679d21-dfd7-4955-a177-85d1ebe86d70) Attachment: `signin-sso-buttons-current.png`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
twestfall westfarn (Ryan Westfall)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ai_ml_operations/chat_web_app#79