Colors

All the colors used in OfferPad digital branding.

Palettes

Brand colors

OfferPad uses complementary orange and teal colors to represent the brand in digital contexts.

  • saffron #ff6c2c

    Brand-related fills (do not use as a text color or as background color for text)

  • magma #fa4b00

    Brand-related text and backgrounds; emphasis; calls to action

  • pacific #1ca1b5

    Headlines; alternate link colors; iconography; some backgrounds; other accents

Blue

Blue is used for helping the user understand common interactive elements.

  • cerulean #1d7ea7

    Link colors

  • moonstone #6facc7

    Focus and other subtle UI contexts

Gray

This palette is used for most backgrounds, borders, and text colors.

  • black #060d0f

    Shadows, accents for dark contexts

  • steel #0f272b

    Main text color; dark backgrounds

  • pewter #86b1b7

    Muted and placeholder text

  • silver #a7c6ca

    Fill for subtle elements; accents; neutral alerts

  • mist #ccdee1

    Borders; tertiary background color

  • white-smoke #dce8ea

    Secondary background color

  • white #ffffff

    Primary background color; text color in dark contexts

UI color theme

This is a Bootstrap-inspired color theme for UI elements (buttons, links, etc.) using an established hierarchy of colors based on the colors above, as well as the Bootstrap state colors.

  • primary #1d7ea7

    Most buttons and links

  • special #fa4b00

    Call-to-action buttons

  • neutral #a7c6ca

    Neutral informational alerts and subtle buttons

  • success #28a745

    Positive alerts

  • warning #ffc107

    Important alerts

  • danger #dc3545

    Urgent alerts that require immediate action