Design system

See how FNPH turns the brand direction into clear, consistent pages.The responsive handoff ledger, developed for implementation decisions.

Stage
foundations+components+compositions
Identity
Candidate assets
Mark
public/logos · hierarchy and reduction rules
Runtime
src/styles/theme-overrides.css

Use

Build honestly: use what is ready and say what still needs work.Use what exists and name what does not.

FNPH can review working actions and forms here without mistaking examples for a finished public site.

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

A shared foundation gives every FNPH page the same color, type, spacing, and shape.One source map supplies the application and this reference.

ColorColor helps people recognize each kind of guidance.19 canonical roles; register plus stateTypographyLibre Franklin names decisions; Outfit explains them.Libre Franklin and Outfit; seven rolesSpacingRelated ideas stay close, with room to read.4px–72px; 78rem frame; 65–75ch readingShapeSoft edges welcome; square controls stay clear.4px, 8px, 16px; pill reserved for status, threshold, and Donate

Components

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 explanation 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 keep each action clear.

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 optionsSee where rental questions continueView 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.

Threshold, ribbon, donate

The page opens on a photograph and one clear next step.

After the references the client responded to: a photograph fills the opening with a large white headline low on the left and one warm pill action (CPLC); the favicon becomes a tall ribbon beside images and a short divider under titles (TPL); Donate is now a locked marigold sunburst action in the shared header.

Brand0Threshold props: title, lead, next, image (labeled until rights clear), scrim: navy | ink | none, field fallback, minHeight: viewport | tall | compact. Brand0Stripe: variant ribbon | divider, size thin | wide, reveal. Donate is the shared Brand0DonateAction primitive.

A single-family home from the current FNPH site.

Florida Non-Profit Housing · rural Central Florida

A home you can afford — and keep.

One organization, many doors. Counseling is the front door; every other program is one step behind it.

Start with housing counseling

Ribbon · 48px beside an image
Ribbon · 24px
Divider · short, under a title
Divider · full width, 2px
Tokens
primary-dark, primary-tint, accent, primary, resident, resident-dark — the favicon bands, in order; the pill uses accent on ink
Contract
Heading start-aligned at line-height 1 · one next step in the first viewport · flat scrim, never a gradient · photo slot labeled until rights clear · ribbon reveal and pill motion off under reduced motion
Precedence
Pill actions follow the CPLC and TPL references the client preferred; while the brand is molded in Brand0, references override Exhibit B constructs (D-029).

Forms

Every 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.

Callback

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

Written 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".

What happens next

Review the counseling options before choosing the path that fits.

Callback request ready

Farmworker support begins with a short first contact in English, Español, or Kreyòl ayisyen.

Destination

Show where someone goes before responsibility changes.

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.

Logo

One mark leads with the house and reduces to the doorway at small sizes.

The house is the primary mark. The doorway is its reduction for small or constrained formats. Colors are fixed, so this review focuses on use and fit.

Three recommended assets define the primary mark, reduction, and large-format environmental variant. File paths, rendered-width rules, crop constraints, and excluded illustration studies follow.

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

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.

FNPH does not need a dramatic break from its current identity. The proposed drawing keeps the recognizable home silhouette and open door.

The marigold sun appears only in the dichrome variation. Monochrome strips the same drawing to one reproducible color.

Initials and full-name signatures extend the same mark without creating separate identities.

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.

FNPH house and open-door mark, dichrome
DichromeNavy house, marigold sunTwo colors, fixed. It is never inverted to white, tinted, masked, or placed where its navy cannot be seen.public/logos/active/dichrome-mark.svg
FNPH house and open-door mark, monochrome
MonochromeOne colorThe only variation reproduced in a single color: navy on a light ground, white on navy or a photograph, black in one-color print.public/logos/active/monochrome-mark.svg

How 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.

Workhorse FNPH signature, dichrome
DichromeMark with FNPH set to the baseline. The navigation lockup.public/logos/active/dichrome-workhorse-mark.svg
Workhorse FNPH signature, monochrome
MonochromeMark with FNPH set to the baseline. The navigation lockup.public/logos/active/monochrome-workhorse-mark.svg

Initials · large

Loud

Use when the identity is the main announcement: covers, banners, event backdrops, and signage with ample width.

Loud FNPH signature, dichrome
DichromeMark with FNPH at full height. Large settings: covers, banners, signage.public/logos/active/dichrome-loud-mark.svg
Loud FNPH signature, monochrome
MonochromeMark with FNPH at full height. Large settings: covers, banners, signage.public/logos/active/monochrome-loud-mark.svg

Full name · constrained

Compact

Use when the full organization name must travel with the mark inside a narrow column, document, or social composition.

Compact FNPH signature, dichrome
DichromeMark with the full name stacked on three lines. Narrow columns, documents, social.public/logos/active/dichrome-compact-mark.svg
Compact FNPH signature, monochrome
MonochromeMark with the full name stacked on three lines. Narrow columns, documents, social.public/logos/active/monochrome-compact-mark.svg

