houseplans.dev

This is an unofficial, unapproved website created by Steven Roland at America's Best House Plans for internal brand asset management and style guide reference.

Log in

Color Palette

Our color system balances warmth and professionalism for a consistent, accessible experience.

Brand

Primary brand colors for identity and key actions

Red

50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Neutrals

Neutral colors for backgrounds, borders, and text

Gray

50
100
200
300
400
500
600
700
800
900
950

White

default

Black

default

Contextual

Semantic colors for success, danger, warning, and informational states

Success

Used for confirmations and positive feedback
50
100
200
300
400
500
600
700
800
900
950

Danger

Used for errors and destructive actions
50
100
200
300
400
500
600
700
800
900
950

Warning

Used for cautions and pending states
50
100
200
300
400
500
600
700
800
900
950

Info

Used for informational messages and links
50
100
200
300
400
500
600
700
800
900
950

Usage Examples

How contextual colors appear in real UI components

Messages & Alerts

House plan saved successfully!
Failed to load plan details
Plan modifications pending review
New plans available in your area

Interactive Elements

Action Buttons
Status Indicators
Available
Sold Out
Limited
New

Implementation Guidelines

✓ Do

  • Use green for positive actions and success states
  • Use red for destructive actions and error states
  • Use amber for warnings and caution states
  • Use blue for informational content and links
  • Maintain consistent color meanings across the app
  • Consider accessibility and color contrast

✗ Don't

  • Mix contextual meanings (red for success, etc.)
  • Use contextual colors for decorative purposes
  • Rely solely on color to convey information
  • Use brand colors for system feedback
  • Overuse bright contextual colors
  • Ignore dark mode variations