# Memphis Housing Lab Brand Guidelines

Machine-readable plain-text edition of the official Memphis Housing Lab (MHL) brand guidelines.

Version: 1.4
Last reviewed: August 25, 2026
Website: https://memphishousinglab.org

## Brand application notes

These notes describe proper use of the brand assets:

1. Prefer the official logo files listed in the Logo Assets section.
2. Use SVG when the output must scale for web, print, or design work.
3. Use a transparent 2000 x 2000 PNG when a raster image is required.
4. Select the black logo for light backgrounds and the white logo for dark or Aqua backgrounds.
5. Do not recreate, redraw, distort, or convert the logo into a new mark.
6. Treat the color hex values and typography assignments below as authoritative.
7. Use the voice, messaging, and imagery guidance when generating copy or creative work.

## Brand overview

Positioning: A national affordable housing initiative, built with the communities most affected.

Mission:
Memphis Housing Lab is a Memphis-based 501(c)(3) advancing affordable housing at scale through community-driven design, modular construction, technical assistance, and catalytic capital. We put development power in community hands.

Vision:
Memphis first. Designed to scale anywhere the same gap exists. MHL builds practical, high-quality housing solutions for the people and places that need them most.

## Messaging pillars

### Community-Powered

Align design, development, and capital around the communities most affected by the housing gap.

### Integrated Delivery

Combine product, process, and capital to move projects from concept to placed in service.

### Memphis First

Build proof in Memphis, then scale the model to places facing the same shortage.

Core subject areas:

- Community-powered development
- Modular housing
- Catalytic capital
- Technical assistance
- Affordable housing
- Memphis-first scaling
- Product, process, and capital

## Logo usage

The Memphis Housing Lab wordmark is the most recognizable MHL brand asset. Its bold, stacked typographic form conveys strength, structure, and clarity.

### Logo assets

Black SVG:
- URL path: `/MHL-Logo-Black.svg`
- MIME type: `image/svg+xml`
- Scalable: yes
- Transparent: yes
- Recommended for: web, print, presentations, and any workflow requiring scalability
- Recommended backgrounds: white, Mist, and other light backgrounds

White SVG:
- URL path: `/MHL-Logo-White.svg`
- MIME type: `image/svg+xml`
- Scalable: yes
- Transparent: yes
- Recommended for: web, print, presentations, and any workflow requiring scalability
- Recommended backgrounds: Ink, Graphite, Aqua, and other dark backgrounds

Black PNG:
- Hosted by: Replit App Storage
- Direct URL: https://brand.memphishousinglab.org/assets/brand/mhl-logo-black.png
- Download URL: https://brand.memphishousinglab.org/assets/brand/mhl-logo-black.png?download=1
- MIME type: `image/png`
- Dimensions: 2000 x 2000
- Scalable: no
- Transparent: yes
- Recommended for: raster workflows, social graphics, and presentations
- Recommended backgrounds: white, Mist, and other light backgrounds

White PNG:
- Hosted by: Replit App Storage
- Direct URL: https://brand.memphishousinglab.org/assets/brand/mhl-logo-white.png
- Download URL: https://brand.memphishousinglab.org/assets/brand/mhl-logo-white.png?download=1
- MIME type: `image/png`
- Dimensions: 2000 x 2000
- Scalable: no
- Transparent: yes
- Recommended for: raster workflows, social graphics, and presentations
- Recommended backgrounds: Ink, Graphite, Aqua, and other dark backgrounds

Alternate source directory:
- Provider: Google Drive
- Type: shared folder
- URL: https://drive.google.com/drive/folders/1Le_34l8wZYQYGH3JsjQ1cEdv38x9mQ6d?usp=share_link
- Description: User-supplied alternate source directory for official MHL logo files. Verify contents before use.

### Do

- Use the logo at a minimum width of 100px for digital.
- Maintain the stacked typographic arrangement.
- Use only approved color combinations.
- Allow sufficient breathing room around the mark.
- Maintain clear space equal to the height of the L in LAB on all sides.

