Brand

Lockup#

The wordmark pairs Satoshi Bold (“Well”) with DM Serif Display Italic (“Sourced”). The italic serif is intentional — it's the only serif glyph in the whole system, and that's what makes it recognizable.

Mark on its own#

The mark is used alone only when context already establishes the brand — favicon, app icon, small UI surface where the full lockup would crowd. Otherwise, default to the lockup.

Usage rules#

• Clear space. Minimum clear space around the lockup is the height of the “W”. Nothing — no text, no image, no chart — enters that zone.
• Minimum size. Lockup: 80 px wide. Mark: 20 px square. Below that, legibility breaks.
• Color. Preferred: teal mark + ink wordmark on sand. On dark backgrounds, invert to teal-light + white. Never recolor the wordmark italic.
• Do not.
  • Stretch, squash, or skew.
  • Swap the italic serif for a sans italic (or vice versa).
  • Place over busy imagery without a contrast-safe scrim.
  • Outline, shadow, or add a glow.

Code#

import { Lockup, LogoMark } from "@/components/ui/Logo";

<Lockup size="md" />             // Default, light
<Lockup size="lg" tone="inverse" />  // For dark backgrounds
<LogoMark size={28} className="text-teal" />

Downloads#

SVG, PNG, and brand-kit bundles are on the roadmap — tracked in the changelog. In the meantime, render from the components above.