Boston Project Design System

A clean, minimal design system for professional web applications. Built with modern CSS custom properties and designed for consistency across all Boston Project applications.

Consistent Design

Unified visual language across all applications

Developer Friendly

Easy-to-use utility classes and components

Responsive

Mobile-first design that works everywhere

Installation

Add the Boston Project CSS to your HTML document:

HTML
<link rel="stylesheet" href="https://style.thebostonproject.net/boston.css">

Or download and host locally:

Local Installation
<link rel="stylesheet" href="./css/boston.css">

Colors

The Boston Project uses a carefully crafted color palette with semantic meaning.

Primary Colors

Primary
#0096ff
Success
#00c864
Danger
#dc2626
Warning
#f59e0b

Buttons

Buttons are available in multiple variants and sizes.

Button Variants
<button class="bp-btn">Default</button> <button class="bp-btn bp-btn-primary">Primary</button> <button class="bp-btn bp-btn-outline-primary">Outline</button> <button class="bp-btn bp-btn-success">Success</button> <button class="bp-btn bp-btn-danger">Danger</button>
Button Sizes
<button class="bp-btn bp-btn-primary bp-btn-sm">Small</button> <button class="bp-btn bp-btn-primary">Default</button> <button class="bp-btn bp-btn-primary bp-btn-lg">Large</button> <button class="bp-btn bp-btn-icon"><i class="fas fa-heart"></i></button>

Cards

Cards are flexible containers for grouping related content.

Basic Card

Card Title

This is a basic card component with header and content sections. Perfect for displaying grouped information.

<div class="bp-card"> <div class="bp-card-header"> <h3>Card Title</h3> </div> <div class="bp-card-content"> <p>Card content goes here.</p> </div> <div class="bp-card-footer"> <button class="bp-btn bp-btn-primary">Action</button> </div> </div>

Forms

Clean, accessible form components with consistent styling.

Form Elements
<div class="bp-form-group"> <label class="bp-form-label">Name</label> <input type="text" class="bp-form-input" placeholder="Enter your name"> </div> <div class="bp-form-group"> <label class="bp-form-label">Category</label> <select class="bp-form-input bp-form-select"> <option>Choose an option</option> </select> </div>

Usage Examples

Here's how to integrate the Boston Project Design System into your applications:

Complete Page Template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Boston Project App</title> <link rel="stylesheet" href="https://style.thebostonproject.net/boston.css"> </head> <body> <header class="bp-header"> <div class="bp-header-content"> <a href="#" class="bp-logo">My App</a> <nav class="bp-nav"> <button class="bp-btn bp-btn-primary">Login</button> </nav> </div> </header> <main class="bp-container bp-mt-4"> <div class="bp-card"> <div class="bp-card-content"> <h1>Welcome to My App</h1> <p>This page uses the Boston Project Design System.</p> </div> </div> </main> </body> </html>

Customization

The design system is built with CSS custom properties, making it easy to customize for your specific needs.

Custom Color Scheme
:root { /* Override default colors */ --bp-primary: #8b5cf6; /* Purple instead of blue */ --bp-success: #10b981; /* Emerald green */ --bp-bg: #1f2937; /* Dark background */ --bp-bg-card: #374151; /* Dark cards */ --bp-text: #f9fafb; /* Light text */ }