“Keep supabase-js. Change the URL and keys.”
Specific, short and checkable.
Brand guidelines
Precise, quiet, confident.
Sharp geometry, generous space, high contrast and one accent used sparingly. Everything here is free to use when you write about Basequel.
01 · The mark
An angular B, built on a grid.
A flat spine with two right-pointing lobes, the lower one slightly larger. Both counters are open through two slits of equal width. Every diagonal runs at 32° (rise 5 : run 8). Every stroke is 0.12 × the mark’s height.
The wordmark is Geist SemiBold at −0.02 em, converted to outlines. Single-colour versions in pure black and pure white are in the brand pack.
02 · Usage
Give it room. Keep it legible.
Clear space
Keep X = half the mark’s width (¼ of its height) clear on every side of the mark or lockup.
Minimum size
Mark: 16 px tall. Horizontal lockup: 20 px tall. Stacked lockup: 48 px tall. Below that, use the favicon tile.
Signal, sparingly
Signal marks the primary action and small details. If more than about 5% of a screen is orange, pull it back.
Don’t
- Redraw, outline, bevel, add a shadow to or rotate the mark.
- Close the slits or change the 32° angle.
- Put the mark on busy imagery without a solid backing.
- Use white on Signal (under 4.5 : 1). Use the Ink mark instead.
- Set “Basequel” in another typeface next to the mark. Use the lockup files.
03 · Colour
One accent. Two equal themes.
Signal #FF4F1A. Backend brands cluster around green, purple and blue — Supabase among them. A warm red-orange sets Basequel apart at a glance and reads like a status light: live, go, attention. It carries Ink text at 5.98 : 1 in both themes. As text, it shifts to #C2350A on light and #FF6A3D on dark to stay above AA.
Full token set: tokens.css · tokens.json
04 · Typography
Geist and Geist Mono.
Both are variable and licensed under the SIL Open Font License 1.1, and self-hosted as Latin-subset WOFF2. Large type is tight and heavy. Small type is open and calm.
Display XL · 600
Built for agents.
Display · 600
Move in one command.
Heading · 600
Every project is its own stack.
Body · 400
Keep supabase-js. Change the URL and keys. Nothing else.
Label · Mono
Early access
Code · Mono
createClient(process.env.SUPABASE_URL, key)
05 · Voice
Say what it does. Then stop.
“Revolutionise your data layer with AI-powered synergy.”
Buzzwords hide what the product does.
Facts only.
British English. No invented metrics, customers, logos or testimonials. Early access means no pricing yet.