Brand Guidelines

Visual identity, colors, typography, and voice guidelines for Sourceful Energy.

Logo

Full Logo

Bolt Symbol

The bolt symbol can be used independently as an icon or favicon at various sizes.

48px

32px

24px

20px

16px

12px

48px

32px

24px

20px

16px

12px

Usage Guidelines

• The logo consists of the energy bolt symbol and the "Sourceful Energy" wordmark
• Use light mode logo on light backgrounds, dark mode logo on dark backgrounds
• The light mode logo features a dark circle with green bolt and dark text
• The dark mode logo features a green circle with knockout bolt and green text
• Maintain clear space around the logo equal to the height of the symbol
• Do not modify the logo colors or proportions

Logo Files

Light Mode Logo

SVG format

Dark Mode Logo

SVG format

Brand Colors

Our core brand palette. Each color serves a specific purpose in the design system.

Neon GreenPrimary

#00FF84

--sourceful-green

YellowPrimary

#FFD500

--sourceful-yellow

OrangePrimary

#FF6B00

--sourceful-orange

RedPrimary

#FF0D0D

--sourceful-red

TealPrimary

#0D7377

--sourceful-teal

NavyPrimary

#1E3A5F

--sourceful-navy

BluePrimary

#2196F3

--sourceful-blue

Neon Green (Primary)