Full name · official

Formal

Use for wide formal applications such as letterhead and approved print pieces, where the full name and service line remain legible.

Formal FNPH signature, dichrome
DichromeMark, full name, and the tagline on one line. The footer lockup, letterhead, and formal print at width.public/logos/active/dichrome-formal-mark.svg
Formal FNPH signature, monochrome
MonochromeMark, full name, and the tagline on one line. The footer lockup, letterhead, and formal print at width.public/logos/active/monochrome-formal-mark.svg

Slots

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

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
Individual portal FNPH illustration study
Individual portalA spot illustration with one figure. It is not a signature.public/logos/collections/decorated/door-portal.svg
Family portal FNPH illustration study
Family portalA spot illustration with a family group. It is not a signature.public/logos/collections/decorated/door-portal-family.svg
Color-layer house study FNPH illustration study
Color-layer house studyA green color-layer study retained as illustration, not as an audience mark.public/logos/collections/resident-green-door-variants/house-full-resident-v1.svg
Color-layer doorway study FNPH illustration study
Color-layer doorway studyA green color-layer study retained as illustration, not as an audience mark.public/logos/collections/resident-green-door-variants/resident-door-v1.png

Inventory

An honest inventory calls a part ready only when people can use it here.An honest inventory requires a real implementation path.

This page separates working parts from planned work, so FNPH can review what is real today.

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 foundationsExistingDESIGN.mdCurrent Exhibit B token and guidance authority
Runtime token mapExistingsrc/styles/theme-overrides.cssCanonical colors, fonts, spacing, radii, and Rift semantic bridge
Self-hosted fontsExistingpublic/fonts/libre-franklin-600.woff2 · public/fonts/libre-franklin-700.woff2 · public/fonts/outfit-400.woff2 · public/fonts/outfit-600.woff2Approved font families and weights
Candidate review chromeExistingsrc/components/ImpeccableProofBar.astroShared route status and persistent comparison links
Candidate proof familyExistingsrc/pages/brand/index.astro · src/pages/brand/ds.astro · src/pages/brand/application/index.astroBrand, system, and application review surfaces
Candidate proof stylingExistingsrc/styles/brand-impeccable-proof.cssReview-document and static composition styling
Application composition stylingExistingsrc/styles/brand-impeccable.cssPage-specific public-site application proof
Shared actions and buttonsExistingsrc/components/ui/FnphButton.astro · FnphLink.astro · FnphActionGroup.astroAstro-native action modules with distinct button and navigation semantics
Shared notices and handoffsExistingsrc/components/ui/FnphNotice.astro · FnphExternalHandoff.astroNamed feedback and consequence-before-navigation disclosure
Shared fields and formsExistingsrc/components/ui/FnphInput.astro · FnphTextarea.astro · FnphSelect.astro · FnphRadioGroup.astro · FnphCheckbox.astro · FnphErrorSummary.astroNative field modules plus a non-submitting callback validation specimen
Threshold openingExistingsrc/components/brand0/Brand0Threshold.astroFull-bleed opening: start-aligned heading, one owned next step, labeled photo slot, favicon stripe edge (D-028)
Favicon stripeExistingsrc/components/brand0/Brand0Stripe.astroEight favicon bands in favicon order — sky, sun, royal, grass, oak — as an 8 / 16 / 32px rule
Donate as a live actionLockedsrc/components/brand0/Brand0DonateAction.astroSignature marigold sunburst action with navy focus, current-page, reduced-motion, and collapsed-nav states (D-032)
Shared site navigation and containersPlannedNo production module observedCurrent navigation is page composition, not a reusable primitive
Staff product UI kitN/APRODUCT.md · Brega BAKED boundaryThe Stage 2 deliverable is the adaptive public site, not the separate authoring product
Dark themeN/ADESIGN.mdNo dark-theme contract is defined in current canon

Examples

Keep the next step visible beside the question and responsible owner.The static library keeps need, ownership, and consequence in one line of sight.

These examples show how FNPH keeps each choice clear across languages, destinations, and screen sizes.

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

Pathway

Keep the question beside its owned next step.A pathway ledger keeps need and ownership together.

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.

Language

Put language first in a short first contact.A callback-first rail starts with language.

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.

Destination

Name the destination before people leave FNPH.External-handoff disclosure names destination and consequence.

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.

Evidence

Publish evidence only when FNPH can source it.A governed evidence ledger requires a source.

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.

Audiences

Use one shared structure for three audiences.One register field carries three audience states.

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, structure, and status language keep these audiences inside one FNPH brand.Shared type, ruled structure, and state language make the register shift one system rather than three brands.

Responsive

Responsive behavior preserves reading order.

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.

Contrast

Known pairings keep contrast readable.

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

A direction is ready only after review and working evidence.Promotion follows evidence, not presentation.

This guide supports review. It does not replace FNPH’s current standard.

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.