Florida Non-Profit Housing · Developed system proof

Design system

The responsive handoff ledger, developed for implementation decisions.

Maturity
Foundations, components, and compositionsfoundations+components+compositions
Identity
Candidate · not canon
Mark
Proposed options · none approvedpublic/logos · candidate assets
Runtime
src/styles/theme-overrides.css

Consume

Use what exists. Name what does not.

This route is an operate-mode reference for the upcoming site implementation.

  1. Start with authority.Read PRODUCT.md, DESIGN.md, and design/SKILL.md before changing public UI.
  2. Consume runtime roles.Use variables from src/styles/theme-overrides.css; do not add local colors, fonts, spacing scales, or radii.
  3. Keep registers together.Public, Resident, and Institution may shift ground and emphasis, but share typography, structure, state language, and navigation behavior.
  4. Disclose consequence.For an external destination, name the owner and what happens next before navigation.
  5. Implement before claiming.A production primitive becomes Existing only after a shared module path exists and its supported states can be exercised here.

Foundations

The application and this reference consume one runtime map.

Color 19 canonical roles; register plus state Typography Libre Franklin and Outfit; seven roles Spacing 4px–72px; 78rem frame; 65–75ch reading Shape 4px, 8px, 16px, and status-only pill

ComponentsAstro-native component slice 02

Clear actions and short forms make the next step feel possible.Semantic actions, feedback, and native fields now have importable module paths.

These components use real FNPH situations: orientation, callbacks, resident guidance, and an honest handoff before anyone leaves the site.

No React, Tailwind, hydration directive, or component-library runtime is present. Props map to native button, a, input, textarea, select, fieldset, status, alert, and complementary-region semantics.

Actions

Buttons and navigation

Use a button for something that happens here. Use a link when the visitor goes somewhere else.

FnphButton never accepts href; FnphLink always renders an anchor. Variants: primary | resident | secondary.

Review counseling options View rental handoff

Choose an action to inspect the pattern. This demonstration does not send information.

Default
Hover
Focus visible
Active
Disabled
Tokens
primary-dark, resident-dark, white, primary-wash, accent
Contract
48px minimum height · 12px vertical padding · 4px radius · Marigold focus outline
Responsive
Action groups wrap, then stack to full width below 640px unless explicitly inline.

Forms

A callback begins with a short first contact.

Language and a telephone number are enough to begin. Everything else is optional, and this demonstration sends nothing.

FnphInput, FnphTextarea, FnphSelect, FnphRadioGroup, FnphCheckbox, and FnphErrorSummary compose without a client framework. The demo intercepts submit locally and never constructs a request payload.

Farmworker callback pattern

Tell us how to reach you.

This is a design-system demonstration. No information is sent, stored, or routed.

What language do you prefer? Required

Choose the language FNPH should use for the callback.

Use the number where you can receive the callback.

Leave this unchecked if voicemail is not private or safe for you.

Do not include Social Security numbers, financial account details, or other sensitive information.

No information is sent from this design-system demonstration.

Enter a complete telephone number.

Read-only values remain legible and focusable.

Disabled controls are visibly unavailable and skipped by keyboard navigation.

Required
Preferred language and telephone only; no eligibility, payment, or financial-routing fields.
Validation
Summary receives focus, links to invalid controls, and supplements native labels and required state.
Boundary
No action, FormData, network request, persistence, or runtime framework.

Feedback

Notices name the state.

Color supports the message, but the heading and explanation always carry its meaning.

FnphNotice supports info | resident | error. Error resolves to role="alert"; other tones default to role="status".

Handoff

Responsibility changes before navigation.

The visitor sees who owns the destination and what FNPH does not provide before choosing to continue.

FnphExternalHandoff requires title, owner, consequence, href, and label. This specimen intentionally links to the internal Application proof rather than inventing an external destination.

Proposed logosCandidate mark inventory

Compare the options before choosing a direction.Review source assets before defining identity contracts.

Two tabs compare the house-led system with the doorway-extension direction. Option A contains the house, variants, wordmark, and name stack; Option B contains the doorway, FNPH shorthand, resident doorway, and decorated extensions. Colors are fixed; neither direction is approved.