### Do not

- Rotate, skew, or distort the logo.
- Apply drop shadows, gradients, or effects.
- Rearrange the stacked text to a single line.
- Place the logo on busy or low-contrast backgrounds.
- Recreate or redraw the logo.

## Color palette

### Primary

- MHL Ink: `#232323`
  - HSL: 0° 0% 14%
  - Use for primary text, dark fields, and the black logo.
- MHL Graphite: `#2D2D2D`
  - HSL: 0° 0% 18%
  - Use for high-contrast surfaces and image overlays.
- MHL Gray: `#4A4A4A`
  - HSL: 0° 0% 29%
  - Use for secondary text and supporting structure.

### Accent

- MHL Aqua: `#02A7A7`
  - HSL: 180° 98% 33%
  - Use for primary actions, active states, and highlights.
- MHL Bright Aqua: `#00C4C4`
  - HSL: 180° 100% 38%
  - Use for hover and energetic highlight states.
- MHL Deep Aqua: `#018888`
  - HSL: 180° 99% 27%
  - Use for pressed states and accessible Aqua-on-light applications.
- MHL Orange: `#F4A300`
  - HSL: 40° 100% 48%
  - Use as an editorial accent for links, key data, and select emphasis.

### Neutral

- MHL Mist: `#E7F2F3`
  - HSL: 184° 31% 92%
  - Use as the primary page canvas and light brand field.
- MHL White: `#FFFFFF`
  - HSL: 0° 0% 100%
  - Use for content surfaces and reversed logo space.
- MHL Light Gray: `#D1D1D1`
  - HSL: 0° 0% 82%
  - Use for borders, rules, and restrained structure.
- MHL Silver: `#99A1AF`
  - HSL: 221° 11% 64%
  - Use for secondary visual detail and quiet metadata.

### Semantic colors

- Build Green: `#2D8C4E` for success states, positive indicators, and approvals.
- Caution Amber: `#D4920D` for warning states, attention needed, and pending items.
- Alert Red: `#B82F2F` for error states, destructive actions, and critical alerts.
- Info Blue: `#2A7ABF` for informational callouts, help text, and guidance.

### Color balance

- 60% Mist
- 25% Ink
- 10% Aqua
- 5% Orange

Lead with Mist or white surfaces. Use Ink for typographic weight, Aqua for actions and navigation, and Orange as a controlled editorial signal rather than a second CTA color.

### Accessibility

Preferred combinations:

- Ink `#232323` on Mist `#E7F2F3`: preferred body text and content surface.
- White `#FFFFFF` on Aqua `#02A7A7`: primary action and navigation treatment.
- White `#FFFFFF` on Ink `#232323`: dark surfaces and reversed logo treatment.

Use Deep Aqua when smaller text needs additional contrast. Reserve Orange for links, large type, data marks, and emphasis. Do not use Orange as small body copy on white.

## Typography

### Montserrat

- Roles: display, H1, H2, H3
- Weights: 600 and 700
- Use for: hero headlines, page titles, section headers, card titles, component headers, navigation, and brand statements

### Open Sans

- Roles: body and caption
- Weights: 400 and 600
- Use for: body copy, paragraphs, descriptions, captions, labels, metadata, and form labels

### JetBrains Mono

- Role: mono
- Weight: 400
- Use for: code, technical specifications, hex values, data, numbering, and utility text

Type scale:

- Display: 3rem / 48px, 700, -0.02em
- H1: 3rem / 48px, 700, -0.015em
- H2: 2rem / 32px, 600, -0.01em
- H3: 1.25rem / 20px, 600, -0.005em
- Body: 1.125rem / 20px, 400, 0em
- Caption: 0.875rem / 14px, 600, 0.01em
- Mono: 0.875rem / 14px, 400, 0em

## Voice and tone

