DevBuild Studio Brand Guidelines
Complete branding guide for DevBuild Studio - colors, typography, logos, icons, and usage guidelines.
Last Updated: February 11, 2024
Brand Identity
Brand Essence
DevBuild Studio is a modern learning platform that empowers developers to master cutting-edge skills through expert-led courses and hands-on projects.
Mission: Transform developers' careers through high-quality, practical education.
Brand Personality
- Professional yet approachable
- Modern with a warm touch
- Expert-driven but beginner-friendly
- Innovative while being reliable
Visual Identity
The DevBuild Studio brand uses a sophisticated coffee and cream color palette that evokes warmth, elegance, timelessness, and approachability.
Color Palette
Primary Colors
Brand Primary (Coffee Latte)
Hex: #C17A53
RGB: rgb(193, 122, 83)
HSL: hsl(23, 44%, 54%)
Usage: Primary CTAs, links, highlights, brand elements
Brand Logo (Coffee Mocha)
Hex: #C8794D
RGB: rgb(200, 121, 77)
HSL: hsl(23, 68%, 70%)
Usage: Logo accent, special highlights
Secondary Colors
Cream White
Hex: #FAF8F5
RGB: rgb(250, 248, 245)
HSL: hsl(30, 33%, 97%)
Usage: Backgrounds, light sections
Cream 50
Hex: #F5F1EC
RGB: rgb(245, 241, 236)
HSL: hsl(30, 29%, 95%)
Usage: Subtle backgrounds, cards
Cream 100
Hex: #EBE4D9
RGB: rgb(235, 228, 217)
HSL: hsl(30, 24%, 89%)
Usage: Borders, dividers
Accent Colors
Coffee Espresso
Hex: #1C1816
RGB: rgb(28, 24, 22)
HSL: hsl(30, 8%, 10%)
Usage: Text, dark backgrounds, headers
Coffee 900
Hex: #2D2623
RGB: rgb(45, 38, 35)
HSL: hsl(23, 11%, 16%)
Usage: Dark sections, footer
Accent (Light Coffee)
Hex: #D8A88A
RGB: rgb(216, 168, 138)
HSL: hsl(23, 68%, 70%)
Usage: Hover states, subtle accents
Typography
Logo "dev" Font: Times New Roman MT
dev
Usage: "dev" in logo
Style: Serif, italic, classic
Weight: Regular (400)
Size: 1.15em relative to base
Logo "build.studio" Font: Be Vietnam Pro
build.studio
Usage: "build.studio" in logo
Style: Sans-serif, bold, modern
Weight: Black (900)
Size: 1.1em relative to base
Heading Font: Space Grotesk
The quick brown fox jumps
Usage: Headings, hero text, section titles
Style: Geometric sans-serif
Weights: Medium (500), Semibold (600), Bold (700)
Body Font: Inter
The quick brown fox jumps over the lazy dog. DevBuild Studio empowers developers with expert-led courses.
Usage: Body text, UI elements, navigation
Style: Sans-serif, highly readable
Weights: Light (300), Regular (400), Medium (500), Semibold (600), Bold (700), Extrabold (800)
Alternative Logo Fonts (Available)
Alex Brush
Montserrat
Usage: Alternative options for logo variations
Alex Brush: Script, decorative (400)
Montserrat: Sans-serif, bold (900)
Current Logo Configuration
dev → Times New Roman MT (italic, 1.15em)
build.studio → Be Vietnam Pro (black/900, lowercase, 1.1em)
Technical: Both fonts are sized relative to their container and use baseline alignment for optimal visual balance.
Logo Usage
Primary Logo
Full color with icon and wordmark
Icon Only
Coffee cup icon for small spaces
Wordmark Only
Text logo without icon
Logo Don'ts
- ❌ Don't stretch or distort the logo
- ❌ Don't change logo colors arbitrarily
- ❌ Don't rotate the logo
- ❌ Don't add effects (shadows, outlines, glows)
- ❌ Don't place on low-contrast backgrounds
- ❌ Don't recreate or modify the logo
Custom Line Art Icons
Icon Style
- Style: Minimalist, geometric line art
- Stroke Width: 2px
- Stroke Color: Current color (adapts to context)
- Corners: Rounded (stroke-linecap: round, stroke-linejoin: round)
- Size: Scalable SVG (typically 24x24 base)
- Fill: None (outline only)
General Education & Development
CodeWindow
Coding/development
GraduationCap
Learning/education
RocketLaunch
Launch/growth
LightbulbIdea
Ideas/innovation
TeamCollab
Collaboration/team
CertificateBadge
Achievement/certification
BookStack
Knowledge/library
PathProgress
Progress/journey
AI & Machine Learning
AIBrain
AI/Neural networks
AIAgent
AI agents/bots
MachineLearning
ML/Training
DataFlow
Data pipelines
NeuralNetwork
Neural networks
ChatBot
Conversational AI
Automation
AI automation
AIModel
AI models
Test Automation
TestRun
Running tests
BugDetection
Bug detection
TestCoverage
Code coverage
ContinuousTesting
CI/CD testing
Usage Example
import { CodeWindow } from '@/components/icons/line-art';
<CodeWindow className="w-16 h-16 text-primary" />Brand Voice
Tone of Voice
Professional but Friendly
- ✓ Use clear, direct language
- ✓ Avoid jargon unless necessary
- ✓ Explain technical concepts simply
- ✓ Be encouraging and supportive
Writing Style
- Active voice: "Build real projects" not "Projects will be built"
- Second person: "You'll learn" not "Students will learn"
- Action-oriented: Use strong verbs (Master, Build, Transform)
- Concise: Get to the point quickly
✅ Good Example
"Master modern web development with hands-on projects"
❌ Avoid
"Leverage synergistic learning paradigms for full-stack optimization"
Design Principles
Clarity First
Every design decision should enhance clarity and comprehension.
Warm Professionalism
Balance professional credibility with approachable warmth.
Consistent Spacing
Use 8px grid system: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Generous White Space
Don't fear empty space - it creates breathing room.
Visual Hierarchy
Use size, weight, and color to guide the eye through content.
Accessibility
Minimum 4.5:1 contrast, clear focus states, semantic HTML.
Questions About Branding?
For branding questions or asset requests, please contact our design team.