Brand Design System

The Source Brand Kit

A comprehensive design system for decentralized data infrastructure. Explore every color, typeface, component, and pattern that makes Source.

Explore Colors View Components

01

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.

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.

Brand Primary

Source Green

#06B250

Primary brand, CTAs, icons, patterns

Product Accents

SourceHub Mint

#0EE09E

SourceHub product identity

DefraDB Cyan

#10CBFF

DefraDB product identity

Orbis Lime

#BFFF00

Orbis product identity

LensVM Orange

#FFA011

LensVM product identity

Neutrals

White

#FFFFFF

Light surfaces, logo on dark

Black

#000000

Dark surfaces, logo on light

Border Light

#E5E5E5

Card borders on light surfaces

Border Dark

#222222

Card borders on dark surfaces

03

Brand Assets

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

Logo Assets

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

Horizontal Lockup

Black on Light

White on Dark

Logomark Only

Black on Light

White on Dark

Pixel Icons

24x24px UI icons in the signature pixel-art geometric style. All rendered in Source Green (#06B250).

Code

P2P

Magic

Source

Think

Control

Software

Question

Your Data

Text

Started

Right Arrow

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

04

Typography Rules

Two font families form the complete type system. Funnel Display for impact, Inter for everything else.

Type Scale

Display Hero Funnel Display 72px / 700 / -2.5px

Source

Display Large Funnel Display 56px / 600 / -2.0px

Decentralized Data

Display Medium Funnel Display 40px / 600 / -1.5px

Edge-Native Infrastructure

Heading 1 Funnel Display 32px / 600 / -1.0px

Peer-to-Peer Networking

Heading 2 Inter 24px / 600 / -0.5px

Data Sovereignty & Privacy

Heading 3 Inter 20px / 600 / -0.3px

Verifiable & Auditable

Body Large Inter 18px / 400 / normal

Source provides the tools developers need to build applications where data stays with the user.

Body Inter 16px / 400 / normal

DefraDB is a user-centric database built on peer-to-peer networking with fine-grained access control and verifiable data integrity.

Body Small Inter 14px / 400 / normal

Licensed under the Apache 2.0 License. Contributions welcome.

Caption Inter 12px / 500 / 0.2px

LAST UPDATED MAY 2026 · v3.2.1

Code Monospace 14px / 400 / normal

          $ defradb start --p2p --peers /ip4/192.168.1.1/tcp/9171
        

05

Component Stylings

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

Buttons

Light Background

            radius: 8px · padding: 10px 20px · font: Inter 14px/500
          

Dark Background

            ghost border: 1px solid rgba(255,255,255,0.2)
          

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
      

Navigation Bar

Products Docs Community Blog

        height: 64px · border-bottom: 1px solid #E5E5E5 · links: Inter 14px/500
      

06

Layout Principles

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

Spacing Scale

space-xs

space-sm

space-md

space-lg

space-xl

space-2xl

space-3xl

space-section

Border Radius Scale

4px

radius-sm

8px

radius-md

12px

radius-lg

16px

radius-xl

9999px

radius-pill

07

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

08

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 at 32px+; Inter below
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 use Funnel Display below 32px
Don't introduce colors outside the defined palette
Don't use pill-shaped buttons for primary CTAs (use 8px radius)

09

Responsive Behavior

Four breakpoints govern layout collapse. Touch targets are always at least 44x44px.

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

10

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 (32px+, wt 600-700)

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 at 72px weight 700, line-height 1.05, letter-spacing -2.5px, color white (#FFFFFF). Subtitle in Inter at 18px weight 400, line-height 1.55, color white. Primary CTA button with #06B250 background, white text, Inter 14px weight 500, 8px border radius, 10px 20px padding. No shadows anywhere.

Feature Card Grid (Light)

Create a 3-column card grid on white background. Each card has white (#FFFFFF) background, 1px solid #E5E5E5 border, 12px border radius, 24px padding. Card title in Inter 20px weight 600, #000000. Body text in Inter 16px weight 400, #000000. Each card has a 24x24 pixel icon in #06B250 above the title. Gap between cards: 24px. No shadows.

Navigation Bar

Create a navigation bar at 64px height. White background, logo on the left (Source logomark). Navigation links in Inter 14px weight 500, black text. Primary CTA button on the right using brand green (#06B250) background, white text, 8px radius. No shadow on the nav bar — use a 1px solid #E5E5E5 bottom border if separation is needed.

Iteration Checklist

#	Check
1	All colors match exact hex values — no approximations
2	Funnel Display used only at 32px+ display sizes, 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

11

Illustrations & Graphics

Hero illustrations, feature graphics, backgrounds, and accent patterns. The pixel-dot grid motif at every scale.

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.

1000x1000 · Pixel-grid typography · SVG + PNG @2x/@4x available

T3 Illustrations

Feature illustrations using the pixel-dot grid system. Each conveys a core concept in the Source ecosystem — decentralized data, edge computing, privacy, and satellite systems.

Decentralized Data

Edge AI

Stop Sending Data to the Cloud

Data Compatibility & Privacy

Space & Satellite Systems

Pixel-dot grid illustrations · PNG @2x/@4x · Source Green (#06B250) on transparent

3D Isometric Series — "That's Why We Built Source"

Isometric block illustrations highlighting each pillar of the Source platform. Base form in neutral gray, with the active feature block highlighted in Source Green.

Base

P2P

Edge Native

Private

Secure

Verifiable

AI Ready

Portable

Interoperable

3D isometric blocks · 9 variants · PNG @4x · Active block highlighted in #06B250

Backgrounds

Full-width pixel-dot grid backgrounds for page sections and marketing surfaces. 1456x800 base size. Available on white and black canvases.

Background 1 — Light

Background 3 — Dark

Background 2 — Light

Background 4 — Diagonal

1456x800 · SVG + PNG @2x/@4x · Pixel-dot grid on transparent or black canvas

Patterns

Accent patterns for layout edges and decorative framing. Left and right variants designed to sit on opposite sides of a composition. 390x600 base size.

Pattern 1 — Left

Pattern 1 — Right

Pattern 2 — Left

Pattern 2 — Right

390x600 · SVG + PNG @2x/@4x · Source Green (#06B250) on transparent