Version 1.0
300 Tech
Brand Guidelines
APRIL 2026
Tech health in minutes, not months.
PG. 01
BRAND GUIDELINES
Table of Contents
What's Inside
01 Logo System 02 Color Palette 03 Color Guidelines 04 Typography 05 Visual Motifs 06 Imagery Direction 07 Brand Voice 08 Positioning & Ethos 09 Social Media 10 Sample Applications
300
Tech
PG. 02
BRAND GUIDELINES
02 — Color System
Color Palette
Our palette balances authority with approachability. Deep navy grounds, gradient accents energize, and silver text ensures readability.
Primary Gradient
linear-gradient(135deg, #a855f7, #3b82f6)
Lilac to Azure — 135°
BACKGROUND
Deep Navy
#0a0e1a
RGB 10, 14, 26
SURFACE
Card / Surface
#111827
RGB 17, 24, 39
PRIMARY
Lilac
#a855f7
RGB 168, 85, 247
PRIMARY
Azure
#3b82f6
RGB 59, 130, 246
TEXT
Silver
#e2e8f0
RGB 226, 232, 240
SECONDARY
Smoke
#64748b
RGB 100, 116, 139
MUTED
Slate
#475569
RGB 71, 85, 105
SEMANTIC
Success
#10b981
RGB 16, 185, 129
SEMANTIC
Warning
#f59e0b
RGB 245, 158, 11
SEMANTIC
Danger
#ef4444
RGB 239, 68, 68
PG. 04
BRAND GUIDELINES
03 — Color Usage
Color Guidelines
Consistent color application builds recognition. These ratios and pairing rules ensure legibility and brand cohesion.
Usage Ratios
Navy 40%
Gradient 20%
Silver 25%
Muted 15%
Background & Canvas Accents & CTAs Primary Copy Labels & Meta
Text Legibility Samples
Aa
Silver on Navy
WCAG AAA
Aa
Smoke on Navy
WCAG AA
Aa
White on Gradient
WCAG AA
Aa
Silver on Card
WCAG AAA
Aa
Navy on Light
WCAG AAA
Aa
Slate on Navy
BODY TEXT ONLY
DO
  • •Use Silver (#e2e8f0) for all primary body text on dark backgrounds
  • •Use the gradient for CTAs, accents, and the "300" wordmark
  • •Use Smoke for secondary text and metadata
  • •Apply semantic colors only for their intended purpose
DON'T
  • •Use Slate or Muted colors for primary body text
  • •Place gradient text on gradient backgrounds
  • •Use Success green for decorative purposes
  • •Mix brand purple/blue outside the defined gradient angle
PG. 05
BRAND GUIDELINES
04 — Typography
Type System
Urbanist carries the brand voice. JetBrains Mono brings precision to data. Together they create the calm authority that defines 300 Tech.
Primary Typeface
Urbanist
300 — Light
The quick brown fox jumps over the lazy dog
400 — Regular
The quick brown fox jumps over the lazy dog
500 — Medium
The quick brown fox jumps over the lazy dog
600 — SemiBold
The quick brown fox jumps over the lazy dog
700 — Bold
The quick brown fox jumps over the lazy dog
800 — ExtraBold
The quick brown fox jumps over the lazy dog
900 — Black
The quick brown fox jumps over the lazy dog
Data Typeface
JetBrains Mono
400 — Regular
ATLAS Score: 72 / 100
500 — Medium
Visibility: 85% | Ops: 64%
600 — SemiBold
300 data points analyzed
700 — Bold
GRADE: A- | RISK: LOW
USE FOR
Scores, grades, percentages, data labels, timestamps, code snippets, metrics, page numbers, and any numerical displays.
Marketing Type Scale
HERO — 64px / 900 / -2.5px
Tech health in minutes
SECTION — 40px / 800 / -1.5px
The complete picture
SUBSECTION — 24px / 700 / -0.5px
Three pillars of digital health
BODY — 16px / 400 / 0px
We give mission-driven organizations a complete, honest picture of their technology health. No jargon. No upsell. Just clarity.
CAPTION — 12px / 500 / 1px
Based on 300 data points
Product UI Type Scale
PAGE HEADING — 28px / 800
ATLAS Assessment
SECTION HEADING — 20px / 700
Visibility Score
BODY — 14px / 400
Your website loads in 4.2 seconds on mobile. That puts you behind 78% of similar organizations.
LABEL — 11px / 600 / 2px
Overall Grade
DATA — JetBrains Mono 32px / 700
72 / 100
Heading + Body Pairing
You deserve to know where you stand.
Most organizations have blind spots in their technology. Not because they're careless, but because nobody's ever given them the full picture. ATLAS checks 300 data points across visibility, operations, and impact to show you exactly where you are.
PG. 06
BRAND GUIDELINES
05 — Visual Elements
Brand Motifs
Two signature elements define 300 Tech's visual identity: the aurora mesh and the pulse line. Together they convey data flowing through calm systems.
Aurora Mesh
RADIAL GRADIENT BLOBS / PURPLE + BLUE / BLUR 80-120px
Pulse / Signal Line
GRADIENT STROKE / 2px / ROUND CAP + JOIN
Combined Application
300 Tech
Aurora mesh as background texture + pulse line as footer accent
On Light Background
300 Tech
Reduce opacity to 4-6% on light backgrounds to maintain subtlety
Aurora Mesh
Use as background texture on hero sections, cards, and full-page layouts. Keep blur high (80-120px) and opacity low (5-18%). Never let blobs dominate the content.
Pulse Line
Use as section dividers, footer accents, or decorative borders. Stroke width: 1.5-2px. Always use the gradient stroke. Pulse clusters should have 3-5 peaks per group.
PG. 07
BRAND GUIDELINES
06 — Imagery
Imagery Direction
Warm illustrated characters lead. Data visualizations support. Together they make technology feel human and approachable.
Primary: Illustrated Characters
Warm, Notion/Mailchimp-Style Illustrations
Characters should feel human and approachable. Rounded forms, warm skin tones, gradient clothing in brand colors. They interact with technology naturally: reviewing dashboards, checking phones, collaborating. Not stock-photo stiff, but illustrated with personality.
Warm tones Rounded forms Brand color clothing Tech interactions
Secondary Approaches
Data Visualizations
Abstract charts, graphs, radial displays
Product Screenshots
ATLAS dashboard, reports
Device Mockups
Phone, laptop, tablet frames
fx
Animated Elements
Particles, transitions, micro-interactions
DO USE
  • •Warm illustrated characters with personality
  • •Abstract data visualizations in brand colors
  • •Real product screenshots from ATLAS
  • •Clean device mockups showing real interfaces
  • •Subtle animations that convey data in motion
DON'T USE
  • •Generic stock photography of people shaking hands
  • •AI-generated faces or uncanny-valley imagery
  • •Clip art or low-quality vector icons
  • •Overly corporate imagery (boardrooms, skyscrapers)
  • •Fear-based visuals (broken screens, skull icons)
PG. 08
BRAND GUIDELINES
07 — Brand Voice
How We Sound
Like a sharp friend who's great with technology. Calm, direct, warm. Never salesy, never condescending, always honest.
Core Emotion
PEACE
Not fear. Not shame. Not scarcity.
Personality
  • Calm authority
  • Translating guide
  • Genuine helper
  • Mission-first pragmatist
Emotional Arc
1
Recognition
2
Relief
3
Clarity
4
Agency
5
Peace
Tone Spectrum
CasualProfessional
SeriousLighthearted
ReservedBold
ComplexSimple
DetachedWarm
ON-BRAND
"Most organizations have blind spots in their technology. That's normal. ATLAS just helps you find them."
"Here's the thing: your website is invisible to 70% of the people searching for your services. The fix is simpler than you think."
"We check 300 data points so you don't have to wonder. Think of it as a physical for your tech stack."
OFF-BRAND
"You NEED to act now before your competitors leave you in the dust. Don't fall behind!"
"Leverage our cutting-edge, AI-powered solution to optimize your digital synergy and maximize ROI."
"Your technology is a ticking time bomb. Without us, you're one breach away from losing everything."
Words We Use
blind spots digital health cover your six the fix is... the full picture honest clarity peace of mind
Words We Avoid
leverage synergy optimize falling behind act now cutting-edge game-changer
Platform Adaptations
Platform Tone Shift Format Example Hook
Email Personal, direct, conversational Short paragraphs, one CTA "Quick question about your website..."
LinkedIn Thought leadership, credible, warm Hook line, short paragraphs, line breaks "Most nonprofits have 3 blind spots in their tech..."
Landing Page Clear, benefit-driven, reassuring Scannable sections, social proof "See exactly where your technology stands."
Blog Educational, generous, no-fluff Headers, lists, actionable takeaways "5 things your website tells donors before you say a word"
PG. 09
BRAND GUIDELINES
08 — Positioning & Ethos
What We Stand For
Tech health in minutes,
not months.
Positioning Statement
300 Tech gives mission-driven organizations a complete, honest picture of their technology health in minutes. ATLAS assesses 300 data points across three pillars to surface blind spots, confirm strengths, and deliver a clear path forward.
The Three Pillars
Visibility
Can people find you? SEO, search presence, directory listings, digital footprint.
Operations
Are your systems working? Performance, security, uptime, integrations.
Impact
Can you prove your results? Analytics, conversion tracking, donor attribution.
The Athlete Journey
1
The Physical
Free ATLAS external audit. Like a sports physical before the season. Quick, painless, eye-opening.
$0 / FREE
2
Bloodwork
Internal audit goes deeper. Access to systems, interviews with team, full operational analysis.
$2,500 - $5,000
3
Treatment Plan
Scoped projects based on findings. We fix the issues that matter most, in priority order.
$5,000 - $15,000
4
Ongoing Coaching
ATLAS subscription for continuous monitoring. Like a personal trainer, keeping your systems in shape.
~$250/mo
What We Are Not
  • × We are not a sales machine. We don't chase.
  • × We are not fear-mongers. We don't scare you into buying.
  • × We are not generalists. We specialize in tech health.
  • × We are not needy. We want alignment, not revenue.
"We don't need you. We want alignment."
Values Foundation
The Fruits of the Spirit guide every interaction and decision. They are the invisible standard.
Love Joy Peace Patience Kindness Goodness Faithfulness Self-Control
Why "300"
C
Cecilia
C = 300 in Roman numerals. Named for Jeremy's daughter.
300
Gideon's 300
Biblical story. A small, faithful group wins through trust.
∞
Keep It 300
Slang for integrity and truth. Say what you mean.
↑
Transformation
Jeremy's personal journey. Becoming who you're meant to be.
PG. 10
BRAND GUIDELINES
09 — Social Media
Social Presence
Consistent identity across every platform. The wordmark adapts, but the personality stays the same.
Profile Picture
300
300
64px
300
40px
300
28px
Banner / Cover Images
LINKEDIN — 1128 x 191
300 Tech
Tech health in minutes, not months.
TWITTER/X — 1500 x 500
300 Tech
Post Formatting
LinkedIn
Hook line first. Short paragraphs (1-2 sentences). Use line breaks for rhythm. End with a soft question or insight. No hashtag walls.
Twitter/X
Punchy observations. Threads for deeper topics. Use data points as hooks. Quote-tweet with insight, not just commentary.
Instagram
Carousel posts for educational content. Stories for behind-the-scenes. Reels for quick tips. Always use brand colors in graphics.
Hashtag Strategy
BRANDED
#300Tech #ATLASscore #TechHealthCheck
INDUSTRY
#NonprofitTech #DigitalHealth #SmallBizTech
RULE
Max 3-5 per post. Never more than content. Branded first, then 1-2 industry tags.
Sample Social Cards
PG. 11
BRAND GUIDELINES
10 — Applications
In Practice
The brand system applied to real touchpoints. Every interaction should feel like it came from the same calm, capable team.
Cold Email
LinkedIn Post
Business Card
300 Tech
Tech health in minutes, not months.
Jeremy Sagaille
Founder
(518) 649-6618
300techsolutions.com
ATLAS Report Header
Technology Health Assessment
ATLAS Report
Hope Harbor International
Generated March 28, 2026 · 300 data points analyzed
72
Overall
85
Visibility
64
Operations
58
Impact
300 Tech
Tech health in minutes, not months.
Brand Guidelines v2.0 — April 2026
For questions, contact [email protected]
PG. 12