v0 design system

The current-site benchmark: source-led reading pages inside the shared FNPH navigation. Its design is intentionally quiet so the original content can be compared.

DRAFT — NOT APPROVED · Documented from the current /v0/ implementation.

Open v0 site

A source-first reading page

An introduction identifies the benchmark. A sand-wash source panel keeps headings, original paragraphs, lists, and source URLs together. This is the implemented v0 presentation; it is not a reconstruction of the old website’s visual identity.

Verbatim current-site source

Current-site harvest / benchmark. Live fnph.org language kept as source material. It is not approved Stage 2 language.

Each section retains its source URL, followed by paragraphs, lists, people, or images when present.

View the current homepage harvest

Inspect the actual homepage source specimen

DRAFT — NOT APPROVED

Verbatim current-site source

Current-site harvest / benchmark. Live fnph.org language kept as source material. It is not approved Stage 2 language.

Home

www.fnph.org/

Florida Non-Profit Housing, Inc.'s mission is to ensure the availability of decent, safe, and affordable housing for low to moderate income families and farmworkers in rural areas.

We do this by providing technical assistance, education, training, and related affordable housing development and preservations services.

Florida Non-Profit Housing, Inc.'s vision is to multiply our efforts, through more housing providers assisting individuals and families to acquire a part of the "American Dream" of having their own home.

FNPH's service offerings are designed to address the performance of the organizations we serve. We understand the demands and limitations of income based housing providers. We strive to enhance the effectiveness of our clients through training and technical assistance.

Equipping housing organizations to effectively provide safe and affordable homes.

Present objective evaluations of existing operating systems and training needs.
Provide training and management assistance to potential, new and existing grantees.
Administer training for boards of directors.
Assist agencies in packaging applications to various funding sources.
Review and analyze proposal feasibility.
Assist grantees in creating housing development plans, construction schedules, financial management systems and sound ethical business practices.
Coordinate planning, development and delivery of workshops and conferences.
Develop publications and statistical reports.

Current fnph.org image. Photography rights and direction are in review.

Color in use

v0 retains the original Brand0 chrome and shared palette. Its source panels use sand wash, ink body text, and navy headings. Swatches read the shared live tokens.

Navy

#0E2E78

Headings, navigation, primary action

Royal

#1A4FC9

Shared blue structure and focus

Sky tint

#DCE6FB

Institutional support surfaces

Sky wash

#EFF4FD

Quiet blue surfaces

Live oak

#1E5C3F

Resident actions and next-step band

Field green

#2F9E63

Large resident emphasis

Green tint

#E4F2EA

Resident reassurance

Meadow mist

#F3F8F5

Light resident surface

Sand

#EADFC8

Azalea and news panels

Cream

#FBF8F0

Public reading ground

Sand wash

#FDFBF6

Content section ground

Marigold

#F2A33C

Donate and homepage word emphasis

Ink #1B2333 is the body color; slate #5A6275 supports secondary copy. Field green is reserved for large emphasis, never normal-size white text. Marigold is used for Donate and the homepage “home.” emphasis; it is not a warning state.

Two voices, one hierarchy

Libre Franklin 600/700 carries headings. Outfit 400/600 carries body copy, navigation, labels, and actions. Both are self-hosted.

Florida Non-Profit Housing

Libre Franklin · 700 · page heading

Clear guidance, at a human scale.

Libre Franklin · 600 · source section headings: 20px

One conversation is where it starts. Let’s help you figure out what’s possible.

Outfit · 400 · readable paragraph copy

Source paragraphs and lists cap at 42rem. Source URLs use 14px; review status uses 12px. Preserve source structure instead of restyling it as promotional content.

Source containers and shared actions

The benchmark adds source attribution and an explicit empty state to the common public-site primitives.

Donate states

Default, focus, and current-page treatment; every specimen opens the owned donation page.

Donate Donate Donate

Missing source

Show the absence plainly instead of inventing replacement content.

No current-site harvest for this page

Source provenance

Sections carry their original URL and source status. Images retain their review captions. The original language stays separate from Stage 2 copy.

Layout & interaction rules

The shared system sets the rhythm; source content determines page length.

Frame: 78rem desktop frame, expanding to 86rem at 90rem viewports and 94rem at 110rem. Shared gutters align navigation and content.
Spacing: 4, 8, 16, 24, 32, 48, and 72px. Source panels use 24px padding and 32px between groups.
Shape: 4px ordinary controls; 8px source containers. Pill geometry remains on compact signature actions.
Responsive: Source text reflows within its reading measure. The shared navigation collapses on narrow screens, and the farmworker phone line remains available on its pathway.
Keyboard & motion: Visible keyboard focus and descriptive link labels. Donate’s 36-second sunburst rotation, arrow movement, and compression stop under reduced-motion preferences.

See the current v0 application guide

Implementation sources: V0Harvest.astro · Brand0Copy.astro · brand0.css. Shared palette and fonts: theme-overrides.css. Read the brand foundation.