Resources
Brand guidelines
Logo
Use the full-colour wordmark on light backgrounds. On dark or photographic backgrounds, use the monochrome white lockup for clarity.
Preserve clear space around the mark; do not stretch, rotate, or recolour the full-colour logo. For favicons and app icons, use the same SVGs or export at 2× resolution from vector source.
Colour palette
Core UI tokens match the live site stylesheet (:root in globals.css). Use these for web, email, and presentations that align with tell-me.ai.
| Swatch | Name | Hex | RGB |
|---|---|---|---|
| Primary (cyan) — Brand accent, links, focus rings | #03ECFE | rgb(3, 236, 254) | |
| Primary dark — Hover / pressed states | #02D4E6 | rgb(2, 212, 230) | |
| Accent purple — Gradient partner to cyan | #9B51E0 | rgb(155, 81, 224) | |
| Link accent — In-content links | #02B8C9 | rgb(2, 184, 201) | |
| Background | #FFFFFF | rgb(255, 255, 255) | |
| Text | #000000 | rgb(0, 0, 0) | |
| Text secondary | #1A1A1A | rgb(26, 26, 26) | |
| Muted — Supporting text | #6B7280 | rgb(107, 114, 128) | |
| Card border | #E5E7EB | rgb(229, 231, 235) | |
| Grant bar — Top announcement strip | #0A0A0A | rgb(10, 10, 10) |
Gradients
The product UI uses a primary brand gradient (135° from purple to cyan), a mesh background built from soft radial passes, and optional animated multi-stop gradients on CTAs. Values below are taken from the website stylesheet.
Primary brand gradient
linear-gradient(135deg, #9B51E0 0%, #03ECFE 100%)
Page mesh background
Applied to body as --gradient-mesh: four radial layers using brand purple and cyan at low opacity.
radial-gradient(at 0% 0%, rgba(155, 81, 224, 0.12) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(3, 236, 254, 0.12) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(155, 81, 224, 0.08) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(3, 236, 254, 0.08) 0px, transparent 50%)
CTA ring & hero accents
Navigation and hero buttons use a 135° gradient border (#9B51E0 → #03ECFE). On hover, the border can animate with a larger multi-stop gradient (background-size: 300% 300%) and keyframes animateGradientBorder.
Default: linear-gradient(135deg, #9B51E0, #03ECFE)
Hero lead emphasis (multi-stop, animated on active word):
linear-gradient(135deg, #9B51E0 0%, #03ECFE 35%, #9B51E0 70%, #03ECFE 100%)
Waves background (illustration)
Marketing and slide backgrounds can use the layered wave artwork. Stops are defined inside the SVG (not identical to the UI tokens above — they are tuned for large-field illustration).
| Swatch | Stop | Hex | RGB |
|---|---|---|---|
| Waves blob A (start) — paint0_linear in waves-background.svg | #0F59FF | rgb(15, 89, 255) | |
| Waves blob A (end) | #5A19EB | rgb(90, 25, 235) | |
| Waves blob B (start) — paint1_linear | #00E7FF | rgb(0, 231, 255) | |
| Waves blob B (end) | #2D19E9 | rgb(45, 25, 233) | |
| Waves blob C (start) — paint2_linear | #3D3AFD | rgb(61, 58, 253) | |
| Waves blob C (end) | #C526D6 | rgb(197, 38, 214) | |
| Waves blob D (start) — paint3_linear | #00F0FF | rgb(0, 240, 255) | |
| Waves blob D (mid) | #2A17E6 | rgb(42, 23, 230) |
Typography
Graphics & social (decks, posters, Canva): use League Spartan for titles and headlines, and Canva Sans for body copy and supporting text.
- League Spartan on Google Fonts — open licence, web-ready.
- Canva Sans is bundled in Canva; use it inside Canva designs or match with a neutral geometric sans for non-Canva exports if you need a close substitute.
Website (tell-me.ai) uses Sora via Next.js for UI body and headings — keep digital product screens consistent with the live site.
League Spartan — sample title weight 600
Canva Sans — sample body: neutral, readable paragraphs for explainers and captions.
This line uses the site web font as a stand-in; use Canva Sans inside Canva for graphics.
Sora (web) — sample UI heading style aligned with the marketing site.
Questions
For press, partnership co-branding, or asset requests, contact hello@tell-me.ai or return to the home page.