# Basequel brand guidelines

Basequel is a managed, Supabase-compatible backend platform from Sequel AI. The brand should feel like infrastructure you can trust: precise, quiet, confident. Sharp geometry, generous space, high contrast, one accent used sparingly.

## 1. The mark

The mark is an angular **B**: a flat vertical spine with two right-pointing lobes. The lower lobe is slightly larger, as in a well-drawn B. Both counters are open, through two slits of equal width.

It is built on a strict grid, not traced:

| Property | Value |
| --- | --- |
| Proportion | 1 : 2 (300 × 600 units) |
| Stroke weight | 72 units (0.12 × height). The spine and every diagonal share it, measured perpendicular to the stroke |
| Angle | Every diagonal runs at 32° (rise 5 : run 8) |
| Slits | 30 units, measured perpendicular. The upper slit opens the top counter to the left; the lower slit opens the bottom counter to the right |
| Tips | Both lobes end in flat vertical tips. The upper tip sits at 260 units and the lower at 300 |

Source: `_src/mark.py` generates the geometry, and `_src/build_logos.py` builds every file from it. Change the constants there, never in the SVGs.

### Files

| File | Use |
| --- | --- |
| `logo/basequel-mark-black.svg` | Mark on light backgrounds |
| `logo/basequel-mark-white.svg` | Mark on dark backgrounds |
| `logo/basequel-mark-accent.svg` | Mark in Signal, for special moments such as launch graphics. Not for body UI |
| `logo/basequel-mark-adaptive.svg` | Follows the viewer's light or dark preference where SVG `<style>` is honoured |
| `logo/basequel-horizontal-*.svg` | Primary lockup: mark and wordmark side by side |
| `logo/basequel-stacked-*.svg` | Stacked lockup, for square or narrow spaces |
| `logo/basequel-wordmark-*.svg` | Wordmark alone, for when the mark already appears nearby |
| `logo/mono/*` | Pure #000 or #FFF single-colour versions, for print, embossing and partner placements |
| `icons/*` | App icons, favicons and the social avatar |

The wordmark is set in **Geist SemiBold** with −0.02 em tracking and **converted to outlines**, so the files need no font.

### Colourways

