"Connect with LuciBook" button¶
Use this button only to start the OAuth 2.0 authorization flow
(GET /oauth/authorize/…) — never to link anywhere else.
Variants¶
| Variant | Background | Text/wordmark | Use on |
|---|---|---|---|
| Light | White, 1px border | Ink (#1a1d24) |
Dark or busy backgrounds |
| Dark | Brand (#3355ff) |
White | Light backgrounds |
Both ship at 1x and 2x (retina):
assets/brand/connect-with-lucibook-light.png/…-light@2x.pngassets/brand/connect-with-lucibook-dark.png/…-dark@2x.png
An SVG master is TBD-USER (D-C1-04) — the repo currently ships PNG-only
logo exports; the PNG buttons above are built from those. Once a vector
wordmark exists, scalable SVG buttons replace these without changing the
usage rules below.
Minimum size and clear space¶
- Minimum rendered height: 40px. Do not scale below that — the wordmark becomes illegible.
- Leave clear space around the button at least equal to the height of the "L" in the wordmark on every side; don't crowd it against other UI.
Do not¶
- Recolour the button or its text.
- Stretch or distort its aspect ratio.
- Change the copy — it must read exactly "Connect with LuciBook".
- Use the button anywhere that doesn't immediately start the OAuth flow (e.g. a generic "learn more" link).
- Imply endorsement, partnership, or certification beyond what your Verified status actually grants — the Verified badge only appears on the consent screen after review.
HTML snippet¶
<a href="https://<your LuciBook host>/oauth/authorize/?client_id=...&redirect_uri=...&response_type=code&scope=...&state=...&code_challenge=...&code_challenge_method=S256">
<img src="connect-with-lucibook-dark.png" srcset="connect-with-lucibook-dark.png 1x, connect-with-lucibook-dark@2x.png 2x" alt="Connect with LuciBook" height="40">
</a>
See the full parameter list in Authorization Code + PKCE.