---
title: Branding
hide:
  - toc
---

# 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](https://cdn.littlexlittle.org/brand/logo.svg) |
| SVG (mono) | Single-color contexts | [logo-mono.svg](https://cdn.littlexlittle.org/brand/logo-mono.svg) |
| PNG 192×192 | Mobile, FedCM manifest | [icon-192.png](https://cdn.littlexlittle.org/brand/icon-192.png) |
| PNG 512×512 | App stores, large displays | [icon-512.png](https://cdn.littlexlittle.org/brand/icon-512.png) |

[Brand kit ZIP :material-download:](https://cdn.littlexlittle.org/brand/brand-kit.zip){ .md-button .md-button--primary }

## 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

- :material-check: Use the SVG logo, not a screenshot.
- :material-check: Maintain at least 8px clear-space around the logo.
- :material-check: Show the button at the same prominence as other sign-in options.
- :material-check: Use the official copy verbatim.

## Don't

- :material-close: Recolor the logo.
- :material-close: Stretch, skew, or rotate the logo.
- :material-close: Add drop shadows, gradients, or 3D effects.
- :material-close: Use the logo to imply endorsement of unrelated products.
- :material-close: 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).