Design System
A comprehensive guide to the Buildberg brand. Colors, typography, components, and guidelines for consistent, premium experiences.
Logo
The Buildberg mark represents building blocks. The foundation of every automation, AI solution, and system we create.
Variations
Icon
Favicons, app icons
Full
Primary usage
Wordmark
Text only
Stacked
Square formats
Color Applications
On Light
Primary usage
On Dark
Reversed
Clear Space & Sizing
Minimum Clear Space
Maintain clear space equal to the height of the icon mark on all sides.
Minimum Size
Never display the logo smaller than these minimum sizes.
Digital: 80px
Icon: 16px
Colors
A warm, sophisticated palette built on layered surfaces. Multiple tones create depth while maintaining a cohesive, premium feel.
Brand Colors
Surface Colors
Layer these surfaces to create visual hierarchy. Move from lighter to darker as content becomes more focused.
Text Colors
Semantic Colors
Dark Mode
Premium dark surfaces for low-light environments and alternative contexts.
Typography
Inter provides excellent readability and a modern, professional aesthetic across all applications.
Font Family
Primary
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%
Monospace
JetBrains Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 </>{}[]
Type Scale
Display
60px
Build with confidence
H1
48px
Automation solutions
H2
36px
Enterprise-grade AI
H3
24px
Workflow automation
H4
20px
Data integration services
Body
16px
We help businesses transform operations through intelligent automation.
Small
14px
Supporting text and metadata for secondary information.
Caption
12px
LABELS AND CAPTIONS
Font Weights
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Components
Reusable UI elements that maintain consistency across all Buildberg products and communications.
Buttons
Primary
Secondary
Accent
Ghost & Link
Sizes
Icon Buttons
Form Elements
Text Inputs
This field is required
Other Controls
Cards
Basic Card
A simple card with a border and subtle background.
Interactive Card
Hover to see the interaction states.
Learn moreFeatured Card
For highlighting important content.
Badges & Tags
Alerts
Success
Your changes have been saved successfully.
Warning
Please review before proceeding.
Error
Something went wrong. Please try again.
Toggles & Switches
Pill Toggle
Standard Toggle
Progress & Stats
Progress Bars
Stats Display
$317,731
Revenue Generated
+42%
Growth Rate
98.5%
Uptime
2.4s
Avg Response
Avatars & Profiles
Avatar Sizes
Avatar Stack
Profile Card
Usama Navid
Founder, Buildberg
Feature Lists
Included Features
Premium Features
Chat Bubbles
Conversation UI
Hi! How can I help you automate your workflow today?
2:34 PM
I need to connect my CRM with email automation.
2:35 PM
Layered Cards
Stacked Dashboard
Monthly Revenue
+12%$47,500
vs $42,300 last month
Tilted Stack
Active users
2,847
Testimonial Cards
Buildberg transformed our operations. We've saved 40+ hours per week.
Sarah Chen
COO, TechStart
The AI integration was seamless. Best decision we made this year.
Marcus Johnson
Founder, ScaleUp
Enterprise-grade automation at a fraction of the cost.
Emily Rodriguez
CTO, DataFlow
Pricing Cards
Starter
Perfect for small teams getting started with automation.
Professional
For growing teams that need advanced integrations.
Enterprise
Tailored solutions for large-scale operations.
Notification Toasts
Automation deployed
Your workflow is now active
New message
You have 3 unread notifications
Processing...
Please wait a moment
Tables
| Service | Status | Hours | Revenue |
|---|---|---|---|
| CRM Automation | Active | 120 | $12,500 |
| Voice AI Agent | In Progress | 48 | $5,800 |
| Dashboard Build | Completed | 86 | $9,200 |
Breadcrumbs
Default
With Badges
Tabs
Underline Tabs
Pill Tabs
Skeleton Loaders
Card Skeleton
Profile Skeleton
Accordion
Most projects are delivered within 2-4 weeks, depending on complexity. Simple CRM automations can be done in a week, while full AI agent builds may take 3-4 weeks.
Timeline / Steps
Discovery Call
Understand your current workflows and pain points
Solution Design
Map out the automation architecture and integrations
Build & Iterate
Develop, test, and refine until it works perfectly
Launch & Support
Deploy to production with documentation and training
Dividers
Standard
With Label
or
Thick
Tooltips
Empty States
No projects yet
Create your first automation project to get started.
No results found
Try adjusting your search or filter criteria.
Icons
Custom iconography representing our core services and capabilities.
AI
Automation
Analytics
Network
Agent
Fast
Database
Code
Workflow
Dashboard
Integration
Launch
Icon Sizes
16px
20px
24px
32px
40px
Guidelines
Principles for representing the Buildberg brand consistently.
Voice & Tone
Professional
Clear, confident communication that demonstrates expertise without being condescending.
Technical
Comfortable with depth, but always explain complex concepts clearly.
Approachable
Warm and human. We're partners, not just service providers.
Values
Writing
Do Write
- "We help you automate your workflows"
- "Deploy your AI agent in hours, not months"
- "Built on enterprise-grade infrastructure"
Don't Write
- "Leverage synergies to optimize paradigm shifts"
- "Revolutionary game-changing solutions"
- "We're the Uber of AI automation"
Copy Guidelines
Rules for writing headlines, CTAs, and body copy across all Buildberg touchpoints. Say what we do, who it's for, and why it matters. In plain language.
Headline Rules
Good Headlines
- •“We automate your operations so you can scale without hiring”
- •“Stop doing manually what AI can do for you”
- •“Connect your tools. Kill the manual work.”
- •“See what’s working. Fix what’s not.”
Pattern: Specific outcome the reader can picture.
Bad Headlines
- •“Transform your business with intelligent solutions”
- •“Unlock the power of AI-driven innovation”
- •“Pioneering the future of digital excellence”
- •“Empowering businesses through cutting-edge technology”
Pattern: Vague, could be any company on earth.
The Two Questions Test
Every page, section, and hero must answer two questions within 5 seconds of reading. If it doesn’t, rewrite it.
1. What is this?
The reader should know exactly what you offer. Not “solutions” or “platform”. What you actually build: AI agents, CRM automations, dashboards, workflows.
2. Is it for me?
Name the audience directly. “For agencies, SaaS, ecommerce, and service businesses”, not “for modern enterprises” or “for forward-thinking leaders.”
CTA Writing Rules
Primary CTAs
One per scroll. Always specific.
Contextual CTAs
Match the section content.
Never Use
Generic, vague, or corporate.
Words to Use / Avoid
Use These Words
Concrete, specific, visual. The reader can picture what we do.
Never Use These
Vague, overused, says nothing. If every company uses it, it means nothing.
Tone by Context
Homepage
Confident & Direct
“We build AI systems that replace manual work.”
Case Studies
Proof-Driven
“Saved 40+ hours/week by automating their intake process.”
Services Pages
Specific & Clear
“AI agents that handle customer questions 24/7.”
Contact / CTA
Warm & Inviting
“Tell us what you're working on. We'll map out a plan.”
Body Copy Rules
Lead with what we do, not who we are
Don’t
At Buildberg, we are a leading provider of AI solutions...
Do
We build AI agents, automation workflows, and dashboards that replace manual work.
Name the audience in the first two sentences
Don’t
Our solutions are designed for businesses of all sizes.
Do
For agencies, SaaS companies, ecommerce brands, and service businesses that are tired of manual processes.
Use numbers over adjectives
Don’t
We significantly reduce operational overhead.
Do
Our clients save 20-40 hours per week on average.
One idea per paragraph, max 3 lines
Don’t
We offer a comprehensive suite of automation services including CRM integration, AI chatbots, voice agents, and data analytics dashboards that help businesses streamline their operations and reduce costs while improving efficiency across all departments.
Do
CRM automations. AI chatbots. Voice agents. Dashboards. Each one built to save you hours every week.
Formatting Rules
Headlines
- • Max 12 words
- • Sentence case (not Title Case)
- • No periods at the end
- • Active voice only
Subheadlines
- • Max 25 words
- • Explain the headline
- • Include “who it’s for” or “what they get”
- • No jargon
Body Copy
- • Short paragraphs (1-3 lines)
- • One idea per paragraph
- • Use lists for 3+ items
- • Numbers beat adjectives
- • No em dashes. Use periods or commas instead
Download Assets
Get all logo files, color palettes, and brand guidelines in one package. Available in SVG, PNG, and PDF formats.