About this site
Lanternhouse is a fictional organization. This site is a working case study by LS Jordan Design in what a modern nonprofit website can be: fast, private, accessible, and built around the person who needs help most.
The brief
Design and build a complete, believable website for a service organization, robust enough to run a real nonprofit: a help pathway, programs, volunteering, donations, events, stories, news, transparency, careers, and press. Invent the organization from scratch, including its mission, leaders, history, and numbers.
Design first for the hardest visitor
The most important person who visits this site is 19, on a cracked phone with a weak signal, at night, with nowhere to sleep. Every page puts a way to talk to a person within one tap: a utility bar with the phone number, a persistent Text us button on mobile, and a help strip at the end of program pages. The home page asks one question, Where do you want to start?, and gets anyone to the right place in three clicks or fewer.
Identity
The organization is built on one image: a porch light left on. The visual system follows: deep dusk blues, a single lamplight yellow, and an arched window frame that holds every key photograph. On load, the window on the home page warms up as if someone just switched on the light. That is the only unprompted motion on the site. Photographs use a slow Ken Burns drift, and clickable items fade in as they arrive. All of it stops when a device requests reduced motion.
Headlines are set in Bricolage Grotesque for warmth and a little youthful irregularity. Body text uses Atkinson Hyperlegible Next, a typeface designed by the Braille Institute for legibility, because many of the young people this kind of organization serves have had interrupted schooling or uncorrected vision.
Architecture
The site is generated from a single content file by a small Python build script into plain, static HTML: more than 50 pages, no front-end framework, no build-time dependencies in production. JavaScript is one file of about 5 KB compressed that enhances pages that already work without it. Hosted on Vercel's edge network.
Performance
- Zero third-party requests. Fonts are self-hosted and preloaded.
- Responsive images with srcset in WebP, explicit dimensions to prevent layout shift, and lazy loading below the fold
- Fingerprinted CSS and JavaScript cached for a year at the edge
- Under 120 KB of HTML, CSS, JavaScript, and fonts on first load of the home page, before photography
Accessibility
- Built to WCAG 2.2 AA: contrast, focus visibility, target sizes, and labels
- Skip link, landmarks, breadcrumbs, and a logical heading outline on every page
- Mega menus that are real disclosure buttons, operable by keyboard, with Escape to close
- Native dialog elements for search and the mobile menu, so focus is trapped and restored correctly
- Forms with visible labels, inline validation messages, and status messages announced to screen readers
Privacy and security
- No cookies, no trackers, no analytics pixels, no embedded social widgets
- A strict Content Security Policy that allows only this site's own scripts, styles, fonts, and images
- HSTS, frame protection, a locked-down permissions policy, and a strict referrer policy
- Forms validate in the browser and, in this concept, never transmit data
Findability
- Structured data on every page: NGO, WebSite with search, Service, Event, NewsArticle, Article, FAQPage, Person, and BreadcrumbList
- Canonical URLs, Open Graph images, an XML sitemap, and English and Spanish hreflang alternates
- Site search across every page, opened with the slash key
- Because this is a concept, it asks search engines not to index it, so no one looking for real help finds a fictional organization
Features worth noting
- A three-question eligibility check that never asks for a name
- A donation form with live impact language, monthly-first framing, tribute gifts, and fee coverage
- Event pages with calendar files generated in the browser and Google Calendar links
- Program pages that each answer who it's for, what you get, and how to start
- A transparency page with spending, revenue sources, and audit documents
- A Spanish-language landing page for families and young adults who prefer Spanish
Credits
Concept, content, design, and development by LS Jordan Design, Lindsey Sim Jordan Jr. Photography generated for this concept from written art direction. Typefaces: Bricolage Grotesque by Mathieu Triay, and Atkinson Hyperlegible Next by the Braille Institute, both under the SIL Open Font License.