INTERNAL & PARTNER USE

Sombra Brand Kit

Visual identity, product language, and partner guidelines.
Version 1.0 — March 2026

LOGO

Logo & Brandmark

The Sombra logo consists of a purple icon mark and the wordmark set in Outfit Semibold. Always maintain clear space equal to the height of the icon around the full lockup.

Sombra

Primary — on dark backgrounds

Sombra

On light backgrounds

Sombra

Monochrome

COLOR PALETTE

Colors

Primary palette used across all surfaces. Dark sections use Sombra Black; light sections use Warm Off-White. Purple is the primary accent; Green signals active/success states.

Sombra Black

#000019

Sombra Purple

#7c7aff

Sombra Green

#05df72

Warm Off-White

#F5F2EE

Dark Text

#0f0f2e

Hero Headline Gradient

Linear 135° · #ffffff → #7c7aff
Used on H1 accent line ("built for advice firms")

Footer Radial Glow

Radial · #7c7aff22 → transparent
Center bottom, used on all footers

TYPOGRAPHY

Outfit — Our Typeface

Outfit is used across all surfaces — marketing, product UI, and partner materials. It's geometric, modern, and highly legible at all sizes. Available on Google Fonts.

Page Heading Bold 700 · 48–64px
Line height 1.05
Section Heading Semibold 600 · 36–40px
Line height 1.1
Card or Subsection Title Semibold 600 · 18–20px
Line height 1.3
Body text used for descriptions, paragraphs, and supporting content across all pages. Regular 400 · 14–16px
Line height 1.5–1.6
EYEBROW LABEL Semibold 600 · 13px
Letter spacing 2 · Uppercase

PRODUCT LANGUAGE

Naming Conventions

Sombra is one product with two layers. Use these terms consistently across all materials.

Sombra

The product. One product, two layers. Always capitalised, never pluralised.

Sombra Swarm

The agent layer. Teams of AI agents doing jobs for the firm. Brand name for the full agent product.

Sombra Intelligence

The conversation layer. File notes, adaptive learning, firm-wide insights. Activates when conversations flow through Sombra.

"Team"

The individual unit inside the Swarm. A group of agents doing one job. Use like an org chart role.

✓  "Your Regulatory Watch team"
✗  "Your Regulatory Watch swarm"

"Swarm"

ONLY the whole product layer, NEVER individual units. Refers to the full fleet of teams working across the firm.

✓  "The Sombra Swarm"
✗  "A compliance swarm"

Tiers

Free, Practice, and Firm. Never "Swarm tier" or "Intelligence tier." Tier names describe the customer, not the product layer.

PARTNER BRANDING

Powered by Claude

Sombra is powered by Claude (Anthropic). We use the "Powered by Claude" mark per Anthropic's official brand guidelines. This signals our AI provider to technical audiences without implying we are an Anthropic product.

Badge (Footer)

Powered by Claude

Used in all page footers

Text Mark (In-page)

Sombra Swarm · Powered by Claude

Used near Swarm Builder section

Allowed

✓  "Powered by Claude"
✓  "Sombra Swarm Powered by Claude"
✓  "Claude" (within an Agents menu)
✓  "Claude Agent" (in dropdown menus)
✓  Terracotta dot (#d97757) as icon mark

Not Permitted

✗  "Claude Code" or "Claude Code Agent"
✗  Claude Code ASCII art or visual elements
✗  Anything implying Sombra IS an Anthropic product
✗  OpenAI, GPT, or other provider branding
✗  Modifying the Claude logomark colors

DESIGN PATTERNS

Section Anatomy & Alternation

All pages follow a strict dark/light alternation pattern. Each section uses full-width padding (120px horizontal, 80px vertical) with consistent vertical rhythm.

Nav
Dark
Hero
Dark
Content
Light
Content
Dark
Content
Light
CTA
Dark
Footer
Dark

Section Spacing

Horizontal padding: 120px
Vertical padding: 80px
Inter-section gap: 0 (sections stack)
Content width: 1200px (1440 − 240)

Glass Card (Dark)

Fill: #ffffff08
Stroke: #ffffff14 (inside, 1px)
Corner radius: 16px
Padding: 28px
Shadow: 0/0/30 #7c7aff33 (optional)

Card (Light)

Fill: #ffffff
Stroke: #0f0f2e14 (inside, 1px)
Corner radius: 16px
Padding: 28px
Text: #0f0f2e (primary)
Muted: #0f0f2e99

Text Opacity Scale

Primary: ff (100%)
Body: b3 (70%)
Secondary: 99 (60%)
Muted: 66 (40%)
Disabled: 40 (25%)

Same ratios on both dark (#fff__) and light (#0f0f2e__) backgrounds.