Navy
Shared blue spine; institutional depth
Design Notes onEditorial red marks implementation and governance commentary. Color tabs remain independent.
Florida Non-Profit Housing
A clear way forward starts with an honest next step.
FNPH should feel like discovering a credible path where none was obvious: human first, accurate, and ready to help.
This direction begins with a visitor’s situation, makes responsibility clear, and names outside destinations before anyone leaves FNPH.
Process
Clear paths show the next step before asking someone to act.
- SituationName what brings the visitor here.
- OwnerShow who is responsible for the response.
- Next stepKeep the immediate action short and clear.
- Where nextHandoffName the destination before anyone leaves FNPH.Disclose the destination before navigation.
Principle
Public service should feel like a field guide, not a form maze.
Put a person’s question beside the next responsible action.
- Type
- Civic headings state the decision; calm body copy explains consequence.
- Space
- Keep each question close to its answer, with enough space to read both comfortably.
- Color
- Blue guides; green reassures; sand gives public information room to breathe.
- Behavior
- Small screens keep the question before its answer and keep language choices visible.
FNPH should not resemble an anonymous service catalog, divide its audiences into competing identities, or expect a logo to explain the experience. Begin with the visitor’s situation, keep every pathway recognizably FNPH, and state responsibility and next steps in plain language.
Logo
One drawing works in dichrome and monochrome, then scales from mark to signature.
See the two marks together first, then compare how the initials, full name, and formal signature fit different settings.
The active collection exposes one drawing across two color variations and five forms. Usage rules, stable paths, and excluded illustration studies follow.
Legacy logo
Begin with FNPH’s current home as the legacy anchor.
The original mark establishes the all-blue legacy, residential silhouette, Florida landscape, and full organization name. The primary mark and its doorway reduction simplify those recognizable elements around the open-door promise.
Rationale
Keep the familiar house and make the open door unmistakable.
In use
Meet the two marks together, then choose the signature that fits the setting.
The house with the open door is one drawing issued in dichrome and monochrome. Only the monochrome variation is ever a single color. The dichrome variation is always navy and marigold. These marks are serving the site today, but the identity remains under review.
public/logos/active/dichrome-mark.svg
public/logos/active/monochrome-mark.svgHow the system works
Dichrome carries recognition. Monochrome carries reproduction.
The variations are not alternate palettes. Use dichrome when the fixed navy-and-marigold drawing can appear intact. Move to monochrome only when the background, material, or production process requires one color.
Dichrome
Navy house, marigold sun
Use the full-color mark and signatures in navigation, public-facing digital work, presentations, and color print. Never invert, tint, mask, or recolor it.
Monochrome
One color: navy, white, or black
Use navy on light grounds, white on navy or an approved photograph treatment, and black for one-color print. Never turn the dichrome drawing into the one-color file.
- Navy on white or creamLight grounds. The default single-color use.
- White on navyNavy bands, photographs behind a scrim, dark print.
- Black on whiteOne-color print, faxes, stamps, engraving.
Mark + name
The signature set moves from the bare mark to initials, then to the full-name typography.
The house and open door do not change. Workhorse and Loud pair the mark with FNPH initials. Compact and Formal bring in the organization’s full name and typographic voice when context or formality requires it.
Initials · everyday
Workhorse
Use for navigation, headers, and routine digital touchpoints where the identity repeats often and must stay compact.
public/logos/active/dichrome-workhorse-mark.svg
public/logos/active/monochrome-workhorse-mark.svgInitials · large
Loud
Use when the identity is the main announcement: covers, banners, event backdrops, and signage with ample width.
public/logos/active/dichrome-loud-mark.svg
public/logos/active/monochrome-loud-mark.svgFull name · constrained
Compact
Use when the full organization name must travel with the mark inside a narrow column, document, or social composition.
public/logos/active/dichrome-compact-mark.svg
public/logos/active/monochrome-compact-mark.svgFull name · official
Formal
Use for wide formal applications such as letterhead and approved print pieces, where the full name and service line remain legible.
public/logos/active/dichrome-formal-mark.svg
public/logos/active/monochrome-formal-mark.svgSlots
Stable URLs the site chrome reads through the active collection.
/logos/lockup.svg- Lockup — serves the navigation once scrolled (Brand0Lockup).
public/logos/active/lockup.svg /logos/lockup-compact.svg- Compact lockup — serves the navigation over the top of a threshold (Brand0Lockup).
public/logos/active/lockup-compact.svg /logos/mark.svg- Mark — serves the dichrome house alone (reference; footer uses the formal monochrome lockup).
public/logos/active/mark.svg /logos/mark-mono.svg- Single-color mark — serves any one-color reproduction — white on navy or a photograph, black in one-color print.
public/logos/active/mark-mono.svg /logos/wordmark.svg- Wordmark — serves reference only.
public/logos/active/wordmark.svg /logos/wordmark-stacked.svg- Stacked wordmark — serves reference only.
public/logos/active/wordmark-stacked.svg
Interaction + loading
The rising sun can welcome interaction and become a branded loading cue when a page truly needs one.
At rest the navigation carries the monochrome treatment — navy only, no sun. On hover the marigold sun rises from behind the house into its dichrome position; as it breaks past the roofline the rays bloom outward from the sun, the short bottom-right field trailing in lazily, the whole field turning at the Donate action's slow pace. Once the sun has risen it stays — the lockup keeps reading dichrome until the page reloads, and only the ray field settles back down. The field lives behind the artwork: it reads through the sky and the under-eave strips, stops at the band's top edge and the silhouette's base, and the open doorway is masked so the sun never shows through it mid-rise. While the lockup is hovered, the Donate action's burst yields so only one sunburst plays at a time.
As a loader, the same motion can run only while real work is pending on the site or an individual page. It must pair with written loading status, never delay navigation for effect, and resolve to a static mark when reduced motion is requested.
Illustration
Spot-illustration direction sits outside the logo system.
Figures in a doorway and audience-colored mark studies are illustration layers. They never replace the primary mark or its reduction.
Illustration studies for reference
public/logos/collections/decorated/door-portal.svg
public/logos/collections/decorated/door-portal-family.svg
public/logos/collections/resident-green-door-variants/house-full-resident-v1.svg
public/logos/collections/resident-green-door-variants/resident-door-v1.pngColor
Purposeful color helps people recognize what kind of help comes next.
Each family has one clear job: helping people recognize guidance, reassurance, public information, and important states. Green supports resident guidance, while Marigold belongs to every FNPH audience.
Every role maps to a canonical runtime token. Meadow mist is the quiet resident ground beside Green tint; sand wash is the complimentary public field beside cream; Marigold is a shared cross-register accent.
Institution blue
Blue guides people through FNPH information and actions.
Royal
Links, information, and active emphasis
Sky tint
Institutional support surface
Sky wash
Quiet institutional ground
Resident green
Green brings warmth and reassurance to resident and callback paths.
Live oak
Resident actions and readable text
Field green
Large-scale resident emphasis only
Green tint
Resident reassurance surface
Meadow mist
Quiet resident ground, lighter than Green tint
Public sand
Sand, cream, and a quiet sand wash keep public guidance open, warm, and easy to read.
Clay
Grounded public detail
Sand
Public warmth and section ground
Cream
Primary public reading surface
Sand wash
Quiet public field, lighter than cream
Shared accent
Marigold highlights rare moments shared across every FNPH audience.
Marigold
Sparse shared warmth; never warning
Neutrals
Ink, slate, borders, and white make the information easy to scan.
Ink
Primary text
Slate
Secondary text on light grounds
Border
Rules and field boundaries
White
Clean overlays and reverse text
Alerts
Errors and warnings are named clearly instead of relying on color alone.
Error
Error state with explicit language
Warning
Warning state; separate from Marigold
Color pairings
These combinations keep information clear and readable.
Navy on Sky washInstitutional information
Live oak on Green tintResident guidance
Ink on Sand washPublic orientation
Ink on MarigoldSparse shared accent
Color reference
The standard color reference identifies responsibility, not separate organizations.
The grouped ledger maps every semantic role to its runtime token and records aliases for implementation agents.
Blue spine
Navigation, institutional evidence, and owned actions stay recognizably FNPH.
--fnph-color-primary#1A4FC9Institutional emphasis and information state--fnph-color-primary-dark#0E2E78Civic spine, primary action, inverse field--fnph-color-primary-tint#DCE6FBBlue dividers and quiet evidence support--fnph-color-primary-wash#EFF4FDInstitutional and informational ground--fnph-color-info#1A4FC9Explicit informational state, never color aloneResident field
Warmth belongs to resident and callback paths without becoming a separate brand.
--fnph-color-resident#2F9E63Large resident emphasis; not normal white text--fnph-color-resident-dark#1E5C3FResident action and normal white text pairing--fnph-color-resident-tint#E4F2EAResident guidance and reassurance surface--fnph-color-resident-wash#F3F8F5Quiet resident ground, lighter than Green tint--fnph-color-success#2F9E63Success state with a written statusPublic ground
Open orientation feels warm while blue continues to own navigation and consequence.
--fnph-color-public#EADFC8Public orientation and pathway ledger ground--fnph-color-public-light#FBF8F0Primary reading surface--fnph-color-public-wash#FDFBF6Complimentary linen field, lighter than cream; never text--fnph-color-public-dark#C9B896Muted public divider or supporting fieldShared accent
Marigold indexes moments across Public, Resident, and Institution; it never belongs to one register.
--fnph-color-accent#F2A33CSparse shared index across all registers; never warningSystem neutral
Text, rules, and negative space carry hierarchy before decoration does.
--fnph-color-ink#1B2333Primary text and deepest neutral field--fnph-color-slate#5A6275Secondary copy on light grounds--fnph-color-border#DDE2EAQuiet structural rule--fnph-color-white#FFFFFFInverse copy and clean overlayConsequential state
Errors and warnings are named in language and use their functional roles only.
--fnph-color-error#C42B2BError status and recovery cue--fnph-color-warning#C77800Warning state; distinct from marigoldTypography
Warm authority makes decisions clear and explanations easy to follow.
Libre Franklin makes decisions clear; Outfit keeps explanations warm, readable, and flexible across languages.
Libre Franklin 600/700 carries display hierarchy; Outfit 400/600 carries body, interface, and multilingual expansion.
displayLibre Franklin · 54px · 700 · 1.05Housing help should begin with a clear next step.
h1-minLibre Franklin · 40px · 700 · 1.1Tell us what brings you here.
h2Libre Franklin · 32px · 700 · 1.15For farmworkers, the first step is a callback.
h3Libre Franklin · 24px · 600 · 1.25Before you leave FNPH
leadOutfit · 20px · 400 · 1.5Start with your situation. FNPH will show what to do next or tell you where the path continues.
bodyOutfit · 17px · 400 · 1.6Rental community questions go to the property manager. FNPH does not provide rental intake on this site.
labelOutfit · 12px · 600 · 1.4 · 0.08emBEFORE YOU LEAVE · PROPERTY MANAGER
Voice & tone
Speak with care, clarity, and practical confidence.
FNPH sounds open, grounded, and capable. The voice stays steady; the tone changes with the visitor’s situation.
Public copy names the actor, action, consequence, and next owner. Internal system language stays in Design Notes.
- Open
- Begin with the person’s situation and make the way forward visible.
Tell us what brings you here.
- Grounded
- Use plain language, name who owns the next step, and avoid savior language.
Rental questions continue with the property manager.
- Capable
- State what FNPH can do, what happens next, and where its responsibility ends.
FNPH will call to learn what support may fit.
Match the tone to the moment.
- Orientation
- Calm and directChoose the housing question that fits your situation.
- Uncertainty
- Reassuring, never promisingStart with your situation. FNPH will show what to do next.
- Outside destination
- Explicit before the clickBefore you leave FNPH, we name the destination and what happens next.
- Evidence
- Precise and source-ledPublish a claim only when FNPH can name its source.
Write the next step, not the interface.
AvoidSubmitUseRequest a callback
AvoidContinueUseGo to the property manager’s site
AvoidLearn moreUseSee homeownership guidance
- Use short, concrete verbs and name FNPH when it owns the action.
- Name outside destinations before navigation.
- Write English, Español, and Kreyòl ayisyen in full.
- Never invent claims, amounts, deadlines, eligibility, or translations.
Spacing
Clear spacing keeps related ideas close and gives each step room to breathe.
Tiny detail
xs4pxTight pair
sm8pxRelated group
md16pxComfortable gap
lg24pxSection space
xl32pxLarge break
2xl48pxPage break
3xl72pxWide page frameApplication frame78rem
Comfortable reading widthReading measure65–75ch
Long explanations stay readable, while short actions are easy to find first.
Long explanations stay within 65–75ch; action labels and ledger answers remain shorter and scan first.
Shape
One pill silhouette, two clearly different jobs.
Start here opens a pathway. Donate supports the organization. Their shared shape says “action”; color, motion, placement, and language keep their meaning separate.
Start here
Threshold action. Use once near a page opening to begin FNPH’s owned next step.
- Color
- Navy on a quiet public ground
- Motion
- Arrow responds only on hover or focus
- Limit
- One opening action, never a persistent badge
Donate
Signature action. Use persistently in shared navigation for the fundraising path only.
- Color
- Ink on the reserved marigold fill
- Motion
- Slow ambient sunburst; static when reduced
- Limit
- Never reused for ordinary calls to action
Shared silhouette, separate authority. The page-opening pill is a simple owned next step. The marigold patterned pill is Donate’s locked signature. Ordinary buttons keep the 4px control radius; status and language pills stay compact and quiet.
- 4px
- Ordinary buttons and controls
- 8–24px
- Notices, fields, images, and contained surfaces
- 999px
- Compact utilities plus Start here and Donate
Do / Don’t
Make meaning visible: write the consequence and never rely on color alone.
Do
Need guidanceBegin with counseling
Pair the situation and responsible step.
Don’t
Default to equal, context-free choices.
Do
Before you leaveExternal handoffProperty manager · rental information
Name where people are going before they leave.Name the destination before navigation.
Don’t
ContinueDestination not disclosed
Make a redirect feel like an FNPH-owned action.
Do
PublicResidentInstitution
Shift emphasis inside one shared structure.
Don’t
ABC
Turn audiences into unrelated identities.Turn registers into unrelated identities.
Do
Before you leave FNPHRental questions continue with the property manager.
Use clear headings and plain language.Use semantic hierarchy and plain language.
Don’t
Status depends on color
Ask color alone to carry meaning.