Skip to content

BRAND.md

Latest commit

 

History

History
181 lines (144 loc) · 10.9 KB

BRAND.md

File metadata and controls

181 lines (144 loc) · 10.9 KB
Raw

Lunora Brand Guide

Short and opinionated. The goal: make Lunora instantly recognizable, distinct from Cloudflare itself, and legible everywhere — terminal, README, docs, video.

This file owns the mark, wordmark, voice, and the canonical copy. The full visual spec — color, surface, type scale, motion — lives in design-tokens/DESIGN.md, with the consumable values in design-tokens/tokens.css (Tailwind v4) and design-tokens/tokens.ts (JS/TS). When this guide and the tokens disagree, the tokens win — fix this file.

Concept

Lunora = Luna + Aurora. A real-time backend that runs globally, at the edge, while you sleep. The identity is nocturnal and luminous: a deep night sky, cool moonlight neutrals, and a single aurora ribbon used sparingly for energy. The structure is refined-brutalist — sharp rectangles, hairline rules, mono labels — to match the product surface. Sharp edges, soft light.

Three words: nocturnal · luminous · precise.

Logo

The Lunora mark is the moon — a single crescent/swirl glyph (the 🌙 in the name). It reads as luna, night, and the curve of an orbit at the edge.

  • Canonical geometry: ../.github/assets/lunora.svg (viewBox="0 0 543 446", one path). Every other copy derives from this — do not redraw it.
  • ASCII / text form: 🌙 (CLI banners, small badges, places where rasterised art is wasted).
  • Works at 16px and 1200px without modification.

Two fills

