Skip to content

AppsFolio Design Guide

This guide defines the visual identity and UI standards for AppsFolio development.

Brand Colors

Primary Palette

Color Name Hex Tailwind Class Usage
AF Navy #2D4E62 bg-af-navy, text-af-navy Primary brand color, headers, navigation
AF Orange #DB5F29 bg-af-orange, text-af-orange Accent, CTAs, highlights, links
AF Blue #5079A5 bg-af-blue, text-af-blue Secondary accent, informational elements

Color Variants

Color Hex Usage
Burnt Orange #C05021 Darker orange for hover states
Light Gray #F3F4F6 Backgrounds, cards
White #FFFFFF Text on dark backgrounds, card backgrounds

CSS Custom Properties

:root {
  --color-af-navy: #2D4E62;
  --color-af-orange: #DB5F29;
  --color-af-blue: #5079A5;
}

Usage Guidelines

  • Navy (#2D4E62): Use for primary navigation, headers, and main UI chrome
  • Orange (#DB5F29): Use sparingly for calls-to-action, important buttons, and accent highlights
  • Blue (#5079A5): Use for secondary actions, links, and informational elements

Typography

Font Family

Primary Font: Roboto (Google Fonts)

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">

Font Weights

Weight Name Usage
300 Light Large display text, subtle labels
400 Regular Body text, paragraphs
500 Medium Subheadings, emphasized text
700 Bold Headings, buttons, important labels

Type Scale (Tailwind)

Element Class Size
H1 text-3xl or text-4xl Page titles
H2 text-2xl Section headers
H3 text-xl Subsection headers
H4 text-lg Card titles
Body text-base Default body text
Small text-sm Helper text, captions
XSmall text-xs Labels, metadata

Logo & Brand Assets

The AppsFolio logo features a hawk mascot representing strength, vision, and reliability.

Logo Files:

File Location Usage
Main Logo (PNG) /static/logo.png General use, light backgrounds
White Logo (SVG) /help/docs/assets/images/whiteLogo.svg Dark backgrounds
Admin Logo /static/adminlogo.png Django admin interface

Favicon

File Location Usage
Main Favicon /static/favicon.png Primary application
Admin Favicon /static/admin_favicon.png Admin panel
API Favicon /static/api_favicon.png API documentation

Logo Usage Guidelines

  • Maintain clear space around the logo equal to the height of the "A" in AppsFolio
  • Do not stretch, rotate, or alter the logo colors
  • Use the white logo variant on dark backgrounds
  • Minimum size: 32px height for digital use

UI Components

Buttons

Primary Button (Orange)

<button class="bg-af-orange hover:bg-orange-700 text-white font-medium py-2 px-4 rounded">
  Primary Action
</button>

Secondary Button (Navy)

<button class="bg-af-navy hover:bg-slate-700 text-white font-medium py-2 px-4 rounded">
  Secondary Action
</button>

Outline Button

<button class="border-2 border-af-orange text-af-orange hover:bg-af-orange hover:text-white font-medium py-2 px-4 rounded">
  Outline Action
</button>

Cards

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold text-af-navy mb-2">Card Title</h3>
  <p class="text-gray-600">Card content goes here.</p>
</div>

Form Inputs

<input type="text"
       class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-af-blue focus:border-transparent"
       placeholder="Input field">

<nav class="bg-af-navy text-white">
  <a href="#" class="hover:text-af-orange">Nav Item</a>
</nav>

Spacing & Layout

Spacing Scale (Tailwind)

Use consistent spacing based on Tailwind's default scale:

Class Size Usage
p-2, m-2 0.5rem (8px) Tight spacing
p-4, m-4 1rem (16px) Default spacing
p-6, m-6 1.5rem (24px) Comfortable spacing
p-8, m-8 2rem (32px) Section spacing

Container Widths

<!-- Standard content container -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>

Grid System

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Grid items -->
</div>

Icons

Icon Libraries

AppsFolio uses:

  • Heroicons - Primary icon set (via Tailwind)
  • Material Icons - For prose editor toolbar

Icon Sizing

Size Class Usage
Small h-4 w-4 Inline with text
Medium h-5 w-5 Buttons, list items
Large h-6 w-6 Standalone icons

Icon Colors

Icons should inherit text color or use brand colors:

<svg class="h-5 w-5 text-af-orange">...</svg>
<svg class="h-5 w-5 text-af-navy">...</svg>

Shadows & Borders

Shadow Scale

Class Usage
shadow-sm Subtle elevation
shadow Cards, dropdowns
shadow-md Modals, popovers
shadow-lg Prominent elements

Border Radius

Class Usage
rounded Buttons, inputs
rounded-md Cards
rounded-lg Large cards, modals
rounded-full Avatars, badges

States & Feedback

Interactive States

State Style
Hover Darken by 10% or use hover variant
Active Darken by 15%
Focus Ring with ring-af-blue
Disabled opacity-50 cursor-not-allowed

Status Colors

Status Color Class
Success Green text-green-600, bg-green-100
Warning Yellow text-yellow-600, bg-yellow-100
Error Red text-red-600, bg-red-100
Info Blue text-af-blue, bg-blue-100

Responsive Breakpoints

Breakpoint Min Width Usage
sm 640px Mobile landscape
md 768px Tablets
lg 1024px Small desktops
xl 1280px Large desktops
2xl 1536px Extra large screens

Dark Mode (Future)

Reserved color tokens for future dark mode implementation:

/* Dark mode palette (not yet implemented) */
--color-dark-bg: #1a1a2e;
--color-dark-surface: #16213e;
--color-dark-text: #e4e4e7;

Asset Locations

Static Files

Asset Type Location
Logos /static/ and /static/images/
Favicons /static/
CSS /theme/static_src/src/styles.css
Compiled CSS /staticfiles/css/dist/styles.css

Marketing Assets

Asset Location
Hero Image /appsfolio_web/src/images/afheroimage.png
MacBook Mockup /appsfolio_web/src/images/macbook.png
Feature Images /appsfolio_web/src/images/*.png
Animated Demos /appsfolio_web/src/images/*.gif

Tailwind Configuration

The custom Tailwind configuration is located at: /theme/static_src/tailwind.config.js

Plugins Enabled

  • @tailwindcss/forms - Form element styling
  • @tailwindcss/typography - Prose content styling
  • @tailwindcss/line-clamp - Text truncation
  • @tailwindcss/aspect-ratio - Aspect ratio utilities

Quick Reference

Most Used Classes

<!-- Brand colors -->
bg-af-navy text-af-navy
bg-af-orange text-af-orange
bg-af-blue text-af-blue

<!-- Common patterns -->
rounded-lg shadow-md p-6          <!-- Card -->
font-medium py-2 px-4 rounded     <!-- Button -->
text-gray-600                      <!-- Body text -->
text-gray-500                      <!-- Muted text -->

Color Contrast

Ensure WCAG AA compliance:

  • White text on #2D4E62 (Navy) ✓
  • White text on #DB5F29 (Orange) ✓
  • White text on #5079A5 (Blue) ✓
  • Navy text on white ✓