MHL speaks with practical conviction: community-rooted, specific about the work, and focused on homes built and people served.

### Brand attributes

- Practical: Lead with what MHL does: design, finance, build, and deliver affordable housing.
- Community-Rooted: Center residents, local partners, and the neighborhoods most affected by the housing gap.
- Specific: Use concrete details, project phases, locations, and housing outcomes instead of abstractions.
- Action-Oriented: Use active language that moves from the challenge to a credible next step.

### Preferred language

- Delivering solutions to increase the supply of affordable housing.
- Product, process, and capital, aligned to get projects built.
- Real housing. Built for people who need it.

### Avoid

- Leveraging synergies to disrupt the housing paradigm.
- We transform outcomes through a best-in-class platform.
- An innovative, end-to-end ecosystem of solutions.

Tone should be formal rather than casual, serious rather than playful, simple rather than complex, and active rather than passive.

## Imagery and photography

Lead with architectural renderings and real project imagery: practical, people-aware, and grounded in the neighborhoods MHL serves.

Prioritize:

- Finished work, site progress, and architectural renderings over generic stock photography.
- Housing within the street, block, and landscape that give a project its civic context.
- Lived community and everyday use rather than posed lifestyle scenes.
- Plans, modular details, and high-quality renderings that make the product and process tangible.

## Spacing and grid

Use an 8px base unit for predictable, harmonious layouts.

Recommended scale:

`8px`, `16px`, `24px`, `32px`, `48px`, `64px`, `80px`, `96px`, `128px`

## Applications

### Business card

Use a dark Ink front with the white logo or a Mist reverse with Ink typography. Any sample contact details must be replaced before production.

### Letterhead

Use the black logo on white with restrained Ink, Gray, and Aqua details.

### Email signature

Use the light version on white email clients and the reversed version on dark email clients. Keep the logo, name, role, contact details, and website in a compact hierarchy. Replace sample contact details before use.

### Google Sheets project pipeline

Use a Mist title bar, Ink column headers, Open Sans cell text, JetBrains Mono metadata, and Aqua status accents. Organize project, neighborhood, typology, status, units, and next milestone into clear columns.

### Google Slides deck

Use an Ink or Graphite cover with a white logo, then a white or Mist content slide with Ink headlines, Aqua section labels, and concise housing-specific data. The example deck includes a dark cover slide and a light content slide.

### Presentation slide

Use Graphite or Ink surfaces, white typography, Aqua section labels, and concise housing-specific language.

### Digital banner

Use Ink-to-Graphite dark surfaces, an Aqua call to action, and direct action-oriented messaging.

## Machine-readable resources

The visual guide is JavaScript-rendered. Agents that do not execute JavaScript should use the machine-readable resources below.

Published resources:

- Visual guide: https://brand.memphishousinglab.org
- Structured JSON, current version: https://brand.memphishousinglab.org/api/brand-guidelines-v1.4.json
- Structured JSON, compatible alias: https://brand.memphishousinglab.org/api/brand-guidelines.json
- Full plain text: https://brand.memphishousinglab.org/llms-full.txt
- Resource index: https://brand.memphishousinglab.org/llms.txt

Official logo files:

- Black SVG: https://brand.memphishousinglab.org/MHL-Logo-Black.svg
- White SVG: https://brand.memphishousinglab.org/MHL-Logo-White.svg
- Black PNG, 2000 x 2000, Replit App Storage: https://brand.memphishousinglab.org/assets/brand/mhl-logo-black.png?download=1
- White PNG, 2000 x 2000, Replit App Storage: https://brand.memphishousinglab.org/assets/brand/mhl-logo-white.png?download=1
- Alternate source directory, user-supplied: https://drive.google.com/drive/folders/1Le_34l8wZYQYGH3JsjQ1cEdv38x9mQ6d?usp=share_link
The visual guide is JavaScript-rendered. The structured JSON and plain-text resources provide the same brand data without requiring JavaScript.