Fill When Reference
Ink (currentColor, near-black #040404 on light / moonlight on dark) Default. Monochrome contexts: README, CLI, docs nav, the marketing video (white-on-black). Inherits currentColor, so it flips with the surface. .github/assets/lunora.svg, apps/docs/src/assets/lunora_logo.svg
Aurora gradient Expressive moments only: the favicon, OG cards, hero accents. apps/docs/public/favicon.svg

The favicon ships an animated aurora gradient (a 20s loop through #E53935 → #8E44AD → #0073E6). The design system's canonical static ribbon is the slightly cooler aurora ramp — Aurora Cyan → Violet → Rose (see Palette). Violet is the through-line of both; if you unify them, unify toward the token ramp.

Assets

File Purpose
../.github/assets/lunora.svg Canonical mark — ink, viewBox 543×446. Source of truth for geometry.
apps/docs/src/assets/lunora_logo.svg Docs mark — same path, currentColor fill (used by the navbar/footer React components).
apps/docs/public/favicon.svg Favicon — moon filled with the animated aurora gradient.
apps/docs/public/og-default.jpg Default Open Graph card. Per-page OG is generated at apps/docs/src/routes/api/og.ts.
videos/public/brand/lunora.svg (in the lunora-marketing repo) Mark mirrored for the Remotion video project (+ cloudflare.svg for the "Built for Cloudflare" beat).

There is no separate wordmark/lockup SVG today — the wordmark is set in live text next to the mark (see Typography). Generate a static lockup only if a context needs it.

Wordmark

The wordmark is the product name set in Geist Sans, weight 600, lowercase, tight tracking, beside the mark. Always lowercase (lunora, never Lunora or LUNORA). In prose, the product name is capitalised at sentence start as a normal English word ("Lunora is …").

Palette

Full table + tokens in design-tokens/DESIGN.md. The short version:

  • Night & moonlight (neutrals). Cool blue-violet cast (hue ~240), never neutral gray. Eclipse base #0e0e11 (--dark-coal), midnight hsl(240 14% 6%), raised surfaces hsl(240 14% 9%), moonlight text hsl(228 30% 96%). The dark theme is primary; a light "paper" variant exists (:root in tokens.css).
  • Aurora (accents). One luminous ramp — Cyan hsl(186 84% 56%) → Violet hsl(256 72% 68%) → Rose hsl(330 80% 64%) — used as the aurora ribbon gradient on the focal moment (hero headline accent, active underline, focus ring), or individually for state (cyan = info/active, violet = primary, rose = emphasis). Aurora is light, not paint: keep it under ~10% of any view.
  • Primary glow = Aurora Violet — the closest thing to a single brand color, and the one deliberate color beat behind the mark on logo reveals.
  • Amber is data-status only (warnings), never a brand accent.

Hard rule: never recolor the mark — or anything — Cloudflare orange (#F38020) or imply Lunora is a Cloudflare product. Lunora runs on Cloudflare; it is not Cloudflare. The brand's warm note is the aurora rose/red inside the gradient, never CF orange.

Typography

  • Wordmark & display: Geist Sans, weight 600, lowercase, tight tracking.
  • Body / docs: Geist Sans (--font-sans).
  • Code, labels, file tabs, numbers, the install command: Geist Mono (--font-mono). Mono is a recurring motif — it signals "this is real code."

(Tokens define --font-sans / --font-mono / --font-display as Geist; the fonts are loaded by each surface.)

Canonical copy

The one-liner, repeated until it's boring: "Convex DX on your own Cloudflare account." From the marketing video (videos/src/shared/theme.ts):

  • Tagline: Real-time. End-to-end typed. On your own Cloudflare.
  • Outro: Real-time, typed, and entirely yours.
  • Eyebrow: Built for Cloudflare.
  • First step / CTA: pnpm dlx lunorash@alpha init
  • Kinetic beats: REAL-TIME · TYPE-SAFE · EDGE-NATIVE · NO LOCK-IN · YOUR CLOUDFLARE.

Lunora Cloud (planned)

The open-source framework is the engine; Lunora Cloud is the planned managed product on top of it (the business — see the marketing plan). Brand stance:

  • One brand, a descriptor — not a sub-brand. It's "Lunora Cloud," under the same moon mark and the same Luna+Aurora system. No second logo, no separate identity. Splitting a zero-to-small audience across two brands this early is a cost with no upside.
  • The two mark-fills carry the free/paid distinction. This is the job the gradient fill earns:
    • Ink mark → the open-source framework (README, CLI, docs).
    • Aurora-gradient mark → Lunora Cloud — the hosted, "luminous" tier. The aurora is Cloud's signature; the OSS stays monochrome.
  • Brand promise: no lock-in, not "no SaaS". The wedge isn't "never a managed service" — it's choice. The same code runs two ways: self-host it on your own Cloudflare account (free, open source, your data), or let Lunora Cloud run it for you (managed). You're never forced onto our cloud the way Convex forces you onto theirs — you can always take the OSS and self-host. That freedom is the promise. Sell Cloud on convenience (managed Studio, observability, point-in-time restore, team/RBAC, one-click deploy + CI, backups, a human on support), never on lock-in. (Open decision #6: whether Cloud runs on Lunora's infra or deploys into the customer's own Cloudflare account — resolve before Cloud-facing copy ships.)
  • Investment is deliberately deferred. The product doesn't exist yet. What we do now: reserve the name (here), use the aurora-mark variant + a one-field waitlist CTA on the docs site, and nothing more. No pricing brand, dashboard identity, or landing system until there's a product to attach them to.

Do

  • Use the moon mark alone where space is tight (favicon, CLI banner, small badges); pair it with the lowercase wordmark for any wider lockup.
  • Keep generous clear space around the mark (≥ the width of one stroke).
  • Use the ink fill in monochrome contexts; reserve the aurora gradient for expressive moments (favicon, OG, hero).
  • Let exactly one aurora glow live per view — ideally Aurora Violet behind the mark or the hero.
  • Keep structural chrome sharp (rounded-none); depth comes from a hairline, not a shadow.

Don't

  • Don't tint the mark Cloudflare orange (#F38020) or any color that implies a Cloudflare product.
  • Don't flood a surface with aurora — it's an accent (≤ ~10% of a view), not a background.
  • Don't add a drop shadow, bevel, or glassy blur to flat panels — use the hairline; the only thing that glows is the aurora.
  • Don't lock the wordmark into uppercase or title case.
  • Don't redraw the moon — derive every copy from .github/assets/lunora.svg.
  • Don't reach for the gradient ribbon anywhere but the focal moment, or it stops being special.

Voice

  • Direct, technical, not marketing-y. Lunora is for engineers who already know what a Durable Object is.
  • Be honest about the alpha status and the trade-offs (fewer batteries than Convex; you own the infra).
  • Avoid superlatives. Show, don't claim — lead with code, demos, and the launch video.

Where the brand is applied

design-tokens/tokens.css is the single source for color/type/radius; it's @imported by the docs site (apps/docs) and the Studio (packages/studio, mirrored under its own namespace). The Remotion video project — now in the separate lunora-marketing repo — renders a pure-monochrome white-on-black treatment with one aurora-violet glow behind the mark. Marketing copy lives in social/.