Source Brand Kit

The Source
Brand Kit

The visual language of Source. Every color, typeface, logo, icon, and pattern — documented for designers and developers building on the brand.

Brand Guidelines
Logos, color, typography, icons, and usage rules. All assets are available to download directly from the sections below.
Explore Brand
Design System
Tokens, components, spacing, and layout rules for building consistent interfaces across all Source products.
Explore Design System
DESIGN.md
Machine-readable design spec. Copy the full file into any AI tool or codebase to stay on-brand automatically.
View DESIGN.md
01

Logo

Logos, icons, illustrations, backgrounds, and patterns. The complete visual library built on geometric precision and the pixel-dot grid motif.

Download Logos

Logo

The logo is our primary identifier, combining the S symbol with the Source wordmark. It should be used as the primary representation of the brand, especially in contexts where the audience may be unfamiliar with Source.

Source Source

Logo Assets

The Source logomark and horizontal lockup. Geometric hexagonal form evoking network nodes and connectivity.

Logo Lockup

Source logo — white on dark Source logo — black on light
White on Dark
Black on Light

Logomark Only

Source logomark — white on dark Source logomark — black on light
White on Dark
Black on Light

Product Logos

Product logos identify individual products within our ecosystem. They must always be used in their approved form and remain visually consistent with the primary brand.

SourceHub SourceHub SourceHub · #0EE09E
DefraDB DefraDB DefraDB · #10CBFF
Orbis Orbis Orbis · #BFFF00
LensVM LensVM LensVM · #FFA011

Product Icons

Each product in the Source ecosystem has a unique accent color applied to the shared geometric logomark.
SourceHub
#0EE09E
DefraDB
#10CBFF
Orbis
#BFFF00
LensVM
#FFA011

Identity & Color

All identity marks in their approved color applications. Use white or colored variants on dark surfaces, and black variants on light surfaces. Never swap them.

Source Brand
Source — white on dark
Source — black on light
Source — black on brand green
White · Dark background
Black · Light background
Black · Source Green · 7.49:1
Product Logos
SourceHub — color
DefraDB — color
Orbis — color
LensVM — color
SourceHub — black
DefraDB — black
Orbis — black
LensVM — black
SourceHub · #0EE09E
DefraDB · #10CBFF
Orbis · #BFFF00
LensVM · #FFA011

Construction

The symbol and wordmark are precisely proportioned, spaced, and aligned to function as a unified logo. Do not modify or reconstruct the logo in any way.

Logo construction diagram Logo construction diagram

Clearspace

When placing surrounding elements near the identity, always allow enough space for it to remain clear and unobstructed. Use the following minimum spacing guidelines for each application.

Logo clearspace diagram Logo clearspace diagram
02

Color Palette & Roles

The Source palette is intentionally constrained. One brand green dominates. Product accents are isolated to their contexts. Click any swatch to copy.

Core palette

The following colors make up our core palette. These tones form the foundation of the system and should be prioritized whenever the palette needs to remain focused or minimal.

Primary
Green
#06B250
RGB 6, 178, 80
CMYK 97%, 0%, 55%, 30%
Secondary
Highlight
#39e265
RGB 57, 226, 101
CMYK 75%, 0%, 55%, 11%
White
#FFFFFF
RGB 255, 255, 255
CMYK 0%, 0%, 0%, 0%
Black
#000000
RGB 0, 0, 0
CMYK 0%, 0%, 0%, 100%
Obsidian
#0B0B0B
RGB 11, 11, 11
CMYK 0%, 0%, 0%, 96%
Ink
#222222
RGB 34, 34, 34
CMYK 0%, 0%, 0%, 87%
Gray
#E5E5E5
RGB 229, 229, 229
CMYK 0%, 0%, 0%, 10%

Extended palette

Our extended palette reflects our varied history of color use. These values should only be used in branded materials, primarily for sub-brand color systems.

Primary
SourceHub
#0EE09E
RGB 14, 224, 158
CMYK 94%, 0%, 29%, 12%
Primary
DefraDB
#10CBFF
RGB 16, 203, 255
CMYK 94%, 20%, 0%, 0%
Primary
Orbis
#BFFF00
RGB 191, 255, 0
CMYK 25%, 0%, 100%, 0%
Primary
LensVM
#FFA011
RGB 255, 160, 17
CMYK 0%, 37%, 93%, 0%
03

Typography

Three typefaces form the complete system. Funnel Display for headlines, Inter for body and UI, CommitMono for code.

Typefaces

Typography is one of our most important communication tools. It carries our brand voice and helps define our tone, personality, and message.

Headlines
Funnel Display 400
AaBbCc
&?!.0123
Headlines & display. Weight 400, negative tracking.
fonts.google.com ↗
Body
Inter 300–600
AaBbCc
&?!.0123
Body copy, UI labels, all text. Variable axes: opsz, wght.
rsms.me/inter ↗
Code
CommitMono 400
AaBbCc
&?!.0123
Code blocks, technical strings, and monospace UI.
commitmono.com ↗

