Version 3 design system

Open sky, blue ink, and warm paper. Painted Florida landscapes introduce the work; spacious typography, an illustrated pathway browser, location search, and community stories carry it forward.

Open Version 3

DRAFT — NOT APPROVED · Documents the current implementation.

A blue-and-paper editorial palette

The current V3 replaces the earlier olive study with blue ink. Painted imagery brings the range of landscape colors; the interface stays restrained, flat, and free of shadows.

Blue ink#263F7DHeadings, links, editorial text
Warm paper#F7F6F0Page and settled navigation
Soft field#ECEFE9Hover fills and workshop surfaces
Rule#A4AFC3Hairline divisions
Muted blue#4F6290Supporting information
Open sky#AEC9D6Painted hero fallback
Action navy#0E2E78Primary hero action
Action royal#1A4FC9Primary action hover and focus
Meadow mist#F3F8F5Resident service pages and their chrome
Control edge#687B91Form and search control boundaries

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.

Quiet weight, generous scale

A place to
call home.

Housing guidance and support for rural Florida families.

Libre Franklin · 600: The current display face. Hero title reaches 80px at 1.06 line height, with −0.035em tracking. The desktop opening statement is 52px; pathway, story, rental, and location headings are 42px, with 26px pathway titles.
Outfit · 400 / 600: Homepage prose and pathway descriptions reach 20px at 1.6 line height on desktop. Service guides use 18px at 1.65. Homepage action labels are 16px on desktop.
Editorial measure: Story prose uses a 43-character measure; the stacked homepage introduction opens to 65 characters. Service-page introductions use 39 characters and body paragraphs up to 65.

The landscape opens the story

The homepage layers gouache sky and a masked ranch landscape around a centered promise and direct telephone action. A meadow transition leads into open editorial sections. This static specimen uses the current sky asset.

A place to call home.

Housing guidance and support for rural Florida families.

Call a housing counselor

Generated concept artwork, not documentary evidence. Archive photographs later in the page remain subject to rights and consent review.

Reading frame: Homepage, footer, and navigation share a 1080px maximum with 20px minimum side gutters. Service-guide frames use 40px desktop side gutters; mobile narrows them.
Editorial rhythm: The introduction is stacked, with its story link beside the paragraph on desktop. Location, rental, story, and desktop pathway sections align equal columns across a 56px gap.

Image treatment: Current story artwork uses a rectangular 4:3 frame. Service-guide hero art uses a 1.14 aspect ratio beside the introductory copy.
Mobile order: Editorial sections stack on mobile. The pathway browser replaces its separate preview with artwork in each choice for touch and smaller-screen layouts.

An illustrated pathway browser

The current homepage pairs a large artwork preview with four ruled choices. Hover or keyboard focus selects the corresponding image; desktop fine-pointer interaction may play a short video. Touch layouts keep the artwork inside each linked choice.

Gouache counseling artwork used in the homepage pathway browser.

A little clarity.

Free, one-on-one guidance on housing questions and keeping your current home.

Housing counseling

A home of your own.

Planning to buy? Explore homebuyer education and options for purchasing a home.

Homeownership

Static specimen of the preview and two current rows. Try the complete live pathway browser. The earlier four-column illustrated grid is preserved in the component addendum.

Resident service guides

Meadow mist grounds homeownership, counseling, USDA loan packaging, SHIP, self-help, farmworker, and rental-community pages. A breadcrumb, concise introduction, live-oak primary action, and phone alternative precede detailed guidance and forms.

View the counseling callback page

Movement follows the landscape

A sticky utility row carries the phone number, Workshops, Blog, Contact, and language control above the main directory navigation. Desktop chrome keeps a 97px frame: 40px utility row and 57px main row. The homepage begins transparent and uses the scrolled state to settle its surface and swap the compact mark for the full-name logo.

Scroll and artwork: Sky, ranch landscape, and copy move at different rates. Pathway videos load on interaction and pause off selection or when the page is hidden. Reduced motion retains static artwork and removes parallax.
Action hierarchy: The hero’s navy pill calls a housing counselor. The secondary link jumps to housing paths. On inner pages, Donate becomes an unfilled text action, preserving priority for the service action.
Shared functions: Directory menus separate the overview link from the disclosure button, with grouped links and short explanations. Mobile uses expandable groups. Resident pages use Meadow mist, while scholarship remains on paper. Footers omit the opening invitation when the page already has a closing action.