BCD Web Design – Global Style Guide
This document defines the visual standards used across all BCD Web Design projects.
It serves as the reference for colors, typography, spacing, buttons, forms, layouts, and reusable components.
Color Palette | Typography | Buttons | Section Spacing | Cards | Forms | Icons | Plugins | Future Pattern Library
Brand Identity
- Logo
- Favicon
- Brand Mission
- Design Philosophy
Example:
We build clean, fast, mobile-friendly websites that emphasize clarity, trust, accessibility, and long-term maintainability.
Color Palette
Use a row with colored boxes.
| Purpose | Color | Hex |
|---|---|---|
| Primary | Deep Blue | #1E40AF |
| Secondary | Slate Gray | #475569 |
| Accent | Sky Blue | #0EA5E9 |
| Background | White | #FFFFFF |
| Light Section | Light Gray | #F8FAFC |
| Headings | Near Black | #111827 |
| Body Text | Dark Gray | #374151 |
| Success | Green | #16A34A |
| Warning | Amber | #F59E0B |
Don’t worry about the exact hex values yet—we’ll refine those as your branding evolves.
Step 4: Typography
Typography
Because you’re using Kadence, I’d recommend:
Headings
Font: Poppins
Weight: 700
Color: #111827
Body
Font: Inter
Weight: 400
Color: #374151
Line Height: 1.7
Buttons
Primary Button
- Background: #1E40AF
- Text: White
- Radius: 8px
- Padding: 16 × 30
Hover
- Background: #1D4ED8
Secondary Button
White background
Blue border
Blue text
Containers
Document these as your defaults:
| Setting | Value |
|---|---|
| Content Width | 1200px |
| Wide Width | 1400px |
| Narrow Content | 800px |
Section Spacing
Consistency is one of the biggest factors in making a site look polished.
I’d start with:
| Section | Value |
|---|---|
| Top Padding | 80px |
| Bottom Padding | 80px |
| Mobile | 50px |
Border Radius
Buttons
8px
Cards
12px
Images
12px
Forms
8px
Shadows
Cards
Light shadow
Hover
Medium shadow
Avoid heavy, dramatic shadows unless a client specifically wants that style.
Icons
Use one icon style throughout a site to keep it cohesive.
- Size: 24px
- Color: Primary Blue
- Position: Left of headings or feature text
Forms
Standardize:
- Rounded corners
- Full-width fields
- Clear labels
- Prominent submit button
- Simple success message
Plugin Stack
This should become your standard build unless a project calls for something different:
- Kadence Theme
- Kadence Blocks
- Rank Math SEO
- LiteSpeed Cache
- WPForms Lite (or Pro if needed)
- All-in-One WP Migration
Design Principles
I’d add one more section at the bottom called:
BCD Design Principles
Something like this:
- Clarity first. Visitors should immediately understand what the business offers.
- Mobile-first. Every page should work beautifully on phones and tablets.
- Fast by default. Optimize for speed without sacrificing quality.
- Accessibility matters. Prioritize readability, contrast, and keyboard-friendly navigation.
- Consistency builds trust. Reuse typography, spacing, buttons, and layouts throughout the site.
- Purposeful design. Every section should help visitors understand, trust, or contact the business.
As you test new plugins in your workshop, you can add notes about why they’re approved or rejected.
Step 11: Future Pattern Library
Footer Copyright: {copyright} {year} {site-title} {theme-credit} | Web design and hosting by BCDWebDesign.com
BCD Pattern Library
We’ll gradually populate it with links to reusable components, such as:
- Hero 01
- Hero 02
- About 01
- Services 01
- Testimonials 01
- FAQ 01
- Contact 01
- Footer 01