Weights

Weight choices are intentional and limited. Funnel Display is used exclusively at 400 for a clean, editorial feel. Inter spans 300–600 to cover the full range of UI hierarchy. CommitMono stays at 400 — code needs clarity, not emphasis.

Funnel Display
400 Regular AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
Inter
600 SemiBold AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
500 Medium AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
400 Regular AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
300 Light AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
CommitMono
400 Regular AaBbCcDdEeFfGgHhIiJjKkLl0123456789.,&?!
04

Visuals

Icons, illustrations, backgrounds, and patterns — the full visual language built on the pixel-grid motif.

Iconography

Iconography follows our signature pixel-art geometric style. Icons are simplified, structured, and consistent to ensure clarity at all sizes while reinforcing the visual language of the brand.

Code
P2P
Magic
Source
Think
Control
Software
Question
Your Data
Text
Started
Right Arrow
Transform
Search
Distribute
Database
Lens
Connect
Branch
Compose

Icon Construction

Icon construction is based on square shapes. These shapes are grouped together and unified, then a consistent border radius is applied to the group to create the final icon form.

Icon Construction Diagram

Illustration

Illustrations are used to support storytelling and add clarity to complex ideas. They should feel consistent with our visual system, using simplified forms, controlled detail, and a cohesive tone that reinforces the brand without overpowering content.

Hero Illustration

The flagship brand illustration — the word "source" rendered in the pixel-dot grid motif at massive scale. Used for landing pages and hero sections.
Hero Illustration 1
Hero Illustration 2
PNG + SVG · SVG + PNG available

T3 Illustrations