- **Default:** Ink (#0B0B0C) on light, and Paper (#FFFFFF) on dark.
- **Accent:** the mark in Signal (#FF4F1A) with an Ink or Paper wordmark. Use it once per surface at most.
- **Mono:** pure black or pure white, for when only one colour is available.
- On a Signal background, always use the Ink mark. Never use white on Signal: it falls below 4.5:1.

### Clear space

Keep clear space of **X = half the mark's width** (one quarter of the mark's height) on every side of the mark or lockup. Nothing goes inside it: no text, no edges, no other logos.

### Minimum size

| Asset | Digital | Print |
| --- | --- | --- |
| Mark | 16 px tall | 6 mm tall |
| Horizontal lockup | 20 px tall (≈ 82 px wide) | 8 mm tall |
| Stacked lockup | 48 px tall | 18 mm tall |

Below 16 px, use the favicon tile (`icons/favicon.svg`), which puts the mark on a solid square.

### Don't

- Don't redraw, outline, bevel, add shadows to or rotate the mark.
- Don't close the slits or change the angle.
- Don't put the mark on busy photography without a solid backing.
- Don't recolour the mark outside the palette, and don't use gradients.
- Don't set "Basequel" in another typeface next to the mark. Use the lockup files.
- Don't use the rejected alternative B.

## 2. Colour

One accent, a disciplined neutral scale, and two equally finished themes.

### Signal — #FF4F1A

**Why Signal:** database and backend brands cluster around green (Supabase among them), purple and blue. Basequel is Supabase-compatible, so it needs to be told apart at a glance. A warm red-orange does that. It reads as *live*, *go* and *alert* — the language of a status light, not a marketing gradient. It also suits the mark's forward-pointing geometry.

It works in both themes:

- As a **fill** (buttons, the eyebrow triangle, selection), Signal carries **Ink text at 5.98 : 1**, the same in light and dark.
- As **text on light**, use the deeper `accent-text` **#C2350A** (5.52 : 1 on white).
- As **text on dark**, use the brighter **#FF6A3D** (7.0 : 1 on #08090A).

Use Signal for the primary action and small markers. If more than about 5% of a screen is orange, it's too much.

### Neutrals

| Token | Light | Dark |
| --- | --- | --- |
| bg | #FFFFFF | #08090A |
| bg-alt | #F7F7F6 | #0C0D0F |
| surface | #FFFFFF | #0E0F11 |
| surface-2 | #F4F4F3 | #141518 |
| text | #0B0B0C (19.7 : 1) | #EDEDEF (17.0 : 1) |
| text-2 | #3A3A40 | #C9C9CE |
| muted | #56565E (7.3 : 1) | #A1A1AA (7.8 : 1) |
| subtle | #6E6E77 (5.1 : 1) | #85858F (5.5 : 1) |
| line | #E7E7E5 | #1D1E22 |
| line-strong | #D5D5D2 | #2A2B30 |
| accent-text | #C2350A | #FF6A3D |
| ok | #0F7B3F | #3CCF7A |
| danger | #B42318 | #FF7A6B |

Machine-readable versions are in `tokens/tokens.json` and `tokens/tokens.css`.

## 3. Typography

- **Geist**, a variable sans from 100 to 900, for display and body text.
- **Geist Mono** for code, labels and data.

Both are licensed under the SIL Open Font License 1.1 (`fonts/OFL-Geist.txt`). The website self-hosts a Latin subset as WOFF2.

| Role | Size | Line height | Tracking | Weight |
| --- | --- | --- | --- | --- |
| Display XL (hero) | 42 → 86 px fluid | 0.98 | −0.048 em | 600 |
| Display (section) | 32 → 54 px fluid | 1.02 | −0.042 em | 600 |
| Heading | 22 px | 1.15 | −0.03 em | 600 |
| Title | 18 px | 1.3 | −0.015 em | 600 |
| Lede | 17 → 20 px fluid | 1.55 | 0 | 400 |
| Body | 16 px | 1.6 | 0 | 400 |
| Small | 13 px | 1.5 | 0 | 400 |
| Label (Geist Mono, uppercase) | 12 px | — | +0.08 em | 500 |
| Code (Geist Mono) | 13 px | 1.75 | 0 | 400 |

Large type is tight and heavy. Small type is open and calm. Never track out body text.

## 4. Layout and motion

- A 1200 px content column with hairline vertical rails, and sections divided by 1 px rules. Grids of cards share their borders, with 1 px gaps on the line colour.
- Use the right-pointing triangle from the mark as the bullet and marker motif, at 7 px.
- Motion is short and precise: 150–700 ms on `cubic-bezier(0.2, 0.7, 0.1, 1)`, mostly fades and 14 px rises. All non-essential motion turns off under `prefers-reduced-motion`.

## 5. Voice

Crisp, specific and confident, in British English. Short sentences. Say what it does, then stop.

- **Do:** "Keep supabase-js. Change the URL and keys."
- **Don't:** "Revolutionise your data layer with next-gen AI-powered synergy."
- State facts. Don't invent metrics, customers, logos or testimonials.
- Early access is honest: there's no pricing and no self-serve sign-up yet.

## 6. Pack contents

```
basequel-brand/
  BRAND.md                this guide (also published at basequel.com/brand)
  logo/                   mark, horizontal, stacked and wordmark: black, white and accent
  logo/mono/              pure black and pure white single-colour versions
  icons/                  favicon.svg and .ico, PNGs at 16, 32, 180, 192 and 512, apple-touch-icon,
                          app-icon tiles, 400×400 social avatar
  social/                 Open Graph images, 1200×630, light and dark
  tokens/                 tokens.json, tokens.css
  fonts/                  Geist and Geist Mono variable WOFF2, plus the OFL licence
  _src/                   generators (mark.py, wordmark.py, build_logos.py, render.js)
```