Branding SDK

Design guidelines and resources for Market Express brand implementation

Color System

Primary Palette

#1E3A5F
Navy Blue
Primary brand, headers, nav backgrounds
#1E40AF
Deep Blue
Buttons, links, interactive elements
#10B981
Teal Accent
Success states, CTAs, highlights

Extended Palette

#DBEAFE
Light Blue
Backgrounds, cards
#F8FAFC
Slate 50
Page backgrounds
#475569
Slate 600
Body text
#6B7280
Gray 500
Secondary text

Typography

Font Stack

'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Type Scale

H1
48px / 800 weight / 1.2 line-height
Color: Navy #1E3A5F
H2
36px / 700 weight / 1.3 line-height
Color: Navy #1E3A5F
H3
24px / 600 weight / 1.4 line-height
Color: Navy #1E3A5F
Body
16px / 400 weight / 1.6 line-height
Color: Slate 600 #475569

Buttons

PRIMARY

bg-blue-700 / #1E40AF

SECONDARY (CTA)

bg-green-500 / #10B981

OUTLINE

border-blue-700 / #1E40AF

Cards

STANDARD CARD

Card Title

Card content with standard styling. Uses rounded-xl, shadow-md, and hover:shadow-lg transition.

FEATURE CARD

Feature Title

Feature card with icon in teal circle on light blue background.

CSS Variables

:root {
  /* Primary Colors */
  --me-navy: #1E3A5F;
  --me-deep-blue: #1E40AF;
  --me-teal: #10B981;

  /* Extended Colors */
  --me-light-blue: #DBEAFE;
  --me-slate-50: #F8FAFC;
  --me-slate-600: #475569;
  --me-gray-500: #6B7280;

  /* Typography */
  --me-font-primary: 'Inter', -apple-system, sans-serif;

  /* Border Radius */
  --me-radius-lg: 0.75rem;
  --me-radius-xl: 1rem;
}

Common Tailwind Classes

PurposeClasses
Primary Buttonbg-blue-700 hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-lg
Secondary Buttonbg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-lg
Cardbg-white rounded-xl shadow-md hover:shadow-lg p-6
Section Backgroundbg-gray-50 or bg-blue-50
Headingtext-blue-900 font-bold
Body Texttext-gray-600
Linktext-blue-700 hover:text-blue-800 hover:underline

Logo Usage

COLOR (LIGHT BACKGROUNDS)

Market ExpressMarket Express

WHITE (DARK BACKGROUNDS)

Market ExpressMarket Express

Logo Guidelines

  • • Minimum size: 40px width (digital)
  • • Maintain clear space equal to logo height on all sides
  • • Do not stretch, rotate, or add effects
  • • Do not place on busy backgrounds without sufficient contrast

Quick Reference

Color Hex Values

Navy Blue:#1E3A5F
Deep Blue:#1E40AF
Teal Accent:#10B981
Light Blue:#DBEAFE

Asset Files

logo.png - Color logo (512x512)
logo-white.png - White logo (512x512)
favicon.ico - Browser tab icon
og-image.jpg - Social sharing (1200x630)

Questions about branding? Contact: marketing@marketexpress.us