Design System

BS&Co

Brand Guidelines

Logo

The primary logo should be used on light backgrounds. Maintain clear space around the logo equal to the height of the ampersand.

Primary - Light Background

Inverted - Dark Background

Primary - Champagne Background

Logo Usage Guidelines

Minimum size: 120px width for digital, 1 inch for print

Clear space: Minimum padding equal to the "&" character height

Don't: Stretch, rotate, add effects, or change colors outside brand palette

Color Palette

Primary - Noir

Used for primary actions, links, and key visual elements.

Noir

#192231

Regal Navy

#00307E

Noir Shadow

#232f42

Accent - Champagne

Used for backgrounds, highlights, and CTA buttons.

Champagne

#c0b283

Soft Champagne

#e2dcc5

Light Champagne

#f5f2e8

Neutrals

Used for text, backgrounds, and borders.

White

#ffffff

Gray Light

#f5f5f5

Gray

#999999

Dark

#1a1a1a

Black

#000000

Color in Action

See how the color palette works together across different contexts and backgrounds.

Primary Background

White body text with accent highlights

01 Accent numbers

02 On primary

03 Background

Accent Background

Dark text with primary color highlights

Call to Action Alt

Regal Navy Background

White text with champagne accents

Call to Action Alt

+127%

Revenue

26.8x

ROI

Clients

Soft Champagne Background (NEW)

Soft Champagne Background

Warmer than light, calmer than full champagne

Call to Action

+127%

Revenue

26.8x

ROI

Clients

Light Champagne Background

Light Accent Background

Subtle accent tint for section backgrounds

Text Link

Call to Action

Card Color Variants

Primary Shadow

Card with Primary Shadow

White background, dark text, primary-colored offset shadow draws attention.

Accent Shadow

Card with Accent Shadow

Alternating shadow colors create visual variety while staying on-brand.

Typography

Primary Font

Poppins

Used for all text: headings, body, buttons, UI elements

Regular 400

Medium 500

Semibold 600

Bold 700

Code blocks use system monospace for optimal rendering.

Heading 1 - Hero Titles

Poppins, 56px max, Bold (700), line-height: 1.2

Heading 2 - Section Headers

Poppins, 48px max, Bold (700), line-height: 1.2

Heading 3 - Card Titles

Poppins, 24px max, Bold (700)

Body text - This is what most content looks like. It's clean, readable, and professional. The font scales responsively using clamp() for optimal reading across all devices.

Poppins, 12-18px responsive, Regular (400), line-height: 1.4

Large body text - Used for important descriptions and testimonials.

Poppins, 20px, Regular (400)

+127%

Stat Value - Poppins, 48px, Bold (700), Noir color

Font Weights

400 (Regular): Body text, descriptions

500 (Medium): Buttons, nav links, emphasized text

600 (Semibold): Subheadings, card titles

700 (Bold): Main headings, stats, important elements

Buttons

All buttons use pill-shaped borders (24px radius). Each block below shows which buttons work best on that background color.

White

var(--white)

Call to Action

Light Champagne

var(--accent-light)

Call to Action

Soft Champagne

var(--accent-soft)

Call to Action

Call to Action Alt

Champagne

var(--accent)

Call to Action Alt

Noir

var(--primary)

Call to Action Alt

Regal Navy

var(--navy)

Call to Action Alt

Dark

var(--dark)

Call to Action Alt

Button Usage Guidelines

Primary: Use on light backgrounds (white, light champagne, soft champagne, champagne). Avoid on regal navy (hover state matches background).

Secondary: Works on all backgrounds due to champagne fill + dark border.

Outline: Use on light backgrounds only. Dark border needs contrast.

Outline Light: Exclusively for dark backgrounds (noir, dark, regal navy).

Call to Action: Champagne button with noir wrapper. Use on light backgrounds only. Wrapper blends into dark backgrounds.

Call to Action Alt: Noir button with white wrapper. Use on dark backgrounds (noir, navy, dark) and champagne where standard CTA lacks contrast.

CSS Variable Reference

/* Button Types */
.btn-primary      { background: var(--primary); color: white; }
.btn-secondary    { background: var(--accent); color: var(--dark); border: 2px solid var(--dark); }
.btn-outline      { background: transparent; color: var(--dark); border: 2px solid var(--dark); }
.btn-outline-light { background: transparent; color: white; border: 2px solid white; }

/* CTA with wrapper (champagne button + glow) */
.btn-cta-wrap { background: var(--primary-shadow); border-radius: 25px; padding: 3px; }
.btn-cta-wrap:hover { box-shadow: 0 0 25px rgba(192, 178, 131, 0.4); }
.btn-cta { background: var(--accent); color: var(--dark); font-weight: 600; }

/* CTA Alt (noir button with white wrapper) */
.btn-cta-alt-wrap { background: var(--white); border-radius: 25px; padding: 3px; }
.btn-cta-alt { background: var(--primary); color: var(--white); font-weight: 600; }

Cards

Cards use a distinctive offset shadow effect with either noir or champagne. Border radius is 20px with a 1px black border.

Noir Shadow Card

Used for primary content cards. The noir shadow creates depth and draws attention.

Champagne Shadow Card

Used for alternating content. The champagne shadow adds visual variety while maintaining brand consistency.

+127%

Revenue Increase

94.2%

Delivery Rate

