Brand Identity

FamilyFocus Style Guide

Brand Colors

50
#FFF4E6
100
#FFE4B8
200
#FFD089
300
#FFBC5A
400
#FFA82B
500
#FF6A00
600
#E55A00
700
#CC4A00
800
#B23A00
900
#992A00

Typography

Heading 1

text-4xl md:text-6xl font-bold

Heading 2

text-3xl md:text-5xl font-bold

Heading 3

text-2xl md:text-4xl font-bold

Heading 4

text-xl md:text-2xl font-bold

Heading 5

text-lg md:text-xl font-semibold

Heading 6

text-base md:text-lg font-semibold

Large paragraph text for emphasis and important content.

text-lg

Regular paragraph text for body content and general reading.

text-base

Small text for captions, labels, and secondary information.

text-sm text-gray-600

Buttons

Primary Button Secondary Button Tertiary Button Link Button
With IconWith Icon

Cards

Basic Card

This is a basic card component with some content and a call to action.

Learn More

Brand Card

This card uses the brand color palette for a more integrated look.

Get Started

Featured Card

This is a featured card with a gradient background using brand colors.

Explore

Usage Guidelines

Brand Color Application

  • brand-500 (#FF6A00): Primary brand color for buttons, links, and key UI elements
  • brand-600: Hover states for primary elements
  • brand-50-200: Light backgrounds and subtle accents
  • brand-700-900: Text on light backgrounds, high-contrast elements
  • White text: Use on brand-500 and darker for proper contrast (AA compliant)