Version 3 application

The current application combines a painted homepage with practical resident guides, directory navigation, an editorial story collection, and a searchable resource library.

DRAFT — NOT APPROVED · Current implementation reference.

A painted welcome, a practical next step

Generated ranch landscape used in the current homepage hero.
Current homepage concept artwork. The live hero layers this landscape with sky and a readable action area.

A place to call home.

The first action calls a housing counselor directly. “Explore the possibilities” jumps to the four housing paths. A location search follows the pathways and leads into the contact page.

The introduction is stacked. Desktop pathway preview, location search, story, and Azalea sections align their columns across 56px gaps.

Open the homepage

One frame, several page families

Composition
A 1080px shared homepage, navigation, and footer boundary with 20px minimum side gutters. Headings retain Libre Franklin 600; Outfit carries the interface and body copy.
Resident guidance
Meadow mist, illustrated introductions, service actions, readable program sections, and the relevant callback or contact form. Scholarship retains the paper ground.
Navigation
Phone and utility links stay above grouped directory navigation. Mobile menus expand by subject. Inner Donate is an unfilled link; the page’s own service action stays prominent.
Task and reading pages
The resource library supplies search, filters, and a document reader. Stories, team, board, and institutional pages use content-specific layouts within the same visual language.

Color cues by audience

Homeownership, farmworker support, and rentals share a resident green cue. About uses warm paper and blue ink; partner pages shift to royal blue and cooler paper. Version 3 and 3 Wide share these assignments—the wide version changes the frame, not the audience palette.

Homeownership

Resident guidance

Meadow mist carries the overview and its counseling, USDA loan packaging, SHIP, and self-help guides. Live oak marks the hero action, the overview’s opening guidance band, and callback submit controls. Blue ink keeps headings and reading copy consistent; soft field separates intake forms and reveals linked pathway rows.

Meadow mist#F3F8F5
Page, settled navigation, and footer ground
Blue ink#263F7D
Headings, body copy, and text links
Live oak · V3#1E5C3F
Primary actions and full-width guidance bands
Action hover#287749
Primary action hover and keyboard focus
Soft field#ECEFE9
Form panels and pathway-row hover fills

Farmworkers

Resident support

The same green family signals direct housing help. Live oak carries “Request a callback” and “A conversation is the first step.” Meadow mist continues through rent, utility, and move-in guidance. The callback form sits on soft field, with a green submit action and stronger control outlines.

Meadow mist#F3F8F5
Page, settled navigation, and footer ground
Blue ink#263F7D
Headings, body copy, and text links
Live oak · V3#1E5C3F
Primary actions and full-width guidance bands
Action hover#287749
Primary action hover and keyboard focus
Soft field#ECEFE9
Form panels and pathway-row hover fills

Rentals

Resident housing search

Meadow mist and live oak continue the resident cue. Green marks “Explore Azalea Apartments,” the property-manager guidance band, and the closing phone action. Blue text links carry contact and related-service choices. This route directs visitors to the property manager; it does not present a rental application form.

Meadow mist#F3F8F5
Page, settled navigation, and footer ground
Blue ink#263F7D
Headings, body copy, and text links
Live oak · V3#1E5C3F
Primary actions and full-width guidance bands
Action hover#287749
Primary action hover and keyboard focus
Soft field#ECEFE9
Form panels and pathway-row hover fills

About

Organization and accountability

Warm paper keeps the organizational story distinct from resident service pages. The opening title pairs blue ink with muted blue. The Azalea feature uses a full-width soft-field background; report links gain the same fill on hover. Primary buttons use navy and change to royal on interaction.

Warm paper#F7F6F0
Page, navigation, and footer ground
Blue ink#263F7D
Primary headings and reading copy
Muted blue#4F6290
Secondary title phrase and supporting text
Soft field#ECEFE9
Azalea feature band and report-link hover
Action navy#0E2E78
Primary buttons
Action royal#1A4FC9
Primary button hover and keyboard focus

Partners

Organizations, funders, and development partners

The partner overview, preservation, development, and inquiry pages switch to a cooler blue environment. Royal headings and actions cue institutional collaboration. Preservation’s opening band and the closing inquiry band use royal with white text. The closing band reverses the button to white with navy text; its hover fill becomes soft blue. Standard royal actions become navy on hover or focus.

Partner paper#F7F9FD
Page, navigation, and footer ground
Partner soft blue#E8EEF9
Supporting panels and inquiry form
Action navy#0E2E78
Reading copy, overview hero, and button hover
Action royal#1A4FC9
Section headings, primary actions, and emphasis bands
Partner muted blue#395780
Supporting information
White#FFFFFF
Text on royal bands and inverted closing button

Shared boundaries and interaction

Resident decorative rules use #A4AFC3; form and search controls use the stronger #687B91. Partner rules mix 32% royal #1A4FC9 into sky wash #EFF4FD. White labels sit on filled actions. Inner-page Donate remains an unfilled text link, leaving the page’s primary task prominent.

Color reinforces the written page title, navigation label, and action text. The three resident audiences are distinguished by content and illustration within one shared green family.

Current implementation: v3-art.css, v3-homeownership.css, v3-partners.css, V3About.astro, and V3ResidentPages.astro. The local V3 live-oak value is #1E5C3F; these examples record the rendered version rather than substituting a foundation token.

Representative routes

These links open the current Version 3 application. They are working route references, not screenshots of an earlier design.

Home

Painted ranch hero with direct phone action; stacked introduction, image-linked housing paths, location search, workshop preview, stories, Azalea, partners, and anniversary.

Homeownership

Meadow mist service guide: breadcrumb, illustrated introduction, next-step action, phone alternative, program options, and callback guidance.

Housing counseling callback

A focused resident entry point with a clear form, consent, and next-step guidance. The service action takes priority over inner-page Donate.

Farmworker support

Callback-first guidance with rent, utility, and move-in pathways, language choices, and an explanation of what happens after contact.

Rental communities

Illustrated Azalea guidance explains the property-manager handoff before the visitor leaves FNPH. Rental intake is not collected here.

Workshops

Workshop orientation and schedule information with registration guidance.

Technical assistance library

Task-based sidebar, search and format/edition filters, saved resources, document reading controls, original downloads, and a clear reference-archive disclosure.

Contact and service area

Location-based help and a direct conversation path. The homepage location field links into this page with the search value.

Stories

An editorial story index and individual reading pages continue the homepage’s community-story treatment.

Partners

Partnership overview leads into preservation, development, and an inquiry route.

Donate

An owned giving page explains the external donation handoff before departure.