Our signature neon green (#00FF84) represents energy and innovation. Use darker shades (600-700) for text on light backgrounds.

Green 50

#ecfff5

--sourceful-green-50

Green 100

#d1ffea

--sourceful-green-100

Green 200

#a6ffd6

--sourceful-green-200

Green 300

#6affbd

--sourceful-green-300

Green 400

#2bff9e

--sourceful-green-400

Green 500Primary

#00FF84

--sourceful-green-500

Green 600

#00cc6a

--sourceful-green-600

Green 700

#009950

--sourceful-green-700

Green 800

#007a40

--sourceful-green-800

Green 900

#006636

--sourceful-green-900

Yellow (Energy)

Yellow (#FFD500) is our energy accent color, used for highlights, energy-related visualizations, and call-to-actions.

Yellow 50

#fffce8

--sourceful-yellow-50

Yellow 100

#fff8c2

--sourceful-yellow-100

Yellow 200

#fff089

--sourceful-yellow-200

Yellow 300

#ffe545

--sourceful-yellow-300

Yellow 400Primary

#FFD500

--sourceful-yellow-400

Yellow 500

#e6c000

--sourceful-yellow-500

Yellow 600

#cc9f00

--sourceful-yellow-600

Yellow 700

#a37700

--sourceful-yellow-700

Orange (Warning)

Orange (#FF6B00) is used for warning states and attention-grabbing elements that need visibility without the urgency of red.

Orange 50

#fff5eb

--sourceful-orange-50

Orange 100

#ffe6cc

--sourceful-orange-100

Orange 200

#ffc999

--sourceful-orange-200

Orange 300

#ffa866

--sourceful-orange-300

Orange 400

#ff8533

--sourceful-orange-400

Orange 500Primary

#FF6B00

--sourceful-orange-500

Orange 600

#cc5600

--sourceful-orange-600

Orange 700

#994000

--sourceful-orange-700

Orange 800

#662b00

--sourceful-orange-800

Orange 900

#4d2000

--sourceful-orange-900

Red (Error)

Red (#FF0D0D) is reserved for error states, destructive actions, and critical alerts that require immediate attention.

Red 50

#fff0f0

--sourceful-red-50

Red 100

#ffd9d9

--sourceful-red-100

Red 200

#ffb3b3

--sourceful-red-200

Red 300

#ff8080

--sourceful-red-300

Red 400

#ff4d4d

--sourceful-red-400

Red 500Primary

#FF0D0D

--sourceful-red-500

Red 600

#cc0a0a

--sourceful-red-600

Red 700

#990808

--sourceful-red-700

Red 800

#660505

--sourceful-red-800

Red 900

#4d0404

--sourceful-red-900

Teal (Energetic)

Energetic teal (#0D7377) for secondary accents. Use lighter shades (400-500) on dark backgrounds and darker shades (600-700) on light backgrounds for better contrast.

Teal 50

#ecfeff

--sourceful-teal-50

Teal 100

#cffafe

--sourceful-teal-100

Teal 200

#a5f3fc

--sourceful-teal-200

Teal 300

#67e8f9

--sourceful-teal-300

Teal 400

#22d3ee

--sourceful-teal-400

Teal 500

#14b8a6

--sourceful-teal-500

Teal 600Primary

#0D7377

--sourceful-teal-600

Teal 700

#0a5c5f

--sourceful-teal-700

Teal 800

#084547

--sourceful-teal-800

Teal 900

#052e2f

--sourceful-teal-900

Navy (Deep Blue)

Navy (#1E3A5F) provides depth and authority. Used for backgrounds, headers, and elements requiring a professional, trustworthy appearance.

Navy 50

#f0f5fa

--sourceful-navy-50

Navy 100

#d9e4f0

--sourceful-navy-100

Navy 200

#b3c9e0

--sourceful-navy-200

Navy 300

#8daed1

--sourceful-navy-300

Navy 400

#5c8bc2

--sourceful-navy-400

Navy 500

#3a6ca3

--sourceful-navy-500

Navy 600Primary

#1E3A5F

--sourceful-navy-600

Navy 700

#182e4c

--sourceful-navy-700

Navy 800

#122339

--sourceful-navy-800

Navy 900

#0c1726

--sourceful-navy-900

Blue (Info)

Blue (#2196F3) is used for informational states, links, and interactive elements that need to stand out without conveying urgency.

Blue 50

#e8f4fd

--sourceful-blue-50

Blue 100

#c5e3fa

--sourceful-blue-100

Blue 200

#90c9f6

--sourceful-blue-200

Blue 300

#5bb0f1

--sourceful-blue-300

Blue 400Primary

#2196F3

--sourceful-blue-400

Blue 500

#1976d2

--sourceful-blue-500

Blue 600

#1565c0

--sourceful-blue-600

Blue 700

#0d47a1

--sourceful-blue-700

Blue 800

#0a3880

--sourceful-blue-800

Blue 900

#072960

--sourceful-blue-900

Neutral Colors

Gray scale for text, backgrounds, and borders. Use Gray 900 for primary text, Gray 600 for secondary text, and lighter shades for backgrounds.

White

#ffffff

--sourceful-white

Gray 50

#fafafa

--sourceful-gray-50

Gray 100

#f1f1f1

--sourceful-gray-100

Gray 200

#e5e5e5

--sourceful-gray-200

Gray 400

#a3a3a3

--sourceful-gray-400

Gray 600

#525252

--sourceful-gray-600

Gray 800

#262626

--sourceful-gray-800

Gray 900

#171717

--sourceful-gray-900

Gray 950

#0a0a0a

--sourceful-gray-950

Black

#000000

--sourceful-black

Typography

Satoshi is our primary typeface — a modern geometric sans-serif with a clean, technical feel.

Display

60px / 700 / -0.02em

Powering energy

40px / 700 / -0.02em

Page heading one

32px / 600 / -0.01em

Section heading two

24px / 600 / -0.01em

Subsection heading three

20px / 600

Component heading four

18px / 500

Small heading five

16px / 500

Tiny heading six

Body Large

18px / 400

Lead paragraph text for introductions and emphasis.

Body

16px / 400

Default body text for paragraphs and general content.

Body Small

14px / 400

Secondary text, descriptions, and supporting content.

Label Large

14px / 500 / 0.01em

Form labels and navigation items

Label

12px / 500 / 0.01em

Small labels and badges

Caption

12px / 400

Helper text, timestamps, and metadata

Overline

12px / 600 / 0.1em

Category or section label

Links

DefaultLink to resource

MutedSecondary link

ExternalExternal link

Monospace (JetBrains Mono)

Used for code, technical values, and data displays.

Code Blockconst energy = await grid.optimize()

Values192.168.1.1 • 2.4 kWh • 99.9%

Inline

Press Ctrl + C to copy

CSS Classes

/* Headings */
.text-display  /* 60px, bold, tight tracking */
.text-h1       /* 40px, bold */
.text-h2       /* 32px, semibold */
.text-h3       /* 24px, semibold */
.text-h4       /* 20px, semibold */
.text-h5       /* 18px, medium */
.text-h6       /* 16px, medium */

/* Body */
.text-body-lg  /* 18px, regular */
.text-body     /* 16px, regular */
.text-body-sm  /* 14px, regular */

/* UI Text */
.text-label-lg /* 14px, medium, tracking */
.text-label    /* 12px, medium, tracking */
.text-caption  /* 12px, muted color */
.text-overline /* 12px, uppercase, wide tracking */
.text-lead     /* 18px, muted color */
.text-code     /* mono font, background */

Spacing

Consistent spacing creates visual rhythm and hierarchy. Based on a 4px base unit.

space-1

4px

p-1, m-1, gap-1

space-2

8px

p-2, m-2, gap-2

space-3

12px

p-3, m-3, gap-3

space-4

16px

p-4, m-4, gap-4

space-5

20px

p-5, m-5, gap-5

space-6

24px

p-6, m-6, gap-6

space-8

32px

p-8, m-8, gap-8

space-10

40px

p-10, m-10, gap-10

space-12

48px

p-12, m-12, gap-12

space-16

64px

p-16, m-16, gap-16

space-20

80px

p-20, m-20, gap-20

space-24

96px

p-24, m-24, gap-24

Common Usage

Component padding

p-4 (16px), p-6 (24px)

Section spacing

py-12 (48px), py-16 (64px)

Grid gaps

gap-4 (16px), gap-6 (24px)

Stack spacing

space-y-2 (8px), space-y-4 (16px)

Border Radius

Rounded corners soften the interface and create a friendly, modern feel.

4px

8px

12px

16px

2xl

24px

full

9999px

Shadows

Elevation creates depth and visual hierarchy through subtle shadows.

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Icons

We use Lucide Icons — a beautiful, consistent icon set with 1000+ icons.

Sizes

12px

16px

20px

24px

32px

48px

Common Icons

Zap

Sun

Moon

Battery

Wifi

Settings

User

Home

Check

Plus

Minus

ChevronRight

ChevronDown

ArrowRight

Usage

import { Zap, Sun, Moon, Battery } from "lucide-react"

// Default size (24px)
<Zap />

// Custom sizes
<Zap className="h-4 w-4" />  // 16px
<Zap className="h-5 w-5" />  // 20px
<Zap className="h-6 w-6" />  // 24px

// With color
<Zap className="h-5 w-5 text-primary" />
<Battery className="h-5 w-5 text-muted-foreground" />

Voice & Tone

We are

• Clear and direct
• Technically precise
• Confident but not arrogant
• Helpful and supportive
• Forward-thinking

We are not

• Jargon-heavy
• Condescending
• Overly casual
• Vague or ambiguous
• Sensationalist

Mission Statement

“Building local energy coordination infrastructure — the physical rails that make distributed energy work.”

We believe in physics before code, simple over clever, and local over cloud. Our technology enables sub-200ms edge control because grid frequency must balance every second — and cloud APIs simply cannot meet this requirement.