NBI® Logo
QUOTE
CallQUOTEEmail

NBI Color System

Professional Color Palette & Design Tokens

This comprehensive color system establishes the visual foundation for National Building Inspection's professional brand identity. Each color has been carefully selected to convey trust, expertise, and reliability in the commercial inspection industry.

Primary Brand Colors

Core brand identity colors used for primary actions and branding

Primary Red
--primary
HEX
#dc2626
RGB
rgb(220, 38, 38)
HSL
hsl(0, 84%, 50%)
Usage
Primary buttons, links, CTAs, brand elements
Accent Orange
--accent
HEX
#f59e0b
RGB
rgb(245, 158, 11)
HSL
hsl(43, 91%, 47%)
Usage
Secondary actions, highlights, warnings
Copper
--copper
HEX
#ea580c
RGB
rgb(234, 88, 12)
HSL
hsl(25, 90%, 48%)
Usage
Tertiary elements, hover states

Neutral Foundation

Background and text colors that provide structure and readability

Background
--background
HEX
#0f0f10
RGB
rgb(15, 15, 16)
HSL
hsl(240, 6%, 6%)
Usage
Main page background
Foreground
--foreground
HEX
#f8fafc
RGB
rgb(248, 250, 252)
HSL
hsl(210, 40%, 98%)
Usage
Primary text color
Card Background
--card
HEX
#1a1b1e
RGB
rgb(26, 27, 30)
HSL
hsl(220, 7%, 11%)
Usage
Card and component backgrounds
Muted
--muted
HEX
#27272a
RGB
rgb(39, 39, 42)
HSL
hsl(240, 5%, 16%)
Usage
Secondary backgrounds, borders

Professional Grays

Sophisticated gray tones for professional appearance

Steel
--steel
HEX
#71717a
RGB
rgb(113, 113, 122)
HSL
hsl(240, 5%, 46%)
Usage
Secondary text, borders
Gunmetal
--gunmetal
HEX
#374151
RGB
rgb(55, 65, 81)
HSL
hsl(220, 13%, 27%)
Usage
Tertiary backgrounds, buttons
Charcoal
--charcoal
HEX
#18181b
RGB
rgb(24, 24, 27)
HSL
hsl(240, 5%, 10%)
Usage
Dark overlays, deep backgrounds

Interactive States

Colors for user interactions and feedback

Destructive
--destructive
HEX
#ef4444
RGB
rgb(239, 68, 68)
HSL
hsl(0, 84%, 60%)
Usage
Error states, delete actions
Ring
--ring
HEX
#dc2626
RGB
rgb(220, 38, 38)
HSL
hsl(0, 84%, 50%)
Usage
Focus states, input borders
Border
--border
HEX
#27272a
RGB
rgb(39, 39, 42)
HSL
hsl(240, 5%, 16%)
Usage
Component borders, dividers

Chart & Data Colors

Colors for data visualization and charts

Chart Blue
--chart-1
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Usage
Primary data series
Chart Red
--chart-2
HEX
#dc2626
RGB
rgb(220, 38, 38)
HSL
hsl(0, 84%, 50%)
Usage
Secondary data series
Chart Orange
--chart-3
HEX
#f59e0b
RGB
rgb(245, 158, 11)
HSL
hsl(43, 91%, 47%)
Usage
Tertiary data series
Chart Purple
--chart-5
HEX
#8b5cf6
RGB
rgb(139, 92, 246)
HSL
hsl(262, 83%, 66%)
Usage
Quaternary data series

Design System Tokens

Comprehensive design tokens that ensure consistency across all NBI digital touchpoints

Typography
Font Family - Sans
Open Sans
Body text, UI elements
Font Family - Serif
Montserrat
Headings, titles
Border Radius
0.875rem
Component corners
Border Radius Small
0.5rem
Small component corners
Spacing & Layout
Container Max Width
1200px
Page content width
Section Padding
6rem
Vertical section spacing
Component Spacing
1.5rem
Between components
Effects & Shadows
Glass Effect
backdrop-filter: blur(24px)
Modal backgrounds
Glow Shadow
0 0 60px rgba(220, 38, 38, 0.4)
Primary element highlights
Brutal Shadow
Multi-layer depth
Card and component depth

Implementation Guidelines

Best practices for implementing the NBI color system across digital platforms

Color Usage Rules
Primary Red (#dc2626)
Use for main CTAs, primary buttons, and key brand elements
Accent Orange (#f59e0b)
Use for secondary actions, highlights, and warnings
Muted Grays
Use for backgrounds, borders, and secondary text
Accessibility Standards
Contrast Ratios
All text meets WCAG AA standards (4.5:1 minimum)
Color Independence
Information is not conveyed by color alone
Focus Indicators
Clear focus states using primary red (#dc2626)

Ready to Implement?

Our design team is available to help integrate this color system into your existing platforms and ensure brand consistency across all digital touchpoints.

CSS Variables AvailableDesign Tokens ExportBrand Guidelines