The gallery renders all 12 proposals from the corrected public/logos folders across two keyboard-operable tab panels. Option A owns seven house/name assets; Option B owns five doorway/decorated assets. No lockup, responsive variant, clear-space rule, minimum size, monochrome master, or production export is approved.

Original Florida Non-Profit Housing logo with blue house and Florida landscape illustrations.

Original identity anchor

Begin with the home FNPH already owns.

The original mark establishes the all-blue legacy, residential silhouette, Florida landscape, and full organization name. Both proposed options simplify those recognizable elements around the open-door promise.

Option A · House + variants

House, signatures, and optional variants.

The full house leads the identity. The FNPH wordmark and full-name stack carry the name, while environmental and resident variants extend the scene without changing its core promise.

Wordmark and stack

Name-led signatures that pair with the Option A house system.

FNPH wordmark proposed FNPH logo
FNPH wordmark A wide abbreviated signature. public/logos/FNPH.svg
Full-name stack proposed FNPH logo
Full-name stack A stacked Florida Non-Profit Housing signature. public/logos/FloridaNon-ProfitHousing-stacked.svg

House mark and variants

The core house plus optional environmental and resident expressions.

House proposed FNPH logo
House Standalone Navy house-and-door proposal. public/logos/House V1.svg
Full house proposed FNPH logo
Full house House, tree, and governed Marigold sun. public/logos/variants/House Full V1.svg
House and sun proposed FNPH logo
House and sun House with a governed Marigold sun. public/logos/variants/House Sun V1.svg
House and tree proposed FNPH logo
House and tree House scene with a palm silhouette. public/logos/variants/House Tree V1.svg
Resident house proposed FNPH logo
Resident house House scene with a Resident-green doorway. public/logos/resident green door variants/House Full Resident v1.svg

Logo thought process

Improve the familiar mark around one clear promise.

Option A · House

The idea is not to dramatically reformat the FNPH identity, but to take its best elements and improve them. The new design keeps the distinctive all-blue palette and the shape of a home, with optional environmental elements—including a palm-tree remnant and the Florida sun—to brighten it up. Its core feature and most notable addition is the open door. The open door gives the logo a promise: FNPH works to help you find your way home.

Option B · Doorway Extension

The door-only alternative doubles down on that promise by focusing on the part of the home FNPH truly impacts: the path to one. Integrating the door-only mark as an extension of the blue house mark provides FNPH with a powerful shorthand.

Classification gate: Tabs classify the same proposed inventory into house-led and doorway-led systems without implying approval. All assets use the fixed governed palette and retain separate review roles.

Honest inventory

A path or it is not a primitive.

Existing means the source can be named. Planned means implementation belongs to Build 1. N/A keeps out-of-scope systems out of this kit.

AreaStatusSourceTruth
Canonical foundations Existing DESIGN.md Current Exhibit B token and guidance authority
Runtime token map Existing src/styles/theme-overrides.css Canonical colors, fonts, spacing, radii, and Rift semantic bridge
Self-hosted fonts Existing public/fonts/libre-franklin-600.woff2 · public/fonts/libre-franklin-700.woff2 · public/fonts/outfit-400.woff2 · public/fonts/outfit-600.woff2 Approved font families and weights
Candidate review chrome Existing src/components/ImpeccableProofBar.astro Shared route status and persistent comparison links
Candidate proof family Existing src/pages/impeccable/index.astro · src/pages/impeccable/ds/index.astro · src/pages/impeccable/application/index.astro Brand, system, and application review surfaces
Candidate proof styling Existing src/styles/brand-impeccable-proof.css Review-document and static composition styling
Application composition styling Existing src/styles/brand-impeccable.css Page-specific public-site application proof
Shared actions and buttons Existing src/components/ui/FnphButton.astro · FnphLink.astro · FnphActionGroup.astro Astro-native action modules with distinct button and navigation semantics
Shared notices and handoffs Existing src/components/ui/FnphNotice.astro · FnphExternalHandoff.astro Named feedback and consequence-before-navigation disclosure
Shared fields and forms Existing src/components/ui/FnphInput.astro · FnphTextarea.astro · FnphSelect.astro · FnphRadioGroup.astro · FnphCheckbox.astro · FnphErrorSummary.astro Native field modules plus a non-submitting callback validation specimen
Shared site navigation and containers Planned No production module observed Current navigation is page composition, not a reusable primitive
Staff product UI kit N/A PRODUCT.md · Brega BAKED boundary The Stage 2 deliverable is the adaptive public site, not the separate authoring product
Dark theme N/A DESIGN.md No dark-theme contract is defined in current canon

