Docs
ConnectBranding

Branding

The button

Use the official “Connect with Loop” button on the screen where the user initiates the OAuth flow.

  • Default style: dark background #0A0A0A, white text, Loop wordmark to the left, 8px corner radius, 44px tall.
  • Light variant: white background, dark text, 1px border.
  • Disabled: 40% opacity.

SVG and React components are available in @platform/connect-button:

npm install @platform/connect-button
import { ConnectWithLoopButton } from "@platform/connect-button";
 
<ConnectWithLoopButton
  href={`https://identity.platform.loop.health/v1/oauth/authorize?...`}
  size="default"
  variant="dark"
/>

Naming

  • Always write “Connect with Loop” — not “Sign in with Loop”, “Log in with Loop”, or “Loop Auth”.
  • After connection, say “Connected to Loop” — not “Logged in”.
  • The word “Loop” is always capitalized.

Logo usage

  • Don’t recolor the Loop wordmark. Use the official SVG.
  • Maintain at least 8px of clear space around the logo.
  • Minimum size: 16px tall.

In your app’s Connected Accounts list

If your app shows a list of connected accounts, display Loop alongside other providers with equal billing — same icon size, same vertical rhythm. The icon is a 24×24 SVG at https://platform.loop.health/brand/connect-icon.svg.

Don’ts

  • Don’t imply endorsement by Loop (“Powered by Loop”, “Official Loop App”) unless your app has been listed in the Loop App Directory.
  • Don’t use the Loop wordmark in your app’s primary marketing — only in the OAuth context.
  • Don’t claim “Loop verified” or similar trust language unless Loop has reviewed your integration.

Pre-built screens

For partners who don’t want to design their own consent or callback page, Loop hosts a generic flow at https://connect.platform.loop.health/start?return_to=<your_redirect_uri> that handles the entire OAuth dance and posts the result to your redirect. Useful for prototypes and very small apps; production integrations should run their own flow.

ErrorsGlossary