CyteWorks
Homepage Design Blueprint — Beaver Builder Reference
Contents
01 Color Palette 02 Typography 03 Spacing Scale 04 Border Radius 05 Buttons 06 Border Rules 07 Section Specs 08 Section Order 09 Layout Grid 10 Interior Page Differences 11 Font Enqueue Code 01 — Color Palette hex values · usage notes
Navy — Dark backgrounds
#0C1828
Navy Primary
Nav, hero, datacenter section, audience card (dark), CTA section
#101F33
Navy 2
Trust bar background, dark card variants
#070E19
Navy 3 — Darkest
Footer only — nowhere else
Brand Blue — CyteWorks #0068B6
#0068B6
Brand Blue — Primary
Primary CTA buttons, icon backgrounds stroke, active links, card hover accents, eyebrow dots
#3389C8
Blue Mid
Hero italic text accents, stat number suffix, spec numbers on dark bg, phone number first segment
#004F8A
Blue Dark
Button hover state, callout box text
#E6F2FB
Blue Light
Icon box backgrounds, badge pills, callout box fills, form input background tint
Neutrals — Light backgrounds, text, borders
#F4F6F9
Off White
Alternate section backgrounds (services, team), form input fills
#FFFFFF
White
Primary content sections (we listen, audiences, reviews), card backgrounds
#16202E
Text Primary
Headings, strong text on light backgrounds
#5A6A85
Text Muted
All body copy, descriptions, card text, meta text
#D6DFE9
Border
All card borders, form input borders, dividers on light backgrounds
02 — Typography Barlow Condensed + DM Sans · Google Fonts
Font families
Display / Headings
Barlow Condensed
Weights: 700 section titles · 800 hero/major headings
fonts.google.com/specimen/Barlow+Condensed
Body / UI
DM Sans
Weights: 300 body · 400 UI · 500 labels/buttons
fonts.google.com/specimen/DM+Sans
Type scale
Hero Headline
Section Title
Card / Sub-Section Title
Stat Number / Large Accent
Section Eyebrow Label
Body copy — DM Sans Light, used for all paragraph and description text throughout every section of the site on light backgrounds.
Body copy on dark — slightly lighter opacity for dark section backgrounds.
Small / meta text — nav links, card captions, form labels, footer text
Learn more →
03 — Spacing Scale all values in px
| Section vertical padding (standard) | 80px top / 80px bottom |
| Section vertical padding (CTA) | 100px top / 100px bottom |
| Section horizontal padding | 40px each side |
| Max content width | 1200px centered |
| Eyebrow → headline gap | 12px |
| Headline → body gap | 20px |
| Body → CTA button gap | 32–36px |
| Paragraph → paragraph gap | 20px |
| Card internal padding (standard) | 26px 22px |
| Card internal padding (large) | 40px |
| Hero stat card padding | 28px |
| Service grid gap | 16px |
| Team grid gap | 20px |
| Two-column section gap | 80px |
| Two-column audience gap | 20px |
| Icon box → card title gap | 14px |
| Card title → description gap | 7–8px |
| Spec row padding (datacenter) | 18px 0 |
| Trust bar item padding | 0 28px |
| Grid to heading margin | 48px |
| Button gap (hero) | 12px |
| Nav height | 64px |
| Trust bar height | 46px |
| Footer padding | 36px 40px |
04 — Border Radius by component
0px
Top accent strips only
4px
Buttons, nav CTA, form submit
6px
Icon boxes, small elements
8px
Service cards, team cards, section blocks
10px
Audience cards, blueprint header
12px
Hero stat card only
20px
Badge pills only
50%
Avatar circles, trust dots
Note: The 3px top accent on service card hover uses
border-radius: 0
— do not round single-sided borders. 05 — Button Styles 3 variants
Primary CTA
Secondary
Ghost (dark bg)
06 — Border Rules by context
| Cards on light backgrounds | 1px solid #D6DFE9Service cards, team cards, stat panels, form fields |
| Cards on dark backgrounds | 1px rgba(255,255,255,0.06)Stat card in hero, dark audience card |
| Hero stat card | 1px rgba(0,104,182,0.25)Slightly blue-tinted border to tie to brand color |
| Section dividers on dark | 1px rgba(255,255,255,0.06)Trust bar items, datacenter spec rows, stat card rows |
| Service card top accent (hover) | 3px solid #0068B6 — top edge only, border-radius: 0Appears only on :hover state via CSS transition |
| Team card photo bottom | 3px solid #0068B6Persistent — not hover-only. Bottom edge of photo area |
| Callout box left accent | 3px solid #0068B6 — left edge only, border-radius: 0 6px 6px 0 |
| Nav bottom border | 1px rgba(255,255,255,0.06) |
| Trust bar bottom border | 1px rgba(255,255,255,0.05) |
| Form input border | 1px solid #D6DFE9 — increases to #0068B6 on focus |
| Interior page hero top (CTA banner) | border-top: 3px solid #0068B6 |
07 — Section Specifications Beaver Builder row · column · module settings
Navigation / Header sticky · z-index: 100
| Height | 64px |
| Background | #0C1828 |
| Horizontal padding | 40px each side |
| Layout | flex · space-between · align-items center |
| Logo height | 30–32px · filter: brightness(0) invert(1) on cog PNG |
| Logo text | Barlow Condensed · 20px · 700 · white · UPPERCASE |
| Nav links | DM Sans · 13px · weight 400 · color rgba(255,255,255,0.65) |
| Nav link gap | 28px |
| Nav link hover | color #FFFFFF |
| Active link | color #FFFFFF · weight 500 |
| CTA button | bg #0068B6 · white · 9px 20px padding · 4px radius · 13px 500 |
| Bottom border | 1px solid rgba(255,255,255,0.06) |
Hero Section CSS grid · 1fr 400px · gap 60px
| Min height | 580px |
| Top / bottom padding | 80px |
| Left / right padding | 40px |
| Column gap | 60px |
| Background | #0C1828 |
| Background grid overlay | linear-gradient lines · rgba(0,104,182,0.06) · 44px grid |
| Glow accent | radial-gradient · rgba(0,104,182,0.12) · top-right position |
| Eyebrow → headline gap | 18px |
| Headline → subtext gap | 24px |
| Subtext → buttons gap | 36px |
| Button gap | 12px |
| Subtext max-width | 480px |
| Stat card background | rgba(255,255,255,0.05) |
| Stat card border | 1px rgba(0,104,182,0.25) · radius 12px |
| Stat card padding | 28px |
| Stat card label | 11px · DM Sans 500 · #3389C8 · 2.5px tracking · uppercase |
| Stat number size | 36px · Barlow Condensed 800 · white |
| Stat suffix (yr, ft) | 22px · #3389C8 |
| Stat description | 12px · DM Sans 300 · rgba(255,255,255,0.45) |
| Stat row divider | 1px rgba(255,255,255,0.06) |
| Stat row padding | 14px 0 |
Trust Bar flex · 5 equal items · directly below hero
| Height | 46px |
| Background | #101F33 |
| Horizontal padding | 40px |
| Item padding | 0 28px · first item no left padding |
| Item divider | 1px rgba(255,255,255,0.06) on right |
| Dot size | 5px × 5px · background #0068B6 · border-radius 50% |
| Dot gap | 9px from text |
| Text size | 12px · DM Sans 300 |
| Text color | rgba(255,255,255,0.45) |
| Bold text color | rgba(255,255,255,0.75) · weight 500 |
| Bottom border | 1px rgba(255,255,255,0.05) |
We Listen Section 2-column grid · 1fr 1fr · gap 80px · bg #FFFFFF
| Background | #FFFFFF |
| Padding | 80px 40px |
| Column gap | 80px |
| Columns | 1fr 1fr (text left · visual right) |
| Visual box 1 (back) | bg #F4F6F9 · border 1px #D6DFE9 · radius 8px · bottom-right offset 60px |
| Visual box 2 (front) | bg #0C1828 · radius 8px · 190px × 150px · bottom-right corner |
| Pill badge | bg #E6F2FB · text #0068B6 · 11px 500 · radius 20px · padding 4px 12px |
| $0 value text | Barlow Condensed · 34px · 800 · color #16202E |
| Dark box value | Barlow Condensed · 34px · 800 · #FFFFFF |
Services Grid 4-column grid · bg #F4F6F9
| Background | #F4F6F9 |
| Section padding | 80px 40px |
| Grid columns | repeat(4, 1fr) |
| Grid gap | 16px |
| Grid top margin | 48px below heading |
| Card background | #FFFFFF |
| Card border | 1px solid #D6DFE9 |
| Card border-radius | 8px |
| Card padding | 26px 22px |
| Card top accent on hover | 3px solid #0068B6 — top only · transition 0.2s |
| Card border hover | #C8CFD8 |
| Icon box size | 34px × 34px |
| Icon box background | #E6F2FB |
| Icon box radius | 6px |
| Icon box bottom margin | 14px |
| Icon size | 17px × 17px · stroke #0068B6 · stroke-width 1.5 |
| Service name (H3) | Barlow Condensed · 16px · 700 · UPPERCASE · #16202E |
| Service name bottom margin | 7px |
| Service description | DM Sans · 12–13px · 300 · #5A6A85 |
| Link text | 11–12px · #0068B6 · 500 · top margin 12px |
| Dark card (8th slot) | bg #0C1828 · no border · display flex column justify-center |
Datacenter Section 2-column grid · 1fr 1fr · bg #0C1828
| Background | #0C1828 |
| Padding | 80px 40px |
| Column gap | 80px |
| Glow overlay | radial-gradient rgba(0,104,182,0.1) · centered · 600px × 600px |
| Headline (H2) | Barlow Condensed · 52px · 800 · UPPERCASE · #FFFFFF |
| Headline accent | color #3389C8 on "underground." word |
| Headline line-height | 0.95 |
| Body text color | rgba(255,255,255,0.5) |
| Spec number | Barlow Condensed · 26px · 800 · #3389C8 · min-width 60px |
| Spec label | DM Sans · 13px · 300 · rgba(255,255,255,0.45) |
| Spec row padding | 18px 0 |
| Spec row divider | 1px rgba(255,255,255,0.06) |
| Ground graphic width | 280px · centered in column |
| Ground layer gap | 3px between layers |
| Datacenter layer | bg rgba(0,104,182,0.12) · border 1px rgba(0,104,182,0.3) · height 110px |
Two Audiences Section 2-column grid · 1fr 1fr · gap 20px · bg #FFFFFF
| Background | #FFFFFF |
| Padding | 80px 40px |
| Card 1 (SMB) | bg #F4F6F9 · border 1px #D6DFE9 · radius 8px · padding 40px |
| Card 2 (Enterprise) | bg #0C1828 · no border · radius 8px · padding 40px |
| Card label | DM Sans · 11px · 600 · #0068B6 (light) / #3389C8 (dark) · 2.5px tracking · uppercase |
| Card title | Barlow Condensed · 28px · 700 · UPPERCASE · 1.1 line-height |
| Card body color (light) | #5A6A85 |
| Card body color (dark) | rgba(255,255,255,0.5) |
| Card body bottom margin | 24px |
Team Section 3-column grid · gap 20px · bg #F4F6F9
| Background | #F4F6F9 |
| Padding | 80px 40px |
| Grid gap | 20px |
| Card background | #FFFFFF |
| Card border | 1px solid #D6DFE9 · radius 8px · overflow hidden |
| Photo area height | 180px |
| Photo area background | linear-gradient 140deg · #C8D6E4 → #DCE8F2 |
| Photo bottom accent | 3px solid #0068B6 |
| Content padding | 22px |
| Name (H3) | Barlow Condensed · 22px · 700 · UPPERCASE · #16202E |
| Name bottom margin | 3px |
| Role label | DM Sans · 11px · 500 · #0068B6 · 1.5px tracking · uppercase |
| Role bottom margin | 10px |
| Bio text | DM Sans · 12px · 300 · #5A6A85 · 1.65 line-height |
Final CTA Section centered · bg #0C1828
| Background | #0C1828 |
| Padding | 100px 40px |
| Text alignment | center |
| Headline size | Barlow Condensed · 58px · 800 · UPPERCASE · #FFFFFF |
| Headline accent | color #3389C8 on "IT?" word |
| Sub text | DM Sans · 14px · 300 · rgba(255,255,255,0.45) · margin 18px below headline |
| Button | Primary style · 14px · padding 14px 30px · margin 32px below subtext |
| Phone number | Barlow Condensed · 30px · 800 · #FFFFFF · margin-top 24px |
| Phone area code | color #3389C8 |
Footer flex · space-between · bg #070E19
| Background | #070E19 |
| Padding | 36px 40px |
| Layout | flex · space-between · align-items center · flex-wrap |
| Logo cog opacity | 0.35 · filter: brightness(0) invert(1) |
| Logo text | Barlow Condensed · 16px · 700 · rgba(255,255,255,0.35) |
| Copyright text | DM Sans · 11px · rgba(255,255,255,0.18) · 1.7 line-height · text-right |
08 — Section Order & Background Alternation top to bottom · homepage
1. Navigation
#0C1828 navy
2. Hero Section
#0C1828 navy
3. Trust Bar
#101F33 navy 2
4. We Listen / Difference
#FFFFFF white
5. Services Grid
#F4F6F9 off-white
6. Datacenter Section
#0C1828 navy
7. Two Audiences
#FFFFFF white
8. Team Section
#F4F6F9 off-white
9. Reviews / Testimonials
#FFFFFF white
10. Final CTA
#0C1828 navy
11. Footer
#070E19 darkest navy
Pattern: Dark (navy) → Light (white) → Light (off-white) → Dark → Light → Light → Dark → Darkest. The rhythm of dark/light/light creates visual breathing room without feeling monotonous.
09 — Layout Grid Beaver Builder row settings
| Max content width | 1200px · centered |
| Section horizontal padding | 40px each side (Beaver Builder row padding) |
| 1-column sections | Full width · body text max-width 560px |
| 2-column sections | 1fr 1fr or 1fr 400px · gap 60–80px |
| 3-column sections (team) | repeat(3, 1fr) · gap 20px |
| 4-column sections (services) | repeat(4, 1fr) · gap 16px |
| Interior pages (2-col with sidebar) | 1fr 300px · gap 40px · sidebar sticky top 20px |
12-column grid visualization
4 columns (services) — each card = 3/12
card
card
card
card
3 columns (team) — each card = 4/12
Robb
Duane
Sean
2 columns (audiences) — each = 6/12
SMBs
Enterprise
Interior page — main content + sidebar (1fr 300px)
Main content
Sidebar
10 — Interior Page Differences location pages · service pages
| Page hero height | Auto (shorter than homepage hero) · padding 48px 40px |
| Page hero headline size | Barlow Condensed · 52px · 800 · UPPERCASE |
| Breadcrumb | DM Sans · 12px · 300 · rgba(255,255,255,0.4) · margin-bottom 16px |
| Breadcrumb separator | › character · color rgba(255,255,255,0.2) |
| Location strip | bg #101F33 · height auto · padding 12px 40px · flex row · gap 32px |
| Body layout | CSS grid · 1fr 300px · gap 40px · padding 48px 40px |
| Sidebar position | sticky · top 20px |
| Contact card header | bg #0C1828 · padding 18px 20px |
| Form label | DM Sans · 11px · 500 · uppercase · letter-spacing 0.3px |
| Form input | border 1px #D6DFE9 · radius 4px · padding 9px 12px · bg #F4F6F9 |
| Form input focus | border-color #0068B6 |
| Quick links card | bg white · border 1px #D6DFE9 · radius 8px · padding 18px 20px |
| Quick link row | border-bottom 1px #D6DFE9 · padding 9px 0 · font 13px 300 |
| CTA banner top border | border-top 3px solid #0068B6 |
| Area pills | bg white · border 1px #D6DFE9 · radius 4px · padding 7px 14px · 12px |
| Area pill active | bg #E6F2FB · border #0068B6 · color #0068B6 · weight 500 |
| Callout box (billing note) | bg #E6F2FB · border-left 3px #0068B6 · radius 0 6px 6px 0 · padding 18px 20px |
| Service item card | bg white · border 1px #D6DFE9 · radius 6px · padding 18px 20px · flex row · gap 16px |
| Why/stats panel | bg white · border 1px #D6DFE9 · radius 8px · padding 28px · 2×2 grid |
11 — Font Enqueue Code Add to child theme functions.php
// Add to /wp-content/themes/bb-theme-child/functions.php
function cyteworks_enqueue_fonts() {
wp_enqueue_style(
'cyteworks-fonts',
'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'cyteworks_enqueue_fonts' );
// Global CSS variables — add to Beaver Builder > Global Styles > CSS
// or to your child theme's style.css
:root {
--cw-blue: #0068B6;
--cw-blue-mid: #3389C8;
--cw-blue-light: #E6F2FB;
--cw-blue-dark: #004F8A;
--cw-navy: #0C1828;
--cw-navy2: #101F33;
--cw-navy3: #070E19;
--cw-offwhite: #F4F6F9;
--cw-text: #16202E;
--cw-muted: #5A6A85;
--cw-border: #D6DFE9;
--cw-display: 'Barlow Condensed', sans-serif;
--cw-body: 'DM Sans', sans-serif;
}
Beaver Builder tip: Set your global colors in Beaver Builder → Theme Customizer → Presets using the hex values above so you can select them from the color picker on every row and module instead of typing hex codes manually each time.
CyteWorks Design Blueprint · April 2025 · For internal use during Beaver Builder build