Developed static library

Need, ownership, and consequence stay in the same line of sight.

These later anatomies prove composition and content behavior only. Importable modules are named separately in the inventory above.

Anatomy A

Pathway ledger

Status
Static composition
Source
PRODUCT.md · Design principles 1, 4
Maturity
foundations+compositions

Visitor needGuidance for buying or keeping a home

OwnershipFNPH-owned orientation

Next stepBegin with housing counseling

On narrow screens the need remains first, followed by owner and destination. No label truncates.

Anatomy B

Callback-first multilingual rail

Status
Static composition
Source
PRODUCT.md · callback-first constraint
Maturity
foundations+compositions

EnglishEspañolKreyòl ayisyen

  1. 1Choose the language you prefer.
  2. 2Share callback details on the farmworker path.
  3. 3Continue into intake only when ready.

The rail wraps visibly at 320px; language names are text, never flags.

Anatomy C

External-handoff disclosure

Status
Static composition
Source
PRODUCT.md · rental handoff constraint
Maturity
foundations+compositions

Before you leave FNPH

Destination ownerProperty manager
PurposeRental community information
ConsequenceFNPH does not provide rental intake on this site.

Destination link follows this disclosure in production.

A route never looks FNPH-owned when responsibility changes.

Anatomy D

Governed evidence ledger

Status
Static composition
Source
PRODUCT.md · governed evidence principle
Maturity
foundations+compositions
Published evidence
Approved reports, audits, and public filings appear with source and date.
Source required
Held evidence
Unsupported figures, outcomes, and assistance amounts stay off the public site.
Not publishable
Institutional inquiry
Partner questions use their own route rather than family intake.
Separate pathway

No empty metric or invented number is used as decoration.

Anatomy E

Register field

Status
Static composition
Source
DESIGN.md · register behavior
Maturity
foundations+compositions
Public

Start with your situation

Orientation and trust on a warm ground.

Resident

Your next step

Reassurance, direct language, and callback-first behavior.

Institution

Work with FNPH

Sourced evidence and a separate inquiry path.

Shared type, ruled structure, and state language make the register shift one system rather than three brands.

Anatomy F

Responsive behavior

Status
Implementation guidance
Source
DESIGN.md · accessibility and layout
Maturity
foundations+compositions
1440px
Use the 78rem frame. Pair need and answer across asymmetrical columns; keep disclosure adjacent.
320px
Stack need before owner and next step. Wrap every language and review link without horizontal document overflow.
400% reflow
Preserve document order, visible labels, and local inventory scrolling; do not require two-dimensional page scrolling.

Every hash target clears the maximum wrapped shared proof bar.

Anatomy G

Known contrast pairings

Status
Canonical guidance
Source
DESIGN.md · Colors and Components
Maturity
foundations+compositions

White on NavyInverse headings and primary actions

Navy on Sky washInstitutional information

Live oak on Green tintResident guidance

Ink on MarigoldSparse shared accent

Field green with white is limited to large text. Normal white text uses Live oak. Meaning is always written as well as colored.

Promotion process

Maturity follows evidence, not presentation.

DESIGN.md remains current canon. This candidate route family does not imply that it has been replaced.

  1. RefineRefine the candidate on this proof family.
  2. ApproveRecord explicit approval of the direction.
  3. GovernUpdate and lint DESIGN.md.
  4. MapMap the approved language into runtime tokens.
  5. Build 1Implement shared production primitives with real module paths.
  6. UpgradeRaise maturity only when imports and supported states are demonstrable here.