Color Palette

dark

Dark blue-gray - for text and darker elements

#121820

primary

Navy Blue - Represents trust, stability, professionalism

#1A4B84

secondary

Steel Blue - Represents strength, reliability, industrial feel

#4682B4

accent

Warm Orange/Amber - Represents construction, activity, energy

#E67E22

light

Light steel blue - for backgrounds and lighter elements

#B0C4DE

neutral

Slate gray - neutral, professional, versatile

#708090

Text Colors

text-dark

This text uses the dark color (#121820)

text-primary

This text uses the primary color (#1A4B84)

text-secondary

This text uses the secondary color (#4682B4)

text-accent

This text uses the accent color (#E67E22)

text-light

This text uses the light color (#B0C4DE)

text-neutral

This text uses the neutral color (#708090)

Background Colors

bg-dark

#121820

bg-primary

#1A4B84

bg-secondary

#4682B4

bg-accent

#E67E22

bg-light

#B0C4DE

bg-neutral

#708090

Border Colors

border-dark

#121820

border-primary

#1A4B84

border-secondary

#4682B4

border-accent

#E67E22

border-light

#B0C4DE

border-neutral

#708090

Color Combinations

Dark bg + Primary text + Accent border

secondary bg + accent text + Primary border

Primary bg + Dark text + Light border

Accent bg + secondary text + accent border

accent bg + Dark text + secondary border

Light bg + Primary text + Dark border

Gradient Examples

from-primary to-accent

from-dark to-secondary

from-accent to-light

from-accent to-primary

Text on Different Backgrounds

Background: dark

This is dark text on dark background

This is primary text on dark background

This is secondary text on dark background

This is accent text on dark background

This is light text on dark background

This is neutral text on dark background

Background: primary

This is dark text on primary background

This is primary text on primary background

This is secondary text on primary background

This is accent text on primary background

This is light text on primary background

This is neutral text on primary background

Background: secondary

This is dark text on secondary background

This is primary text on secondary background

This is secondary text on secondary background

This is accent text on secondary background

This is light text on secondary background

This is neutral text on secondary background

Background: accent

This is dark text on accent background

This is primary text on accent background

This is secondary text on accent background

This is accent text on accent background

This is light text on accent background

This is neutral text on accent background

Background: light

This is dark text on light background

This is primary text on light background

This is secondary text on light background

This is accent text on light background

This is light text on light background

This is neutral text on light background

Background: neutral

This is dark text on neutral background

This is primary text on neutral background

This is secondary text on neutral background

This is accent text on neutral background

This is light text on neutral background

This is neutral text on neutral background

Logo Examples

Dirty TruckMarketing & SEO