Helena, AR  |  Est. 1971(870) 572-7771

BPS Inc. Design System

A living reference of colors, typography, buttons, form elements, and layout patterns extracted from the Figma homepage design. All tokens are defined as CSS custom properties in the child theme.

Color Palette

Primary Green
#0f906c
--bps-green
Green Hover
#0d7a5c
--bps-green-hover
Navy
#1e2945
--bps-navy
Charcoal
#343434
--bps-charcoal
Dark
#2d2d2d
--bps-dark
Gray
#5a5a5a
--bps-gray
Gray Muted
#585858
--bps-gray-muted
Black
#000000
--bps-black
White
#ffffff
--bps-white
Border
#dbdbdb
--bps-border
Section BG
#f5f5f5
--bps-section-bg

Typography

H1 — Hero Heading · JetBrains Mono Medium · 64px / 66px · uppercase · -0.64px

Custom Packaging Solutions

H2 — Section Heading · JetBrains Mono Medium · 39px / 49px · capitalize · -0.78px

Faucibus At Mattis Faucibus Turpis Ut Mus Urna Commodo.

H3 — Card Title · Geist Mono Regular · 25px · center · -0.75px

Water Treatment

Section Label · Geist Mono Regular · 17px · uppercase · 1.02px tracking · green dot prefix
Services
Nav Link · Geist Mono Medium · 18px · uppercase · 1.08px tracking
Services    Industries    About
Body Text · Geist Light · 18px / 27px
From complex PVA pod assemblies to tight-tolerance machined components, BPS brings engineering depth and production scale to every program — under one roof.
Footer Text · Geist Light · 16px / 22px
794 Phillips Rd. 311, Helena, AR 72342 · (870) 572-7771
Small Text · Geist Mono Regular · 14px
BPS Inc. Copyright 2026
Utility Bar Text · Geist Mono Regular · 13px · uppercase
Helena, AR | Est. 1921
Industry Card Title · JetBrains Mono Regular · 43px · capitalize · -0.86px (on dark overlay)

Ag Chem

Buttons

Primary Button — .bps-btn-wrap > .bps-btn.bps-btn--primary
Contact About Us Send
Outline Button — .bps-btn-wrap > .bps-btn.bps-btn--outline
About Us View All
Hero Outline Button — .bps-btn-wrap.bps-btn-wrap--light > .bps-btn.bps-btn--outline-hero
About Us

Form Elements

Form Input — .bps-input · JetBrains Mono Regular · 17px · capitalize · border #dbdbdb

Send

CSS Custom Properties

--bps-border: #dbdbdb
--bps-placeholder: rgba(30,41,69,0.68)
--font-heading: 'JetBrains Mono'
font-size: 17px
letter-spacing: -0.34px
text-transform: capitalize
padding: 14px 16px

Section Patterns

Section Label Pattern

Services

Faucibus At Mattis Faucibus Turpis

From complex PVA pod assemblies to tight-tolerance machined components, BPS brings engineering depth and production scale to every program.

Centered Section Pattern

Services

Faucibus At Mattis Faucibus Turpis

From complex PVA pod assemblies to tight-tolerance machined components, BPS brings engineering depth and production scale.

Spacing & Layout

Container Widths

--container-wide: 1360px
--container-max: 1200px

Section Padding

Desktop: 100px top/bottom
Tablet: 100px top/bottom
Mobile: 60px top/bottom
Container padding: 0 40px

Font Families

Headings — var(--font-heading)

Light 300

Regular 400

Medium 500

Bold 700

UI / Buttons — var(--font-ui)

Regular 400

Medium 500

Body — var(--font-body)

Light 300

Regular 400

Medium 500

Components

Bracket Card

Industry / service cards with corner bracket decoration. Hover to see brackets animate inward. Use .bps-bracket-card--dark on dark backgrounds.

Water
Treatment
Ag Chem
Specialty
Packaging
Industrial
<div class="bps-bracket-card">
  <div class="bps-bracket-card__inner">
    <div class="bps-bracket-card__icon">...</div>
    <div class="bps-bracket-card__title">Label</div>
  </div>
</div>

// Dark variant
<div class="bps-bracket-card bps-bracket-card--dark">...</div>

CSS Custom Properties Reference

/* Colors */
--bps-green: #0f906c;
--bps-green-hover: #0d7a5c;
--bps-navy: #1e2945;
--bps-charcoal: #343434;
--bps-dark: #2d2d2d;
--bps-gray: #5a5a5a;
--bps-gray-muted: #585858;
--bps-black: #000000;
--bps-white: #ffffff;
--bps-border: #dbdbdb;
--bps-section-bg: #f5f5f5;

/* Typography */
--font-heading: 'JetBrains Mono', monospace;
--font-ui: 'Geist Mono', monospace;
--font-body: 'Geist', sans-serif;

/* Sizes */
--text-hero: 64px;
--text-h2: 39px;
--text-h3: 25px;
--text-body: 18px;
--text-body-sm: 16px;
--text-label: 17px;
--text-nav: 18px;
--text-btn: 16px;
--text-small: 14px;
--text-xs: 13px;

/* Layout */
--container-max: 1200px;
--container-wide: 1360px;
--section-padding: 100px 0;
--btn-padding: 15px 17px;