Brand
New suite chrome is solid. Do not add CSS gradients on header, footer, pills, or primary buttons.
Color (locked)
| Token | Value | Use |
|---|---|---|
| Background | #07070c | Page |
| Header / footer | #09090b | Sticky chrome |
| Card | #111118 | Panels |
| Border | #24262c / #1f1f2e | Hairlines |
| Text | #f4f4f8 | Body |
| Muted | #8b8ba3 | Secondary |
| Accent | #8b5cf6 | Links / focus — solid, not a fade |
Font: Inter. Theme color meta: #07070c. Logo: /logo.jpg or /rdllogo.jpg (same file family on every app).
Forbidden in product UI: bg-gradient-*, linear-gradient(, radial-gradient(.
Header rules
- Sticky, 44px row, solid
#09090b, bottom border#24262c - Logo + product label + horizontal suite pills (scroll, no wrap explosion)
- Account control: Connect Wallet when signed out (not “Connect Xaman” as the primary chrome label)
- Session + credits chip when connected
- No partner / upstream API hostnames in the header
- Safe-area:
padding-top: env(safe-area-inset-top)
Footer / bottom nav rules
- Mobile bottom nav: five suite destinations (Wallet · Cafe · Swap · Scan · Hub/More), solid
#09090b, top border, touch targets ≥ 44px, safe-area bottom - Desktop footer: suite app pills + all socials (X, Discord, Telegram, GitHub) + one promo + legal
- Product string:
Riddle {App} · {one-liner} · Not financial advice - Do not put fee disclaimers as gradient banners
Copy
- Not financial advice
- No guaranteed returns in ad creatives or token-kit marketing
- Product names: Riddle Wallet, Riddle Swap, Riddle Bridge, … (see suite map)