Feature illustrations using the pixel-dot grid system. Used for landing pages, feature sections, and marketing surfaces.
T3 Sample 1
T3 Sample 2
Pixel-dot grid illustrations · PNG + SVG · Source Green (#06B250) on transparent

Backgrounds

Full-width pixel-dot grid backgrounds for page sections and marketing surfaces. 1456x800 base size. Available on white and black canvases.
Background 1
Background 1
Background 3
Background 3 — Dark
Background 2
Background 2
Background 4
Background 4 — Diagonal
1456x800 · SVG + PNG @2x/@4x · Pixel-dot grid on transparent or black canvas
05

Visual Theme & Atmosphere

A developer-tools brand built on geometric precision and pixel-grid density. Flat vector, single dominant green, no gradients, no shadows.

■
Flat Vector Only
No gradients, no blur, no drop shadows anywhere in the system.
▦
Pixel-Grid Aesthetic
Small rounded rectangles at varying scales evoke data nodes and networks.
●
Single Color Dominance
#06B250 green with product-specific accents.
▲
High Contrast
Green on black, green on white, white on black. Always bold pairings.
06

Color Scales

Expanded tonal scales derived from the core palette. Each scale is anchored to a brand color — hover to see the hex, click to copy.

Background
Gray
Green
Highlight
Mint
Cyan
Lime
Amber
07

Type Scale

The full typographic scale across all three typefaces. Each size maps to a CSS custom property and a rem equivalent.

Funnel Display
Source
86px · 5.375rem · 400
Build Without Limits
74px · 4.625rem · 400
Decentralized by Default
56px · 3.5rem · 400
Peer-to-Peer Networking
36px · 2.25rem · 400
Data Sovereignty
28px · 1.75rem · 400
Inter
Source provides the tools developers need to build applications where data stays with the user — private, portable, and verifiable.
20px · 1.25rem · 300
DefraDB is a user-centric database built on peer-to-peer networking with fine-grained access control and verifiable data integrity.
18px · 1.125rem · 400
SourceHub decouples the data layer from application logic, enabling composable data experiences across the decentralized web.
16px · 1rem · 400
Licensed under the Apache 2.0 License. Contributions welcome.
14px · 0.875rem · 300
DefraDB · SourceHub · Orbis · LensVM
12px · 0.75rem · 300
CommitMono
$ defradb start --p2p --peers /ip4/192.168.1.1/tcp/9171/p2p/QmXf9e
14px · 0.875rem · 400
08

Component Stylings

Live, interactive component specimens showing every button, card, badge, and icon variant.

Buttons

Two primary button contexts — Brand for presentational surfaces like hero sections and landing pages, App UI for product interfaces. Secondary, ghost, and tertiary styles are shared across both contexts.

Brand / Presentational
primary: Funnel Display, radius-lg · secondary: corner brackets · ghost: rgba border, radius-md
App UI
primary: Inter medium, radius-md · secondary: outlined border, radius-md · ghost: rgba border, radius-md
icon: 2rem square, rounded-none · outline + border-bottom · white/50 → green on hover · iconFill: active/selected state

Cards

Light Card
Edge-Native Code
Run your application logic at the edge with built-in peer-to-peer synchronization.
bg: #FFF · border: 1px solid #E5E5E5 · radius: 12px · padding: 24px
Dark Card
P2P Networking
Peer-to-peer data sync without centralized servers or cloud dependencies.
bg: #111 · border: 1px solid #222 · radius: 12px · padding: 24px

Badges & Tags

Source SourceHub DefraDB Orbis LensVM
radius: 9999px (pill) · padding: 4px 10px · font: Inter 12px/500
09

Layout Principles

8px base grid with a constrained spacing scale. Generous whitespace between sections creates breathing room.

Spacing Scale

Tight
4px · 0.25rem
Compact
8px · 0.5rem
Base
16px · 1rem
Comfortable
24px · 1.5rem
Spacious
32px · 2rem
Loose
48px · 3rem
Open
64px · 4rem
Section
96px · 6rem

Border Radius Scale

4px
radius-sm
8px
radius-md
12px
radius-lg
16px
radius-xl
9999px
radius-pill
10

Depth & Elevation

Source is entirely flat. Depth is achieved through color contrast and border hierarchy, never shadows.

Level 0
Flat — no border, no shadow
Level 1
Outlined — 1px border
Level 2
Surface lift — tinted bg
Overlay
Semi-transparent backdrop
11

Do's and Don'ts

Explicit guardrails to keep designs on-brand. Follow these rules for consistent output.

Do
  • Use #06B250 as the primary action and accent color
  • Pair green with black or white only — high contrast
  • Use Funnel Display for headlines and brand text; Inter for everything else
  • Apply negative letter-spacing at display sizes
  • Keep illustrations in the pixel-dot grid style
  • Use product accents only within their product context
  • Keep design flat: borders and surface color, never shadows
Don't
  • Don't use gradients — the brand is entirely flat
  • Don't apply drop shadows or box shadows
  • Don't use green for large background fills in body areas
  • Don't mix product accent colors with each other
  • Don't introduce colors outside the defined palette
  • Don't use pill-shaped buttons for primary CTAs (use 8px radius)
12

Responsive Behavior

Four breakpoints govern layout collapse.

Breakpoints

Name Min Width Columns Notes
Mobile 0px 1 Single column, stacked
Tablet 768px 2 Two-column grids
Desktop 1024px 12 Full grid layout
Wide 1440px 12 Max content width reached

Collapsing Strategy

Element Desktop Tablet Mobile
Navigation Horizontal links Horizontal links Hamburger menu
Card grids 3 columns 2 columns 1 column
Hero headline 72px 56px 40px
Section spacing 96px 64px 48px
Product icons Full lockup Full lockup Icon only
13

Agent Prompt Guide

Quick reference tables and copy-paste prompts for AI coding agents to generate on-brand UI.

Quick Color Reference

Primary brand#06B250
SourceHub accent#0EE09E
DefraDB accent#10CBFF
Orbis accent#BFFF00
LensVM accent#FFA011
Surface light#FFFFFF
Surface dark#000000
Border light#E5E5E5
Border dark#222222

Quick Typography Reference

Display fontFunnel Display (wt 400)
Body fontInter (all other text, wt 400-600)
Button fontInter 14px weight 500
Code fontmonospace 14px weight 400

Example Component Prompts

Hero Section (Dark)
Create a hero section on a black (#000000) background. Headline in Funnel Display 86px weight 400, line-height 0.9, letter-spacing -2.5px, color white (#FFFFFF). Subtitle in Inter 18px weight 300, line-height 1.6, color #737373. Primary CTA — Brand/Presentational style: #39e265 background, black text, Funnel Display weight 400, 16px, 12px border radius, 48px height. No shadows anywhere.
Feature Card Grid (Light)
Create a 3-column card grid on white (#FFFFFF) background. Each card: white background, 1px solid #E5E5E5 border, 12px border radius, 24px padding, no shadow. Card title: Inter 20px weight 600, #000000. Body text: Inter 16px weight 400, #000000. Each card has a 24x24 pixel icon in #06B250 above the title. Gap: 24px. Buttons inside cards use App UI style: #39e265 background, black text, Inter weight 500, 8px border radius.

Iteration Checklist

# Check
1 All colors match exact hex values — no approximations
2 Funnel Display for headlines and brand text, Inter for everything else
3 No shadows exist anywhere — depth is borders and surface color only
4 Product accent colors isolated to their respective product contexts
5 Pixel-grid / geometric aesthetic maintained in custom elements
6 All interactive elements have hover, focus, and disabled states
7 Responsive: layouts collapse correctly, type scales down, spacing reduces

DESIGN.md

A machine-readable design system spec for Source. Drop it into any project root and AI coding agents will read it to generate on-brand UI automatically — correct colors, typography, spacing, and component patterns without manual setup.

DESIGN.md