Branding¶
Use these assets consistently so users learn to recognize and trust the "Sign in with Little X Little" button.
Button copy¶
The official sign-in label is:
Sign in with Little X Little
For sign-up flows, use "Sign up with Little X Little". For continuation flows (already-known user), use "Continue with Little X Little".
Don't paraphrase — use these strings verbatim.
Logo¶
Download:
| Format | Use for | Link |
|---|---|---|
| SVG (color) | Web buttons | logo.svg |
| SVG (mono) | Single-color contexts | logo-mono.svg |
| PNG 192×192 | Mobile, FedCM manifest | icon-192.png |
| PNG 512×512 | App stores, large displays | icon-512.png |
Colors¶
| Token | Hex | Use |
|---|---|---|
| Primary | #5E35B1 | Filled button background. |
| Primary text | #FFFFFF | Text on primary. |
| Outline | #1F2937 | Outline button border + text on light. |
| On dark | #FFFFFF | Outline on dark backgrounds. |
Button sizes & shapes¶
The renderButton API accepts these combinations:
size | Min width | Height |
|---|---|---|
large | 220px | 44px |
medium | 200px | 40px |
small | 160px | 32px |
shape | Description |
|---|---|
rectangular | 4px rounded corners (default). |
pill | Fully rounded. |
square | Sharp corners. |
circle | Icon-only, circular. Pair with type: 'icon'. |
Do¶
- Use the SVG logo, not a screenshot.
- Maintain at least 8px clear-space around the logo.
- Show the button at the same prominence as other sign-in options.
- Use the official copy verbatim.
Don't¶
- Recolor the logo.
- Stretch, skew, or rotate the logo.
- Add drop shadows, gradients, or 3D effects.
- Use the logo to imply endorsement of unrelated products.
- Combine the logo with other marks in a lockup.
Attribution¶
When mentioning Little X Little in product copy, write it with capital L, capital X, capital L and spaces — never LittleXLittle, never little x little, never LXL (except in code identifiers).