/* Card with offset shadow */
.card {
  background: white;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 24px;
}
.card-noir { box-shadow: 8px 8px 0 #192231; }
.card-champagne { box-shadow: 8px 8px 0 #c0b283; }

Case Study Cards

Case study cards feature an image with subtle 3D perspective, title, subtitle, and a "Read Now" link. Used on the case studies listing page.

Image

7X Email Revenue in 30 Days

Taking a brand's Klaviyo revenue from 6% to 42% in 4 weeks

Read Now

Image

From 10% to 43% of Shopify Revenue

How we transformed their Klaviyo account in 60 days

Read Now

Case Study Card Guidelines

Clickable: Entire card is a link (use <a> tag as wrapper)

Image: 3D perspective transform (rotateY -5deg, rotateX 5deg), border-radius 12px, subtle shadow

Title: 24px, bold, dark color, 1.3 line-height

Subtitle: 15px, gray color, 1.5 line-height

Link text: Use .styled-link on a <span> (visual indicator only)

/* Entire card is clickable - use <a> tag */
a.case-study-card {
  display: block;
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--dark);
  transition: transform 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.case-study-card:hover { transform: translateY(-5px); }
.case-study-card-noir { box-shadow: 8px 8px 0 var(--primary); }
.case-study-card-champagne { box-shadow: 8px 8px 0 var(--accent); }
.case-study-card-image-wrap {
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transform-style: preserve-3d;
  margin-bottom: 20px;
}
.case-study-card-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.case-study-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 8px;
}
.case-study-card-subtitle {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 12px;
}
/* Use .styled-link for the "Read Now" link */

Tool Cards

Tool cards display available tools with icon, category label, name, description, features list, and action buttons.

🎯

Segmentation

Klaviyo Audience Builder

Create 22 pre-built customer lifecycle segments in one click. Save 10-20 hours of manual segmentation work.

✓VIP & at-risk customer segments
✓Lifecycle stage segmentation
✓RFM-based targeting
✓One-click deployment

Use Tool → Learn More

💰

Cost Optimization

Klaviyo Bill Reducer

Reduce your Klaviyo costs by 20-30% in minutes. Identify and remove inactive profiles instantly.

✓Identify inactive profiles
✓Calculate exact savings
✓20-30% cost reduction
✓Improve deliverability

Use Tool → Learn More

Tool Card Guidelines

Background: White with soft champagne border, subtle shadow on hover

Category: 12px uppercase, primary color, 600 weight

Title: 24px, 600 weight, dark color

Description: 16px, dark color with 0.8 opacity for readability

Features: 15px, dark color, primary checkmarks

Buttons: Primary (solid noir) and Secondary (outlined noir)

.tool-card {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--accent-soft);
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}
.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(25, 34, 49, 0.15);
  border-color: var(--primary);
}
.tool-card-btn-primary {
  display: block;
  padding: 14px 24px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  transition: background 0.3s ease;
}
.tool-card-btn-primary:hover {
  background: var(--primary-hover);
}
.tool-card-btn-secondary {
  display: block;
  padding: 14px 24px;
  background: transparent;
  color: var(--primary);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  border: 2px solid var(--primary);
  transition: all 0.3s ease;
}
.tool-card-btn-secondary:hover {
  background: var(--primary);
  color: white;
}

Links & Underlines

Links feature animated underlines that expand on hover. Available in noir (default) and champagne variants.

Check out our case studies to see results, or contact us to get started.

/* Animated underline link */
a.styled-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--primary);
  transition: width 0.3s ease;
}
a.styled-link:hover::after {
  width: 100%;
}

Navigation

The navbar uses a floating pill design with a noir border. It's fixed at the top with subtle shadow.

Key Features

Border: 3px solid noir (#192231)

Border radius: 40px (pill shape)

Fixed position: Top with 15px margin

Max width: 1200px, centered

Hero Section

Hero sections use the soft champagne background with a grid pattern overlay.

Turn Email Into Your
Most Profitable Channel

Book a Call

Hero Background

Background color: Soft Champagne (#e2dcc5)

Grid pattern: SVG overlay at 50% position

Padding top: clamp(80px, 15vw, 200px) - responsive

Text Highlights

Champagne highlights are used to emphasize key words in headings.

We help brands achieve remarkable results through email marketing.

.highlight-champagne {
  background: #c0b283;
  padding: 2px 8px;
  border-radius: 4px;
}

Footer

The footer uses a dark background with the brand name in large champagne text.

Let's work together

Ready to find out more?

Book A Call

Portland,

97214 Oregon

Spacing & Layout

Container

Max-width: 1200px, centered with auto margins. Padding: 0 20px (responsive with clamp).

Section Padding

Vertical: clamp(40px, 8vw, 80px) - responsive padding that scales with viewport.

Border Radius Scale

4px: Small elements, highlights

12px: Code blocks, small cards

16px: Medium cards

20px: Large cards, sections

24px: Buttons

40px: Navbar (pill shape)

50%: Circular elements (social icons)

Responsive Design

The design uses clamp() functions for fluid typography and spacing.

/* Responsive font sizing */
font-size: clamp(12px, 2.5vw, 18px);   /* Body text */
font-size: clamp(36px, 8vw, 56px);     /* Hero headings */
font-size: clamp(18px, 4vw, 24px);     /* Subheadings */

/* Responsive padding */
padding: clamp(40px, 8vw, 80px) 0;     /* Section padding */
padding-top: clamp(80px, 15vw, 200px); /* Hero top padding */

/* Breakpoints */
@media (max-width: 991px)  /* Tablet - hide desktop nav */
@media (max-width: 768px)  /* Mobile - stack layouts */
@media (max-width: 576px)  /* Small mobile - single column */