Suloro Developers
Console
Overview Sign in with Suloro API Reference FAQ Open Developer Console
Documentation / / Buttons & Assets

Brand & Button Guidelines

Design specifications, official SVG logos, and ready-to-use button styles for incorporating Sign in with Suloro into your web and mobile products.

Official Button Styles

Suloro provides four primary button variants to fit seamlessly into any user interface theme:

Suloro Blue (Recommended)

For clean light backgrounds where the button should stand out with primary contrast.

Light Bordered

For subtle integration beside other social or email login buttons.

Dark Slate

Ideal for dark mode surfaces, sleek interfaces, or high contrast themes.

Icon Only

For compact modal rows and icon-based social login stacks.

Interactive Button Customizer

Select your desired button specifications to preview and copy production-ready code:

LIVE COMPONENT PREVIEW
CODE SNIPPET

Sizing & Spacing Specifications

To preserve accessibility and visual balance, please follow these minimum sizing rules:

Size Tier Button Height Logo Dimensions Font Size Horizontal Padding
Small (`sm`) 38px 18px × 18px 13.5px 14px
Medium (`md` - Default) 44px 22px × 22px 15px 18px
Large (`lg`) 52px 26px × 26px 16.5px 24px

Official Brand Color Palette

Suloro Royal Blue #2563eb
Suloro Blue Hover #1d4ed8
Soft Blue Tint #eff6ff
Slate Dark #0f172a

Official Brand Assets

Use these high-resolution SVG and PNG assets hosted directly on Suloro:

Suloro Favicon

Suloro Icon (SVG)

Scalable vector format for favicons, buttons, and app icons.

https://suloro.com/images/favicon.svg
Suloro Header Landscape

Suloro Header Logo (PNG)

Official landscape header branding for top navigation bars.

https://suloro.com/images/suloro/header.png

Branding Do's & Don'ts

DO
  • Use the official SVG icon inside the button.
  • Keep the button height at or above 38px.
  • Use standard phrases: "Sign in with Suloro" or "Continue with Suloro".
  • Maintain clear contrast against background surfaces.
DON'T
  • Do not stretch, distort, or recolor the Suloro logo.
  • Do not change the Suloro logo into third-party symbols.
  • Do not abbreviate "Suloro" as "Sulo" or "SLR".
  • Do not place dark buttons on dark backgrounds without a border.
Press Esc to exit Suloro for Developers Search Engine